@xiee/utils - npm Package Compare versions

Comparing version 1.6.1 to 1.6.2

js/tabsets.js

@@ -1,9 +0,6 @@
-// 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) {
@@ -15,4 +12,27 @@ function a(x, 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}`)
@@ -27,4 +47,3 @@ break;  // quit after <!--tabset:id-->
       if (n2 === n + 1) {
-        p = document.createElement('div');
-        p.className = 'tab-pane';
+        p = newEl('div', 'tab-pane');
         el.after(p);
@@ -46,2 +65,7 @@ el.classList.add('tab-link');
   }
+  // 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
@@ -48,0 +72,0 @@ let init = 0;

js/tabsets.min.js

@@ -1,1 +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)}));
+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.json

 {
   "name": "@xiee/utils",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -137,3 +137,3 @@ This repo contains miscellaneous tools and utilities written in JavaScript. They
 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.
 
@@ -140,0 +140,0 @@ ## toc.js

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69532

increased by1.83%

Lines of code

1101

increased by2.23%

No dependency changes