@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Items/Position.mjs

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { itemsOfCollection } from "../../core/items.mjs";
+import { selectTargetIndex } from "../../core/selectors.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useNavigation, useSequence } from "../../react/hooks.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+function useRootSteps(of, part) {
+  const { clover } = useClover(part);
+  const navigation = useNavigation();
+  const { direction } = useSequence();
+  const collection = useCloverSelector((state) => state.collection);
+  const shown = useCloverSelector((state) => {
+    var _a;
+    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
+  });
+  const targets = useCloverSelector(
+    (state) => {
+      var _a;
+      return ((_a = state.targets) == null ? void 0 : _a.items.length) ?? 0;
+    }
+  );
+  const target = useCloverSelector(
+    (state) => selectTargetIndex(
+      state.targets,
+      state.targetIndex,
+      state.manifest,
+      state.canvasId
+    )
+  );
+  if (of === "targets") {
+    return {
+      position: target,
+      total: targets,
+      direction: "left-to-right",
+      step: (by) => {
+        const to = target + by;
+        if (to >= 0 && to < targets) clover.goToTarget(to);
+      }
+    };
+  }
+  if (of === "members") {
+    const members = itemsOfCollection(collection);
+    const position = members.findIndex((item) => item.id === shown);
+    return {
+      position,
+      total: members.length,
+      direction: "left-to-right",
+      step: (by) => {
+        const to = members[position + by];
+        if (to) void clover.goToManifest(to.id);
+      }
+    };
+  }
+  return {
+    position: navigation.position,
+    total: navigation.total,
+    direction,
+    step: (by) => by < 0 ? navigation.previous() : navigation.next()
+  };
+}
+const PositionText = forwardRef(function PositionText2({ steps, as: Tag = "span", className, ...rest }, ref) {
+  const { t, langOf } = useCloverTranslation();
+  const { position, total } = steps;
+  if (total < 2 || position < 0) return null;
+  const index = position + 1;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      className: join("clover-pager-position", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+          index,
+          " / ",
+          total
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "clover-pager-room", "aria-hidden": "true", hidden: true, children: [
+          total,
+          " / ",
+          total
+        ] }),
+        /* @__PURE__ */ jsx("span", { style: visuallyHidden, ...languageProps(langOf("canvasPosition")), children: t("canvasPosition", { index, total }) })
+      ]
+    }
+  );
+});
+const Position = forwardRef(
+  function Position2({ of = "views", ...props }, ref) {
+    const steps = useRootSteps(of, "Position");
+    return /* @__PURE__ */ jsx(PositionText, { ref, ...props, steps });
+  }
+);
+export {
+  Position,
+  PositionText,
+  useRootSteps
+};

package/dist/components/Items/StandaloneItems.mjs

@@ -3,7 +3,9 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { Pager, stepsOf, ItemsView } from "./Items.mjs";
 import { itemsOf } from "../../core/items.mjs";
+import { resolveDirection } from "../../core/sequence.mjs";
 import { fetchResource } from "../../core/load.mjs";
+import { hrefLangOf } from "../../core/value.mjs";
 function StandaloneItems({
   iiifContent,
   items: provided,
@@ -14,7 +16,7 @@ function StandaloneItems({
   forwardedRef,
   ...rest
 }) {
-  var _a, _b;
+  var _a;
   const [resource, setResource] = useState(null);
   const [selected, setSelected] = useState(0);
   const key = typeof iiifContent === "string" ? iiifContent : iiifContent == null ? void 0 : iiifContent.id;
@@ -37,6 +39,9 @@ function StandaloneItems({
   );
   if (!items.length) return null;
   const isViews = !provided && (resource == null ? void 0 : resource.type) === "Manifest";
+  const direction = resolveDirection(
+    resource == null ? void 0 : resource.viewingDirection
+  );
   const mode = navigation ?? (isViews ? "id" : "homepage");
   if (rest.layout === "pager") {
     return /* @__PURE__ */ jsx(
@@ -44,14 +49,15 @@ function StandaloneItems({
       {
         ...rest,
         forwardedRef,
-        steps: stepsOf(items, selected, "left-to-right", (item, event) => {
+        steps: stepsOf(items, selected, direction, (item, event) => {
           onSelect == null ? void 0 : onSelect(item, event);
           setSelected(items.indexOf(item));
         })
       }
     );
   }
-  const homepage = (_b = (_a = resource == null ? void 0 : resource.homepage) == null ? void 0 : _a[0]) == null ? void 0 : _b.id;
+  const page = (_a = resource == null ? void 0 : resource.homepage) == null ? void 0 : _a[0];
+  const homepage = page == null ? void 0 : page.id;
   return /* @__PURE__ */ jsx(
     ItemsView,
     {
@@ -60,12 +66,14 @@ function StandaloneItems({
       items,
       selected: mode === "id" ? selected : -1,
       navigation: mode,
+      rtl: direction === "right-to-left",
       request,
       showSummary: !isViews,
       heading: header && resource ? {
         label: resource.label,
         summary: resource.summary,
-        homepage
+        homepage,
+        homepageLang: hrefLangOf(page)
       } : void 0,
       onActivate: (item, event) => {
         onSelect == null ? void 0 : onSelect(item, event);

package/dist/components/Items/TargetItems.mjs

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect } from "react";
+import { Pager, stepsOf, ItemsView } from "./Items.mjs";
+import { CountMenu } from "./CountMenu.mjs";
+import { regionSource } from "../../core/region.mjs";
+import { selectTargetIndex, selectSequence } from "../../core/selectors.mjs";
+import { localize } from "../../core/value.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { fetchManifest } from "../../react/fetchManifest.mjs";
+import { Steps } from "../../ui/Steps.mjs";
+import { titleTag } from "../../ui/heading.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+function TargetItems({
+  onSelect,
+  forwardedRef,
+  ...rest
+}) {
+  const { clover, language } = useClover("Items");
+  const { items, position } = useTargetItems();
+  const choose = (item, event) => {
+    onSelect == null ? void 0 : onSelect(item, event);
+    const index = items.findIndex((each) => each.id === item.id);
+    if (index >= 0) clover.goToTarget(index);
+  };
+  if (rest.layout === "pager") {
+    return /* @__PURE__ */ jsx(
+      Pager,
+      {
+        ...rest,
+        forwardedRef,
+        steps: stepsOf(items, position, "left-to-right", choose),
+        nameKey: "informationPanelTabsTargets",
+        position: /* @__PURE__ */ jsx(
+          CountMenu,
+          {
+            position,
+            total: items.length,
+            list: (chosen) => /* @__PURE__ */ jsx(
+              TargetItems,
+              {
+                layout: "list",
+                forwardedRef: null,
+                onSelect: chosen
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ItemsView,
+    {
+      ...rest,
+      forwardedRef,
+      items,
+      selected: position,
+      navigation: "id",
+      language,
+      request: clover.request,
+      showSummary: true,
+      onActivate: choose
+    }
+  );
+}
+function useTargetItems() {
+  const { language } = useClover("Items");
+  const targets = useCloverSelector((state) => state.targets);
+  const shown = useCloverSelector((state) => state.manifest);
+  const position = useCloverSelector(
+    (state) => selectTargetIndex(
+      state.targets,
+      state.targetIndex,
+      state.manifest,
+      state.canvasId
+    )
+  );
+  const manifests = useTargetManifests(targets == null ? void 0 : targets.items, shown);
+  const items = useMemo(
+    () => ((targets == null ? void 0 : targets.items) ?? []).map(
+      (target) => targetItem(
+        target,
+        manifests.get(target.manifestId) ?? (target.manifestAs ? manifests.get(target.manifestAs) : void 0),
+        language
+      )
+    ),
+    [targets, manifests, language]
+  );
+  return { items, position };
+}
+function useTargetManifests(targets, shown) {
+  const { clover } = useClover("Items");
+  const ids = useMemo(
+    () => [...new Set((targets ?? []).map((target) => target.manifestId))],
+    [targets]
+  );
+  const [fetched, setFetched] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    let live = true;
+    void Promise.all(
+      ids.map(async (id) => [id, await fetchManifest(clover, id)])
+    ).then((found) => {
+      if (!live) return;
+      setFetched(
+        new Map(
+          found.filter(
+            (entry) => Boolean(entry[1])
+          )
+        )
+      );
+    });
+    return () => {
+      live = false;
+    };
+  }, [clover, ids]);
+  return useMemo(() => {
+    const all = new Map(fetched);
+    if (shown) all.set(shown.id, shown);
+    return all;
+  }, [fetched, shown]);
+}
+function targetItem(target, manifest, language) {
+  const canvases = manifest ? selectSequence(manifest).canvases : [];
+  const canvas = canvases.find((each) => each.id === target.canvasId) ?? canvases[0];
+  const title = manifest == null ? void 0 : manifest.label;
+  const own = canvas == null ? void 0 : canvas.label;
+  const label = localize(own, language).text ? own : title;
+  const under = title && label !== title && localize(title, language).text !== localize(label, language).text ? title : void 0;
+  const region = canvas && target.region ? regionSource(canvas, target.region) : void 0;
+  return {
+    id: target.id,
+    label,
+    summary: under,
+    parts: [
+      {
+        id: target.id,
+        type: "Canvas",
+        label,
+        resource: canvas ?? { id: target.canvasId ?? target.manifestId },
+        // Its region where one is named and can be cut; else the Canvas's own picture.
+        ...region ? { source: region } : {}
+      }
+    ]
+  };
+}
+function TargetsSection({
+  headingLevel = 3
+}) {
+  const { clover, language } = useClover("Items");
+  const label = useCloverSelector((state) => {
+    var _a;
+    return (_a = state.targets) == null ? void 0 : _a.label;
+  });
+  const total = useCloverSelector((state) => {
+    var _a;
+    return ((_a = state.targets) == null ? void 0 : _a.items.length) ?? 0;
+  });
+  const position = useCloverSelector(
+    (state) => selectTargetIndex(
+      state.targets,
+      state.targetIndex,
+      state.manifest,
+      state.canvasId
+    )
+  );
+  if (total < 2) return null;
+  const heading = localize(label, language);
+  const Title = titleTag(headingLevel);
+  return /* @__PURE__ */ jsxs("div", { className: "clover-about clover-collection clover-targets", children: [
+    /* @__PURE__ */ jsxs("div", { className: "clover-targets-head", children: [
+      heading.text && /* @__PURE__ */ jsx(
+        Title,
+        {
+          className: "clover-collection-title clover-title",
+          ...languageProps(heading.lang),
+          children: heading.text
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Steps,
+        {
+          className: "clover-targets-steps",
+          steps: {
+            position,
+            total,
+            step: (by) => {
+              const to = position + by;
+              if (to >= 0 && to < total) clover.goToTarget(to);
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(TargetItems, { layout: "list", forwardedRef: null })
+  ] });
+}
+export {
+  TargetsSection,
+  TargetItems as default,
+  useTargetItems
+};

package/dist/components/Items/masonry.mjs

@@ -0,0 +1,35 @@
+"use client";
+function attachMasonry(box) {
+  const items = () => Array.from(
+    box.querySelectorAll(
+      ".clover-items-track > .clover-items-item"
+    )
+  );
+  const span = (item) => {
+    const track = item.parentElement;
+    if (!track) return;
+    const style = getComputedStyle(track);
+    const row = parseFloat(style.gridAutoRows) || 1;
+    const gap = parseFloat(style.columnGap) || 0;
+    const height = item.getBoundingClientRect().height;
+    item.style.gridRowEnd = `span ${Math.max(1, Math.ceil((height + gap) / row))}`;
+  };
+  const sizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(
+    (entries) => entries.forEach((entry) => span(entry.target))
+  );
+  const watch = () => items().forEach((item) => {
+    sizes == null ? void 0 : sizes.observe(item);
+    span(item);
+  });
+  const added = new MutationObserver(watch);
+  added.observe(box, { childList: true, subtree: true });
+  watch();
+  return () => {
+    added.disconnect();
+    sizes == null ? void 0 : sizes.disconnect();
+    items().forEach((item) => item.style.removeProperty("grid-row-end"));
+  };
+}
+export {
+  attachMasonry
+};

package/dist/components/Label/Label.mjs

@@ -7,6 +7,7 @@ import { localize } from "../../core/value.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useOptionalCloverSelector, useOptionalClover } from "../../react/context.mjs";
 import { useProvider } from "../Primitives/resource.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const Label = forwardRef(function Label2({ of = "manifest", label, as: Tag = "span", className, ...rest }, ref) {
   var _a;
   const fromRoot = useOptionalCloverSelector(
@@ -28,7 +29,7 @@ const Label = forwardRef(function Label2({ of = "manifest", label, as: Tag = "sp
     {
       ref,
       className: join("clover-label", className),
-      lang,
+      ...languageProps(lang),
       ...rest,
       children: toPlainText(text)
     }