@xiee/utils 1.2.14 → 1.3.0

package/css/article.css

@@ -0,0 +1,140 @@
+body, blockquote, .side, .menu { background: #fafafa; }
+.article, .body, .appendix { position: relative; }
+.article-list, .body, .single main, .single .appendix, .body ~ .appendix, .frontmatter, .fullwidth, .embed-left, .embed-right {
+  margin-top: 2em;
+  padding: 1em;
+  box-shadow: 0 0 8px #ccc;
+  background: #fff;
+}
+.article-meta { background: #f8f8f8; }
+.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; }
+#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: lightslategray;
+  color: #fff;
+}
+
+/* left/right elements*/
+.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;
+}
+.quote-left, .embed-left {
+  float: left;
+  margin-right: 1em;
+}
+.quote-right, .embed-right {
+  float: right;
+  margin-left: 1em;
+}
+.embed-left { margin-left: calc(-200px - 2em); }
+.embed-right { margin-right: calc(-200px - 2em); }
+.side > :first-child, .embed-left > :first-child, .embed-right > :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; }
+
+/* wide elements */
+.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 figcaption, .fullwidth .caption {
+  margin-left: calc(50% - 400px);
+  width: 800px;
+  padding: 1em 1em 0;
+}
+
+@media (min-width: 1280px) {
+  .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%; }
+  main .side, .body .side {
+    padding: 0 2em;
+    color: darkslategray;
+  }
+  .side-left, .side-right {
+    clear: both;
+    margin: 1em auto;
+    background: none;
+  }
+  .note-ref ~ .side { margin-left: 100vw; }
+  .side > :last-child { margin-bottom: 0; }
+  .embed-left, .embed-right {
+    float: inherit;
+    margin: auto;
+    padding: 1em;
+  }
+}
+@media (max-width: 800px) {
+  body { padding: initial; }
+  main, .body { 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: none;
+    border: none;
+  }
+  .fullwidth figcaption, .fullwidth .caption {
+    margin: initial;
+    padding: initial;
+  }
+}

package/css/article.min.css

@@ -0,0 +1 @@
+.menu,.side,blockquote,body{background:#fafafa}.appendix,.article,.body{position:relative}.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:1280px){.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}.note-ref~.side{margin-left:100vw}.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/js/appendix.js

@@ -0,0 +1,15 @@
+// find <h[1-6] class="appendix"> and create a new <div> next to the parent
+// element to hold all appendix elements
+(d => {
+  const h = d.querySelector([1, 2, 3, 4, 5, 6].map(i => `h${i}.appendix`).join(','));
+  if (!h) return;
+  h.classList.remove('appendix');
+  const a = d.createElement('div');
+  a.className = 'appendix';
+  a.append(h.cloneNode(true));
+  h.parentNode.after(a);
+  while(h.nextSibling) {
+    a.append(h.nextSibling);
+  }
+  h.remove();
+})(document);

package/js/appendix.min.js

@@ -0,0 +1 @@
+(e=>{const n=e.querySelector([1,2,3,4,5,6].map((e=>`h${e}.appendix`)).join(","));if(!n)return;n.classList.remove("appendix");const a=e.createElement("div");for(a.className="appendix",a.append(n.cloneNode(!0)),n.parentNode.after(a);n.nextSibling;)a.append(n.nextSibling);n.remove()})(document);

package/js/key-buttons.js

@@ -1,8 +1,8 @@
-(function(d) {
+(d => {
   const a1 = ['Enter', 'Up', 'Down', 'Left', 'Right'];
   const a2 = ['↵', '↑', '↓', '←', '→'];
   function drawArrows(x) {
-    a1.map((v, i) => x = x.replace(new RegExp('>' + v + '<', 'g'), ' title="' + v + (i ? ' Arrow' : '') + '">' + a2[i] + '<'));
+    a1.map((v, i) => x = x.replace(new RegExp(`>${v}<`, 'g'), ` title="${v + (i ? ' Arrow' : '')}">${a2[i]}<`));
     return x;
   }
   // 1. individual keys; 2. modifiers; 3. normal keys
@@ -10,14 +10,14 @@
               Array(12).fill().map((v, i) => 'F' + (i + 1)).concat(a1).join('|'),
         k2 = 'Ctrl|Control|Shift|Alt|Cmd|Command|fn',
         k3 = '[a-zA-Z0-9]|Click',
-        r1 = new RegExp('^(' + k1 + '|' + k2 + ')$'),
-        r2 = new RegExp('^(' + k2 + ') [/+] '),
-        r3 = new RegExp('^(' + [k1, k2, k3].join('|') + ')( [/+] )(.*)');
+        r1 = new RegExp(`^(${k1}|${k2})$`),
+        r2 = new RegExp(`^(${k2}) [/+] `),
+        r3 = new RegExp(`^(${k1}|${k2}|${k3})( [/+] )(.*)`);
   d.querySelectorAll(':not(pre) > code').forEach(el => {
     if (el.childElementCount > 0) return;
     let t = el.innerText;
     if (r1.test(t)) {
-      el.outerHTML = drawArrows('<kbd>' + t + '</kbd>');
+      el.outerHTML = drawArrows(`<kbd>${t}</kbd>`);
       return;
     }
     if (!r2.test(t)) return;

package/js/key-buttons.min.js

@@ -1 +1 @@
-!function(e){const r=["Enter","Up","Down","Left","Right"],t=["&crarr;","&uarr;","&darr;","&larr;","&rarr;"];function n(e){return r.map(((r,n)=>e=e.replace(new RegExp(">"+r+"<","g"),' title="'+r+(n?" Arrow":"")+'">'+t[n]+"<"))),e}const o="Esc|Tab|PageUp|PageDown|Space|Delete|Home|End|PrtScr?|PrintScreen|"+Array(12).fill().map(((e,r)=>"F"+(r+1))).concat(r).join("|"),c="Ctrl|Control|Shift|Alt|Cmd|Command|fn",a=new RegExp("^("+o+"|"+c+")$"),l=new RegExp("^("+c+") [/+] "),i=new RegExp("^("+[o,c,"[a-zA-Z0-9]|Click"].join("|")+")( [/+] )(.*)");e.querySelectorAll(":not(pre) > code").forEach((e=>{if(e.childElementCount>0)return;let r=e.innerText;if(a.test(r))return void(e.outerHTML=n("<kbd>"+r+"</kbd>"));if(!l.test(r))return;let t="";for(r+=" + ";i.test(r);)t+=r.replace(i,"<kbd>$1</kbd>$2"),r=r.replace(i,"$3");""===r&&(e.outerHTML=n(t.replace(/ \+ $/,"")))}))}(document);
+(e=>{const r=["Enter","Up","Down","Left","Right"],t=["&crarr;","&uarr;","&darr;","&larr;","&rarr;"];function n(e){return r.map(((r,n)=>e=e.replace(new RegExp(`>${r}<`,"g"),` title="${r+(n?" Arrow":"")}">${t[n]}<`))),e}const o="Esc|Tab|PageUp|PageDown|Space|Delete|Home|End|PrtScr?|PrintScreen|"+Array(12).fill().map(((e,r)=>"F"+(r+1))).concat(r).join("|"),a="Ctrl|Control|Shift|Alt|Cmd|Command|fn",c=new RegExp(`^(${o}|${a})$`),l=new RegExp(`^(${a}) [/+] `),i=new RegExp(`^(${o}|${a}|[a-zA-Z0-9]|Click)( [/+] )(.*)`);e.querySelectorAll(":not(pre) > code").forEach((e=>{if(e.childElementCount>0)return;let r=e.innerText;if(c.test(r))return void(e.outerHTML=n(`<kbd>${r}</kbd>`));if(!l.test(r))return;let t="";for(r+=" + ";i.test(r);)t+=r.replace(i,"<kbd>$1</kbd>$2"),r=r.replace(i,"$3");""===r&&(e.outerHTML=n(t.replace(/ \+ $/,"")))}))})(document);

package/js/number-sections.js

@@ -0,0 +1,39 @@
+// add section numbers to headings
+(d => {
+  // find the body of the article
+  const b = d.querySelector('.article, .body, article, body');
+  if (!b) return;
+  const hs = b.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  if (hs.length === 0) return;
+  // normalize Pandoc's .header-section-number class to .section-number
+  b.querySelectorAll('span.header-section-number').forEach(el => {
+    el.classList.add('section-number');
+  });
+  // already numbered?
+  if (b.querySelector('span.section-number')) {
+    // avoid Pandoc's numbering from 0 (e.g., 0.1, 0.1.1, 0.2, ...) when top-level heading is not h1
+    b.querySelectorAll('span.section-number').forEach(s => {
+      s.innerText = s.innerText.replace(/^(0\.)+/, '');
+    });
+    return;
+  }
+  let t0 = 0, t1, dict = [0, 0, 0, 0, 0, 0];
+  // generate section numbers x.x.x
+  function number_section(i) {
+    dict[i]++;
+    const n = dict.join('.').replace(/^(0\.)+|(\.0)+$/g, '').replace(/^([0-9]+)$/, '$1.');
+    return `<span class="section-number">${n}</span> `;
+  };
+  hs.forEach(h => {
+    // header level: <hN> -> N
+    t1 = parseInt(h.tagName.replace(/^h/i, ''));
+    // when moving to a higher-level heading, reset lower-level counters to 0
+    if (t1 < t0) {
+      for (let j = t1; j < dict.length; j++) {
+        dict[j] = 0;
+      }
+    }
+    h.insertAdjacentHTML('afterbegin', number_section(t1 - 1));
+    t0 = t1;
+  });
+})(document);

package/js/number-sections.min.js

@@ -0,0 +1 @@
+(e=>{const r=document.querySelector(".article, .body, article, body");if(!r)return;const n=r.querySelectorAll("h1, h2, h3, h4, h5, h6");if(0===n.length)return;if(r.querySelectorAll("span.header-section-number").forEach((e=>{e.classList.add("section-number")})),r.querySelector("span.section-number"))return void r.querySelectorAll("span.section-number").forEach((e=>{e.innerText=e.innerText.replace(/^(0\.)+/,"")}));let t,c=0,a=[0,0,0,0,0,0];n.forEach((e=>{if(t=parseInt(e.tagName.replace(/^h/i,"")),t<c)for(let e=t;e<a.length;e++)a[e]=0;e.insertAdjacentHTML("afterbegin",(a[t-1]++,`<span class="section-number">${a.join(".").replace(/^(0\.)+|(\.0)+$/g,"").replace(/^([0-9]+)$/,"$1.")}</span> `)),c=t}))})();

package/js/right-quote.js

@@ -1,5 +1,5 @@
 // right-align a quote footer if it starts with ---
 [...document.getElementsByTagName('blockquote')].forEach(quote => {
   const el = quote.lastElementChild;
-  if (el?.tagName === 'P' && /^—/.test(el.textContent)) el.style.textAlign = 'right';
+  if (el?.tagName === 'P' && /^(—|---)/.test(el.textContent)) el.style.textAlign = 'right';
 });

package/js/right-quote.min.js

@@ -1 +1 @@
-[...document.getElementsByTagName("blockquote")].forEach((t=>{const e=t.lastElementChild;"P"===e?.tagName&&/^—/.test(e.textContent)&&(e.style.textAlign="right")}));
+[...document.getElementsByTagName("blockquote")].forEach((t=>{const e=t.lastElementChild;"P"===e?.tagName&&/^(—|---)/.test(e.textContent)&&(e.style.textAlign="right")}));

package/js/sidenotes.js

@@ -0,0 +1,31 @@
+// move footnotes (ids start with fn) and citations (ids start with ref-) to sidenotes
+(d => {
+  d.querySelectorAll('.footnotes > ol > li[id^="fn"], #refs > div[id^="ref-"]').forEach(el => {
+    // find <a> that points to note id in body
+    const h = `a[href="#${el.id}"]`,
+      a = d.querySelector(`${h} > sup, sup > ${h}, .citation > ${h}`);
+    if (!a) return;
+    const a2 = a.parentNode;
+    (a.tagName === 'A' ? a : a2).removeAttribute('href');
+    const s = d.createElement('div');  // insert a side div next to a2 in body
+    s.className = 'side side-right';
+    if (/^fn/.test(el.id)) {
+      s.innerHTML = el.innerHTML;
+      // add footnote number
+      s.firstElementChild.insertAdjacentHTML('afterbegin', `<span class="bg-number">${a.innerText}</span> `);
+      s.querySelector('a[href^="#fnref"]')?.remove();  // remove backreference
+    } else {
+      s.innerHTML = el.outerHTML;
+    }
+    // insert note after the <sup> or <span> that contains a
+    a2.after(s);
+    a2.classList.add('note-ref');
+    el.remove();
+  });
+  // remove the footnote/citation section if it's empty now
+  d.querySelectorAll('.footnotes, #refs').forEach(el => {
+    /^\s*$/.test(el.innerText) && el.remove();
+  });
+  // also add side classes to TOC
+  d.getElementById('TOC')?.classList.add('side', 'side-left');
+})(document);

package/js/sidenotes.min.js

@@ -0,0 +1 @@
+(e=>{e.querySelectorAll('.footnotes > ol > li[id^="fn"], #refs > div[id^="ref-"]').forEach((t=>{const r=`a[href="#${t.id}"]`,n=e.querySelector(`${r} > sup, sup > ${r}, .citation > ${r}`);if(!n)return;const s=n.parentNode;("A"===n.tagName?n:s).removeAttribute("href");const i=e.createElement("div");i.className="side side-right",/^fn/.test(t.id)?(i.innerHTML=t.innerHTML,i.firstElementChild.insertAdjacentHTML("afterbegin",`<span class="bg-number">${n.innerText}</span> `),i.querySelector('a[href^="#fnref"]')?.remove()):i.innerHTML=t.outerHTML,s.after(i),s.classList.add("note-ref"),t.remove()})),e.querySelectorAll(".footnotes, #refs").forEach((e=>{/^\s*$/.test(e.innerText)&&e.remove()})),e.getElementById("TOC")?.classList.add("side","side-left")})(document);

package/js/toc.js

@@ -0,0 +1,49 @@
+// build TOC using headings
+(d => {
+  // find the body of the article
+  const b = d.querySelector('.article, .body, article, body');
+  if (!b) return;
+  const hs = b.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  if (hs.length === 0) return;
+
+  var toc = b.getElementById('TOC');
+  toc?.remove();  // delete and rebuild TOC if it has been generated (e.g., by Pandoc)
+  toc = d.createElement('div');
+  toc.id = 'TOC';
+
+  let li, ul;
+  let p = toc;  // the current parent into which we insert child TOC items
+  let t1, t0 = 0;  // pretend there is a top-level <h0> for the sake of convenience
+  hs.forEach(h => {
+    t1 = parseInt(h.tagName.replace(/^h/i, ''));
+    li = d.createElement('li');
+    if (t1 > t0) {
+      // lower-level header: create a new ul
+      ul = d.createElement('ul');
+      ul.appendChild(li);
+      p.appendChild(ul);
+    } else if (t1 < t0) {
+      // higher-level header: go back to upper-level ul
+      for (let j = 0; j < t0 - t1; j++) {
+        p = p.parentNode.parentNode;
+      }
+    }
+    if (t1 <= t0) p.parentNode.appendChild(li);
+    p = li;
+    const a = d.createElement('a');
+    a.innerHTML = h.innerHTML;
+    if (h.id) {
+      a.href = '#' + h.id;
+    } else {
+      // Pandoc's section divs
+      const s = h.parentNode;
+      if (s.classList.contains('section') && s.id) a.href = '#' + s.id;
+    }
+    p.appendChild(a);
+    t0 = t1;
+  });
+  b.insertBefore(toc, b.firstChild);
+
+  // check if headings are numbered
+  toc.querySelector('span.section-number') && toc.classList.add('numbered');
+})(document);

package/js/toc.min.js

@@ -0,0 +1 @@
+(e=>{const t=e.querySelector(".article, .body, article, body");if(!t)return;const r=t.querySelectorAll("h1, h2, h3, h4, h5, h6");if(0===r.length)return;var n=t.getElementById("TOC");let i,l;n?.remove(),(n=e.createElement("div")).id="TOC";let a,d=n,c=0;r.forEach((t=>{if(a=parseInt(t.tagName.replace(/^h/i,"")),i=e.createElement("li"),a>c)l=e.createElement("ul"),l.appendChild(i),d.appendChild(l);else if(a<c)for(let e=0;e<c-a;e++)d=d.parentNode.parentNode;a<=c&&d.parentNode.appendChild(i),d=i;const r=e.createElement("a");if(r.innerHTML=t.innerHTML,t.id)r.href="#"+t.id;else{const e=t.parentNode;e.classList.contains("section")&&e.id&&(r.href="#"+e.id)}d.appendChild(r),c=a})),t.insertBefore(n,t.firstChild),n.querySelector("span.section-number")&&n.classList.add("numbered")})(document);

package/package.json

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