@xiee/utils 1.6.1 → 1.6.2

package/README.md

@@ -134,7 +134,7 @@ 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.
+post](https://yihui.org/en/2023/10/section-tabsets/) for documentation.
 
 ## toc.js
 

package/js/tabsets.js

@@ -1,19 +1,39 @@
-// find an element with class `tabset` and convert its subsequent headings to tabs
+// find an element with class `tabset` and convert its subsequent bullet list or headings to tabs;
+// see documentation at: https://yihui.org/en/2023/10/section-tabsets/
 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 = [];
-  }
+  const links = [...h.querySelectorAll(':scope > .tab-link')],
+        panes = [...h.querySelectorAll(':scope > .tab-pane')];
   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) {
+  function newEl(tag, cls) {
+    const el = document.createElement(tag);
+    el.className = cls;
+    return el;
+  }
+  let n = -1, el = h.nextElementSibling, p;
+  // if the first sibling is <ul>, try to convert it to tabset
+  if (links.length === 0 && el.tagName === 'UL') {
+    [...el.children].forEach(li => {
+      const l = li.firstElementChild;
+      if (!l) return;
+      const l2 = newEl('div', 'tab-link');
+      l2.append(l);
+      l.outerHTML = l.innerHTML;
+      el.before(l2);
+      const p = newEl('div', 'tab-pane');
+      l2.after(p);
+      [...li.children].forEach(l => p.append(l));
+      links.push(l2); panes.push(p);
+    });
+    el.remove();
+  }
+  // create a tabset using headings if the above didn't work
+  if (links.length === 0) while (el) {
+    // convert headings to tabs
     if (el.nodeName === '#comment' && el.nodeValue.trim() === `tabset:${h.id}`)
       break;  // quit after <!--tabset:id-->
     const t = el.tagName;
@@ -23,8 +43,7 @@ document.querySelectorAll('.tabset').forEach(h => {
       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';
+        p = newEl('div', 'tab-pane');
         el.after(p);
         el.classList.add('tab-link');
         el.querySelector('.anchor')?.remove();
@@ -41,6 +60,11 @@ document.querySelectorAll('.tabset').forEach(h => {
     }
     el = el.nextSibling;
   }
+  // if the initial tabset container is empty, move links and panes into it
+  if (h.innerText.trim() == '') {
+    links.forEach(l => h.append(l));
+    panes.forEach(p => h.append(p));
+  }
   // activate one tab initially if none is active
   let init = 0;
   links.forEach((l, i) => {

package/js/tabsets.min.js

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

package/package.json

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