feat: added support for events from the filter panel

NEWS.md

@@ -12,6 +12,10 @@
 * Deprecated `merge_expression` argument in `get_rcode_srv` and `get_rcode` has been removed.
 * Deprecated `session` argument in `get_rcode` function.
 
+# Miscellaneous
+
+* Enhanced the burger button so it is disabled when the filter panel is not used.
+
 # teal 0.11.1
 
 ### Enhancements

R/module_tabs_with_filters.R

@@ -111,9 +111,10 @@ ui_tabs_with_filters <- function(id, modules, datasets) {
   filter_panel_btn <- tags$li(
     style = "flex-grow : 1;",
     tags$a(
+      id = "filter_hamburger",
       href = "javascript:void(0)",
       class = "menubtn",
-      onclick = "toggle_sidebar();",
+      onclick = "toggleFilterPanel();", # see sidebar.js
       title = "Toggle filter panels",
       tags$span(icon("fas fa-bars"))
     )
@@ -162,10 +163,28 @@ srv_tabs_with_filters <- function(id, datasets, modules, reporter = teal.reporte
           "srv_tabs_with_filters@1 changing active module to: { deparse1(active_module()$label) }."
         )
         datasets$handle_active_datanames(datanames = active_module()$filters)
-      }
+      },
+      ignoreNULL = FALSE
     )
 
     datasets$srv_filter_panel(id = "filter_panel", active_datanames = active_datanames)
+
+    # to handle per module filter = NULL
+    observeEvent(
+      eventExpr = active_datanames(),
+      handlerExpr = {
+        script <- if (length(active_datanames()) == 0 || is.null(active_datanames())) {
+          # hide the filter panel and disable the burger button
+          "handleNoActiveDatasets();"
+        } else {
+          # show the filter panel and enable the burger button
+          "handleActiveDatasetsPresent();"
+        }
+        shinyjs::runjs(script)
+      },
+      ignoreNULL = FALSE
+    )
+
     teal.slice::set_filter_state(datasets = datasets, filter = filter)
     showNotification("Data loaded - App fully started up")
 

inst/css/sidebar.css

@@ -10,3 +10,10 @@
 .nav {
   display: flex;
 }
+
+/* disable any anchor with the disabled class*/
+a.disabled {
+  pointer-events: none;
+  cursor: default;
+  color: grey;
+}

inst/js/sidebar.js

@@ -1,13 +1,34 @@
 // used to collapse and expand the filter panel in teal apps
 var filter_open = true;
-function toggle_sidebar() {
-  if ($("#teal_secondary_col").css("display") == "none") {
-    $("#teal_primary_col").attr("class", "col-sm-9").resize();
-    $("#teal_secondary_col").delay(600).fadeIn(50);
-    filter_open = true;
-  } else {
-    $("#teal_secondary_col").fadeOut(1);
-    $("#teal_primary_col").attr("class", "col-sm-12").resize();
-    filter_open = false;
+const hideSidebar = () => {
+  $("#teal_secondary_col").fadeOut(1);
+  $("#teal_primary_col").attr("class", "col-sm-12").resize();
+};
+const showSidebar = () => {
+  $("#teal_primary_col").attr("class", "col-sm-9").resize();
+  $("#teal_secondary_col").delay(600).fadeIn(50);
+};
+const toggleFilterPanel = () => {
+  if (
+    filter_open &&
+    getComputedStyle(document.getElementById("teal_secondary_col")).display ===
+      "none"
+  ) {
+    showSidebar();
+    return;
   }
+  filter_open = !filter_open;
+  if (filter_open) showSidebar();
+  else hideSidebar();
+};
+
+// Function to hide filter panel and disable the burger button
+const handleNoActiveDatasets = () => {
+  $("#filter_hamburger").addClass("disabled");
+  hideSidebar();
+};
+// Function to show filter panel and enable the burger button
+const handleActiveDatasetsPresent = () => {
+  $("#filter_hamburger").removeClass("disabled");
+  if (filter_open) showSidebar();
 }