feat: added support for events from the filter panel

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 = "handleHamburgerClick();",
       title = "Toggle filter panels",
       tags$span(icon("fas fa-bars"))
     )
@@ -162,10 +163,20 @@ 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)
+    script <- paste0(
+      "document.getElementById('%s').addEventListener('noDatasetsEvent', handleNoActiveDatasets);",
+      "document.getElementById('%s').addEventListener('datasetsActiveEvent', handleActiveDatasetsPresent);"
+    )
+    shinyjs::runjs(sprintf(
+      script,
+      session$ns("filter_panel"),
+      session$ns("filter_panel")
+    ))
     teal.slice::set_filter_state(datasets = datasets, filter = filter)
     showNotification("Data loaded - App fully started up")
 

inst/css/sidebar.css

@@ -10,3 +10,9 @@
 .nav {
   display: flex;
 }
+
+a.disabled {
+  pointer-events: none;
+  cursor: default;
+  color: grey;
+}

inst/js/sidebar.js

@@ -1,13 +1,36 @@
 // 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 handleHamburgerClick = () => {
+  console.log("Handling Filter Panel Hamburger click: " + filter_open);
+  if (
+    filter_open &&
+    getComputedStyle(document.getElementById("teal_secondary_col")).display ===
+      "none"
+  ) {
+    showSidebar();
+    return;
   }
+  filter_open = !filter_open;
+  if (filter_open) showSidebar();
+  else hideSidebar();
+};
+
+const handleNoActiveDatasets = () => {
+  $("#filter_hamburger").addClass("disabled");
+  hideSidebar();
+};
+
+const handleActiveDatasetsPresent = () => {
+  $("#filter_hamburger").removeClass("disabled");
+  if (filter_open) showSidebar();
 }