added treecheckInput()

NAMESPACE

@@ -4,10 +4,13 @@ export(collapseTreeview)
 export(expandTreeview)
 export(make_tree)
 export(searchTreeview)
+export(treecheckInput)
 export(treeviewInput)
+importFrom(htmltools,htmlDependencies)
 importFrom(htmltools,htmlDependency)
 importFrom(htmltools,tags)
 importFrom(htmltools,validateCssUnit)
 importFrom(jsonlite,toJSON)
 importFrom(shiny,addResourcePath)
+importFrom(shiny,icon)
 importFrom(shiny,registerInputHandler)

R/input-treecheck.R

@@ -0,0 +1,62 @@
+
+#' Tree check Input
+#'
+#' @inheritParams treeviewInput
+#' @param hierarchical When a level is selected, also select all levels below it?
+#'
+#' @return Server-side: A \code{character} value or a \code{list} depending on the \code{return_value} argument.
+#' @export
+#'
+#' @importFrom htmltools tags validateCssUnit htmlDependencies
+#' @importFrom shiny icon
+#' @importFrom jsonlite toJSON
+#'
+#' @example examples/treecheck.R
+treecheckInput <- function(inputId,
+                           label = NULL,
+                           choices,
+                           selected = NULL,
+                           hierarchical = TRUE,
+                           levels = 1,
+                           borders = TRUE,
+                           return_value = c("name", "id", "all"),
+                           width = NULL) {
+  return_value <- match.arg(return_value)
+  options <- dropNulls(list(
+    config = c(
+      list(
+        data = choices,
+        levels = levels,
+        showBorder = borders,
+        showCheckbox = TRUE,
+        highlightSelected = FALSE,
+        propagateCheckEvent = hierarchical,
+        hierarchicalCheck = hierarchical,
+        uncheckedIcon = "fa fa-square-o",
+        partiallyCheckedIcon = "fa fa-minus-square-o",
+        checkedIcon = "fa fa-check-square-o",
+        expandIcon = "fa fa-chevron-right",
+        collapseIcon = "fa fa-chevron-down"
+      )
+    ),
+    selected = list1(selected)
+  ))
+
+  tags$div(
+    class = "form-group shiny-input-container",
+    style = if(!is.null(width)) paste("width:", validateCssUnit(width)),
+    if (!is.null(label)) {
+      tags$label(class = "control-label", `for` = inputId, label)
+    },
+    tags$div(
+      id = inputId, class = "treecheck-input",
+      `data-return` = return_value,
+      tags$script(
+        type = "application/json", `data-for` = inputId,
+        jsonlite::toJSON(options, auto_unbox = TRUE, json_verbatim = TRUE)
+      )
+    ),
+    html_dependency_treeview(),
+    htmlDependencies(icon("home"))
+  )
+}

R/input-treeview.R

@@ -17,7 +17,7 @@
 #'  \code{"all"} to returned all the tree under the element selected.
 #' @param width The width of the input, e.g. \code{'400px'}, or \code{'100\%'}.
 #'
-#' @return A \code{character} value or a \code{list} depending on the \code{return_value} argument.
+#' @return Server-side: A \code{character} value or a \code{list} depending on the \code{return_value} argument.
 #' @export
 #'
 #' @importFrom htmltools tags validateCssUnit

README.md

@@ -18,7 +18,11 @@ remotes::install_github("dreamRs/shinytreeview")
 
 ## Example
 
-![](man/figures/example-cities.png)
+`treeviewInput()` allow to select a value (or several) in a hierarchical structure :
+
+![](man/figures/example-treeview.png)
+
+Code for this example:
 
 ```r
 library(shiny)
@@ -31,9 +35,49 @@ ui <- fluidPage(
   treeviewInput(
     inputId = "tree",
     label = "Choose a city:",
-    choices = make_tree(cities, c("continent", "country", "city")),
+    choices = make_tree(
+      cities, c("continent", "country", "city")
+    ),
     multiple = FALSE,
-    prevent_unselect = TRUE
+    prevent_unselect = TRUE,
+    width = "100%"
+  ),
+  verbatimTextOutput(outputId = "result")
+)
+
+server <- function(input, output, session) {
+  output$result <- renderPrint({
+    input$tree
+  })
+}
+
+if (interactive())
+  shinyApp(ui, server)
+```
+
+
+
+`treecheckInput()` allow to check a value (or several) in a hierarchical structure :
+
+![](man/figures/example-treecheck.png)
+
+Code for this example:
+
+```r
+library(shiny)
+library(shinytreeview)
+
+data("cities")
+
+ui <- fluidPage(
+  tags$h3("treeviewInput cities example"),
+  treecheckInput(
+    inputId = "tree",
+    label = "Choose a city:",
+    choices = make_tree(
+      cities, c("continent", "country", "city")
+    ),
+    width = "100%"
   ),
   verbatimTextOutput(outputId = "result")
 )
@@ -44,6 +88,7 @@ server <- function(input, output, session) {
   })
 }
 
-shinyApp(ui, server)
+if (interactive())
+  shinyApp(ui, server)
 ```
 

examples/treecheck.R

@@ -0,0 +1,26 @@
+
+library(shiny)
+library(shinytreeview)
+
+data("cities")
+
+ui <- fluidPage(
+  tags$h3("treeviewInput cities example"),
+  treecheckInput(
+    inputId = "tree",
+    label = "Choose a city:",
+    choices = make_tree(
+      cities, c("continent", "country", "city")
+    )
+  ),
+  verbatimTextOutput(outputId = "result")
+)
+
+server <- function(input, output, session) {
+  output$result <- renderPrint({
+    input$tree
+  })
+}
+
+if (interactive())
+  shinyApp(ui, server)

inst/assets/bootstrap-treeview/treeview-bindings.js

@@ -113,3 +113,115 @@ Shiny.inputBindings.register(
   "shinytreeview.treeviewInput"
 );
 
+
+
+var treecheckInputBinding = new Shiny.InputBinding();
+$.extend(treecheckInputBinding, {
+  find: function(scope) {
+    return scope.querySelectorAll(".treecheck-input");
+  },
+  getId: function(el) {
+    return el.id;
+  },
+  getType: function(el) {
+    if ($(el).attr("data-return") == "name") {
+      return "treeview.name";
+    } else if ($(el).attr("data-return") == "id") {
+      return "treeview.id";
+    } else {
+      return "treeview.all";
+    }
+  },
+  getValue: function(el) {
+    var tree = $(el).data("treeview");
+    try {
+      return tree.getChecked();
+    } catch (error) {
+      return null;
+    }
+  },
+  setValue: function(el, value) {},
+  subscribe: function(el, callback) {
+    $(el).on("nodeChecked", function(event, data) {
+      callback();
+    });
+    $(el).on("nodeUnchecked", function(event, data) {
+      callback();
+    });
+  },
+  unsubscribe: function(el) {
+    $(el).off(".treecheckInputBinding");
+  },
+  receiveMessage: function(el, data) {
+    var tree = $(el).data("treeview");
+    if (data.hasOwnProperty("search")) {
+      if (data.search.collapse) {
+        tree.collapseAll();
+      }
+      if (data.search.pattern.length > 1) {
+        data.search.pattern.map(function(pattern) {
+          tree.search(pattern, data.search.options);
+        });
+      } else {
+        tree.search(data.search.pattern, data.search.options);
+      }
+    }
+    if (data.hasOwnProperty("expand")) {
+      if (data.expand.hasOwnProperty("nodeId")) {
+        var expandedNode = tree.findNodes(
+          "^" + data.expand.nodeId + "$",
+          "nodeId"
+        );
+        tree.expandNode(expandedNode, data.expand.options);
+      } else {
+        tree.expandAll(data.expand.options);
+      }
+    }
+    if (data.hasOwnProperty("collapse")) {
+      if (data.collapse.hasOwnProperty("nodeId")) {
+        var collapsedNode = tree.findNodes(
+          "^" + data.collapse.nodeId + "$",
+          "nodeId"
+        );
+        tree.collapseNode(collapsedNode);
+      } else {
+        tree.collapseAll();
+      }
+    }
+  },
+  getState: function(el) {},
+  initialize: function(el) {
+    var element = document.getElementById(el.id);
+
+    var options = element.querySelector('script[data-for="' + el.id + '"]');
+    options = JSON.parse(options.innerHTML);
+
+    $(el).treeview(options.config);
+    var tree = $(el).treeview(true);
+    $(el).on("rendered ", function(event, data) {
+      if (options.hasOwnProperty("selected")) {
+        var selected = tree.search(options.selected, {
+          ignoreCase: false,
+          exactMatch: true,
+          revealResults: false
+        });
+        tree.checkNode(selected);
+        tree.search("", {
+          ignoreCase: false,
+          exactMatch: true,
+          revealResults: false
+        });
+      }
+      var nodes = tree.getNodes().map(function(o) {
+        return { text: o.text, nodeId: o.nodeId, parentId: o.parentId };
+      });
+      Shiny.onInputChange(el.id + "_nodes:treeview.nodes", nodes);
+    });
+  }
+});
+Shiny.inputBindings.register(
+  treecheckInputBinding,
+  "shinytreeview.treecheckInput"
+);
+
+