diff --git a/README.md b/README.md index 2238d4c..750db0f 100644 --- a/README.md +++ b/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 diff --git a/demo/src/index.js b/demo/src/index.js index b1b60e2..72e8ae2 100644 --- a/demo/src/index.js +++ b/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: [ diff --git a/src/components/ShareButton.js b/src/components/ShareButton.js index 8a7e216..058cb3c 100644 --- a/src/components/ShareButton.js +++ b/src/components/ShareButton.js @@ -19,7 +19,7 @@ const iconMapping = { const ShareButton = ({ attribution, - imageUrl, + canvasLink, label, provider, thumbnailUrl, @@ -27,7 +27,7 @@ const ShareButton = ({ }) => { 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, diff --git a/src/components/ShareCanvasLinkDialog.js b/src/components/ShareCanvasLinkDialog.js index 1c80f2d..a16122e 100644 --- a/src/components/ShareCanvasLinkDialog.js +++ b/src/components/ShareCanvasLinkDialog.js @@ -24,18 +24,19 @@ const useStyles = makeStyles((theme) => ({ const supportsClipboard = "clipboard" in navigator; const ShareCanvasLinkDialog = ({ - currentCanvas, + manifestId, + visibleCanvases, label, options, rights, t, updateOptions, }) => { - const { dialogOpen, enabled, showRightsInformation } = options; + const { dialogOpen, enabled, showRightsInformation, getCanvasLink } = options; const [copiedToClipboard, setCopiedToClipboard] = useState(false); const { alert } = useStyles(); - if (!enabled || !dialogOpen || !currentCanvas) { + if (!enabled || !dialogOpen || visibleCanvases.length === 0) { return null; } const closeDialog = () => @@ -43,9 +44,9 @@ const ShareCanvasLinkDialog = ({ ...options, dialogOpen: false, }); - const imageUrl = `${currentCanvas?.id}/view`; + const canvasLink = getCanvasLink(manifestId, visibleCanvases); const getPreviewUrl = (width) => - `${currentCanvas?.imageServiceIds[0]}/full/${width},/0/default.jpg`; + `${visibleCanvases[0]?.imageServiceIds[0]}/full/${width},/0/default.jpg`; return ( { - 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 && } @@ -97,7 +98,7 @@ const ShareCanvasLinkDialog = ({ {["envelope", "facebook", "pinterest", "twitter", "whatsapp"].map( (p) => ( { - 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; diff --git a/src/index.js b/src/index.js index db5aeee..188e69a 100644 --- a/src/index.js +++ b/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 }), }), diff --git a/src/state/selectors.js b/src/state/selectors.js index 637ea3e..82005e0 100644 --- a/src/state/selectors.js +++ b/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 */