@xiee/utils 1.5.5 → 1.6.0

package/README.md

@@ -131,6 +131,11 @@ KaTeX's auto-render extension.
 Right-align a `<blockquote>` footer if the footer is a `<p>` that starts with
 the em-dash.
 
+## tabsets.js
+
+Create tabsets from section headings and their content. See [this
+post](https://yihui.org/en/2023/10/heading-tabsets/) for documentation.
+
 ## toc.js
 
 Automatically build a table of contents (TOC) from all section headings.

package/css/tabsets.css

@@ -0,0 +1,29 @@
+.tab-link, .tab-pane {
+  border: 1px solid rgba(0, 0, 0, .05);
+  border-radius: 5px 5px 0 0;
+}
+.tab-link + .tab-pane.active {
+  border-radius: 0 5px 0 0;
+}
+.tab-link.active, .tab-pane.active {
+  border-color: rgba(0, 0, 0, .5);
+}
+.tab-link:not(.active):hover {
+  background: rgba(0, 0, 0, .05);
+}
+.tab-pane {
+  display: none;
+  padding: .5em;
+}
+.tab-pane.active {
+  display: block;
+}
+.tab-link {
+  display: inline-block;
+  margin: 0 .5em -1px 0;
+  padding: .5em;
+  cursor: pointer;
+}
+.tab-link.active {
+  border-bottom-color: white;
+}

package/css/tabsets.min.css

@@ -0,0 +1 @@
+.tab-link,.tab-pane{border:1px solid rgba(0,0,0,.05);border-radius:5px 5px 0 0}.tab-link+.tab-pane.active{border-radius:0 5px 0 0}.tab-link.active,.tab-pane.active{border-color:rgba(0,0,0,.5)}.tab-link:not(.active):hover{background:rgba(0,0,0,.05)}.tab-pane{display:none;padding:.5em}.tab-pane.active{display:block}.tab-link{display:inline-block;margin:0 .5em -1px 0;padding:.5em;cursor:pointer}.tab-link.active{border-bottom-color:#fff}

package/js/load-pangu.js

@@ -0,0 +1 @@
+pangu.spacingPage();

package/js/load-pangu.min.js

@@ -0,0 +1 @@
+pangu.spacingPage();

package/js/tabsets.js

@@ -0,0 +1,52 @@
+// find an element with class `tabset` and convert its subsequent headings to tabs
+document.querySelectorAll('.tabset').forEach(h => {
+  let links = h.querySelectorAll(':scope > .tab-link'),
+      panes = h.querySelectorAll(':scope > .tab-pane');
+  // using headings to create a tabset later if it's empty
+  if (links.length === 0) {
+    links = []; panes = [];
+  }
+  function activate(i) {
+    function a(x, i) {
+      x.forEach((el, k) => el.classList[k === i ? 'add' : 'remove']('active'));
+    }
+    a(links, i); a(panes, i);
+  }
+  let n = -1, el = h.nextSibling, p;
+  if (links instanceof Array) while (el) {
+    if (el.nodeName === '#comment' && el.nodeValue.trim() === `tabset:${h.id}`)
+      break;  // quit after <!--tabset:id-->
+    const t = el.tagName;
+    if (/^H[1-6]$/.test(t)) {
+      const n2 = +t.replace('H', '');
+      if (n2 <= n) break;  // quit after a higher-level heading
+      if (n < 0) n = n2 - 1;
+      // find the next lower-level heading and start creating a tab
+      if (n2 === n + 1) {
+        p = document.createElement('div');
+        p.className = 'tab-pane';
+        el.after(p);
+        el.classList.add('tab-link');
+        el.querySelector('.anchor')?.remove();
+        el.outerHTML = el.outerHTML.replace(/^<h[1-6](.*)h[1-6]>$/, '<div$1div>');
+        el = p.previousElementSibling;
+        links.push(el); panes.push(p);
+        el = p.nextSibling;
+        continue;
+      }
+    }
+    if (p) {
+      p.append(el);
+      el = p;
+    }
+    el = el.nextSibling;
+  }
+  // activate one tab initially if none is active
+  let init = 0;
+  links.forEach((l, i) => {
+    i > 0 && links[i - 1].after(l);  // move tab links together
+    l.onclick = () => activate(i);  // add the click event
+    if (l.classList.contains('active')) init = i;
+  });
+  activate(init);
+});

package/js/tabsets.min.js

@@ -0,0 +1 @@
+document.querySelectorAll(".tabset").forEach((e=>{let t=e.querySelectorAll(":scope > .tab-link"),a=e.querySelectorAll(":scope > .tab-pane");function n(e){function n(e,t){e.forEach(((e,a)=>e.classList[a===t?"add":"remove"]("active")))}n(t,e),n(a,e)}0===t.length&&(t=[],a=[]);let c,i=-1,l=e.nextSibling;if(t instanceof Array)for(;l&&("#comment"!==l.nodeName||l.nodeValue.trim()!==`tabset:${e.id}`);){const e=l.tagName;if(/^H[1-6]$/.test(e)){const n=+e.replace("H","");if(n<=i)break;if(i<0&&(i=n-1),n===i+1){c=document.createElement("div"),c.className="tab-pane",l.after(c),l.classList.add("tab-link"),l.querySelector(".anchor")?.remove(),l.outerHTML=l.outerHTML.replace(/^<h[1-6](.*)h[1-6]>$/,"<div$1div>"),l=c.previousElementSibling,t.push(l),a.push(c),l=c.nextSibling;continue}}c&&(c.append(l),l=c),l=l.nextSibling}let o=0;t.forEach(((e,a)=>{a>0&&t[a-1].after(e),e.onclick=()=>n(a),e.classList.contains("active")&&(o=a)})),n(o)}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiee/utils",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"