UI groundwork for conditions display #92

webassets/js/common.js

@@ -183,6 +183,44 @@ function listenForOSThemeChange() {
     });
 }
 
+// Panel toggle functions.
+// PANELS is the single registry of all collapsible panels. To add a new panel, add an entry here
+// and provide named wrappers below. The toggle logic will automatically handle hiding other panels.
+const PANELS = [
+    { area: "#filters-area",    button: "#filters-button" },
+    { area: "#display-area",    button: "#display-button" },
+    { area: "#conditions-area", button: "#conditions-button" },
+];
+
+// Toggle a panel open or closed. If opening, all other visible panels are closed first.
+// areaId is the jQuery selector for the panel's content area, e.g. "#filters-area".
+function togglePanel(areaId) {
+    if (!$(areaId).is(":visible")) {
+        PANELS.forEach(p => {
+            if (p.area !== areaId && $(p.area).is(":visible")) {
+                $(p.area).hide();
+                $(p.button).button("toggle");
+            }
+        });
+    }
+    $(areaId).toggle();
+}
+
+// Close a panel and deactivate its toggle button.
+function closePanel(areaId) {
+    const panel = PANELS.find(p => p.area === areaId);
+    if (panel) { $(panel.button).button("toggle"); }
+    $(areaId).hide();
+}
+
+function toggleFiltersPanel()    { togglePanel("#filters-area"); }
+function closeFiltersPanel()     { closePanel("#filters-area"); }
+function toggleDisplayPanel()    { togglePanel("#display-area"); }
+function closeDisplayPanel()     { closePanel("#display-area"); }
+function toggleConditionsPanel() { togglePanel("#conditions-area"); }
+function closeConditionsPanel()  { closePanel("#conditions-area"); }
+
+
 // Startup
 $(document).ready(function() {
     usePreferredTheme();