@canopy-iiif/app 0.10.31 → 0.10.32

package/lib/build/mdx.js

@@ -821,6 +821,11 @@ async function ensureFacetsRuntime() {
   const entry = `
     function ready(fn){ if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',fn,{once:true}); else fn(); }
     function parseProps(el){ try{ const s=el.querySelector('script[type="application/json"]'); if(s) return JSON.parse(s.textContent||'{}'); }catch(_){ } return {}; }
+    function buildSliderProps(iiifContent, options){
+      const props = { iiifContent };
+      if (options && typeof options === 'object') props.options = options;
+      return props;
+    }
     function rootBase(){
       try {
         var bp = (window && window.CANOPY_BASE_PATH) ? String(window.CANOPY_BASE_PATH) : '';
@@ -851,6 +856,7 @@ async function ensureFacetsRuntime() {
           const topN = Number(props.top || 3) || 3;
           const ver = await getApiVersion();
           const verQ = ver ? ('?v=' + encodeURIComponent(ver)) : '';
+          const sliderOptions = (props && typeof props.sliderOptions === 'object') ? props.sliderOptions : null;
           const res = await fetch(rootBase() + '/api/search/facets.json' + verQ).catch(()=>null);
           if(!res || !res.ok) return;
           const json = await res.json().catch(()=>null);
@@ -873,7 +879,7 @@ async function ensureFacetsRuntime() {
               const wrap = document.createElement('div');
               wrap.setAttribute('data-facet-label', entry.label);
               wrap.setAttribute('class', 'canopy-slider');
-              const ph = makeSliderPlaceholder({ iiifContent: rootBase() + '/api/facet/' + (allow.slug) + '/' + pick.valueSlug + '.json' + verQ });
+              const ph = makeSliderPlaceholder(buildSliderProps(rootBase() + '/api/facet/' + (allow.slug) + '/' + pick.valueSlug + '.json' + verQ, sliderOptions));
               if (ph) wrap.appendChild(ph);
               el.appendChild(wrap);
             });
@@ -887,7 +893,7 @@ async function ensureFacetsRuntime() {
             const wrap = document.createElement('div');
             wrap.setAttribute('data-facet-label', s.label);
             wrap.setAttribute('class', 'canopy-slider');
-            const ph = makeSliderPlaceholder({ iiifContent: rootBase() + '/api/facet/' + s.labelSlug + '/' + s.valueSlug + '.json' + verQ });
+            const ph = makeSliderPlaceholder(buildSliderProps(rootBase() + '/api/facet/' + s.labelSlug + '/' + s.valueSlug + '.json' + verQ, sliderOptions));
             if (ph) wrap.appendChild(ph);
             el.appendChild(wrap);
           });
@@ -949,59 +955,7 @@ async function ensureSliderRuntime() {
   const scriptsDir = path.join(OUT_DIR, "scripts");
   ensureDirSync(scriptsDir);
   const outFile = path.join(scriptsDir, "canopy-slider.js");
-  const entry = `
-    import CloverSlider from '@samvera/clover-iiif/slider';
-    import 'swiper/css';
-    import 'swiper/css/navigation';
-    import 'swiper/css/pagination';
-
-    function ready(fn) {
-      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn, { once: true });
-      else fn();
-    }
-    function parseProps(el) {
-      try {
-        const s = el.querySelector('script[type="application/json"]');
-        if (s) return JSON.parse(s.textContent || '{}');
-        const raw = el.getAttribute('data-props') || '{}';
-        return JSON.parse(raw);
-      } catch (_) { return {}; }
-    }
-    function mount(el){
-      try{
-        if (!el || el.getAttribute('data-canopy-slider-mounted')==='1') return;
-        const React = (window && window.React) || null;
-        const ReactDOMClient = (window && window.ReactDOMClient) || null;
-        const createRoot = ReactDOMClient && ReactDOMClient.createRoot;
-        if (!React || !createRoot) return;
-        const props = parseProps(el);
-        const root = createRoot(el);
-        root.render(React.createElement(CloverSlider, props));
-        el.setAttribute('data-canopy-slider-mounted','1');
-      } catch(_){}
-    }
-    function scan(){
-      try{ document.querySelectorAll('[data-canopy-slider]:not([data-canopy-slider-mounted="1"])').forEach(mount); }catch(_){ }
-    }
-    function observe(){
-      try{
-        const obs = new MutationObserver((muts)=>{
-          const toMount = [];
-          for (const m of muts){
-            m.addedNodes && m.addedNodes.forEach((n)=>{
-              if (!(n instanceof Element)) return;
-              if (n.matches && n.matches('[data-canopy-slider]')) toMount.push(n);
-              const inner = n.querySelectorAll ? n.querySelectorAll('[data-canopy-slider]') : [];
-              inner && inner.forEach && inner.forEach((x)=> toMount.push(x));
-            });
-          }
-          if (toMount.length) Promise.resolve().then(()=> toMount.forEach(mount));
-        });
-        obs.observe(document.documentElement || document.body, { childList: true, subtree: true });
-      }catch(_){ }
-    }
-    ready(function(){ scan(); observe(); });
-  `;
+  const entryFile = path.join(__dirname, "../components/slider-runtime-entry.js");
   const reactShim = `
     const React = (typeof window !== 'undefined' && window.React) || {};
     export default React;
@@ -1079,12 +1033,7 @@ async function ensureSliderRuntime() {
   };
   try {
     await esbuild.build({
-      stdin: {
-        contents: entry,
-        resolveDir: process.cwd(),
-        sourcefile: "canopy-slider-entry.js",
-        loader: "js",
-      },
+      entryPoints: [entryFile],
       outfile: outFile,
       platform: "browser",
       format: "iife",

package/lib/components/slider-runtime-entry.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import CloverSlider from '@samvera/clover-iiif/slider';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { mergeSliderOptions, normalizeSliderOptions } from '../../ui/src/iiif/sliderOptions.js';
+
+function ready(fn) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+function parseProps(el) {
+  try {
+    const script = el.querySelector('script[type="application/json"]');
+    if (script) return JSON.parse(script.textContent || '{}');
+    const raw = el.getAttribute('data-props') || '{}';
+    return JSON.parse(raw);
+  } catch (_) {
+    return {};
+  }
+}
+
+function withDefaults(rawProps) {
+  const props = rawProps && typeof rawProps === 'object' ? rawProps : {};
+  const className = ['canopy-slider', props.className]
+    .filter(Boolean)
+    .join(' ');
+  const mergedOptions = mergeSliderOptions(props.options);
+  return {
+    ...props,
+    className,
+    options: normalizeSliderOptions(mergedOptions),
+  };
+}
+
+function mount(el) {
+  try {
+    if (!el || el.getAttribute('data-canopy-slider-mounted') === '1') return;
+    const props = withDefaults(parseProps(el));
+    const root = createRoot(el);
+    root.render(React.createElement(CloverSlider, props));
+    el.setAttribute('data-canopy-slider-mounted', '1');
+  } catch (_) {}
+}
+
+function scan() {
+  try {
+    document
+      .querySelectorAll('[data-canopy-slider]:not([data-canopy-slider-mounted="1"])')
+      .forEach(mount);
+  } catch (_) {}
+}
+
+function observe() {
+  try {
+    const obs = new MutationObserver((mutations) => {
+      const toMount = [];
+      mutations.forEach((mutation) => {
+        mutation.addedNodes &&
+          mutation.addedNodes.forEach((node) => {
+            if (!(node instanceof Element)) return;
+            if (node.matches && node.matches('[data-canopy-slider]')) toMount.push(node);
+            const inner = node.querySelectorAll
+              ? node.querySelectorAll('[data-canopy-slider]')
+              : [];
+            inner && inner.forEach && inner.forEach((x) => toMount.push(x));
+          });
+      });
+      if (toMount.length) Promise.resolve().then(() => toMount.forEach(mount));
+    });
+    obs.observe(document.documentElement || document.body, {
+      childList: true,
+      subtree: true,
+    });
+  } catch (_) {}
+}
+
+ready(function onReady() {
+  scan();
+  observe();
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.10.31",
+  "version": "0.10.32",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/dist/index.mjs

@@ -1241,7 +1241,120 @@ var Viewer = (props) => {
 
 // ui/src/iiif/Slider.jsx
 import React17, { useEffect as useEffect3, useState as useState3 } from "react";
-var Slider = (props) => {
+
+// ui/src/iiif/sliderOptions.js
+var UNIT_TOKEN = "__canopySliderUnit";
+var UNIT_REM = "rem";
+var DEFAULT_FONT_SIZE = 16;
+var cachedRootFontSize = null;
+var sliderOptions = {
+  breakpoints: {
+    400: {
+      slidesPerView: 2,
+      spaceBetween: rem(1)
+    },
+    640: {
+      slidesPerView: 3,
+      spaceBetween: rem(1.618)
+    },
+    1024: {
+      slidesPerView: 4,
+      spaceBetween: rem(1.618)
+    }
+  }
+};
+function rem(value) {
+  const numeric = typeof value === "number" ? value : parseFloat(value);
+  return {
+    [UNIT_TOKEN]: UNIT_REM,
+    value: Number.isFinite(numeric) ? numeric : 0
+  };
+}
+function cloneBreakpoints(source) {
+  if (!source || typeof source !== "object") return void 0;
+  const clone = {};
+  Object.entries(source).forEach(([key, entry]) => {
+    clone[key] = entry && typeof entry === "object" ? { ...entry } : {};
+  });
+  return clone;
+}
+function cloneOptions(options = {}) {
+  const clone = { ...options };
+  if (options.breakpoints && typeof options.breakpoints === "object") {
+    clone.breakpoints = cloneBreakpoints(options.breakpoints);
+  }
+  return clone;
+}
+function mergeSliderOptions(overrides) {
+  const base = cloneOptions(sliderOptions);
+  const incoming = cloneOptions(overrides || {});
+  const merged = {
+    ...base,
+    ...incoming
+  };
+  if (base.breakpoints || incoming.breakpoints) {
+    merged.breakpoints = {
+      ...base.breakpoints || {},
+      ...incoming.breakpoints || {}
+    };
+  }
+  return merged;
+}
+function hasBrowserEnv() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function measureRootFontSize() {
+  if (!hasBrowserEnv()) return DEFAULT_FONT_SIZE;
+  if (cachedRootFontSize !== null) return cachedRootFontSize;
+  let size = DEFAULT_FONT_SIZE;
+  try {
+    const root = window.document && window.document.documentElement;
+    if (root && window.getComputedStyle) {
+      const computed = window.getComputedStyle(root).fontSize;
+      const parsed = parseFloat(computed);
+      if (Number.isFinite(parsed)) size = parsed;
+    }
+  } catch (_) {
+    size = DEFAULT_FONT_SIZE;
+  }
+  cachedRootFontSize = size;
+  return size;
+}
+function convertSpacing(value) {
+  if (!hasBrowserEnv()) return value;
+  if (value && typeof value === "object" && value[UNIT_TOKEN] === UNIT_REM) {
+    const remValue = typeof value.value === "number" ? value.value : parseFloat(value.value);
+    if (!Number.isFinite(remValue)) return value;
+    return remValue * measureRootFontSize();
+  }
+  return value;
+}
+function normalizeBreakpoints(breakpoints) {
+  if (!breakpoints || typeof breakpoints !== "object") return breakpoints;
+  const normalized = {};
+  Object.entries(breakpoints).forEach(([key, entry]) => {
+    const clone = entry && typeof entry === "object" ? { ...entry } : {};
+    if (Object.prototype.hasOwnProperty.call(clone, "spaceBetween")) {
+      clone.spaceBetween = convertSpacing(clone.spaceBetween);
+    }
+    normalized[key] = clone;
+  });
+  return normalized;
+}
+function normalizeSliderOptions(options) {
+  const clone = cloneOptions(options || {});
+  if (!hasBrowserEnv()) return clone;
+  if (Object.prototype.hasOwnProperty.call(clone, "spaceBetween")) {
+    clone.spaceBetween = convertSpacing(clone.spaceBetween);
+  }
+  if (clone.breakpoints) {
+    clone.breakpoints = normalizeBreakpoints(clone.breakpoints);
+  }
+  return clone;
+}
+
+// ui/src/iiif/Slider.jsx
+var Slider = (props = {}) => {
   const [CloverSlider, setCloverSlider] = useState3(null);
   useEffect3(() => {
     let mounted = true;
@@ -1249,7 +1362,6 @@ var Slider = (props) => {
     if (canUseDom) {
       import("@samvera/clover-iiif/slider").then((mod) => {
         if (!mounted) return;
-        console.log(mod);
         const Comp = mod && (mod.default || mod.Slider || mod);
         setCloverSlider(() => Comp);
       }).catch(() => {
@@ -1259,14 +1371,23 @@ var Slider = (props) => {
       mounted = false;
     };
   }, []);
+  const { className, ...rest } = props || {};
+  const sliderClassName = ["canopy-slider", className].filter(Boolean).join(" ");
+  const mergedOptions = mergeSliderOptions(rest.options);
+  const normalizedOptions = normalizeSliderOptions(mergedOptions);
+  const resolvedProps = {
+    ...rest,
+    className: sliderClassName,
+    options: normalizedOptions
+  };
   if (!CloverSlider) {
     let json = "{}";
     try {
-      json = JSON.stringify(props || {});
+      json = JSON.stringify(resolvedProps || {});
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React17.createElement("div", { className: "canopy-slider", "data-canopy-slider": "1" }, /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { className: sliderClassName, "data-canopy-slider": "1" }, /* @__PURE__ */ React17.createElement(
       "script",
       {
         type: "application/json",
@@ -1274,7 +1395,7 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React17.createElement(CloverSlider, { ...props, className: "canopy-slider" });
+  return /* @__PURE__ */ React17.createElement(CloverSlider, { ...resolvedProps });
 };
 
 // ui/src/iiif/Scroll.jsx