diff --git a/NEWS.md b/NEWS.md index c9a8658d5a..ddecfcb017 100644 --- a/NEWS.md +++ b/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 diff --git a/R/module_tabs_with_filters.R b/R/module_tabs_with_filters.R index ca804b18b8..2fd97ac124 100644 --- a/R/module_tabs_with_filters.R +++ b/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") diff --git a/inst/css/sidebar.css b/inst/css/sidebar.css index bed2a1ccca..d26274d0aa 100644 --- a/inst/css/sidebar.css +++ b/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; +} diff --git a/inst/js/sidebar.js b/inst/js/sidebar.js index e13c88a682..b892abd023 100644 --- a/inst/js/sidebar.js +++ b/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(); }