@canopy-iiif/app 0.10.6 → 0.10.7

package/package.json

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

package/ui/dist/server.mjs

@@ -612,9 +612,13 @@ import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
 // ui/src/layout/ContentNavigation.jsx
 import React11 from "react";
 var SCROLL_OFFSET_REM = 1.618;
+var MAX_HEADING_DEPTH = 3;
 function depthIndex(depth) {
   return Math.max(0, Math.min(5, (depth || 1) - 1));
 }
+function resolveDepth(value, fallback = 1) {
+  return Math.max(1, typeof value === "number" ? value : fallback);
+}
 function ContentNavigation({
   items = [],
   className = "",
@@ -627,7 +631,11 @@ function ContentNavigation({
   const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
   const savedDepthsRef = React11.useRef(null);
   if ((!items || !items.length) && !headingId) return null;
-  const combinedClassName = ["canopy-sub-navigation canopy-content-navigation", className].filter(Boolean).join(" ");
+  const combinedClassName = [
+    "canopy-sub-navigation canopy-content-navigation",
+    "canopy-content-navigation--collapsed",
+    className
+  ].filter(Boolean).join(" ");
   const effectiveHeading = heading || pageTitle || null;
   const navLabel = ariaLabel || (effectiveHeading ? `${effectiveHeading} navigation` : "Section navigation");
   const getSavedDepth = React11.useCallback(
@@ -656,7 +664,11 @@ function ContentNavigation({
         const id = String(node.id);
         if (seen.has(id)) return;
         seen.add(id);
-        const depth = node.depth || node.level || getSavedDepth(id, 2);
+        const depth = resolveDepth(
+          typeof node.depth === "number" ? node.depth : node.level,
+          getSavedDepth(id, 2)
+        );
+        if (depth > MAX_HEADING_DEPTH) return;
         entries.push({ id, depth });
         if (node.children && node.children.length) pushNodes(node.children);
       });
@@ -772,9 +784,14 @@ function ContentNavigation({
       return nodes.map((node) => {
         if (!node) return null;
         const id = node.id ? String(node.id) : "";
-        const depth = node.depth || node.level || getSavedDepth(id, 2);
+        const depth = resolveDepth(
+          typeof node.depth === "number" ? node.depth : node.level,
+          getSavedDepth(id, 2)
+        );
+        if (depth > MAX_HEADING_DEPTH) return null;
         const idx = depthIndex(depth);
         const isActive = id && activeId === id;
+        const childNodes = depth < MAX_HEADING_DEPTH ? renderNodes2(node.children) : null;
         return /* @__PURE__ */ React11.createElement("li", { key: id || node.title, className: "canopy-sub-navigation__item", "data-depth": idx }, /* @__PURE__ */ React11.createElement(
           "a",
           {
@@ -784,19 +801,19 @@ function ContentNavigation({
             "aria-current": isActive ? "location" : void 0
           },
           node.title
-        ), node.children && node.children.length ? /* @__PURE__ */ React11.createElement(
+        ), childNodes ? /* @__PURE__ */ React11.createElement(
           "ul",
           {
             className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
             role: "list"
           },
-          renderNodes2(node.children)
+          childNodes
         ) : null);
       });
     },
     [handleAnchorClick, activeId, getSavedDepth]
   );
-  const nestedItems = renderNodes2(items);
+  const nestedItems = React11.useMemo(() => renderNodes2(items), [items, renderNodes2]);
   const topLink = headingId ? /* @__PURE__ */ React11.createElement("li", { className: "canopy-sub-navigation__item", "data-depth": 0 }, /* @__PURE__ */ React11.createElement(
     "a",
     {
@@ -814,7 +831,32 @@ function ContentNavigation({
     },
     nestedItems
   ) : null) : null;
-  return /* @__PURE__ */ React11.createElement("nav", { className: combinedClassName, style, "aria-label": navLabel }, /* @__PURE__ */ React11.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems));
+  return /* @__PURE__ */ React11.createElement(
+    "nav",
+    {
+      className: combinedClassName,
+      style,
+      "aria-label": navLabel,
+      "data-canopy-content-nav": "true"
+    },
+    /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-content-navigation__toggle",
+        "aria-expanded": "false",
+        "aria-label": "Show section navigation",
+        title: "Show section navigation",
+        "data-canopy-content-nav-toggle": "true",
+        "data-show-label": "Show",
+        "data-hide-label": "Hide",
+        "data-show-full-label": "Show section navigation",
+        "data-hide-full-label": "Hide section navigation"
+      },
+      "Show"
+    ),
+    /* @__PURE__ */ React11.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems)
+  );
 }
 
 // ui/src/layout/Layout.jsx
@@ -853,6 +895,106 @@ function buildNavigationAside(sidebar, className) {
   }
   return sidebar;
 }
+function ContentNavigationScript() {
+  const code = `
+(function () {
+  if (typeof window === 'undefined') return;
+  if (window.__CANOPY_CONTENT_NAV_READY__) return;
+  window.__CANOPY_CONTENT_NAV_READY__ = true;
+  var STORAGE_KEY = 'canopy_content_nav_collapsed';
+  var storage = null;
+  try {
+    storage = window.localStorage;
+  } catch (error) {
+    storage = null;
+  }
+
+  function setStored(value) {
+    if (!storage) return;
+    try {
+      if (value == null) {
+        storage.removeItem(STORAGE_KEY);
+      } else {
+        storage.setItem(STORAGE_KEY, value);
+      }
+    } catch (error) {}
+  }
+
+  function getStored() {
+    if (!storage) return null;
+    try {
+      return storage.getItem(STORAGE_KEY);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  function ready(fn) {
+    if (!fn) return;
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', fn, { once: true });
+    } else {
+      fn();
+    }
+  }
+
+  function applyState(root, collapsed) {
+    if (!root) return;
+    var isCollapsed = !!collapsed;
+    root.classList.toggle('is-collapsed', isCollapsed);
+    var layout = root.closest('.canopy-layout');
+    if (layout) layout.classList.toggle('canopy-layout--content-nav-collapsed', isCollapsed);
+    var nav = root.querySelector('[data-canopy-content-nav]');
+    if (nav) nav.classList.toggle('canopy-content-navigation--collapsed', isCollapsed);
+    var toggle = root.querySelector('[data-canopy-content-nav-toggle]');
+    if (toggle) {
+      var showLabel = toggle.getAttribute('data-show-label') || 'Show';
+      var hideLabel = toggle.getAttribute('data-hide-label') || 'Hide';
+      var showFull = toggle.getAttribute('data-show-full-label') || 'Show section navigation';
+      var hideFull = toggle.getAttribute('data-hide-full-label') || 'Hide section navigation';
+      toggle.textContent = isCollapsed ? showLabel : hideLabel;
+      toggle.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
+      toggle.setAttribute('aria-label', isCollapsed ? showFull : hideFull);
+      toggle.setAttribute('title', isCollapsed ? showFull : hideFull);
+    }
+  }
+
+  ready(function () {
+    var roots = Array.prototype.slice.call(
+      document.querySelectorAll('[data-canopy-content-nav-root]')
+    );
+    if (!roots.length) return;
+    var stored = getStored();
+    var collapsed = true;
+    if (stored === '0' || stored === 'false') {
+      collapsed = false;
+    } else if (stored === '1' || stored === 'true') {
+      collapsed = true;
+    }
+
+    function sync(next) {
+      collapsed = !!next;
+      roots.forEach(function (root) {
+        applyState(root, collapsed);
+      });
+      setStored(collapsed ? '1' : '0');
+    }
+
+    sync(collapsed);
+
+    roots.forEach(function (root) {
+      var toggle = root.querySelector('[data-canopy-content-nav-toggle]');
+      if (!toggle) return;
+      toggle.addEventListener('click', function (event) {
+        event.preventDefault();
+        sync(!collapsed);
+      });
+    });
+  });
+})();
+  `;
+  return /* @__PURE__ */ React12.createElement("script", { dangerouslySetInnerHTML: { __html: code } });
+}
 function Layout({
   children,
   sidebar,
@@ -892,38 +1034,40 @@ function Layout({
   const showLeftColumn = navigation !== false;
   const hasContentNavigation = navigation !== false && contentNavigation !== false && headingTree.length > 0;
   const containerClassName = (() => {
-    const classes = ["getting-started-layout"];
-    classes.push(
-      fluid ? "getting-started-layout--fluid" : "getting-started-layout--fixed"
-    );
-    if (showLeftColumn) classes.push("getting-started-layout--with-sidebar");
-    if (hasContentNavigation)
-      classes.push("getting-started-layout--with-content-nav");
+    const classes = ["canopy-layout"];
+    classes.push(fluid ? "canopy-layout--fluid" : "canopy-layout--fixed");
+    if (showLeftColumn) classes.push("canopy-layout--with-sidebar");
+    if (hasContentNavigation) {
+      classes.push("canopy-layout--with-content-nav");
+      classes.push("canopy-layout--content-nav-collapsed");
+    }
     if (className) classes.push(className);
     return classes.join(" ");
   })();
-  const leftAsideClassName = [
-    "getting-started-layout__sidebar",
-    sidebarClassName
-  ].filter(Boolean).join(" ");
-  const contentClassNames = [
-    "getting-started-layout__content",
-    contentClassName
-  ].filter(Boolean).join(" ");
+  const leftAsideClassName = ["canopy-layout__sidebar", sidebarClassName].filter(Boolean).join(" ");
+  const contentClassNames = ["canopy-layout__content", contentClassName].filter(Boolean).join(" ");
   const contentNavigationAsideClassName = [
-    "getting-started-layout__content-nav",
+    "canopy-layout__content-nav",
+    "is-collapsed",
     contentNavigationClassName
   ].filter(Boolean).join(" ");
   const sidebarNode = showLeftColumn ? buildNavigationAside(sidebar, sidebarClassName) : null;
-  return /* @__PURE__ */ React12.createElement("div", { className: containerClassName, ...rest }, showLeftColumn ? /* @__PURE__ */ React12.createElement("aside", { className: leftAsideClassName }, sidebarNode) : null, /* @__PURE__ */ React12.createElement("div", { className: contentClassNames }, children), hasContentNavigation ? /* @__PURE__ */ React12.createElement("aside", { className: contentNavigationAsideClassName }, /* @__PURE__ */ React12.createElement(
-    ContentNavigation,
+  return /* @__PURE__ */ React12.createElement("div", { className: containerClassName, ...rest }, showLeftColumn ? /* @__PURE__ */ React12.createElement("aside", { className: leftAsideClassName }, sidebarNode) : null, /* @__PURE__ */ React12.createElement("div", { className: contentClassNames }, children), hasContentNavigation ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+    "aside",
     {
-      items: headingTree,
-      heading: contentHeading || void 0,
-      headingId: headingAnchorId || void 0,
-      pageTitle: context && context.page ? context.page.title : void 0
-    }
-  )) : null);
+      className: contentNavigationAsideClassName,
+      "data-canopy-content-nav-root": "true"
+    },
+    /* @__PURE__ */ React12.createElement(
+      ContentNavigation,
+      {
+        items: headingTree,
+        heading: contentHeading || void 0,
+        headingId: headingAnchorId || void 0,
+        pageTitle: context && context.page ? context.page.title : void 0
+      }
+    )
+  ), /* @__PURE__ */ React12.createElement(ContentNavigationScript, null)) : null);
 }
 
 // ui/src/layout/CanopyHeader.jsx