diff options
author | johannst <johannst@users.noreply.github.com> | 2024-03-20 00:23:51 +0000 |
---|---|---|
committer | johannst <johannst@users.noreply.github.com> | 2024-03-20 00:23:51 +0000 |
commit | e849f8ef1160641268a916596582586344a07459 (patch) | |
tree | ec73e2512d6405edffbbad0cb98c56a6903e272e /print.html | |
parent | 3f3ba03ab0832ee382166aa37ce923631eeb10e4 (diff) | |
download | notes-e849f8ef1160641268a916596582586344a07459.tar.gz notes-e849f8ef1160641268a916596582586344a07459.zip |
deploy: 428fb92cb7e0b566f39fdb61d9ffc03b056d7a7b
Diffstat (limited to 'print.html')
-rw-r--r-- | print.html | 80 |
1 files changed, 79 insertions, 1 deletions
@@ -6187,6 +6187,7 @@ window.onload = () => { </div> </code></pre> <h1 id="minimal-tags-filter"><a class="header" href="#minimal-tags-filter">Minimal tags filter</a></h1> +<h2 id="single-active-filter-tag"><a class="header" href="#single-active-filter-tag">Single active filter tag</a></h2> <p><a href="web/src/tags.html">Rendered html</a></p> <pre><code class="language-html"><script> /// Map HTML elements to display kinds. @@ -6249,6 +6250,83 @@ window.onload = () => { <div class = "content arm x86">arm x86</div> <div class = "content x86">x86</div> </code></pre> +<h2 id="multiple-active-filter-tags"><a class="header" href="#multiple-active-filter-tags">Multiple active filter tags</a></h2> +<p><a href="web/src/tags2.html">Rendered html</a></p> +<pre><code class="language-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 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> +</code></pre> <h1 id="floating-figures-with-caption"><a class="header" href="#floating-figures-with-caption">Floating figures with caption</a></h1> <p><a href="web/src/figure.html">Rendered html</a></p> <pre><code class="language-html"><style> @@ -6343,7 +6421,7 @@ etiam non quam lacus suspendisse faucibus interdum posuere. </figure> <code>overflow: auto</code> gives an alternative to <code>clear</code> to control placement of the floats. The red boarder visualizes the size of the -<code>&ltdiv&gt</code> block, you can remove the <code>overflow</code> property +<code>&ltdiv&gt</code> block. One can remove the <code>overflow</code> property and observe how the border changes. </div> |