diff options
author | Johannes Stoelp <johannes.stoelp@gmail.com> | 2024-03-20 01:23:33 +0100 |
---|---|---|
committer | Johannes Stoelp <johannes.stoelp@gmail.com> | 2024-03-20 01:23:33 +0100 |
commit | 428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b (patch) | |
tree | be1dfe73cca48ea54ecfc7f8db0ac9d71858bf8c /src | |
parent | c9c853e6dd5154f218940bd909298452c7bb1bd0 (diff) | |
download | notes-428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b.tar.gz notes-428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b.zip |
html: add example with multiple filter tags
Diffstat (limited to 'src')
-rw-r--r-- | src/web/html.md | 7 | ||||
-rw-r--r-- | src/web/src/tags2.html | 74 |
2 files changed, 81 insertions, 0 deletions
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> |