@xiee/utils 1.11.4 → 1.12.0

package/css/book.css

@@ -0,0 +1,46 @@
+body {
+  font-size: 1em;
+  font-family: Palatino, Georgia, serif;
+}
+.footnotes, code, .side, .body .side {
+  font-size: .85em;
+}
+a {
+  color: steelblue;
+}
+.frontmatter, .chapter {
+  min-height: calc(100vh - 1em);
+}
+.frontmatter {
+  background-image: radial-gradient(#b6cee2 1px, #fff 1px);
+  background-size: 2em 2em;
+  background-color: #fff;
+  padding-bottom: 0;
+}
+.frontmatter > div {
+  margin: 0 -1em;
+  background-color: #ebf6f9;
+  padding: 1em;
+}
+.frontmatter .title {
+  padding: 20vh 1em 1em;
+  margin-top: -1em;
+}
+#TOC a {
+  text-decoration: none;
+}
+#TOC ul ul {
+  border-left: 1px solid lightsteelblue;
+}
+#TOC .active {
+  color: limegreen;
+}
+#TOC li li .active {
+  border-left: 3px solid;
+  margin-left: calc(-1em - 3px);
+  padding-left: 1em;
+}
+#TOC li:not(.open) ul {
+  display: none;
+}
+/* TODO: style for h1.part and printing */

package/css/book.min.css

@@ -0,0 +1 @@
+body{font-size:1em;font-family:Palatino,Georgia,serif}.body .side,.footnotes,.side,code{font-size:.85em}a{color:#4682b4}.chapter,.frontmatter{min-height:calc(100vh - 1em)}.frontmatter{background-image:radial-gradient(#b6cee2 1px,#fff 1px);background-size:2em 2em;background-color:#fff;padding-bottom:0}.frontmatter>div{margin:0 -1em;background-color:#ebf6f9;padding:1em}.frontmatter .title{padding:20vh 1em 1em;margin-top:-1em}#TOC a{text-decoration:none}#TOC ul ul{border-left:1px solid #b0c4de}#TOC .active{color:#32cd32}#TOC li li .active{border-left:3px solid;margin-left:calc(-1em - 3px);padding-left:1em}#TOC li:not(.open) ul{display:none}

package/js/heading-anchor.js

@@ -1,3 +1,4 @@
 document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => {
-  if (h.id) h.innerHTML += ` <span class="anchor"><a href="#${h.id}">#</a></span>`;
+  if (h.id && !h.querySelector('.anchor'))
+    h.insertAdjacentHTML('beforeend', ` <span class="anchor"><a href="#${h.id}">#</a></span>`);
 });

package/js/heading-anchor.min.js

@@ -1 +1 @@
-document.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((h=>{h.id&&(h.innerHTML+=` <span class="anchor"><a href="#${h.id}">#</a></span>`)}));
+document.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((e=>{e.id&&!e.querySelector(".anchor")&&e.insertAdjacentHTML("beforeend",` <span class="anchor"><a href="#${e.id}">#</a></span>`)}));

package/js/toc-highlight.js

@@ -5,17 +5,27 @@
   if (!toc) return;
   const links = toc.querySelectorAll('a');
   if (!links.length) return;
+  const lis = toc.querySelectorAll('li');
 
+  // record which elements are currently in the viewport
+  const ids = [];
   // create a new Intersection Observer instance
   const observer = new IntersectionObserver(els => els.forEach(el => {
-    const id = el.target.id;
-    id && el.isIntersecting && links.forEach(a => {
-      a.classList[(a.getAttribute('href') === '#' + id) ? 'add' : 'remove']('active');
+    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');
+    });
+    lis.forEach(li => {
+      li.classList[li.querySelector('.active') ? 'add' : 'remove']('open');
     });
   }));
 
   // observe all section headings
   d.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => {
-    h.nodeType === 1 && observer.observe(h);
+    h.nodeType === 1 && h.id && observer.observe(h);
   });
 })(document);

package/js/toc-highlight.min.js

@@ -1 +1 @@
-(e=>{const t=e.querySelector("#TableOfContents, #TOC");if(!t)return;const r=t.querySelectorAll("a");if(!r.length)return;const n=new IntersectionObserver((e=>e.forEach((e=>{const t=e.target.id;t&&e.isIntersecting&&r.forEach((e=>{e.classList[e.getAttribute("href")==="#"+t?"add":"remove"]("active")}))}))));e.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((e=>{1===e.nodeType&&n.observe(e)}))})(document);
+(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);

package/package.json

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