set checkbox input vals

RinteRface · Mar 17, 2024 · 02739b3 · 02739b3
1 parent 9df7cc6
commit 02739b3
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 8 deletions.
diff --git a/inst/examples/treeview/app.R b/inst/examples/treeview/app.R
@@ -55,6 +55,22 @@ app <- shinyApp(
                                                    icon = f7Icon("photo_fill")))
           )
         )
+      ),
+
+      # group treeview with checkbox items
+      f7BlockTitle("Checkbox"),
+      f7Block(
+        f7Treeview(
+          id = "checkbox",
+          withCheckbox = TRUE,
+          f7TreeviewGroup(
+            title = "Selected images",
+            icon = f7Icon("folder_fill"),
+            itemToggle = TRUE,
+            lapply(1:3, function(i) f7TreeviewItem(label = paste0("image", i, ".png"),
+                                                   icon = f7Icon("photo_fill")))
+          )
+        )
       )
     )
   ),
@@ -64,6 +80,10 @@ app <- shinyApp(
       print(input$selectable)
     })
 
+    observe({
+      print(input$checkbox)
+    })
+
   }
 )
 

diff --git a/inst/shinyMobile-1.0.1/dist/shinyMobile.min.css.map b/inst/shinyMobile-1.0.1/dist/shinyMobile.min.css.map
diff --git a/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js b/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js
diff --git a/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js.map b/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js.map
diff --git a/srcjs/bindings/treeviewInputBinding.js b/srcjs/bindings/treeviewInputBinding.js
@@ -5,9 +5,15 @@ $.extend(f7TreeviewBinding, {
   initialize: function(el) {
     var id = $(el).attr("id");
     var config = $(el).find("script[data-for='" + id + "']");
-    this.config = JSON.parse(config.html());
 
-    if (this.config.selectable) {
+    // init config so we can store config for each treeview
+    if (!this.config) {
+      this.config = {};
+    }
+
+    this.config[id] = JSON.parse(config.html());
+
+    if (this.config[id].selectable) {
       // add class to treeview-item-root
       $(el).find(".treeview-item-root").addClass("treeview-item-selectable");
 
@@ -25,19 +31,55 @@ $.extend(f7TreeviewBinding, {
           .addClass("treeview-item-selected");
       });
     }
+
+    if (this.config[id].withCheckbox) {
+      $(el).find(".treeview-item-content").each(function() {
+        var checkbox = $("<label class='checkbox'><input type='checkbox'><i class='icon-checkbox'></i></label>");
+        $(this).prepend(checkbox);
+      });
+
+        // make sure child elements are automatically checked/unchecked
+      $(el).find('input[type="checkbox"]').on('change', function (e) {
+        var $rootEl = $(e.target).closest('.treeview-item-root');
+        var $itemEl = $rootEl.parent('.treeview-item');
+        var $childrenCheckboxes = $itemEl.find('.treeview-item-children input[type="checkbox"]');
+        var $parentItemEl = $itemEl.parents('.treeview-item');
+        var $parentCheckbox = $parentItemEl.children('.treeview-item-root').find('input[type="checkbox"]');
+        if ($childrenCheckboxes.length) {
+          $childrenCheckboxes.prop('checked', e.target.checked);
+        }
+        if ($parentItemEl) {
+          var checkedChildren = $parentItemEl.find('.treeview-item-children input[type="checkbox"]:checked').length;
+          $parentCheckbox.prop('checked', checkedChildren > 0);
+          $parentCheckbox.prop('indeterminate', checkedChildren === 1);
+        }
+      });
+    }
+
   },
 
   find: function(scope) {
     return $(scope).find(".treeview");
   },
 
   getValue: function(el) {
-    if (this.config.selectable) {
+    var id = $(el).attr("id");
+
+    if (this.config[id].selectable) {
       var selected = $(el).find(".treeview-item-selected");
       if (selected.length) {
         return selected.find(".treeview-item-label").text();
       }
     }
+
+    if (this.config[id].withCheckbox) {
+      var checked = $(el).find("input[type='checkbox']:checked");
+      var values = [];
+      checked.each(function() {
+        values.push($(this).closest(".treeview-item-content").find(".treeview-item-label").text());
+      });
+      return values;
+    }
   },
 
   setValue: function(el, value) {