R/w2ui.R

In skranz/shinyEventsUI: Some shiny widgets that only work with shinyEvents

examples.xw2ui = function() {
  restore.point.options(display.restore.point = TRUE)
  library(shinyEventsUI)
  app = eventsApp()
  library(dplyr)
  tabs = w2tabs(id="myTabs",tabs=data_frame(id=paste0("tab",1:4),caption=paste0("tab",1:4), closable=TRUE,div_id = paste0("tab",1:4,"div")))


  app$ui = bootstrapPage(
    w2header(),
    div(
      tabs,
      div(id = "mainDiv",
        div(id="tab1div", "tab1"),
        div(id="tab2div", "tab2"),
        div(id="tab3div", "tab3"),
        div(id="tab4div", "tab4")
      ),
      actionButton("btn","Add")
    )
  )
  clickHandler("myTabs", function(...) {
    args = list(...)
    restore.point("dbczudgvuzfgvzf")
    resizeLayout("myPanes")
    cat("clicked! ",sample(1000,1))
  })

  eventHandler("close", id="myTabs", function(tabId,divId,...) {
    args = list(...)
    restore.point("tabClosedEvent")
    w2tabs.destroy.tab.content(divId)
    cat("closed!")
  })

  buttonHandler("btn", function(...) {
    w2tabs.select("myTabs","tab2")
    w2tabs.add("myTabs",tabs=list(list(id="newTab",caption="New Tab", div_id="tab4div", closable=TRUE)))
  })

  viewApp(app)
}



examples.w2ui = function() {
  restore.point.options(display.restore.point = TRUE)
  library(shinyEventsUI)
  app = eventsApp()

  json.opts ="
  defaults: {
    resizable: true,
    closable: false,
    slideable: true,
    spacing_open: 5
  },
  north: {
    size: 'auto',
    resizable: false,
    closable: false,
    slideable: false,
    spacing_open: 0
  },
  east: {
    resizable: true,
    spacing_open: 0,
    spacing_closed: 0,
    size: 0
  }
  "

  id = "mySidebar"
  img = NULL
  nodes = list(
    list(id = "level1", text = "Level 1", img="icon-folder", expanded=TRUE,
      nodes=data.frame(id = paste0("level1_",1:5), text = paste0("1-",1:5), img="icon-page", expanded=TRUE)
    ),
    list(id = "level2", text = "Level 2",img="icon-folder")
  )

  items = "[
  { type: 'check',  id: 'item1', caption: 'Check', img: 'icon-add', checked: true },
  { type: 'break' },
  { type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder',
      items: [
          { text: 'Item 1', img: 'icon-page' },
          { text: 'Item 2', img: 'icon-page' },
          { text: 'Item 3', img: 'icon-page' }
      ]
  },
  { type: 'break' },
  { type: 'radio',  id: 'item3',  group: '1', caption: 'Radio 1', img: 'icon-page' },
  { type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', img: 'icon-page' },
  { type: 'spacer' },
  { type: 'button',  id: 'item5',  caption: 'Item 5', img: 'icon-save' }
  ]
  "

  items = list(
    list(type="menu",id = "file_menu", caption = "File",
      items=data.frame(
        text = paste0("Item ",1:3), img="icon-page"
      )
    ),
    list(type="break"),
    list(type="check",id ="menu_check",caption="Checkbox", checked=TRUE)
  )

  sidebar = w2sidebar(id="mySidebar", nodes=nodes)
  toolbar = w2toolbar(id="myToolbar", items=items,
    js.on.render="myPanesLayoutVar.resizeAll();")

  library(dplyr)
  tabs = w2tabs(id="myTabs",tabs=data_frame(id=paste0("tab",1:4),caption=paste0("tab",1:4), closable=TRUE, div_id = paste0("tab",1:4,"div")))


  app$ui = jqueryLayoutPage(id="myPanes", json.opts=json.opts,
    w2header(),
    north = div(toolbar,thinHR()),
    west = sidebar,
    center = div(
      tabs,
      div(id = "mainDiv",
        div(id="tab1div", "tab1"),
        div(id="tab2div", "tab2"),
        div(id="tab3div", "tab3"),
        div(id="tab4div", "tab4")
      ),
      p("Hi!")
    )
  )
  clickHandler("myTabs", function(...) {
    args = list(...)
    restore.point("dbczudgvuzfgvzf")
    resizeLayout("myPanes")
    cat("clicked!")
  })


  viewApp(app)
}

set.active.given.tabs = function(active, tabs) {
  if (NROW(tabs)==0) return(NULL)
  if (!is.numeric(active)) return(active)
  if (is.data.frame(tabs)) return(tabs$id[[1]])
  tabs[[1]]$id
}

w2tabs.select = function(id, tabId) {
  callJS(paste0('w2ui["',id,'"].select'),tabId)
  callJS(paste0('w2ui["',id,'"].show_hide.show'),tabId)
}

#' Add a w2ui tab
#' @export
w2tabs.add = function(id, tabs=list(tab), tab, select=TRUE) {
  callJS("xw2ui.tabs_add",id=id,tabs=tabs, select=select)
}


#' Close a w2ui tab
#' @export
w2tabs.close = function(id, tabId, destroy.content=FALSE) {
  callJS(paste0("w2ui.",id,".remove"),tabId)
}

w2tabs.destroy.tab.content = function(divId) {
  callJS(paste0("xw2ui.destroy_tab_content"),divId)
}


#' Tabs. See w2ui docs
#' @param id the id of the whole tabset
#' @param active the index of the initially shown tab
#' @param tabs a list of tabs each tab is itself a list. Example:
#' tabs=list(list(id="newTab",caption="New Tab", div_id="tab4div", closable=TRUE, keep_closed_content=FALSE)))
#' \itemize{
#' \item id - the id of the tab
#' \item caption - the caption shown on the tab
#' \item div_id - the id of the div that contains the tab content
#' \item closable - if TRUE the tab can be closed by pressing on an "x" icon
#' \item keep_closed_content if FALSE (default) the tab div with div_id will be removed when the tab is closed. If TRUE the div will only be hidden.
#' }
#' @export
w2tabs = function(id, active=1, tabs=NULL, js.on.render = NULL, add.header=TRUE) {
  restore.point("w2tabs")

  if (is.character(tabs)) {
    json = paste0('{"name": "',id,'", "items": ',tabs,"}")
    tabs = fromJSON(tabs)
    active = set.active.given.tabs(active, tabs)
  } else {
    active = set.active.given.tabs(active, tabs)
    li = list(name=id,active=active,tabs=tabs)
    json = toJSON(li,auto_unbox = TRUE,dataframe = "rows")
  }
  js = paste0('
    $(function () {
      xw2ui.xw2tabs(',json,', true);
      ',js.on.render,'
    });
  ')
  tagList(
    if (add.header) w2header() else NULL,
    singleton(tags$head(tags$script(type="text/javascript",src="shinyEventsUI/eventsUITools.js"))),
    div(id=id),
    tags$script(HTML(js))
  )
}


#' @export
thinHR = function() {
  hr(style="padding: 0; margin:0; height=1px; color: #888888")
}

#' Header for w2ui widgets
#' @export
w2header = function(...) {
  restore.point("w2uiHeader")
  tagList(
    singleton(tags$head(tags$link(href="shinyEventsUI/w2ui.min.css", type="text/css", rel="stylesheet"))),
    singleton(tags$head(tags$script(type="text/javascript",src="shinyEventsUI/w2ui.min.js"))),
    singleton(tags$head(tags$script(type="text/javascript",src="shinyEventsUI/xw2ui.js")))

  )
}

#' @export
w2nodes = function(id, text = "", img=c("icon-page","icon-folder")[1], expanded = FALSE, icon=NULL, selected=FALSE, nodes=NULL, as.data.frame = is.null(nodes)) {
  data_frame(id=id, text=text, img=img, expanded=expanded, selected=selected, nodes=nodes)
}

#' @export
clickHandler = function(id, fun,..., eventId="click") {
  eventHandler(eventId=eventId, id=id, fun=fun,...)
}

#' Sidebar. See w2ui docs
#' @export
w2sidebar = function(id, img=NULL,nodes=NULL,..., width="100%", height="100%", js.on.render="", add.header=TRUE) {
  restore.point("w2Sidebar")


  sidebar = list(name=id,img=img,nodes=nodes)
  json = toJSON(sidebar,auto_unbox = FALSE,dataframe = "rows")
  cat(json)
  eventId = "clickEvent"
  js = paste0('
    $(function () {
      $("#',id,'").w2sidebar(',json,');
      w2ui.',id,'.on("click", function(e) {
        var id = e.target;
        //if (id.constructor === Array) {id = id[0];}
        //alert(JSON.stringify(id));
        Shiny.onInputChange("',eventId,'", {eventId: "',eventId,'", id: id, class: "sidebar_node", sidebarId: "',id,'", nonce: Math.random()});
        //console.log(e);
      });
      ',js.on.render,'
    });
   ')
  tagList(
    if (add.header) w2header() else NULL,
    div(id=id, style=to.style(nlist(height, width))),
    tags$script(HTML(js))
  )
  #callJS(paste0('$("#',id,'mySidebar").w2sidebar', sidebar)

}

#' Toolbar or menubar. See w2ui docs
#' @export
w2toolbar = function(id, items=NULL, js.on.render = NULL, add.header=TRUE) {
  restore.point("w2toolbar")


  if (is.character(items)) {
    json = paste0('{"name": "',id,'", "items": ',items,"}")
  } else {
    bar = list(name=id,items=items)
    json = toJSON(bar,auto_unbox = TRUE,dataframe = "rows")
  }
  eventId = "clickEvent"
  js = paste0('
    $(function () {
      $("#',id,'").w2toolbar(',json,');
      w2ui.',id,'.on("click", function(e) {
        var id = e.target;
        //alert(JSON.stringify(id));
        Shiny.onInputChange("',eventId,'", {eventId: "',eventId,'", id: id, class: "toolbar_item", toolbarId: "',id,'", nonce: Math.random()});
      });',
      js.on.render,'
    });
   ')
  tagList(
    if (add.header) w2header() else NULL,
    div(id=id),
    tags$script(HTML(js))
  )
}