From dd98880654000b5bdce7bf9457e3c0697312914d Mon Sep 17 00:00:00 2001 From: johannst Date: Sat, 17 Feb 2024 01:37:07 +0000 Subject: deploy: fb01a9122a6a104c509bf39fdee3803d778b67fd --- print.html | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) (limited to 'print.html') diff --git a/print.html b/print.html index 9010bb6..071752f 100644 --- a/print.html +++ b/print.html @@ -6186,6 +6186,69 @@ window.onload = () => { <p>... and there.</p> </div> +

Minimal tags filter

+

Rendered html

+
<script>
+/// Map HTML elements to display kinds.
+const elementToDisplay = (E) => {
+    switch (E.nodeName) {
+        case "LI":
+            return "list-item";
+        default:
+            return "block";
+    }
+}
+
+/// Display only elements with tag T.
+const showTag = (T) => {
+    Array.from(document.getElementsByClassName("content")).forEach(E => {
+        E.style.display = "none";
+    });
+
+    Array.from(document.getElementsByClassName(T)).forEach(E => {
+        E.style.display = elementToDisplay(E);
+    });
+};
+
+/// Initialize buttons and callbacks.
+window.onload = () => {
+    // Handle to the filter placeholder.
+    const filter = document.getElementById("filter");
+
+    // Create buttons for each tag T.
+    ['arm', 'x86', 'clear'].forEach(T => {
+        const btn = document.createElement("button");
+        btn.innerHTML = T;
+        btn.onclick = T === "clear"
+            ? (E) => {
+                showTag("content");
+                filter.innerHTML = "";
+            }
+            : (E) => {
+                showTag(T);
+                filter.innerHTML = `<p>filter: <mark>${T}</mark></p>`;
+            };
+
+        document.body.prepend(btn);
+    });
+}
+</script>
+
+<div id = "filter"></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>
+

css

selector

.moose element with class

-- cgit v1.2.3