@canopy-iiif/app 1.10.0 → 1.10.1

package/lib/components/image-story-runtime-entry.js

@@ -1,5 +1,9 @@
 import { mountImageStory } from '../../ui/dist/index.mjs';
 
+const IMAGE_STORY_SELECTOR = '[data-canopy-image-story]';
+const nodeStates = new WeakMap();
+const SIZE_EPSILON = 1;
+
 function ready(fn) {
   if (typeof document === 'undefined') return;
   if (document.readyState === 'loading') {
@@ -20,19 +24,161 @@ function parseProps(node) {
   }
 }
 
+function getNodeState(node) {
+  if (!node) return null;
+  let state = nodeStates.get(node);
+  if (!state) {
+    state = {
+      mounted: false,
+      cleanup: null,
+      resizeObserver: null,
+      pollId: null,
+      watching: false,
+      props: null,
+      lastSize: null,
+    };
+    nodeStates.set(node, state);
+  }
+  return state;
+}
+
+function disconnectWatchers(state) {
+  if (!state) return;
+  if (state.resizeObserver) {
+    try {
+      state.resizeObserver.disconnect();
+    } catch (_) {}
+    state.resizeObserver = null;
+  }
+  if (state.pollId && typeof window !== 'undefined') {
+    window.clearTimeout(state.pollId);
+    state.pollId = null;
+  }
+  state.watching = false;
+}
+
+function destroyNode(node, state) {
+  const currentState = state || getNodeState(node);
+  if (!currentState) return;
+  disconnectWatchers(currentState);
+  if (currentState.cleanup) {
+    try {
+      currentState.cleanup();
+    } catch (_) {}
+    currentState.cleanup = null;
+  }
+  currentState.mounted = false;
+}
+
+function measureSize(node) {
+  if (!node) return null;
+  const rect = node.getBoundingClientRect();
+  const width = rect?.width || node.offsetWidth || node.clientWidth || 0;
+  const height = rect?.height || node.offsetHeight || node.clientHeight || 0;
+  return { width, height };
+}
+
+function hasUsableSize(node, state) {
+  const size = measureSize(node);
+  if (!size) return false;
+  const usable = size.width > 2 && size.height > 2;
+  if (usable && state) {
+    state.lastSize = size;
+  }
+  return usable;
+}
+
+function needsSizeRefresh(node, state) {
+  if (!node || !state) return false;
+  const size = measureSize(node);
+  if (!size) return false;
+  if (size.width <= 2 || size.height <= 2) {
+    return true;
+  }
+  if (!state.lastSize) {
+    state.lastSize = size;
+    return true;
+  }
+  const widthDelta = Math.abs(size.width - state.lastSize.width);
+  const heightDelta = Math.abs(size.height - state.lastSize.height);
+  if (widthDelta > SIZE_EPSILON || heightDelta > SIZE_EPSILON) {
+    state.lastSize = size;
+    return true;
+  }
+  return false;
+}
+
+function attemptMount(node, state) {
+  if (!node || !state || state.mounted) return false;
+  if (!hasUsableSize(node, state)) return false;
+  state.mounted = true;
+  disconnectWatchers(state);
+  const props = state.props || parseProps(node);
+  Promise.resolve(mountImageStory(node, props)).then((destroy) => {
+    if (typeof destroy === 'function') {
+      state.cleanup = destroy;
+    } else {
+      state.cleanup = null;
+    }
+  });
+  return true;
+}
+
+function scheduleWatchers(node, state, tryMount) {
+  if (!node || !state || state.watching) return;
+  if (typeof window === 'undefined') return;
+  state.watching = true;
+  if (typeof window !== 'undefined' && typeof window.ResizeObserver === 'function') {
+    state.resizeObserver = new window.ResizeObserver(() => {
+      if (state.mounted) return;
+      tryMount();
+    });
+    try {
+      state.resizeObserver.observe(node);
+    } catch (_) {}
+  }
+  const schedulePoll = () => {
+    if (state.mounted) return;
+    state.pollId = window.setTimeout(() => {
+      state.pollId = null;
+      if (!tryMount()) {
+        schedulePoll();
+      }
+    }, 200);
+  };
+  schedulePoll();
+}
+
+function startMountProcess(node) {
+  const state = getNodeState(node);
+  if (!state) return;
+  state.props = parseProps(node);
+  const tryMount = () => attemptMount(node, state);
+  if (!tryMount()) {
+    scheduleWatchers(node, state, tryMount);
+  }
+}
+
 function mount(node) {
-  if (!node || node.__canopyImageStoryMounted) return;
-  try {
-    const props = parseProps(node);
-    mountImageStory(node, props);
-    node.__canopyImageStoryMounted = true;
-  } catch (_) {}
+  if (!node) return;
+  const state = getNodeState(node);
+  if (!state || state.bound) return;
+  state.bound = true;
+  startMountProcess(node);
+}
+
+function remount(node) {
+  const state = getNodeState(node);
+  if (!state) return;
+  state.props = parseProps(node);
+  destroyNode(node, state);
+  startMountProcess(node);
 }
 
 function scan() {
   try {
     document
-      .querySelectorAll('[data-canopy-image-story]')
+      .querySelectorAll(IMAGE_STORY_SELECTOR)
       .forEach((node) => mount(node));
   } catch (_) {}
 }
@@ -45,11 +191,11 @@ function observe() {
         mutation.addedNodes &&
           mutation.addedNodes.forEach((node) => {
             if (!(node instanceof Element)) return;
-            if (node.matches && node.matches('[data-canopy-image-story]')) {
+            if (node.matches && node.matches(IMAGE_STORY_SELECTOR)) {
               toMount.push(node);
             }
             const inner = node.querySelectorAll
-              ? node.querySelectorAll('[data-canopy-image-story]')
+              ? node.querySelectorAll(IMAGE_STORY_SELECTOR)
               : [];
             inner && inner.forEach && inner.forEach((el) => toMount.push(el));
           });
@@ -63,7 +209,41 @@ function observe() {
   } catch (_) {}
 }
 
+function refreshModal(modal) {
+  if (!modal || typeof modal.querySelectorAll !== 'function') return;
+  const nodes = modal.querySelectorAll(IMAGE_STORY_SELECTOR);
+  if (!nodes || !nodes.length) return;
+  Array.prototype.forEach.call(nodes, (node) => {
+    const state = getNodeState(node);
+    if (!state || !state.mounted) return;
+    if (needsSizeRefresh(node, state)) {
+      remount(node);
+    }
+  });
+}
+
+function handleGalleryModalChange(event) {
+  if (!event || typeof document === 'undefined') return;
+  const detail = event.detail || {};
+  if (detail.state !== 'open') return;
+  let modal = detail.modal;
+  if (!modal && detail.modalId) {
+    modal = document.getElementById(detail.modalId);
+  }
+  if (modal) {
+    refreshModal(modal);
+  }
+}
+
+function bindGalleryListener() {
+  if (typeof window === 'undefined' || typeof window.addEventListener !== 'function') {
+    return;
+  }
+  window.addEventListener('canopy:gallery:modal-change', handleGalleryModalChange);
+}
+
 ready(function onReady() {
   scan();
   observe();
+  bindGalleryListener();
 });

package/package.json

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

package/ui/dist/index.mjs

@@ -45483,6 +45483,7 @@ async function mountImageStory(element, props = {}) {
 // ui/src/iiif/ImageStory.jsx
 var DEFAULT_IMAGE_STORY_HEIGHT = 600;
 var NUMERIC_HEIGHT_PATTERN = /^[+-]?(?:\d+|\d*\.\d+)$/;
+var SIZE_EPSILON = 1;
 function resolveContainerHeight(value) {
   if (typeof value === "number" && Number.isFinite(value)) {
     return `${value}px`;
@@ -45533,6 +45534,7 @@ var ImageStory = (props = {}) => {
     let mounted = false;
     let resizeObserver = null;
     let pollId = null;
+    let lastKnownSize = null;
     const payload = sanitizeImageStoryProps({
       iiifContent,
       disablePanAndZoom,
@@ -45561,12 +45563,39 @@ var ImageStory = (props = {}) => {
         pollId = null;
       }
     };
-    const hasUsableSize = () => {
-      if (!node) return false;
+    const measureSize = () => {
+      if (!node) return null;
       const rect = node.getBoundingClientRect();
-      const width = (rect == null ? void 0 : rect.width) || node.offsetWidth || node.clientWidth;
-      const height2 = (rect == null ? void 0 : rect.height) || node.offsetHeight || node.clientHeight;
-      return width > 2 && height2 > 2;
+      const width = (rect == null ? void 0 : rect.width) || node.offsetWidth || node.clientWidth || 0;
+      const height2 = (rect == null ? void 0 : rect.height) || node.offsetHeight || node.clientHeight || 0;
+      return { width, height: height2 };
+    };
+    const hasUsableSize = () => {
+      const size = measureSize();
+      if (!size) return false;
+      const usable = size.width > 2 && size.height > 2;
+      if (usable) {
+        lastKnownSize = size;
+      }
+      return usable;
+    };
+    const hasMeaningfulSizeChange = () => {
+      const size = measureSize();
+      if (!size) return false;
+      if (size.width <= 2 || size.height <= 2) {
+        return true;
+      }
+      if (!lastKnownSize) {
+        lastKnownSize = size;
+        return true;
+      }
+      const widthDelta = Math.abs(size.width - lastKnownSize.width);
+      const heightDelta = Math.abs(size.height - lastKnownSize.height);
+      if (widthDelta > SIZE_EPSILON || heightDelta > SIZE_EPSILON) {
+        lastKnownSize = size;
+        return true;
+      }
+      return false;
     };
     const mountViewer = () => {
       if (!node || mounted || cancelled) return false;
@@ -45582,8 +45611,9 @@ var ImageStory = (props = {}) => {
       });
       return true;
     };
-    if (!mountViewer()) {
-      if (typeof window !== "undefined" && typeof window.ResizeObserver === "function") {
+    const scheduleWatchers = () => {
+      if (mounted || cancelled) return;
+      if (!resizeObserver && typeof window !== "undefined" && typeof window.ResizeObserver === "function") {
         resizeObserver = new window.ResizeObserver(() => {
           if (mounted || cancelled) return;
           mountViewer();
@@ -45602,12 +45632,48 @@ var ImageStory = (props = {}) => {
           }
         }, 200);
       };
-      schedulePoll();
+      if (!pollId) {
+        schedulePoll();
+      }
+    };
+    const beginMounting = () => {
+      if (!mountViewer()) {
+        scheduleWatchers();
+      }
+    };
+    const remountViewer = () => {
+      if (cancelled) return;
+      if (mounted) {
+        mounted = false;
+        destroyCleanup();
+      }
+      beginMounting();
+    };
+    beginMounting();
+    const handleGalleryModalChange = (event) => {
+      if (!node || !event || typeof document === "undefined") return;
+      const detail = event.detail || {};
+      if (detail.state !== "open") return;
+      const modal = detail.modal || (detail.modalId ? document.getElementById(detail.modalId) : null);
+      if (!modal || !modal.contains(node)) return;
+      if (!mounted) return;
+      if (hasMeaningfulSizeChange()) {
+        remountViewer();
+      }
+    };
+    if (typeof window !== "undefined" && window.addEventListener) {
+      window.addEventListener("canopy:gallery:modal-change", handleGalleryModalChange);
     }
     return () => {
       cancelled = true;
       disconnectWatchers();
       destroyCleanup();
+      if (typeof window !== "undefined" && window.removeEventListener) {
+        window.removeEventListener(
+          "canopy:gallery:modal-change",
+          handleGalleryModalChange
+        );
+      }
     };
   }, [iiifContent, disablePanAndZoom, pointOfInterestSvgUrl, viewerOptions]);
   return /* @__PURE__ */ React27.createElement(
@@ -48194,6 +48260,23 @@ var INLINE_SCRIPT = `(() => {
   const NAV_OPTION_SELECTOR = '[data-canopy-gallery-nav-option]';
   const NAV_ITEM_SELECTOR = '[data-canopy-gallery-nav-item]';
 
+  function emitModalState(modal, state) {
+    if (!modal || typeof window === 'undefined') return;
+    const detail = { modalId: modal.id || '', modal, state };
+    try {
+      const EventCtor = window.CustomEvent || CustomEvent;
+      if (typeof EventCtor === 'function') {
+        window.dispatchEvent(new EventCtor('canopy:gallery:modal-change', { detail }));
+        return;
+      }
+    } catch (_) {}
+    try {
+      const fallback = document.createEvent('CustomEvent');
+      fallback.initCustomEvent('canopy:gallery:modal-change', true, true, detail);
+      window.dispatchEvent(fallback);
+    } catch (_) {}
+  }
+
   function isVisible(node) {
     return !!(node && (node.offsetWidth || node.offsetHeight || node.getClientRects().length));
   }
@@ -48324,6 +48407,7 @@ var INLINE_SCRIPT = `(() => {
         lockScroll();
         document.addEventListener('keydown', handleKeydown, true);
       } else if (activeModal !== modal) {
+        emitModalState(activeModal, 'close');
         activeModal.removeAttribute('data-canopy-gallery-active');
       }
       activeModal = modal;
@@ -48332,6 +48416,7 @@ var INLINE_SCRIPT = `(() => {
       if (!focusActiveNav(modal)) {
         focusInitial(modal);
       }
+      emitModalState(modal, 'open');
       return;
     }
     if (!activeModal) return;
@@ -48365,6 +48450,7 @@ var INLINE_SCRIPT = `(() => {
         }
       });
     }
+    emitModalState(previous, 'close');
   }
 
   function modalFromHash() {
@@ -48823,6 +48909,7 @@ function buildCaptionContent(itemProps) {
   ));
 }
 function GalleryModal({ item, closeTargetId, navItems, navGroupName }) {
+  const { getString, formatString } = useLocale();
   const {
     props,
     modalId,
@@ -48835,6 +48922,12 @@ function GalleryModal({ item, closeTargetId, navItems, navGroupName }) {
   const kicker = props.kicker || props.label || props.eyebrow;
   const summary = props.popupDescription || props.modalDescription || props.description || props.summary || null;
   const modalTitle = props.popupTitle || props.modalTitle || props.title || `Item ${index + 1}`;
+  const closeButtonText = getString("common.actions.close", "Close");
+  const closeButtonLabel = formatString(
+    "common.phrases.close_content",
+    "Close {content}",
+    { content: modalTitle }
+  );
   return /* @__PURE__ */ React44.createElement(
     "div",
     {
@@ -48856,13 +48949,14 @@ function GalleryModal({ item, closeTargetId, navItems, navGroupName }) {
         groupName: `${navGroupName || "canopy-gallery"}-${modalId}`
       }
     ), /* @__PURE__ */ React44.createElement(
-      "a",
+      Button,
       {
         className: "canopy-gallery__modal-close",
         href: `#${closeTargetId}`,
-        "aria-label": `Close popup for ${modalTitle}`
-      },
-      "X"
+        label: closeButtonText,
+        "aria-label": closeButtonLabel,
+        variant: "secondary"
+      }
     )), /* @__PURE__ */ React44.createElement("div", { className: "canopy-gallery__modal-panel" }, /* @__PURE__ */ React44.createElement(
       "button",
       {