Make generated link configurable

README.md

@@ -54,9 +54,14 @@ You can view an example configuration in [demo/src/index.js][demo-cfg].
 
 The available configuration options are:
 
+- `getCanvasLink`: **Required**. A function that returns a link for the currently displayed canvases.
+  Receives the identifier of the manifest as the first argument and an array of the currently displayed
+  canvas identifiers as the second argument. Must return a string.
 - `dialogOpen`: If the share dialog is open. Boolean, defaults to `false`.
 - `enabled`: If the plugin is enabled. Boolean, defaults to `true`.
 - `showRightsInformation`: If rights information defined in the manifest should be shown. Boolean, defaults to `true`.
+- `singleCanvasOnly`: Set to true, if `getCanvasLink` can only generate links for a single canvas, this will
+  disable the "Share" button in book view.
 
 ## Contributing
 

demo/src/index.js

@@ -25,6 +25,16 @@ const config = {
     canvasLink: {
       active: true,
       enabled: true,
+      singleCanvasOnly: false,
+      getCanvasLink: (manifestId, canvases) => {
+        const objectId = manifestId.split("/").slice(-2)[0];
+        const canvasIndices = canvases.map(
+          (canvas) => canvas.id.split("/").slice(-1)[0]
+        );
+        return `https://digitale-sammlungen.de/view/${objectId}?page=${canvasIndices.join(
+          ","
+        )}`;
+      },
     },
   },
   windows: [

src/components/ShareButton.js

@@ -19,15 +19,15 @@ const iconMapping = {
 
 const ShareButton = ({
   attribution,
-  imageUrl,
+  canvasLink,
   label,
   provider,
   thumbnailUrl,
   title,
 }) => {
   const link = getShareLink(
     attribution,
-    imageUrl,
+    canvasLink,
     label,
     provider,
     thumbnailUrl
@@ -47,7 +47,7 @@ const ShareButton = ({
 
 ShareButton.propTypes = {
   attribution: PropTypes.string,
-  imageUrl: PropTypes.string.isRequired,
+  canvasLink: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   provider: PropTypes.string.isRequired,
   thumbnailUrl: PropTypes.string.isRequired,

src/components/ShareCanvasLinkDialog.js

@@ -24,7 +24,8 @@ const useStyles = makeStyles((theme) => ({
 const supportsClipboard = "clipboard" in navigator;
 
 const ShareCanvasLinkDialog = ({
-  currentCanvas,
+  manifestId,
+  visibleCanvases,
   label,
   options,
   rights,
@@ -35,17 +36,17 @@ const ShareCanvasLinkDialog = ({
   const [copiedToClipboard, setCopiedToClipboard] = useState(false);
   const { alert } = useStyles();
 
-  if (!enabled || !dialogOpen || !currentCanvas) {
+  if (!enabled || !dialogOpen || visibleCanvases.length === 0) {
     return null;
   }
   const closeDialog = () =>
     updateOptions({
       ...options,
       dialogOpen: false,
     });
-  const imageUrl = `${currentCanvas?.id}/view`;
+  const canvasLink = options.getCanvasLink(manifestId, visibleCanvases);
   const getPreviewUrl = (width) =>
-    `${currentCanvas?.imageServiceIds[0]}/full/${width},/0/default.jpg`;
+    `${visibleCanvases[0]?.imageServiceIds[0]}/full/${width},/0/default.jpg`;
 
   return (
     <Dialog
@@ -77,7 +78,7 @@ const ShareCanvasLinkDialog = ({
             endAdornment: (
               <CopyToClipboard
                 onCopy={() => {
-                  navigator.clipboard.writeText(imageUrl);
+                  navigator.clipboard.writeText(canvasLink);
                   setCopiedToClipboard(true);
                   setTimeout(() => setCopiedToClipboard(false), 3000);
                 }}
@@ -88,7 +89,7 @@ const ShareCanvasLinkDialog = ({
             readOnly: true,
           }}
           size="small"
-          value={imageUrl}
+          value={canvasLink}
           variant="outlined"
         />
         {showRightsInformation && <RightsInformation t={t} rights={rights} />}
@@ -97,7 +98,7 @@ const ShareCanvasLinkDialog = ({
         {["envelope", "facebook", "pinterest", "twitter", "whatsapp"].map(
           (p) => (
             <ShareButton
-              imageUrl={imageUrl}
+              canvasLink={canvasLink}
               label={label}
               provider={p}
               thumbnailUrl={getPreviewUrl(250)}
@@ -115,23 +116,27 @@ const ShareCanvasLinkDialog = ({
 };
 
 ShareCanvasLinkDialog.propTypes = {
-  currentCanvas: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    imageServiceIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-  }),
+  manifestId: PropTypes.string.isRequired,
+  visibleCanvases: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      imageServiceIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+    })
+  ),
   label: PropTypes.string.isRequired,
   options: PropTypes.shape({
     dialogOpen: PropTypes.bool.isRequired,
     enabled: PropTypes.bool.isRequired,
     showRightsInformation: PropTypes.bool.isRequired,
+    getCanvasLink: PropTypes.func.isRequired,
   }).isRequired,
   rights: PropTypes.arrayOf(PropTypes.string),
   t: PropTypes.func.isRequired,
   updateOptions: PropTypes.func.isRequired,
 };
 
 ShareCanvasLinkDialog.defaultProps = {
-  currentCanvas: undefined,
+  visibleCanvases: [],
   rights: [],
 };
 

src/components/ShareControl.js

@@ -3,9 +3,21 @@ import { MiradorMenuButton } from "mirador/dist/es/src/components/MiradorMenuBut
 import PropTypes from "prop-types";
 import React from "react";
 
-const ShareControl = ({ containerId, options, t, updateOptions }) => {
-  const { dialogOpen, enabled } = options;
-  if (!enabled) {
+const ShareControl = ({
+  containerId,
+  options,
+  t,
+  updateOptions,
+  windowViewType,
+}) => {
+  const { dialogOpen, enabled, singleCanvasOnly } = options;
+  if (
+    !enabled ||
+    // Only show in single canvas view if configured
+    (singleCanvasOnly && windowViewType !== "single") ||
+    // Never show in gallery view
+    windowViewType === "gallery"
+  ) {
     return null;
   }
   return (
@@ -30,9 +42,11 @@ ShareControl.propTypes = {
   options: PropTypes.shape({
     dialogOpen: PropTypes.bool.isRequired,
     enabled: PropTypes.bool.isRequired,
+    singleCanvasOnly: PropTypes.bool.isRequired,
   }).isRequired,
   t: PropTypes.func.isRequired,
   updateOptions: PropTypes.func.isRequired,
+  windowViewType: PropTypes.string.isRequired,
 };
 
 export default ShareControl;

src/index.js

@@ -1,8 +1,10 @@
 import { updateWindow } from "mirador/dist/es/src/state/actions";
 import {
   getContainerId,
-  getCurrentCanvas,
   getRights,
+  getVisibleCanvases,
+  getWindowManifests,
+  getWindowViewType,
 } from "mirador/dist/es/src/state/selectors";
 
 import ShareCanvasLinkDialog from "./components/ShareCanvasLinkDialog";
@@ -23,6 +25,7 @@ export default [
     mapStateToProps: (state, { windowId }) => ({
       containerId: getContainerId(state),
       options: getCanvasLinkOptions(state, { windowId }),
+      windowViewType: getWindowViewType(state, { windowId }),
     }),
     mode: "add",
     target: "WindowTopBarPluginArea",
@@ -38,7 +41,8 @@ export default [
     }),
     mapStateToProps: (state, { windowId }) => ({
       containerId: getContainerId(state),
-      currentCanvas: getCurrentCanvas(state, { windowId }),
+      manifestId: getWindowManifests(state, { windowId })[0],
+      visibleCanvases: getVisibleCanvases(state, { windowId }),
       options: getCanvasLinkOptions(state, { windowId }),
       rights: getRights(state, { windowId }),
     }),

src/state/selectors.js

@@ -8,6 +8,8 @@ const defaultConfig = {
   enabled: true,
   // Show the rights information defined in the manifest
   showRightsInformation: true,
+  // Show only in single canvas view,
+  singleCanvasOnly: false,
 };
 
 /** Selector to get text display options for a given window */