Highlight which columns are being shown

pflooky · Nov 12, 2023 · aaa5124 · aaa5124
1 parent bda8f82
commit aaa5124
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 6 deletions.
diff --git a/docs/javascripts/tableselect.js b/docs/javascripts/tableselect.js
@@ -35,14 +35,29 @@ document$.subscribe(function() {
 
                 let columnIdx = el.getAttribute("data-column");
                 let column = dataTable.column(columnIdx);
+                let isColVisible = column.visible();
 
-                // Toggle the visibility
-                column.visible(!column.visible());
+                // Toggle the visibility of the column
+                column.visible(!isColVisible);
+                // Toggle the highlighting of the button
+                if (el.classList.contains("md-button-column-visible")) {
+                    el.classList.remove("md-button-column-visible");
+                } else {
+                    el.classList.add("md-button-column-visible");
+                }
             });
         });
 
+        // Toggle on the visible buttons
+        document.querySelectorAll(".md-button.toggle-vis").forEach((el) => {
+            if (parseInt(el.getAttribute("data-column")) < 4) {
+                el.classList.add("md-button-column-visible");
+            }
+        });
+
+        // Toggle on the visible columns
         let numCols = dataTable.columns().nodes().length;
-        if (numCols > 4) {
+        if (numCols >= 4) {
             for (let i = 4; i < numCols; i++) {
                 let column = dataTable.column(i);
                 column.visible(false);

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -17,3 +17,7 @@
 .sorting_disabled {
     font-size: 0.8rem;
 }
+
+.md-button-column-visible {
+    background-color: royalblue;
+}
diff --git a/site/javascripts/tableselect.js b/site/javascripts/tableselect.js
@@ -35,14 +35,29 @@ document$.subscribe(function() {
 
                 let columnIdx = el.getAttribute("data-column");
                 let column = dataTable.column(columnIdx);
+                let isColVisible = column.visible();
 
-                // Toggle the visibility
-                column.visible(!column.visible());
+                // Toggle the visibility of the column
+                column.visible(!isColVisible);
+                // Toggle the highlighting of the button
+                if (el.classList.contains("md-button-column-visible")) {
+                    el.classList.remove("md-button-column-visible");
+                } else {
+                    el.classList.add("md-button-column-visible");
+                }
             });
         });
 
+        // Toggle on the visible buttons
+        document.querySelectorAll(".md-button.toggle-vis").forEach((el) => {
+            if (parseInt(el.getAttribute("data-column")) < 4) {
+                el.classList.add("md-button-column-visible");
+            }
+        });
+
+        // Toggle on the visible columns
         let numCols = dataTable.columns().nodes().length;
-        if (numCols > 4) {
+        if (numCols >= 4) {
             for (let i = 4; i < numCols; i++) {
                 let column = dataTable.column(i);
                 column.visible(false);

diff --git a/site/sitemap.xml.gz b/site/sitemap.xml.gz
diff --git a/site/stylesheets/extra.css b/site/stylesheets/extra.css
@@ -17,3 +17,7 @@
 .sorting_disabled {
     font-size: 0.8rem;
 }
+
+.md-button-column-visible {
+    background-color: royalblue;
+}