@xiee/utils 1.6.8 → 1.7.0

package/README.md

@@ -126,6 +126,13 @@ class, so that highlight.js will not try to syntax highlight the code in it.
 
 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/css/faq.css

@@ -18,7 +18,7 @@
 .faq-list .anchor {
   display: none;
 }
-.faq-list > li:hover > .anchor {
+.faq-list > li:hover .anchor {
   display: inline;
 }
 .faq-list > li {

package/css/faq.min.css

@@ -1 +1 @@
-.faq-button{cursor:pointer}.faq-list>li>:first-child{display:block;cursor:pointer;background:#fafafa;margin:-.5em;padding:.5em}.faq-list>:not(.faq-clicked)>*{display:none}.faq-button{float:right;margin-left:1em}.faq-list .anchor{display:none}.faq-list>li:hover>.anchor{display:inline}.faq-list>li{border:1px solid #eee;padding:.5em}
+.faq-button{cursor:pointer}.faq-list>li>:first-child{display:block;cursor:pointer;background:#fafafa;margin:-.5em;padding:.5em}.faq-list>:not(.faq-clicked)>*{display:none}.faq-button{float:right;margin-left:1em}.faq-list .anchor{display:none}.faq-list>li:hover .anchor{display:inline}.faq-list>li{border:1px solid #eee;padding:.5em}

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