improved 'checkWithText' example

inst/examples/checkWithText/global.R

@@ -1,6 +1,18 @@
 library(jsTreeR)
 library(shiny)
 
+# small function to shorten the Shiny values
+Text <- function(value) {
+  lapply(value, `[[`, "text")
+}
+
+# CSS for the second tree (the one with `checkWithText=FALSE`)
+css <- "
+#tree2 .jstree-clicked:not(.jstree-checked)  {
+  background-color: tomato !important;
+}"
+
+# nodes list for both trees
 nodes <- list(
   list(
     text = "RootA",

inst/examples/checkWithText/server.R

@@ -2,11 +2,31 @@ shinyServer(
   function(input, output, session){
 
     output[["tree1"]] <- renderJstree({
-      jstree(nodes, checkboxes = TRUE)
+      jstree(
+        nodes, checkboxes = TRUE, dragAndDrop = TRUE
+      )
     })
 
     output[["tree2"]] <- renderJstree({
-      jstree(nodes, checkboxes = TRUE, checkWithText = FALSE)
+      jstree(
+        nodes, checkboxes = TRUE, checkWithText = FALSE, dragAndDrop = TRUE
+      )
+    })
+
+    output[["checked1"]] <- renderPrint({
+      input[["tree1_checked"]] |> Text()
+    })
+
+    output[["checked2"]] <- renderPrint({
+      input[["tree2_checked"]] |> Text()
+    })
+
+    output[["selected1"]] <- renderPrint({
+      input[["tree1_selected"]] |> Text()
+    })
+
+    output[["selected2"]] <- renderPrint({
+      input[["tree2_selected"]] |> Text()
     })
 
   }

inst/examples/checkWithText/ui.R

@@ -1,19 +1,46 @@
 shinyUI(
   fluidPage(
-    tags$h3("The `checkWithText` option."),
-    br(),
+    tags$head(
+      tags$style(HTML(css))
+    ),
+
+    tags$h2("The `checkWithText` option. Drag-and-drop is enabled."),
+    tags$hr(),
+
     splitLayout(
       tagList(
-        tags$h4("`checkWithText` is `TRUE` (default)"),
-        helpText("You can click on a node text to select this node.")
+        tags$h3("`checkWithText` is `TRUE` (default)"),
+        helpText("Here you can click on a node text to select this node.")
       ),
       tagList(
-        tags$h4("`checkWithText` is `FALSE`"),
-        helpText("Try to click on a node text.")
+        tags$h3("`checkWithText` is `FALSE`"),
+        helpText("Here you can't. Use 'CTRL' to select multiple nodes.")
       )
     ),
     splitLayout(
       jstreeOutput("tree1"), jstreeOutput("tree2")
+    ),
+
+    splitLayout(
+
+      splitLayout(
+        tagList(
+          tags$h4("Checked:"), verbatimTextOutput("checked1")
+        ),
+        tagList(
+          tags$h4("Selected:"), verbatimTextOutput("selected1")
+        )
+      ),
+
+      splitLayout(
+        tagList(
+          tags$h4("Checked:"), verbatimTextOutput("checked2")
+        ),
+        tagList(
+          tags$h4("Selected:"), verbatimTextOutput("selected2")
+        )
+      )
+
     )
   )
 )