@canopy-iiif/app 1.10.1 → 1.10.4

package/package.json

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

package/ui/dist/index.mjs

@@ -46547,6 +46547,15 @@ function ReferencedManifestCard({
 var DAY_MS = 24 * 60 * 60 * 1e3;
 var DEFAULT_TRACK_HEIGHT = 640;
 var MIN_HEIGHT_PER_POINT = 220;
+var SCALE_MODES = {
+  TIME: "time",
+  UNIFORM: "uniform"
+};
+var ALIGN_OPTIONS = {
+  CENTER: "center",
+  LEFT: "left",
+  RIGHT: "right"
+};
 function getThresholdMs(threshold, granularity) {
   const value = Number(threshold);
   if (!Number.isFinite(value) || value <= 0) return 0;
@@ -46736,6 +46745,8 @@ function Timeline({
   locale: localeProp = "en-US",
   height = DEFAULT_TRACK_HEIGHT,
   threshold: thresholdProp = null,
+  scale: scale2 = SCALE_MODES.TIME,
+  align = ALIGN_OPTIONS.CENTER,
   steps = null,
   points: pointsProp,
   __canopyTimeline: payload = null,
@@ -46770,20 +46781,24 @@ function Timeline({
   );
   const spanStart = effectiveRange.startDate.getTime();
   const span = effectiveRange.span;
+  const scaleValue = scale2 === SCALE_MODES.UNIFORM ? SCALE_MODES.UNIFORM : SCALE_MODES.TIME;
+  const useUniformSpacing = scaleValue === SCALE_MODES.UNIFORM;
+  const alignValue = align === ALIGN_OPTIONS.LEFT ? ALIGN_OPTIONS.LEFT : align === ALIGN_OPTIONS.RIGHT ? ALIGN_OPTIONS.RIGHT : ALIGN_OPTIONS.CENTER;
+  const enforcedSide = alignValue === ALIGN_OPTIONS.LEFT ? "right" : alignValue === ALIGN_OPTIONS.RIGHT ? "left" : null;
   const pointsWithPosition = React41.useMemo(() => {
     if (!sanitizedPoints.length) return [];
     return sanitizedPoints.map((point2, index) => {
       const timestamp = point2.meta.timestamp;
       const fallbackProgress = sanitizedPoints.length > 1 ? index / (sanitizedPoints.length - 1) : 0;
-      const progress = Number.isFinite(timestamp) ? clampProgress((timestamp - spanStart) / span) : fallbackProgress;
-      const side = point2.side || (index % 2 === 0 ? "left" : "right");
+      const progress = useUniformSpacing ? fallbackProgress : Number.isFinite(timestamp) ? clampProgress((timestamp - spanStart) / span) : fallbackProgress;
+      const side = enforcedSide || point2.side || (index % 2 === 0 ? "left" : "right");
       return {
         ...point2,
         progress,
         side
       };
     });
-  }, [sanitizedPoints, spanStart, span]);
+  }, [sanitizedPoints, spanStart, span, useUniformSpacing, enforcedSide]);
   const [activeId, setActiveId] = React41.useState(
     () => getActivePointId(pointsWithPosition)
   );
@@ -46830,7 +46845,11 @@ function Timeline({
     });
   }, []);
   const trackHeight = resolveTrackHeight(height, pointsWithPosition.length);
-  const containerClasses = ["canopy-timeline", className].filter(Boolean).join(" ");
+  const containerClasses = [
+    "canopy-timeline",
+    alignValue ? `canopy-timeline--align-${alignValue}` : "",
+    className
+  ].filter(Boolean).join(" ");
   const rangeLabel = formatRangeLabel(effectiveRange);
   function renderPointEntry(point2) {
     if (!point2) return null;
@@ -48453,6 +48472,55 @@ var INLINE_SCRIPT = `(() => {
     emitModalState(previous, 'close');
   }
 
+  function closeModalFromBackground(modal) {
+    if (!modal) return;
+    const closeId = modal.getAttribute('data-canopy-gallery-close');
+    const targetHash = closeId ? '#' + closeId : '';
+    if (targetHash) {
+      if (window.location.hash === targetHash) {
+        try {
+          window.location.hash = targetHash;
+        } catch (_) {}
+      } else {
+        window.location.hash = targetHash;
+      }
+    } else {
+      window.location.hash = '';
+    }
+  }
+
+  function shouldCloseFromBackground(event, modal) {
+    if (!event || !modal) return false;
+    const target = event.target;
+    if (!target) return false;
+    const panel = modal.querySelector('.canopy-gallery__modal-panel');
+    if (panel && panel.contains(target)) return false;
+    const actions = modal.querySelector('.canopy-gallery__modal-actions');
+    if (actions && actions.contains(target)) return false;
+    if (target === modal) return true;
+    const scrim = modal.querySelector('.canopy-gallery__modal-scrim');
+    if (scrim && scrim.contains(target)) return true;
+    return false;
+  }
+
+  function bindModalDismissal(modal) {
+    if (!modal || modal.getAttribute('data-canopy-gallery-dismiss-bound') === '1') {
+      return;
+    }
+    modal.setAttribute('data-canopy-gallery-dismiss-bound', '1');
+    modal.addEventListener('click', function (event) {
+      if (!shouldCloseFromBackground(event, modal)) return;
+      event.preventDefault();
+      closeModalFromBackground(modal);
+    });
+  }
+
+  function bindModalDismissals() {
+    const modals = document.querySelectorAll('[data-canopy-gallery-modal]');
+    if (!modals || !modals.length) return;
+    Array.prototype.forEach.call(modals, bindModalDismissal);
+  }
+
   function modalFromHash() {
     const id = window.location.hash.replace(/^#/, '');
     if (!id) return null;
@@ -48736,10 +48804,12 @@ var INLINE_SCRIPT = `(() => {
   window.addEventListener('pageshow', function () {
     syncFromHash();
     bindGalleryNavs();
+    bindModalDismissals();
     refreshGalleryNavs({reveal: true});
   });
   syncFromHash();
   bindGalleryNavs();
+  bindModalDismissals();
   refreshGalleryNavs({reveal: true});
 })()`;
 var galleryInstanceCounter = 0;
@@ -49107,7 +49177,7 @@ function GalleryItem() {
 GalleryItem.displayName = "GalleryItem";
 function normalizePopupSize(value) {
   const normalized = String(value || "full").toLowerCase();
-  return normalized === "medium" ? "medium" : "full";
+  return normalized === "window" ? "window" : "full";
 }
 function Gallery({
   children,
@@ -49131,7 +49201,7 @@ function Gallery({
   const orderedItems = orderMode === "random" ? shuffleItems(items) : items;
   const rootClassName = [
     "canopy-gallery",
-    popupMode === "medium" ? "canopy-gallery--popup-medium" : "canopy-gallery--popup-full",
+    popupMode === "window" ? "canopy-gallery--popup-window" : "canopy-gallery--popup-full",
     className
   ].filter(Boolean).join(" ");
   const navGroupName = `${galleryId}-nav`;