aboutsummaryrefslogtreecommitdiffhomepage
path: root/print.html
diff options
context:
space:
mode:
authorjohannst <johannst@users.noreply.github.com>2024-02-17 01:37:07 +0000
committerjohannst <johannst@users.noreply.github.com>2024-02-17 01:37:07 +0000
commitdd98880654000b5bdce7bf9457e3c0697312914d (patch)
treeeefe221803341a2253dc3d3b516b37fe9d279e74 /print.html
parentbac8a5d2822835cf47175d1162030653fadd5c09 (diff)
downloadnotes-dd98880654000b5bdce7bf9457e3c0697312914d.tar.gz
notes-dd98880654000b5bdce7bf9457e3c0697312914d.zip
deploy: fb01a9122a6a104c509bf39fdee3803d778b67fd
Diffstat (limited to 'print.html')
-rw-r--r--print.html63
1 files changed, 63 insertions, 0 deletions
diff --git a/print.html b/print.html
index 9010bb6..071752f 100644
--- a/print.html
+++ b/print.html
@@ -6186,6 +6186,69 @@ window.onload = () =&gt; {
&lt;p&gt;... and there.&lt;/p&gt;
&lt;/div&gt;
</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">&lt;script&gt;
+/// Map HTML elements to display kinds.
+const elementToDisplay = (E) =&gt; {
+ switch (E.nodeName) {
+ case "LI":
+ return "list-item";
+ default:
+ return "block";
+ }
+}
+
+/// Display only elements with tag T.
+const showTag = (T) =&gt; {
+ Array.from(document.getElementsByClassName("content")).forEach(E =&gt; {
+ E.style.display = "none";
+ });
+
+ Array.from(document.getElementsByClassName(T)).forEach(E =&gt; {
+ E.style.display = elementToDisplay(E);
+ });
+};
+
+/// Initialize buttons and callbacks.
+window.onload = () =&gt; {
+ // Handle to the filter placeholder.
+ const filter = document.getElementById("filter");
+
+ // Create buttons for each tag T.
+ ['arm', 'x86', 'clear'].forEach(T =&gt; {
+ const btn = document.createElement("button");
+ btn.innerHTML = T;
+ btn.onclick = T === "clear"
+ ? (E) =&gt; {
+ showTag("content");
+ filter.innerHTML = "";
+ }
+ : (E) =&gt; {
+ showTag(T);
+ filter.innerHTML = `&lt;p&gt;filter: &lt;mark&gt;${T}&lt;/mark&gt;&lt;/p&gt;`;
+ };
+
+ document.body.prepend(btn);
+ });
+}
+&lt;/script&gt;
+
+&lt;div id = "filter"&gt;&lt;/div&gt;
+
+&lt;ul&gt;
+ &lt;li class = "content arm"&gt;arm 1&lt;/li&gt;
+ &lt;li class = "content arm"&gt;arm 2&lt;/li&gt;
+ &lt;li class = "content arm"&gt;arm 3&lt;/li&gt;
+ &lt;li class = "content x86"&gt;x86 1&lt;/li&gt;
+ &lt;li class = "content x86"&gt;x86 2&lt;/li&gt;
+ &lt;li class = "content x86 arm"&gt;x86 + arm&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;div class = "content arm"&gt;arm&lt;/div&gt;
+&lt;div class = "content arm x86"&gt;arm x86&lt;/div&gt;
+&lt;div class = "content x86"&gt;x86&lt;/div&gt;
+</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>