@xiee/utils 1.3.18 → 1.3.19

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,87 @@
+// 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;
+    let res, sec, u;
+    output.innerHTML = '';
+    // display search results in <section> and highlight keywords
+    for (res of fuse.search(input.value, {'limit': lim})) {
+      sec = tpl.cloneNode(true);
+      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 r;function o(e,t,n){let i;for(let n of e.matches)n.key===t&&(i=n.indices);const r=e.item[t];if(!i)return r.substr(0,n);let o,s,l=0,c=Math.ceil(n/2);for(;s=i.shift();)s[1]-s[0]>=l&&(o=s,l=o[1]-o[0]);return(o[0]-c>0?"[...] ":"")+r.substring(o[0]-c,o[0])+"<b>"+r.substring(o[0],o[1]+1)+"</b>"+r.substring(o[1]+1,o[1]+1+c)+(o[1]+1+c<r.length?" [...] ":"")}t.addEventListener("focus",(e=>{if(r)return;t.placeholder=i.infoInit||"Loading search index... Please hold on.";const n=new XMLHttpRequest;n.responseType="json",n.addEventListener("load",(e=>{const o=n.response;o&&0!==o.length?(t.placeholder=i.infoOk||"Type to search:",t.focus(),r=new Fuse(o,{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,l=i.limit||50,c=i.delay||500,u=n.firstElementChild.cloneNode(!0);function d(){if(!r)return;let e,i;for(e of(n.innerHTML="",r.search(t.value,{limit:l})))i=u.cloneNode(!0),a=i.querySelector("a"),a.href=e.item.uri,a.innerHTML=o(e,"title",s),i.querySelector(".search-preview").innerHTML=o(e,"content",s),n.appendChild(i)}n.innerHTML="";const h=/Mobi/i.test(navigator.userAgent);t.addEventListener(h?"change":"input",h?d:function(e,t){let n;return function(...i){clearTimeout(n),n=setTimeout((()=>e(...i)),t)}}(d,c))}(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.19",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"