@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/components/Canvas/ChoiceMenu.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import ControlMenu from "./ControlMenu.mjs";
+import { localize } from "../../core/value.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+const ChoiceMenu = ({
+  id,
+  triggerId,
+  label,
+  labelLang,
+  choices,
+  selections,
+  onSelect,
+  onClose,
+  language
+}) => {
+  const fallbackName = useContainerName(label, labelLang);
+  const unlabeled = choices.some(
+    (group) => !localize(group.label, language).text
+  );
+  return /* @__PURE__ */ jsxs(
+    ControlMenu,
+    {
+      "data-testid": "clover-canvas-choice",
+      id,
+      onClose,
+      triggerId,
+      children: [
+        unlabeled && fallbackName.node,
+        choices.map((group, g) => {
+          const heading = localize(group.label, language);
+          return /* @__PURE__ */ createElement(
+            "fieldset",
+            {
+              ...heading.text ? {} : fallbackName.props,
+              className: "clover-canvas-menu-group",
+              key: group.key
+            },
+            heading.text && /* @__PURE__ */ jsx("legend", { className: "clover-canvas-menu-legend", lang: heading.lang, children: heading.text }),
+            group.items.map((item, index) => {
+              const text = localize(item.label, language);
+              const shown = text.text || (item.image ? "" : String(index + 1));
+              return /* @__PURE__ */ jsxs("label", { className: "clover-canvas-menu-item", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: `${id}-${g}`,
+                    "aria-label": shown ? void 0 : String(index + 1),
+                    checked: (selections[group.key] ?? 0) === index,
+                    onChange: () => onSelect(group.key, index)
+                  }
+                ),
+                item.image && // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: "",
+                    className: "clover-canvas-menu-image",
+                    decoding: "async",
+                    loading: "lazy",
+                    src: item.image
+                  }
+                ),
+                shown && /* @__PURE__ */ jsx("span", { lang: text.text ? text.lang : void 0, children: shown })
+              ] }, index);
+            })
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  ChoiceMenu as default
+};

package/dist/components/Canvas/Connected.mjs

@@ -0,0 +1,228 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore, useMemo, useRef, useCallback, useEffect } from "react";
+import CanvasView from "./CanvasView.mjs";
+import { useRangeChapters, applyTarget } from "./fromManifest.mjs";
+import { paintedMedia } from "./layout.mjs";
+import { selectDrawnSets, selectUnlistedSets, selectHiddenSets } from "../../core/annotation-sets.mjs";
+import { showLink } from "../../core/show-link.mjs";
+import { chaptersOf } from "../../core/ranges.mjs";
+import { hasBehavior } from "../../core/selectors.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useVisibleCanvases, useSequence, useManifest, useActiveCanvas } from "../../react/hooks.mjs";
+const ConnectedCanvas = ({
+  options,
+  onReady,
+  onViewportChange,
+  onMediaElement,
+  onCaptionChange,
+  caption: givenCaption,
+  onEnded,
+  placeholder = true,
+  label,
+  partOf,
+  language: givenLanguage,
+  annotations: givenAnnotations,
+  chapters: givenChapters,
+  ...rest
+}) => {
+  const context = useClover("Canvas");
+  const { clover } = context;
+  const rootCaption = useSyncExternalStore(
+    clover.captions.subscribe,
+    clover.captions.get,
+    clover.captions.get
+  );
+  const caption = givenCaption ?? rootCaption;
+  const language = givenLanguage ?? context.language;
+  const canvases = useVisibleCanvases();
+  const { direction } = useSequence();
+  const manifest = useManifest();
+  const active = useActiveCanvas();
+  const manifestId = useCloverSelector(
+    (state) => {
+      var _a;
+      return state.status === "loading" ? "loading" : ((_a = state.manifest) == null ? void 0 : _a.id) ?? "";
+    }
+  );
+  const target = useCloverSelector((state) => state.target);
+  const sets = useCloverSelector(
+    (state) => selectDrawnSets(state.manifest, state.addedSets, state.search.set)
+  );
+  const unlistedSets = useCloverSelector(
+    (state) => selectUnlistedSets(
+      state.manifest,
+      state.addedSets,
+      state.hiddenSets,
+      state.shownSets
+    )
+  );
+  const hiddenSets = useCloverSelector(
+    (state) => selectHiddenSets(
+      state.manifest,
+      state.addedSets,
+      state.hiddenSets,
+      state.shownSets
+    )
+  );
+  const selectedAnnotation = useCloverSelector((state) => state.annotationId);
+  const highlighted = useSyncExternalStore(
+    clover.highlight.subscribe,
+    clover.highlight.get,
+    clover.highlight.get
+  );
+  const highlightedChapter = useSyncExternalStore(
+    clover.chapter.subscribe,
+    clover.chapter.get,
+    clover.chapter.get
+  );
+  const canvasKey = canvases.map((canvas) => canvas.id).join("|");
+  const annotations = useMemo(() => {
+    if (givenAnnotations) return givenAnnotations;
+    const shown = canvases.map((canvas) => canvas.id);
+    return sets.flatMap(
+      (set) => set.entries.filter((entry) => shown.includes(entry.canvasId)).map((entry) => ({
+        annotation: entry.annotation,
+        targetIndex: shown.indexOf(entry.canvasId),
+        pageId: set.id,
+        ...set.label ? { pageLabel: set.label } : {}
+      }))
+    );
+  }, [givenAnnotations, sets, canvases]);
+  const shows = (canvasId) => Boolean(canvasId) && canvases.some((canvas) => canvas.id === canvasId);
+  const deepLinked = target ? shows(target.canvasId) : false;
+  const opened = useRef(null);
+  if (deepLinked) opened.current = canvasKey;
+  const showPlaceholder = placeholder && opened.current !== canvasKey;
+  const handle = useRef(null);
+  const media = useRef(null);
+  const hasMedia = useMemo(
+    () => canvases.some((canvas) => paintedMedia(canvas).length > 0),
+    [canvases]
+  );
+  const mediaCanvas = hasMedia ? canvases.find((canvas) => paintedMedia(canvas).length > 0) : void 0;
+  const rangeChapters = useRangeChapters(
+    manifest,
+    mediaCanvas,
+    language,
+    chaptersOf
+  );
+  const hasMediaRef = useRef(hasMedia);
+  hasMediaRef.current = hasMedia;
+  const applyTarget$1 = useCallback(() => {
+    const pending = clover.store.get().target;
+    if (!pending) return;
+    const visible = clover.store.get().canvasId;
+    if (!visible) return;
+    if (!applyTarget(pending, handle.current, media.current, hasMediaRef.current))
+      return;
+    clover.consumeTarget();
+  }, [clover]);
+  useEffect(() => {
+    if (target) applyTarget$1();
+  }, [target, canvasKey, applyTarget$1]);
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+  const handleReady = useCallback(
+    (ready) => {
+      var _a;
+      handle.current = ready;
+      ready.on("change", applyTarget$1);
+      applyTarget$1();
+      (_a = onReadyRef.current) == null ? void 0 : _a.call(onReadyRef, ready);
+    },
+    [applyTarget$1]
+  );
+  const handleViewport = useCallback(
+    (bounds) => {
+      var _a;
+      const region = (_a = handle.current) == null ? void 0 : _a.getCanvasRegion();
+      clover.viewport.emit(
+        region ? {
+          canvasId: region.canvasId,
+          region: {
+            x: region.rect.x,
+            y: region.rect.y,
+            w: region.rect.width,
+            h: region.rect.height
+          }
+        } : null
+      );
+      onViewportChange == null ? void 0 : onViewportChange(bounds);
+    },
+    [clover, onViewportChange]
+  );
+  const handleMediaElement = useCallback(
+    (element) => {
+      media.current = element;
+      clover.media.emit(element);
+      if (element) applyTarget$1();
+      onMediaElement == null ? void 0 : onMediaElement(element);
+    },
+    [clover, applyTarget$1, onMediaElement]
+  );
+  const handleEnded = useCallback(() => {
+    onEnded == null ? void 0 : onEnded();
+    if (hasBehavior(manifest, "auto-advance") || hasBehavior(active, "auto-advance")) {
+      clover.next({ autoplay: true, wrap: hasBehavior(manifest, "repeat") });
+    }
+  }, [clover, manifest, active, onEnded]);
+  const followLink = useCallback(
+    (link) => void showLink(clover, link),
+    [clover]
+  );
+  const request = (options == null ? void 0 : options.request) ?? clover.request;
+  const autoplay = hasBehavior(active, "auto-advance") || hasBehavior(manifest, "auto-advance");
+  const loop = hasBehavior(active, "repeat") || hasBehavior(manifest, "repeat");
+  const connectedOptions = useMemo(
+    () => ({
+      ...options,
+      request,
+      animation: (options == null ? void 0 : options.animation) ?? { autoplay, loop }
+    }),
+    [options, request, autoplay, loop]
+  );
+  if (!canvases.length) return null;
+  return /* @__PURE__ */ jsx(
+    CanvasView,
+    {
+      ...rest,
+      manifestId,
+      canvases,
+      viewingDirection: direction,
+      language,
+      label: label ?? (active == null ? void 0 : active.label) ?? (manifest == null ? void 0 : manifest.label),
+      partOf: partOf ?? (manifest == null ? void 0 : manifest.label),
+      options: connectedOptions,
+      placeholder: showPlaceholder,
+      onReady: handleReady,
+      onViewportChange: handleViewport,
+      onMediaElement: handleMediaElement,
+      caption,
+      onCaptionChange: (caption2) => {
+        clover.captions.emit((caption2 == null ? void 0 : caption2.id) ?? null);
+        onCaptionChange == null ? void 0 : onCaptionChange(caption2);
+      },
+      onEnded: handleEnded,
+      annotations,
+      hiddenPages: hiddenSets,
+      unlistedPages: unlistedSets,
+      onPageVisibilityChange: (pageIds, visible) => pageIds.forEach((id) => clover.setSetVisible(id, visible)),
+      chapters: givenChapters ?? rangeChapters,
+      highlightedChapter,
+      onChapterHighlight: (id) => clover.chapter.emit(id),
+      selectedAnnotation,
+      highlightedAnnotation: highlighted,
+      onAnnotationSelect: (id) => clover.selectAnnotation(id),
+      onAnnotationLink: rest.onAnnotationLink ?? followLink,
+      onAnnotationActive: (id) => {
+        var _a;
+        clover.highlight.emit(id);
+        (_a = rest.onAnnotationActive) == null ? void 0 : _a.call(rest, id);
+      }
+    }
+  );
+};
+export {
+  ConnectedCanvas as default
+};

package/dist/components/Canvas/ControlMenu.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { join } from "../../lib/classnames.mjs";
+import { useOneOpen } from "../../ui/useOneOpen.mjs";
+const ControlMenu = ({
+  id,
+  triggerId,
+  onClose,
+  "data-testid": testId,
+  className,
+  children
+}) => {
+  const ref = useRef(null);
+  useOneOpen(true, () => onClose(false));
+  useEffect(() => {
+    const menu = ref.current;
+    const item = (menu == null ? void 0 : menu.querySelector('input[type="radio"]:checked')) ?? (menu == null ? void 0 : menu.querySelector(
+      'input[type="radio"]:not(:disabled)'
+    )) ?? (menu == null ? void 0 : menu.querySelector("input"));
+    const row = item == null ? void 0 : item.closest("label");
+    if (menu && row) {
+      const bottom = row.offsetTop + row.offsetHeight;
+      if (bottom > menu.scrollTop + menu.clientHeight) {
+        menu.scrollTop = bottom - menu.clientHeight;
+      }
+      if (row.offsetTop < menu.scrollTop) menu.scrollTop = row.offsetTop;
+    }
+    item == null ? void 0 : item.focus({ preventScroll: true });
+    const onPointerDown = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if ((_a = ref.current) == null ? void 0 : _a.contains(target)) return;
+      if ((_b = document.getElementById(triggerId)) == null ? void 0 : _b.contains(target)) return;
+      onClose(false);
+    };
+    const onKeyDown = (event) => {
+      var _a, _b;
+      if (event.key !== "Escape") return;
+      const active = document.activeElement;
+      const inside = Boolean(
+        ((_a = ref.current) == null ? void 0 : _a.contains(active)) || ((_b = document.getElementById(triggerId)) == null ? void 0 : _b.contains(active))
+      );
+      if (inside) event.preventDefault();
+      onClose(inside);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [triggerId, onClose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: join("clover-canvas-menu", className),
+      "data-testid": testId,
+      id,
+      ref,
+      children
+    }
+  );
+};
+export {
+  ControlMenu as default
+};

package/dist/components/Canvas/Controls.mjs

@@ -0,0 +1,233 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Comment, Information } from "../Body/glyphs.mjs";
+import Button from "../../ui/Button.mjs";
+import ControlCluster from "../../ui/ControlCluster.mjs";
+import { ZoomIn, ZoomOut, ZoomExitFullScreen, ZoomFullScreen, Rotate, Reset, Choice } from "../../ui/controlGlyphs.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { localize } from "../../core/value.mjs";
+import { toggleFullscreen } from "../../lib/fullscreen.mjs";
+import useFullscreenSupported from "../../hooks/useFullscreenSupported.mjs";
+import { useLoaded } from "../../hooks/useLoaded.mjs";
+import { SHORTCUTS } from "../../ui/Tip.mjs";
+const loadAnnotationMenu = () => import("./AnnotationMenu.mjs");
+const loadChoiceMenu = () => import("./ChoiceMenu.mjs");
+const ZOOM_PER_CLICK = 2;
+const Controls = ({
+  renderer,
+  instance,
+  config,
+  controlButtons,
+  hasPlaceholder,
+  choices = [],
+  selections = {},
+  onSelect,
+  annotations = [],
+  hiddenPages,
+  onPageVisibilityChange,
+  selectedAnnotation = null,
+  onAnnotationSelect,
+  onAnnotationActivate,
+  captionId,
+  captionOpen = false,
+  onCaptionToggle,
+  language,
+  children
+}) => {
+  var _a, _b;
+  const { t, langOf } = useCloverTranslation();
+  const [choiceOpen, setChoiceOpen] = useState(false);
+  const [annotationsOpen, setAnnotationsOpen] = useState(false);
+  const annotationsId = `annotations-${instance}`;
+  const annotationsMenuId = `${annotationsId}-menu`;
+  const annotationsLabel = t("informationPanelTabsAnnotations");
+  const annotationsLang = langOf("informationPanelTabsAnnotations");
+  const closeAnnotations = useCallback(
+    (restoreFocus) => {
+      var _a2;
+      setAnnotationsOpen(false);
+      onAnnotationActivate == null ? void 0 : onAnnotationActivate(null);
+      if (restoreFocus) (_a2 = document.getElementById(annotationsId)) == null ? void 0 : _a2.focus();
+    },
+    [annotationsId, onAnnotationActivate]
+  );
+  const showAnnotations = config.annotations && annotations.length > 0 && onAnnotationSelect;
+  const showInformation = config.information && captionId && onCaptionToggle;
+  const choiceId = `choice-${instance}`;
+  const ownChoiceLabel = choices.length === 1 ? localize(choices[0].label, language) : null;
+  const choiceLabel = (ownChoiceLabel == null ? void 0 : ownChoiceLabel.text) || t("canvasChoice");
+  const choiceLang = (ownChoiceLabel == null ? void 0 : ownChoiceLabel.text) ? ownChoiceLabel.lang : langOf("canvasChoice");
+  const menuId = `${choiceId}-menu`;
+  const AnnotationMenu = (_a = useLoaded(
+    loadAnnotationMenu,
+    Boolean(showAnnotations)
+  )) == null ? void 0 : _a.default;
+  const ChoiceMenu = (_b = useLoaded(
+    loadChoiceMenu,
+    choices.length > 0 && Boolean(onSelect)
+  )) == null ? void 0 : _b.default;
+  const closeChoice = useCallback(
+    (restoreFocus) => {
+      var _a2;
+      setChoiceOpen(false);
+      if (restoreFocus) (_a2 = document.getElementById(choiceId)) == null ? void 0 : _a2.focus();
+    },
+    [choiceId]
+  );
+  const canFullscreen = useFullscreenSupported();
+  const controls = (isFullscreen) => {
+    const specs = [];
+    const camera = renderer;
+    if (config.zoom && camera) {
+      specs.push(
+        {
+          key: "zoomIn",
+          id: `zoomIn-${instance}`,
+          shortcut: SHORTCUTS.zoomIn,
+          label: t("imageZoomIn"),
+          lang: langOf("imageZoomIn"),
+          glyph: /* @__PURE__ */ jsx(ZoomIn, {}),
+          onClick: () => camera.zoomBy(ZOOM_PER_CLICK)
+        },
+        {
+          key: "zoomOut",
+          id: `zoomOut-${instance}`,
+          shortcut: SHORTCUTS.zoomOut,
+          label: t("imageZoomOut"),
+          lang: langOf("imageZoomOut"),
+          glyph: /* @__PURE__ */ jsx(ZoomOut, {}),
+          onClick: () => camera.zoomBy(1 / ZOOM_PER_CLICK)
+        }
+      );
+    }
+    if (config.fullPage && canFullscreen) {
+      specs.push({
+        key: "fullPage",
+        id: `fullPage-${instance}`,
+        label: isFullscreen ? t("imageExitFullScreen") : t("imageFullScreen"),
+        lang: langOf(isFullscreen ? "imageExitFullScreen" : "imageFullScreen"),
+        glyph: isFullscreen ? /* @__PURE__ */ jsx(ZoomExitFullScreen, {}) : /* @__PURE__ */ jsx(ZoomFullScreen, {}),
+        // Straight from the click: the Fullscreen API only honors a user gesture.
+        onClick: (event) => void toggleFullscreen(event.currentTarget)
+      });
+    }
+    if (config.rotation && camera) {
+      specs.push(
+        {
+          key: "rotateRight",
+          id: `rotateRight-${instance}`,
+          shortcut: SHORTCUTS.rotateRight,
+          label: t("imageRotateRight"),
+          lang: langOf("imageRotateRight"),
+          glyph: /* @__PURE__ */ jsx(Rotate, {}),
+          onClick: () => camera.rotateBy(90)
+        },
+        {
+          key: "rotateLeft",
+          id: `rotateLeft-${instance}`,
+          shortcut: SHORTCUTS.rotateLeft,
+          label: t("imageRotateLeft"),
+          lang: langOf("imageRotateLeft"),
+          glyph: /* @__PURE__ */ jsx(Rotate, {}),
+          onClick: () => camera.rotateBy(-90)
+        }
+      );
+    }
+    if (config.reset && camera) {
+      specs.push({
+        key: "reset",
+        id: `reset-${instance}`,
+        shortcut: SHORTCUTS.reset,
+        label: t("imageResetZoom"),
+        lang: langOf("imageResetZoom"),
+        glyph: /* @__PURE__ */ jsx(Reset, {}),
+        // Home also turns the image upright, as `Image`'s reset does.
+        onClick: () => camera.home()
+      });
+    }
+    if (choices.length) {
+      specs.push({
+        key: "choice",
+        id: choiceId,
+        label: choiceLabel,
+        lang: choiceLang,
+        glyph: /* @__PURE__ */ jsx(Choice, {}),
+        onClick: () => setChoiceOpen((open) => !open),
+        expanded: choiceOpen,
+        controls: menuId
+      });
+    }
+    return specs;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      ControlCluster,
+      {
+        controls,
+        controlButtons,
+        hasPlaceholder,
+        children: [
+          showAnnotations && /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: annotationsId,
+              label: annotationsLabel,
+              lang: annotationsLang,
+              onClick: () => setAnnotationsOpen((open) => !open),
+              expanded: annotationsOpen,
+              controls: annotationsMenuId,
+              children: /* @__PURE__ */ jsx(Comment, {})
+            }
+          ),
+          showInformation && /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: `information-${instance}`,
+              label: t("informationPanelTabsAbout"),
+              lang: langOf("informationPanelTabsAbout"),
+              onClick: onCaptionToggle,
+              expanded: captionOpen,
+              controls: captionId,
+              children: /* @__PURE__ */ jsx(Information, {})
+            }
+          ),
+          children
+        ]
+      }
+    ),
+    AnnotationMenu && annotationsOpen && showAnnotations && /* @__PURE__ */ jsx(
+      AnnotationMenu,
+      {
+        id: annotationsMenuId,
+        triggerId: annotationsId,
+        label: annotationsLabel,
+        labelLang: annotationsLang,
+        annotations,
+        hiddenPages,
+        onPageVisibilityChange,
+        selected: selectedAnnotation,
+        onSelect: onAnnotationSelect,
+        onActivate: (id) => onAnnotationActivate == null ? void 0 : onAnnotationActivate(id),
+        onClose: closeAnnotations
+      }
+    ),
+    ChoiceMenu && choiceOpen && choices.length > 0 && onSelect && /* @__PURE__ */ jsx(
+      ChoiceMenu,
+      {
+        id: menuId,
+        triggerId: choiceId,
+        label: choiceLabel,
+        labelLang: choiceLang,
+        language,
+        choices,
+        selections,
+        onSelect,
+        onClose: closeChoice
+      }
+    )
+  ] });
+};
+export {
+  Controls as default
+};