diff options
author | johannst <johannst@users.noreply.github.com> | 2024-02-17 01:37:07 +0000 |
---|---|---|
committer | johannst <johannst@users.noreply.github.com> | 2024-02-17 01:37:07 +0000 |
commit | dd98880654000b5bdce7bf9457e3c0697312914d (patch) | |
tree | eefe221803341a2253dc3d3b516b37fe9d279e74 /print.html | |
parent | bac8a5d2822835cf47175d1162030653fadd5c09 (diff) | |
download | notes-dd98880654000b5bdce7bf9457e3c0697312914d.tar.gz notes-dd98880654000b5bdce7bf9457e3c0697312914d.zip |
deploy: fb01a9122a6a104c509bf39fdee3803d778b67fd
Diffstat (limited to 'print.html')
-rw-r--r-- | print.html | 63 |
1 files changed, 63 insertions, 0 deletions
@@ -6186,6 +6186,69 @@ window.onload = () => { <p>... and there.</p> </div> </code></pre> +<h1 id="minimal-tags-filter"><a class="header" href="#minimal-tags-filter">Minimal tags filter</a></h1> +<p><a href="web/src/tags.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 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> +</code></pre> <div style="break-before: page; page-break-before: always;"></div><h1 id="css"><a class="header" href="#css">css</a></h1> <h2 id="selector"><a class="header" href="#selector">selector</a></h2> <p><code>.moose</code> element with class</p> |