@xiee/utils - npm Package Compare versions

Comparing version 1.12.2 to 1.12.3

js/toc-highlight.js

@@ -6,18 +6,25 @@ // highlight a TOC item when scrolling to a corresponding section heading
   if (!toc) return;
-  const links = toc.querySelectorAll('a');
+  const links = toc.querySelectorAll('a[href^="#"]');
   if (!links.length) return;
-  const lis = toc.querySelectorAll('li');
+  const lis = toc.querySelectorAll('li'), dict = {};
+  links.forEach(a => dict[a.getAttribute('href').replace('#', '')] = a);
+  const ids = Object.keys(dict);
 
   // record which elements are currently in the viewport
-  const ids = [];
+  const stack = [], id2 = [];
   // create a new Intersection Observer instance
   const observer = new IntersectionObserver(els => els.forEach(el => {
-    const id = el.target.id, i = ids.indexOf(id);
-    el.isIntersecting ? ids.push(id) : (i > -1 && ids.splice(i, 1));
-    const n = ids.length;
-    if (!n) return;
-    links.forEach(a => {
-      const action = (a.getAttribute('href') === '#' + ids[n - 1])  ? 'add' : 'remove';
-      a.classList[action]('active');
-    });
+    const id = el.target.id, i = stack.indexOf(id);
+    el.isIntersecting ? stack.push(id) : (i > -1 && stack.splice(i, 1));
+    let id_active;
+    const n = stack.length;
+    if (!n) {
+      if (el.target.getBoundingClientRect().top < 0) return;
+      // if a heading exits from bottom and no heading is in view, activate previous ID
+      const k = ids.indexOf(id) - 1;
+      if (k >= 0) id_active = ids[k];
+    } else id_active = stack[n - 1];
+    for (const i in dict) {
+      dict[i].classList[i === id_active ? 'add' : 'remove']('active');
+    }
     lis.forEach(li => {
@@ -27,7 +34,7 @@ li.classList[li.querySelector('.active') ? 'add' : 'remove']('open');
   }));
-
-  // observe all section headings
+  
+  // observe all section headings associated with TOC links
   d.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => {
-    h.nodeType === 1 && h.id && observer.observe(h);
+    h.nodeType === 1 && dict.hasOwnProperty(h.id) && observer.observe(h);
   });
 })(document);

js/toc-highlight.min.js

@@ -1,1 +0,1 @@
-(e=>{const t=e.querySelector("#TableOfContents, #TOC");if(!t)return;const r=t.querySelectorAll("a");if(!r.length)return;const c=t.querySelectorAll("li"),o=[],n=new IntersectionObserver((e=>e.forEach((e=>{const t=e.target.id,n=o.indexOf(t);e.isIntersecting?o.push(t):n>-1&&o.splice(n,1);const s=o.length;s&&(r.forEach((e=>{const t=e.getAttribute("href")==="#"+o[s-1]?"add":"remove";e.classList[t]("active")})),c.forEach((e=>{e.classList[e.querySelector(".active")?"add":"remove"]("open")})))}))));e.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((e=>{1===e.nodeType&&e.id&&n.observe(e)}))})(document);
+(e=>{const t=e.querySelector("#TableOfContents, #TOC");if(!t)return;const r=t.querySelectorAll('a[href^="#"]');if(!r.length)return;const n=t.querySelectorAll("li"),o={};r.forEach((e=>o[e.getAttribute("href").replace("#","")]=e));const c=Object.keys(o),s=[],l=new IntersectionObserver((e=>e.forEach((e=>{const t=e.target.id,r=s.indexOf(t);let l;e.isIntersecting?s.push(t):r>-1&&s.splice(r,1);const i=s.length;if(i)l=s[i-1];else{if(e.target.getBoundingClientRect().top<0)return;const r=c.indexOf(t)-1;r>=0&&(l=c[r])}for(const e in o)o[e].classList[e===l?"add":"remove"]("active");n.forEach((e=>{e.classList[e.querySelector(".active")?"add":"remove"]("open")}))}))));e.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((e=>{1===e.nodeType&&o.hasOwnProperty(e.id)&&l.observe(e)}))})(document);

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

110074

0.62%

Lines of code

1830

0.44%

No dependency changes