@xiee/utils 1.11.5 → 1.12.1

package/css/article.css

@@ -9,6 +9,7 @@ body, blockquote, .side, .menu { background: #fafafa; }
 .article-meta .terms, .appendix, .footnotes, main .side > *, .body .side, figcaption, .caption { font-size: .9em; }
 .single .appendix, .body ~ .appendix, .frontmatter { background: none; }
 .appendix h2 { border-bottom: 1px dashed #666; }
+a { color: steelblue; }
 #TOC { top: 0; }
 #TOC ul { list-style-position: inside; }
 #TOC > ul {
@@ -17,6 +18,23 @@ body, blockquote, .side, .menu { background: #fafafa; }
 }
 #TOC li > ul { padding-left: 1em; }
 #TOC .numbered { list-style: none; }
+#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;
+}
 .bg-number {
   padding: 1px 5px;
   border-radius: 5px;

package/css/article.min.css

@@ -1 +1 @@
-.menu,.side,blockquote,body{background:#fafafa}.article-list,.body,.body~.appendix,.embed-left,.embed-right,.frontmatter,.fullwidth,.single .appendix,.single main{margin-top:2em;padding:1em;box-shadow:0 0 8px #ccc;background:#fff}.article-meta{background:#f8f8f8}.appendix,.article-meta .terms,.body .side,.caption,.footnotes,figcaption,main .side>*{font-size:.9em}.body~.appendix,.frontmatter,.single .appendix{background:0 0}.appendix h2{border-bottom:1px dashed #666}#TOC{top:0}#TOC ul{list-style-position:inside}#TOC>ul{padding:0;margin:0}#TOC li>ul{padding-left:1em}#TOC .numbered{list-style:none}.bg-number{padding:1px 5px;border-radius:5px;background:#778899;color:#fff}.side{width:200px;margin:0 auto}.side-left{float:left;clear:left;margin-left:calc(-200px - 2em);position:sticky}.side-right{float:right;clear:right;margin-right:calc(-200px - 2em)}.quote-left,.quote-right{width:45%}.embed-left,.embed-right{margin-top:auto;padding:0}.embed-left,.quote-left{float:left;margin-right:1em}.embed-right,.quote-right{float:right;margin-left:1em}.embed-left{margin-left:calc(-200px - 2em)}.embed-right{margin-right:calc(-200px - 2em)}.embed-left>:first-child,.embed-right>:first-child,.side>:first-child{margin-top:0}.embed-left>:last-child,.embed-right>:last-child{margin-bottom:0}.quote-left>:first-child,.quote-right>:first-child{padding-top:.1px}.quote-left>:last-child,.quote-right>:last-child{padding-bottom:.1px}.fullwidth,.fullwidth *{margin:auto 0}.fullwidth *{max-width:calc(100vw - 4em)}.fullscroll *{max-width:initial}.fullwidth{max-width:calc(100vw - 2em);margin:1em 0 1em 50%;transform:translateX(-50%);float:left;min-width:100%;background:#fff}.fullscroll,.fullscroll .figure,.fullscroll figure{overflow-x:auto}.fullwidth .caption,.fullwidth figcaption{margin-left:calc(50% - 400px);width:800px;padding:1em 1em 0}@media (min-width:1280.02px){.appendix,.article,.body{position:relative}.note-ref{cursor:pointer}.note-ref:hover+.side{display:inline-block;background-color:#f8f8f8;position:absolute;margin-left:1em;padding:.5em;box-sizing:content-box}}@media (max-width:1280px){#TOC{border:1px solid #eee;border-radius:5px;padding:1em;position:initial}.side{width:100%}.body .side,main .side{padding:0 2em;color:#2f4f4f}.side-left,.side-right{clear:both;margin:1em auto;background:0 0}:not(.note-ref)+.side{float:none}.side>:last-child{margin-bottom:0}.embed-left,.embed-right{float:inherit;margin:auto;padding:1em}}@media (max-width:800px){body{padding:initial}.body,main{padding:0 .5em 0}.quote-left,.quote-right{width:inherit;float:inherit;margin:auto}.fullwidth:not(.fullscroll) *{max-width:100%}.fullwidth{margin:initial;transform:initial;float:none;min-width:initial;background:0 0;border:none}.fullwidth .caption,.fullwidth figcaption{margin:initial;padding:initial}}
+.menu,.side,blockquote,body{background:#fafafa}.article-list,.body,.body~.appendix,.embed-left,.embed-right,.frontmatter,.fullwidth,.single .appendix,.single main{margin-top:2em;padding:1em;box-shadow:0 0 8px #ccc;background:#fff}.article-meta{background:#f8f8f8}.appendix,.article-meta .terms,.body .side,.caption,.footnotes,figcaption,main .side>*{font-size:.9em}.body~.appendix,.frontmatter,.single .appendix{background:0 0}.appendix h2{border-bottom:1px dashed #666}a{color:#4682b4}#TOC{top:0}#TOC ul{list-style-position:inside}#TOC>ul{padding:0;margin:0}#TOC li>ul{padding-left:1em}#TOC .numbered{list-style:none}#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}.bg-number{padding:1px 5px;border-radius:5px;background:#778899;color:#fff}.side{width:200px;margin:0 auto}.side-left{float:left;clear:left;margin-left:calc(-200px - 2em);position:sticky}.side-right{float:right;clear:right;margin-right:calc(-200px - 2em)}.quote-left,.quote-right{width:45%}.embed-left,.embed-right{margin-top:auto;padding:0}.embed-left,.quote-left{float:left;margin-right:1em}.embed-right,.quote-right{float:right;margin-left:1em}.embed-left{margin-left:calc(-200px - 2em)}.embed-right{margin-right:calc(-200px - 2em)}.embed-left>:first-child,.embed-right>:first-child,.side>:first-child{margin-top:0}.embed-left>:last-child,.embed-right>:last-child{margin-bottom:0}.quote-left>:first-child,.quote-right>:first-child{padding-top:.1px}.quote-left>:last-child,.quote-right>:last-child{padding-bottom:.1px}.fullwidth,.fullwidth *{margin:auto 0}.fullwidth *{max-width:calc(100vw - 4em)}.fullscroll *{max-width:initial}.fullwidth{max-width:calc(100vw - 2em);margin:1em 0 1em 50%;transform:translateX(-50%);float:left;min-width:100%;background:#fff}.fullscroll,.fullscroll .figure,.fullscroll figure{overflow-x:auto}.fullwidth .caption,.fullwidth figcaption{margin-left:calc(50% - 400px);width:800px;padding:1em 1em 0}@media (min-width:1280.02px){.appendix,.article,.body{position:relative}.note-ref{cursor:pointer}.note-ref:hover+.side{display:inline-block;background-color:#f8f8f8;position:absolute;margin-left:1em;padding:.5em;box-sizing:content-box}}@media (max-width:1280px){#TOC{border:1px solid #eee;border-radius:5px;padding:1em;position:initial}.side{width:100%}.body .side,main .side{padding:0 2em;color:#2f4f4f}.side-left,.side-right{clear:both;margin:1em auto;background:0 0}:not(.note-ref)+.side{float:none}.side>:last-child{margin-bottom:0}.embed-left,.embed-right{float:inherit;margin:auto;padding:1em}}@media (max-width:800px){body{padding:initial}.body,main{padding:0 .5em 0}.quote-left,.quote-right{width:inherit;float:inherit;margin:auto}.fullwidth:not(.fullscroll) *{max-width:100%}.fullwidth{margin:initial;transform:initial;float:none;min-width:initial;background:0 0;border:none}.fullwidth .caption,.fullwidth figcaption{margin:initial;padding:initial}}

package/css/book.css

@@ -0,0 +1,26 @@
+body {
+  font-size: 1em;
+  font-family: Palatino, Georgia, serif;
+}
+.footnotes, code, .side, .body .side {
+  font-size: .85em;
+}
+.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;
+}
+/* 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}.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}

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.5",
+  "version": "1.12.1",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"