pagy 9.3.4 → 43.0.0.rc1

data/javascripts/pagy.mjs

@@ -1,52 +1,107 @@
 const Pagy = (() => {
-  const rjsObserver = new ResizeObserver((entries) => entries.forEach((e) => e.target.querySelectorAll(".pagy-rjs").forEach((el) => el.pagyRender())));
-  const initNav = (el, [tokens, sequels, labelSequels, trimParam]) => {
-    const container = el.parentElement ?? el;
-    const widths = Object.keys(sequels).map((w) => parseInt(w)).sort((a, b) => b - a);
+  const storageSupport = "sessionStorage" in window && "BroadcastChannel" in window, pageRe = "P ";
+  let pagy = "pagy", storage, sync, tabId;
+  if (storageSupport) {
+    storage = sessionStorage;
+    sync = new BroadcastChannel(pagy);
+    tabId = Date.now();
+    sync.addEventListener("message", (e) => {
+      if (e.data.from) {
+        const cutoffs = storage.getItem(e.data.key);
+        if (cutoffs) {
+          sync.postMessage({ to: e.data.from, key: e.data.key, str: cutoffs });
+        }
+      } else if (e.data.to) {
+        if (e.data.to == tabId) {
+          storage.setItem(e.data.key, e.data.str);
+        }
+      }
+    });
+  }
+  const rjsObserver = new ResizeObserver((entries) => entries.forEach((e) => {
+    e.target.querySelectorAll(".pagy-rjs").forEach((el) => el.render());
+  }));
+  const B64SafeEncode = (unicode) => btoa(String.fromCharCode(...new TextEncoder().encode(unicode))).replace(/[+/=]/g, (m) => m == "+" ? "-" : m == "/" ? "_" : ""), B64Decode = (base64) => new TextDecoder().decode(Uint8Array.from(atob(base64), (c) => c.charCodeAt(0)));
+  const randKey = () => Math.floor(Math.random() * 36 ** 3).toString(36);
+  const augmentKeynav = async (nav, [storageKey, pageKey, last, spliceArgs]) => {
+    let augment;
+    const browserKey = document.cookie.split(/;\s+/).find((row) => row.startsWith(pagy + "="))?.split("=")[1] ?? randKey();
+    document.cookie = pagy + "=" + browserKey;
+    if (storageKey && !(storageKey in storage)) {
+      sync.postMessage({ from: tabId, key: storageKey });
+      await new Promise((resolve) => setTimeout(() => resolve(""), 100));
+      if (!(storageKey in storage)) {
+        augment = (page) => page + "+" + last;
+      }
+    }
+    if (!augment) {
+      if (!storageKey) {
+        do {
+          storageKey = randKey();
+        } while (storageKey in storage);
+      }
+      const data = storage.getItem(storageKey), cutoffs = data ? JSON.parse(data) : [undefined];
+      if (spliceArgs) {
+        cutoffs.splice(...spliceArgs);
+        storage.setItem(storageKey, JSON.stringify(cutoffs));
+      }
+      augment = (page) => {
+        const pageNum = parseInt(page);
+        return B64SafeEncode(JSON.stringify([
+          browserKey,
+          storageKey,
+          pageNum,
+          cutoffs.length,
+          cutoffs[pageNum - 1],
+          cutoffs[pageNum]
+        ]));
+      };
+    }
+    for (const a of nav.querySelectorAll("a[href]")) {
+      const url = a.href, re = new RegExp(`(?<=\\?.*)\\b${pageKey}=(\\d+)`);
+      a.href = url.replace(re, pageKey + "=" + augment(url.match(re)[1]));
+    }
+    return augment;
+  };
+  const buildNavJs = (nav, [
+    [before, anchor, current, gap, after],
+    [widths, series, labels],
+    keynavArgs
+  ]) => {
+    const parent = nav.parentElement;
     let lastWidth = -1;
-    const fillIn = (a, page, label) => a.replace(/__pagy_page__/g, page).replace(/__pagy_label__/g, label);
-    (el.pagyRender = function() {
-      const width = widths.find((w) => w < container.clientWidth) || 0;
-      if (width === lastWidth) {
+    (nav.render = () => {
+      const index = widths.findIndex((w) => w < parent.clientWidth);
+      if (widths[index] === lastWidth) {
         return;
       }
-      let html = tokens.before;
-      const series = sequels[width.toString()];
-      const labels = labelSequels?.[width.toString()] ?? series.map((l) => l.toString());
-      series.forEach((item, i) => {
-        const label = labels[i];
-        let filled;
-        if (typeof item === "number") {
-          filled = fillIn(tokens.a, item.toString(), label);
-        } else if (item === "gap") {
-          filled = tokens.gap;
-        } else {
-          filled = fillIn(tokens.current, item, label);
-        }
-        html += typeof trimParam === "string" && item == 1 ? trim(filled, trimParam) : filled;
+      let html = before;
+      series[index].forEach((item, i) => {
+        html += item == "gap" ? gap : (typeof item == "number" ? anchor.replace(pageRe, item) : current).replace("L<", labels?.[index][i] ?? item + "<");
       });
-      html += tokens.after;
-      el.innerHTML = "";
-      el.insertAdjacentHTML("afterbegin", html);
-      lastWidth = width;
+      html += after;
+      nav.innerHTML = "";
+      nav.insertAdjacentHTML("afterbegin", html);
+      lastWidth = widths[index];
+      if (keynavArgs && storageSupport) {
+        augmentKeynav(nav, keynavArgs);
+      }
     })();
-    if (el.classList.contains("pagy-rjs")) {
-      rjsObserver.observe(container);
+    if (nav.classList.contains(pagy + "-rjs")) {
+      rjsObserver.observe(parent);
     }
   };
-  const initCombo = (el, [url_token, trimParam]) => initInput(el, (inputValue) => [inputValue, url_token.replace(/__pagy_page__/, inputValue)], trimParam);
-  const initSelector = (el, [from, url_token, trimParam]) => {
-    initInput(el, (inputValue) => {
-      const page = Math.max(Math.ceil(from / parseInt(inputValue)), 1).toString();
-      const url = url_token.replace(/__pagy_page__/, page).replace(/__pagy_limit__/, inputValue);
-      return [page, url];
-    }, trimParam);
+  const initInputNavJs = async (nav, [url_token, keynavArgs]) => {
+    const augment = keynavArgs && storageSupport ? await augmentKeynav(nav, keynavArgs) : (page) => page;
+    initInput(nav, (inputValue) => url_token.replace(pageRe, augment(inputValue)));
+  };
+  const initLimitTagJs = (span, [from, url_token]) => {
+    initInput(span, (inputValue) => {
+      return url_token.replace(pageRe, Math.max(Math.ceil(from / parseInt(inputValue)), 1)).replace("L ", inputValue);
+    });
   };
-  const initInput = (el, getVars, trimParam) => {
-    const input = el.querySelector("input");
-    const link = el.querySelector("a");
-    const initial = input.value;
-    const action = function() {
+  const initInput = (element, getUrl) => {
+    const input = element.querySelector("input"), link = element.querySelector("a"), initial = input.value, action = () => {
       if (input.value === initial) {
         return;
       }
@@ -56,42 +111,35 @@ const Pagy = (() => {
         input.select();
         return;
       }
-      let [page, url] = getVars(input.value);
-      if (typeof trimParam === "string" && page === "1") {
-        url = trim(url, trimParam);
-      }
-      link.href = url;
+      link.href = getUrl(input.value);
       link.click();
     };
-    ["change", "focus"].forEach((e) => input.addEventListener(e, () => input.select()));
+    input.addEventListener("focus", () => input.select());
     input.addEventListener("focusout", action);
     input.addEventListener("keypress", (e) => {
-      if (e.key === "Enter") {
+      if (e.key == "Enter") {
         action();
       }
     });
   };
-  const trim = (a, param) => a.replace(new RegExp(`[?&]${param}=1\\b(?!&)|\\b${param}=1&`), "");
   return {
-    version: "9.3.4",
+    version: "43.0.0.rc1",
     init(arg) {
-      const target = arg instanceof Element ? arg : document;
-      const elements = target.querySelectorAll("[data-pagy]");
-      for (const el of elements) {
+      const target = arg instanceof HTMLElement ? arg : document, elements = target.querySelectorAll("[data-pagy]");
+      for (const element of elements) {
         try {
-          const uint8array = Uint8Array.from(atob(el.getAttribute("data-pagy")), (c) => c.charCodeAt(0));
-          const [keyword, ...args] = JSON.parse(new TextDecoder().decode(uint8array));
-          if (keyword === "nav") {
-            initNav(el, args);
-          } else if (keyword === "combo") {
-            initCombo(el, args);
-          } else if (keyword === "selector") {
-            initSelector(el, args);
-          } else {
-            console.warn("Skipped Pagy.init() for: %o\nUnknown keyword '%s'", el, keyword);
+          const [helperId, ...args] = JSON.parse(B64Decode(element.getAttribute("data-pagy")));
+          if (helperId == "k") {
+            augmentKeynav(element, ...args);
+          } else if (helperId == "snj") {
+            buildNavJs(element, args);
+          } else if (helperId == "inj") {
+            initInputNavJs(element, args);
+          } else if (helperId == "ltj") {
+            initLimitTagJs(element, args);
           }
         } catch (err) {
-          console.warn("Skipped Pagy.init() for: %o\n%s", el, err);
+          console.warn("Pagy.init: %o\n%s", element, err);
         }
       }
     }