Barbara/bookmark

.Rbuildignore

@@ -1,6 +1,7 @@
 ^.*\.Rproj$
 ^\.Rproj\.user$
 ^tools$
+^srcjs$
 ^tests-manual$
 ^\.travis\.yml$
 ^appveyor\.yml$

DESCRIPTION

@@ -18,4 +18,4 @@ Imports:
     shiny (>= 0.12.1),
     htmltools (>= 0.2.6)
 BugReports: https://github.com/rstudio/shinydashboard
-RoxygenNote: 5.0.1
+RoxygenNote: 6.0.1

NEWS.md

@@ -1,6 +1,10 @@
 shinydashboard 0.5.3.9000
 =========================
 
+* Fixed [#71](https://github.com/rstudio/shinydashboard/issues/71) and [#87](https://github.com/rstudio/shinydashboard/issues/87): detect and enforce selected tab for dynamic sidebars. ([#189](https://github.com/rstudio/shinydashboard/pull/189))
+
+* Divided JS code into chunks.
+
 * Fixed [#127](https://github.com/rstudio/shinydashboard/issues/127) and [#177](https://github.com/rstudio/shinydashboard/issues/177): previously, if `dashboardSidebar()` was called with an explicit `width` parameter, mobile rendering would look weird (the sidebar wouldn't completely disappear when it was collapsed, and content in the dashboard body would be hidden under the still-visible sidebar). ([#204](https://github.com/rstudio/shinydashboard/pull/204))
 
 * Fixed [#79](https://github.com/rstudio/shinydashboard/issues/79): Re-enable slight css transition when the sidebar is expanded/collapsed. ([#205](https://github.com/rstudio/shinydashboard/pull/205)).

R/dashboardPage.R

@@ -57,9 +57,9 @@ dashboardPage <- function(header, sidebar, body, title = NULL,
     body
   )
 
-  # if the sidebar has the class "start-collapsed", it means that the user set
-  # the `collapsed` argument of `dashboardSidebar` to TRUE
-  collapsed <- "start-collapsed" %in% strsplit(sidebar$attribs$class, " ")[[1]]
+  # if the sidebar has the attribute `data-collapsed = "true"`, it means that
+  # the user set the `collapsed` argument of `dashboardSidebar` to TRUE
+  collapsed <- findAttribute(sidebar, "data-collapsed", "true")
 
   addDeps(
     tags$body(

R/dashboardSidebar.R

@@ -117,12 +117,19 @@ dashboardSidebar <- function(..., disable = FALSE, width = NULL, collapsed = FAL
     '))))
   }
 
+  # If we're restoring a bookmarked app, this holds the value of whether or not the
+  # sidebar was collapsed. If this is not the case, the default is whatever the user
+  # specified in the `collapsed` argument.
+  dataValue <- shiny::restoreInput(id = "sidebarCollapsed",
+    default = if (collapsed) "true" else "false")
+
   # The expanded/collapsed state of the sidebar is actually set by adding a
   # class to the body (not to the sidebar). However, it makes sense for the
   # `collapsed` argument to belong in this function. So this information is
-  # just passed through (also as a class) to the `dashboardPage()` function
-  tags$aside(class = paste("main-sidebar", if (collapsed) "start-collapsed"),
-    custom_css,
+  # just passed through (as the `data-collapsed` attribute) to the
+  # `dashboardPage()` function
+  tags$aside(
+    class = "main-sidebar", `data-collapsed` = dataValue, custom_css,
     tags$section(
       class = "sidebar",
       `data-disable` = if (disable) 1 else NULL,
@@ -236,6 +243,13 @@ sidebarSearchForm <- function(textId, buttonId, label = "Search...",
 #' @param selected If \code{TRUE}, this \code{menuItem} or \code{menuSubItem}
 #'   will start selected. If no item have \code{selected=TRUE}, then the first
 #'   \code{menuItem} will start selected.
+#' @param expandedName A unique name given to each \code{menuItem} that serves
+#'   to indicate which one (if any) is currently expanded. (This is only applicable
+#'   to \code{menuItem}s that have children and it is mostly only useful for
+#'   bookmarking state.)
+#' @param startExpanded Should this \code{menuItem} be expanded on app startup?
+#'   (This is only applicable to \code{menuItem}s that have children, and only
+#'   one of these can be expanded at any given time).
 #' @param ... For menu items, this may consist of \code{\link{menuSubItem}}s.
 #' @param .list An optional list containing items to put in the menu Same as the
 #'   \code{...} arguments, but in list format. This can be useful when working
@@ -263,7 +277,9 @@ sidebarMenu <- function(..., id = NULL, .list = NULL) {
       # Given a menuItem and a logical value for `selected`, set the
       # data-start-selected attribute to the appropriate value (1 or 0).
       selectItem <- function(item, selected) {
-        if (length(item$children) == 0) {
+
+        # in the cases that the children of menuItems are NOT menuSubItems
+        if (is.atomic(item) || length(item$children) == 0) {
           return(item)
         }
 
@@ -274,6 +290,7 @@ sidebarMenu <- function(..., id = NULL, .list = NULL) {
         # data-start-selected="1". The []<- assignment is to preserve
         # attributes.
         item$children[] <- lapply(item$children, function(child) {
+
           # Find the appropriate <a> child
           if (tagMatches(child, name = "a", `data-toggle` = "tab")) {
             child$attribs[["data-start-selected"]] <- value
@@ -328,18 +345,25 @@ sidebarMenu <- function(..., id = NULL, .list = NULL) {
         item
       })
     }
+    # This is a 0 height div, whose only purpose is to hold the tabName of the currently
+    # selected menuItem in its `data-value` attribute. This is the DOM element that is
+    # bound to tabItemInputBinding in the JS side.
+    items[[length(items) + 1]] <- div(id = id,
+      class = "sidebarMenuSelectedTabItem", `data-value` = selectedTabName %OR% "null")
   }
 
   # Use do.call so that we don't add an extra list layer to the children of the
   # ul tag. This makes it a little easier to traverse the tree to search for
   # selected items to restore.
-  do.call(tags$ul, c(id = id, class = "sidebar-menu", items))
+  do.call(tags$ul, c(class = "sidebar-menu", items))
 }
 
 #' @rdname sidebarMenu
 #' @export
 menuItem <- function(text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "green",
-                     tabName = NULL, href = NULL, newtab = TRUE, selected = NULL) {
+                     tabName = NULL, href = NULL, newtab = TRUE, selected = NULL,
+                     expandedName = as.character(gsub("[[:space:]]", "", text)),
+                     startExpanded = FALSE) {
   subItems <- list(...)
 
   if (!is.null(icon)) tagAssert(icon, type = "i")
@@ -394,6 +418,18 @@ menuItem <- function(text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "gr
     )
   }
 
+  # If we're restoring a bookmarked app, this holds the value of what menuItem (if any)
+  # was expanded (this has be to stored separately from the selected menuItem, since
+  # these actually independent in AdminLTE). If no menuItem was expanded, `dataExpanded`
+  # is NULL. However, we want to this input to get passed on (and not dropped), so we
+  # do `%OR% ""` to assure this.
+  default <- if (startExpanded) expandedName else ""
+  dataExpanded <- shiny::restoreInput(id = "sidebarItemExpanded", default) %OR% ""
+
+  # If `dataExpanded` is not the empty string, we need to check that it is eqaul to the
+  # this menuItem's `expandedName``
+  isExpanded <- nzchar(dataExpanded) && (dataExpanded == expandedName)
+
   tags$li(class = "treeview",
     a(href = href,
       icon,
@@ -403,7 +439,11 @@ menuItem <- function(text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "gr
     # Use do.call so that we don't add an extra list layer to the children of the
     # ul tag. This makes it a little easier to traverse the tree to search for
     # selected items to restore.
-    do.call(tags$ul, c(class = "treeview-menu", subItems))
+    do.call(tags$ul, c(
+      class = paste0("treeview-menu", if (isExpanded) " menu-open" else ""),
+      style = paste0("display: ",     if (isExpanded) "block;" else "none;"),
+      `data-expanded` = expandedName,
+      subItems))
   )
 }
 

R/deps.R

@@ -13,9 +13,11 @@ appendDependencies <- function(x, value) {
 addDeps <- function(x) {
   if (getOption("shiny.minified", TRUE)) {
     adminLTE_js <- "app.min.js"
+    shinydashboard_js <- "shinydashboard.min.js"
     adminLTE_css <- c("AdminLTE.min.css", "_all-skins.min.css")
   } else {
     adminLTE_js <- "app.js"
+    shinydashboard_js <- "shinydashboard.js"
     adminLTE_css <- c("AdminLTE.css", "_all-skins.css")
   }
 
@@ -28,7 +30,7 @@ addDeps <- function(x) {
     htmlDependency("shinydashboard",
       as.character(utils::packageVersion("shinydashboard")),
       c(file = system.file(package = "shinydashboard")),
-      script = "shinydashboard.js",
+      script = shinydashboard_js,
       stylesheet = "shinydashboard.css"
     )
   )

R/utils.R

@@ -198,3 +198,24 @@ tagMatches <- function(item, ..., id = NULL, name = NULL, class = NULL) {
 
   TRUE
 }
+
+# This function takes a DOM element/tag object and reccurs within it until
+# it finds a child which has an attribute called `attr` and with value `val`
+# (and returns TRUE). If it finds an element with an attribute called `attr`
+# whose value is NOT `val`, it returns FALSE. If it exhausts all children
+# and it doesn't find an element with an attribute called `attr`, it also
+# returns FALSE
+findAttribute <- function(x, attr, val) {
+  if (is.atomic(x)) return(FALSE) # exhausted this branch of the tree
+
+  if (!is.null(x$attribs[[attr]])) { # found attribute called `attr`
+    if (identical(x$attribs[[attr]], val)) return(TRUE)
+    else return(FALSE)
+  }
+
+  if (length(x$children) > 0) { # recursion
+    return(any(unlist(lapply(x$children, findAttribute, attr, val))))
+  }
+
+  return(FALSE) # found no attribute called `attr`
+}