From 428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b Mon Sep 17 00:00:00 2001
From: Johannes Stoelp <johannes.stoelp@gmail.com>
Date: Wed, 20 Mar 2024 01:23:33 +0100
Subject: html: add example with multiple filter tags

---
 src/web/html.md        |  7 +++++
 src/web/src/tags2.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 src/web/src/tags2.html

(limited to 'src')

diff --git a/src/web/html.md b/src/web/html.md
index 0f236ef..8debbda 100644
--- a/src/web/html.md
+++ b/src/web/html.md
@@ -26,11 +26,18 @@
 ```
 
 # Minimal tags filter
+## Single active filter tag
 [Rendered html](src/tags.html)
 ```html
 {{#include src/tags.html }}
 ```
 
+## Multiple active filter tags
+[Rendered html](src/tags2.html)
+```html
+{{#include src/tags2.html }}
+```
+
 # Floating figures with caption
 [Rendered html](src/figure.html)
 ```html
diff --git a/src/web/src/tags2.html b/src/web/src/tags2.html
new file mode 100644
index 0000000..a321aeb
--- /dev/null
+++ b/src/web/src/tags2.html
@@ -0,0 +1,74 @@
+<script>
+/// Map HTML elements to display kinds.
+const elementToDisplay = (E) => {
+    switch (E.nodeName) {
+        case "LI":
+            return "list-item";
+        default:
+            return "block";
+    }
+}
+
+/// Display only elements which have all TAGS.
+const showTag = (TAGS) => {
+    Array.from(document.getElementsByClassName("content")).forEach(E => {
+        // Display the element, iff the element contains every tag T in TAGS.
+        if (TAGS.every(T => Array.from(E.classList).includes(T))) {
+            E.style.display = elementToDisplay(E);
+        } else {
+            E.style.display = "none";
+        }
+    });
+};
+
+/// Initialize buttons and callbacks.
+window.onload = () => {
+    // Handle to the filter placeholder.
+    const filter_node = document.getElementById("filter");
+    // Active filter tags.
+    const filter = Array();
+
+    // Create buttons for each tag T.
+    ["arm", "x86", "clear"].forEach(T => {
+        const btn = document.createElement("button");
+        btn.innerHTML = T;
+        btn.onclick = T === "clear"
+            ? (E) => {
+                // Clear active filter.
+                while (filter.length) { filter.pop(); }
+
+                showTag(["content"]);
+                filter_node.innerHTML = "<p>filter:</p>";
+            }
+            : (E) => {
+                // Toggle tag T in Active filter.
+                if ((idx = filter.indexOf(T)) > -1) {
+                    filter.splice(idx, 1);
+                } else {
+                    filter.push(T);
+                }
+
+                showTag(filter);
+                out = filter.map(T => `<mark>${T}</mark>`).join(" + ");
+                filter_node.innerHTML = `<p>filter: ${out}</p>`;
+            };
+
+        document.body.prepend(btn);
+    });
+}
+</script>
+
+<div id = "filter"><p>filter:</p></div>
+
+<ul>
+    <li class = "content arm">arm 1</li>
+    <li class = "content arm">arm 2</li>
+    <li class = "content arm">arm 3</li>
+    <li class = "content x86">x86 1</li>
+    <li class = "content x86">x86 2</li>
+    <li class = "content x86 arm">x86 + arm</li>
+</ul>
+
+<div class = "content arm">arm</div>
+<div class = "content arm x86">arm x86</div>
+<div class = "content x86">x86</div>
-- 
cgit v1.2.3