aboutsummaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
authorJohannes Stoelp <johannes.stoelp@gmail.com>2024-03-20 01:23:33 +0100
committerJohannes Stoelp <johannes.stoelp@gmail.com>2024-03-20 01:23:33 +0100
commit428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b (patch)
treebe1dfe73cca48ea54ecfc7f8db0ac9d71858bf8c /src
parentc9c853e6dd5154f218940bd909298452c7bb1bd0 (diff)
downloadnotes-428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b.tar.gz
notes-428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b.zip
html: add example with multiple filter tags
Diffstat (limited to 'src')
-rw-r--r--src/web/html.md7
-rw-r--r--src/web/src/tags2.html74
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>