@xiee/utils 1.6.9 → 1.8.0

package/README.md

@@ -122,10 +122,21 @@ expressions (by default, MathJax ignores math in `<code>`).
 Add the `nohighlight` class to `<code>` in `<pre>` when it does not have a
 class, so that highlight.js will not try to syntax highlight the code in it.
 
+## number-captions.js
+
+Number figure and table captions.
+
 ## number-sections.js
 
 Find all section headings (`h1` - `h6`) and number them.
 
+## ol-id.js
+
+Add IDs of the form `li-N` to items in ordered lists, where `N` is the index of
+a list item. This makes it possible to reference or locate a specific item on a
+page by a hash in the URL. If you hold `Alt` and click on an item, you will get
+the URL with the hash in the address bar of your browser.
+
 ## render-katex.js
 
 Simply run `renderMathInElement(document.body)` to render math expression using

package/js/faq.js

@@ -29,11 +29,11 @@
 
     // add anchor links after questions
     for (let i = 0; i < lis.length; i++) {
-      let li = lis[i], hash = 'faq-' + (id ? id + '-' : '') + (i + 1);
+      let li = lis[i];
+      li.id = 'faq-' + (id ? id + '-' : '') + (i + 1);
       let p = li.firstElementChild;
-      p.innerHTML += ' <span class="anchor" id="' + hash +
-        '"><a href="#' + hash + '">#</a></span>';
-      if (location.hash === '#' + hash) {
+      p.insertAdjacentHTML('beforeend', ` <span class="anchor"><a href="#${li.id}">#</a></span>`);
+      if (location.hash === '#' + li.id) {
         li.scrollIntoView();
         li.classList.add(cls_clicked);
       }

package/js/faq.min.js

@@ -1 +1 @@
-(t=>{const n="faq-list",e="faq-clicked";function l(l,o){const c=l.children;if(0===c.length)return;for(let t of c)if(t.childElementCount<2)return;let i=l.classList;if(i.length>0&&!i.contains(n))return;i.add(n);const s=t.createElement("span");let a=!1;s.className="faq-button",s.innerText="⊕",s.onclick=function(){a=!a,this.innerText=a?"⊖":"⊕";for(const t of l.children)t.classList.toggle(e,a)},l.before(s);for(let t=0;t<c.length;t++){let n=c[t],l="faq-"+(o?o+"-":"")+(t+1),i=n.firstElementChild;i.innerHTML+=' <span class="anchor" id="'+l+'"><a href="#'+l+'">#</a></span>',location.hash==="#"+l&&(n.scrollIntoView(),n.classList.add(e)),i.onclick=function(t){n.classList.toggle(e)}}}const o=t.querySelectorAll(["div","main","section","article"].map((t=>t+":not(.footnotes) > ol")).join(","));for(let t=0;t<o.length;t++){l(o[t],o.length>1?t+1:0)}})(document);
+(t=>{const e="faq-list",n="faq-clicked";function l(l,o){const i=l.children;if(0===i.length)return;for(let t of i)if(t.childElementCount<2)return;let c=l.classList;if(c.length>0&&!c.contains(e))return;c.add(e);const s=t.createElement("span");let a=!1;s.className="faq-button",s.innerText="⊕",s.onclick=function(){a=!a,this.innerText=a?"⊖":"⊕";for(const t of l.children)t.classList.toggle(n,a)},l.before(s);for(let t=0;t<i.length;t++){let e=i[t];e.id="faq-"+(o?o+"-":"")+(t+1);let l=e.firstElementChild;l.insertAdjacentHTML("beforeend",` <span class="anchor"><a href="#${e.id}">#</a></span>`),location.hash==="#"+e.id&&(e.scrollIntoView(),e.classList.add(n)),l.onclick=function(t){e.classList.toggle(n)}}}const o=t.querySelectorAll(["div","main","section","article"].map((t=>t+":not(.footnotes) > ol")).join(","));for(let t=0;t<o.length;t++){l(o[t],o.length>1?t+1:0)}})(document);

package/js/number-captions.js

@@ -0,0 +1,18 @@
+// number figure and table captions
+
+// config options via data-foo attributes of this <script>:
+//   * data-colon: the colon character (':' by default);
+//   * data-fig-label: label for figure captions ('Figure ' by default)
+//   * data-tab-label: lable for table captions ('Table ' by default) 
+(d => {
+  const cfg = d.currentScript?.dataset, colon = cfg?.colon || ':';
+  function NUM(target, label) {
+    d.querySelectorAll(target).forEach((el, i) => {
+      // do not number it again if already numbered
+      el.querySelector('.cap-num') ||
+        el.insertAdjacentHTML('afterbegin', `<span class="cap-num">${label}${i + 1}${colon}</span> `);
+    });
+  }
+  NUM('figure > figcaption, .figure > p.caption, .float > .figcaption', cfg?.figLabel || 'Figure ');
+  NUM('table > caption', cfg?.tabLabel || 'Table ');
+})(document);

package/js/number-captions.min.js

@@ -0,0 +1 @@
+(a=>{const e=a.currentScript?.dataset,t=e?.colon||":";function c(e,c){a.querySelectorAll(e).forEach(((a,e)=>{a.querySelector(".cap-num")||a.insertAdjacentHTML("afterbegin",`<span class="cap-num">${c}${e+1}${t}</span> `)}))}c("figure > figcaption, .figure > p.caption, .float > .figcaption",e?.figLabel||"Figure "),c("table > caption",e?.tabLabel||"Table ")})(document);

package/js/ol-id.js

@@ -0,0 +1,23 @@
+// add ID to <ol> items so that they can be referenced via URL hashes like #li-N
+((d) => {
+  // add IDs to top-level <ol>s
+  const ols = d.querySelectorAll(':not(li) > ol');
+  ols.forEach((ol, i) => {
+    ol.querySelectorAll(':scope > li').forEach((li, j) => {
+      if (!li.id) li.id = 'li-' + (ols.length > 1 ? i + 1  + '-' : '') + (j + 1);
+    });
+  });
+  // add IDs to all <ol>s
+  d.querySelectorAll('ol').forEach((ol, i) => {
+    let l = ol.parentNode, id, p;  // p: ID prefix
+    if (l?.tagName === 'LI') id = l.id;
+    p = (id ? id : 'li-' + (i + 1)) + '-';
+    ol.querySelectorAll(':scope > li').forEach((li, j) => {
+      if (!li.id) li.id = p + (j + 1);
+      // Alt + Click => adding hash to URL
+      li.addEventListener('click', e => {
+        e.altKey && (location.hash = li.id, e.stopPropagation());
+      });
+    });
+  });
+})(document);

package/js/ol-id.min.js

@@ -0,0 +1 @@
+(e=>{const l=e.querySelectorAll(":not(li) > ol");l.forEach(((e,o)=>{e.querySelectorAll(":scope > li").forEach(((e,t)=>{e.id||(e.id="li-"+(l.length>1?o+1+"-":"")+(t+1))}))})),e.querySelectorAll("ol").forEach(((e,l)=>{let o,t,c=e.parentNode;"LI"===c?.tagName&&(o=c.id),t=(o||"li-"+(l+1))+"-",e.querySelectorAll(":scope > li").forEach(((e,l)=>{e.id||(e.id=t+(l+1)),e.addEventListener("click",(l=>{l.altKey&&(location.hash=e.id,l.stopPropagation())}))}))}))})(document);

package/package.json

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