@xiee/utils 1.3.18 → 1.3.20

package/README.md

@@ -62,6 +62,12 @@ Find `<pre>`, `<table>`, and TOC (with ID `TableOfContents`) elements and add
 the `fullwidth` class to them if they are too wide, so they can be styled
 differently (e.g., [full bleed](https://css-tricks.com/full-bleed/)).
 
+## fuse-search.js
+
+Perform client-side site searching via [Fuse.js](https://www.fusejs.io). See
+[this post](https://yihui.org/en/2023/09/fuse-search/) for an application to
+Hugo sites.
+
 ## hash-notes.js
 
 Convert HTML comments of the form `<!--# comments -->` to

package/js/fuse-search.js

@@ -0,0 +1,86 @@
+// perform searching via Fuse.js with data from /index.json
+(function(d) {
+  const input = d.querySelector('#search-input'),
+       output = d.querySelector('.search-results');
+  if (!input || !output) return;
+
+  const ds = input.dataset;
+  // load search index for Fuse.js
+  let fuse;
+  input.addEventListener('focus', e => {
+    if (fuse) return;
+    input.placeholder = ds.infoInit ||
+      'Loading search index... Please hold on.';
+    const request = new XMLHttpRequest();
+    request.responseType = 'json';
+    request.addEventListener('load', e => {
+      const res = request.response;
+      if (!res || res.length === 0) {
+        input.placeholder = ds.infoFail ||
+          'Failed to load search index!';
+        return;
+      }
+      input.placeholder = ds.infoOk || 'Type to search:';
+      input.focus();
+      fuse = new Fuse(res, {
+        keys: [{name: 'title', weight: 5}, 'content'],
+        useExtendedSearch: true,
+        includeMatches: true,
+        ignoreLocation: true,
+        threshold: 0.1
+      });
+    }, false);
+    request.open('GET', ds.indexUrl || '/index.json');
+    request.send(null);
+  });
+
+  // highlight the keyword of the maximum length in content
+  function highlight(res, key, len) {
+    let indices;
+    for (let m of res.matches) {
+      if (m.key === key) indices = m.indices;
+    }
+    const text = res.item[key];
+    if (!indices) return text.substr(0, len);
+    let p, pair, k = 0, n = Math.ceil(len / 2);
+    while (pair = indices.shift()) {
+      if (pair[1] - pair[0] >= k) {
+        p = pair;
+        k = p[1] - p[0];
+      }
+    }
+    return (p[0] - n > 0 ? '[...] ' : '') + text.substring(p[0] - n, p[0]) +
+      '<b>' + text.substring(p[0], p[1] + 1) + '</b>' +
+      text.substring(p[1] + 1, p[1] + 1 + n) +
+      (p[1] + 1 + n < text.length ? ' [...] ' : '');
+  }
+
+  // debounce the search for better performance and UX
+  function debounce(fn, delay) {
+    let timeout;
+    return function(...args) {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => fn(...args), delay);
+    };
+  }
+  const len = ds.textLength || 300,  // number of chars for each search result
+    lim = ds.limit || 50,  // max number of search results
+    delay = ds.delay || 500,  // search delay after input
+    tpl = output.firstElementChild.cloneNode(true);  // search result template
+  output.innerHTML = '';
+  function search() {
+    if (!fuse) return;
+    output.innerHTML = '';
+    // display search results in <section> and highlight keywords
+    for (let res of fuse.search(input.value, {'limit': lim})) {
+      const sec = tpl.cloneNode(true);
+      const a = sec.querySelector('a');
+      a.href = res.item.uri;
+      a.innerHTML = highlight(res, 'title', len);
+      sec.querySelector('.search-preview').innerHTML = highlight(res, 'content', len);
+      output.appendChild(sec);
+    }
+  }
+  const isMobi = /Mobi/i.test(navigator.userAgent);
+  input.addEventListener(isMobi ? 'change' : 'input', isMobi ? search : debounce(search, delay));
+})(document);

package/js/fuse-search.min.js

@@ -0,0 +1 @@
+!function(e){const t=e.querySelector("#search-input"),n=e.querySelector(".search-results");if(!t||!n)return;const i=t.dataset;let o;function r(e,t,n){let i;for(let n of e.matches)n.key===t&&(i=n.indices);const o=e.item[t];if(!i)return o.substr(0,n);let r,s,c=0,l=Math.ceil(n/2);for(;s=i.shift();)s[1]-s[0]>=c&&(r=s,c=r[1]-r[0]);return(r[0]-l>0?"[...] ":"")+o.substring(r[0]-l,r[0])+"<b>"+o.substring(r[0],r[1]+1)+"</b>"+o.substring(r[1]+1,r[1]+1+l)+(r[1]+1+l<o.length?" [...] ":"")}t.addEventListener("focus",(e=>{if(o)return;t.placeholder=i.infoInit||"Loading search index... Please hold on.";const n=new XMLHttpRequest;n.responseType="json",n.addEventListener("load",(e=>{const r=n.response;r&&0!==r.length?(t.placeholder=i.infoOk||"Type to search:",t.focus(),o=new Fuse(r,{keys:[{name:"title",weight:5},"content"],useExtendedSearch:!0,includeMatches:!0,ignoreLocation:!0,threshold:.1})):t.placeholder=i.infoFail||"Failed to load search index!"}),!1),n.open("GET",i.indexUrl||"/index.json"),n.send(null)}));const s=i.textLength||300,c=i.limit||50,l=i.delay||500,a=n.firstElementChild.cloneNode(!0);function u(){if(o){n.innerHTML="";for(let e of o.search(t.value,{limit:c})){const t=a.cloneNode(!0),i=t.querySelector("a");i.href=e.item.uri,i.innerHTML=r(e,"title",s),t.querySelector(".search-preview").innerHTML=r(e,"content",s),n.appendChild(t)}}}n.innerHTML="";const d=/Mobi/i.test(navigator.userAgent);t.addEventListener(d?"change":"input",d?u:function(e,t){let n;return function(...i){clearTimeout(n),n=setTimeout((()=>e(...i)),t)}}(u,l))}(document);

package/js/post-nav.js

@@ -1,13 +1,13 @@
-// navigate to previous/next posts by Left/Right arrows
+// navigate to previous/next posts by Left/Right arrows, and Alt + <-/-> for back/forward
 (function(d) {
   const a1 = d.querySelector('.nav-prev > a'), a2 = d.querySelector('.nav-next > a');
   d.addEventListener('keyup', function(e) {
     if (e.target.nodeName.toUpperCase() != 'BODY') return;
     let u;
-    if (a1 && e.which == 37) {  // Left arrow
-      u = a1.href;
-    } else if (a2 && e.which == 39) {  // Right arrow
-      u = a2.href;
+    if (e.key === 'ArrowLeft') {
+      e.altKey ? history.back() : (a1 && (u = a1.href));
+    } else if (e.key == 'ArrowRight') {
+      e.altKey ? history.forward() : (a2 && (u = a2.href));
     }
     if (u) window.location = u;
   });

package/js/post-nav.min.js

@@ -1 +1 @@
-!function(e){const r=e.querySelector(".nav-prev > a"),t=e.querySelector(".nav-next > a");e.addEventListener("keyup",(function(e){if("BODY"!=e.target.nodeName.toUpperCase())return;let n;r&&37==e.which?n=r.href:t&&39==e.which&&(n=t.href),n&&(window.location=n)}));const n=e.querySelectorAll(".unlist");if(0===n.length)return;if(null!==sessionStorage.getItem("hide-notes"))return n.forEach((e=>e.classList.remove("unlist")));r&&t&&(window.location=e.referrer===t.href?r.href:t.href)}(document);
+!function(e){const r=e.querySelector(".nav-prev > a"),t=e.querySelector(".nav-next > a");e.addEventListener("keyup",(function(e){if("BODY"!=e.target.nodeName.toUpperCase())return;let n;"ArrowLeft"===e.key?e.altKey?history.back():r&&(n=r.href):"ArrowRight"==e.key&&(e.altKey?history.forward():t&&(n=t.href)),n&&(window.location=n)}));const n=e.querySelectorAll(".unlist");if(0===n.length)return;if(null!==sessionStorage.getItem("hide-notes"))return n.forEach((e=>e.classList.remove("unlist")));r&&t&&(window.location=e.referrer===t.href?r.href:t.href)}(document);

package/package.json

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