From 3826945ab95aec060e900d3620094311f2a66cbd Mon Sep 17 00:00:00 2001
From: stla <laurent_step@yahoo.fr>
Date: Tue, 24 Oct 2023 20:59:42 +0200
Subject: [PATCH] improved 'checkWithText' example

---
 inst/examples/checkWithText/global.R | 12 +++++++++
 inst/examples/checkWithText/server.R | 24 +++++++++++++++--
 inst/examples/checkWithText/ui.R     | 39 +++++++++++++++++++++++-----
 3 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/inst/examples/checkWithText/global.R b/inst/examples/checkWithText/global.R
index d236759..ceb088c 100644
--- a/inst/examples/checkWithText/global.R
+++ b/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",
diff --git a/inst/examples/checkWithText/server.R b/inst/examples/checkWithText/server.R
index 8de912b..53f764f 100644
--- a/inst/examples/checkWithText/server.R
+++ b/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()
     })
 
   }
diff --git a/inst/examples/checkWithText/ui.R b/inst/examples/checkWithText/ui.R
index e233a71..0a1bdc4 100644
--- a/inst/examples/checkWithText/ui.R
+++ b/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")
+        )
+      )
+
     )
   )
 )