dbf-mirador 4.2.3

package/src/components/CollectionDialog.jsx

@@ -0,0 +1,236 @@
+import { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Chip, Dialog, DialogActions, DialogTitle, Link, MenuList, MenuItem, Typography } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBackSharp';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import asArray from '../lib/asArray';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
+import CollapsibleSection from '../containers/CollapsibleSection';
+import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
+import ManifestInfo from '../containers/ManifestInfo';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
+
+const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(() => ({
+  padding: (theme) => theme.spacing(1),
+}));
+
+const StyledCollectionMetadata = styled('div')(() => ({
+  '& .MuiPaper-root': {
+    background: 'transparent',
+  },
+  padding: (theme) => theme.spacing(2),
+}));
+
+const StyledCollectionFilter = styled('div')(() => ({
+  padding: (theme) => theme.spacing(2),
+  paddingTop: 0,
+}));
+
+/** */
+const Placeholder = ({ onClose, container }) => (
+  <Dialog variant="contained" onClose={onClose} open container={container}>
+    <DialogTitle id="select-collection">
+      <Skeleton variant="text" />
+    </DialogTitle>
+    <ScrollIndicatedDialogContent>
+      <Skeleton variant="text" />
+      <Skeleton variant="text" />
+    </ScrollIndicatedDialogContent>
+  </Dialog>
+);
+
+Placeholder.propTypes = {
+  container: PropTypes.instanceOf(Element).isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+/**
+ * a dialog providing the possibility to select the collection
+ */
+// eslint-disable-next-line complexity
+export function CollectionDialog({
+  addWindow,
+  collection = null,
+  dialogCollectionPath = [],
+  error = null,
+  hideCollectionDialog,
+  isMultipart = false,
+  manifest,
+  manifestId,
+  ready = false,
+  setWorkspaceAddVisibility,
+  showCollectionDialog,
+  updateWindow,
+  windowId = null,
+}) {
+  const container = useContext(WorkspaceContext);
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState(null);
+
+  /** */
+  const hideDialog = () => {
+    hideCollectionDialog(windowId);
+  };
+
+  /** */
+  const selectCollection = (c) => {
+    showCollectionDialog(c.id, [...dialogCollectionPath, manifestId], windowId);
+  };
+
+  /** */
+  const goToPreviousCollection = () => {
+    showCollectionDialog(dialogCollectionPath[dialogCollectionPath.length - 1], dialogCollectionPath.slice(0, -1), windowId);
+  };
+
+  /** */
+  const selectManifest = (m) => {
+    if (windowId) {
+      updateWindow(windowId, {
+        canvasId: null,
+        collectionPath: [...dialogCollectionPath, manifestId],
+        manifestId: m.id,
+      });
+    } else {
+      addWindow({ collectionPath: [...dialogCollectionPath, manifestId], manifestId: m.id });
+    }
+
+    hideDialog();
+    setWorkspaceAddVisibility(false);
+  };
+
+  /** */
+  const dialogContainer = (container?.current || document.body).querySelector(`#${windowId}`);
+
+  if (error) return null;
+  if (!dialogContainer) {
+    return null;
+  }
+
+  if (!ready) return <Placeholder container={dialogContainer} onClose={hideDialog} />;
+
+  const rights = manifest && asArray(manifest.getProperty('rights') || manifest.getProperty('license'));
+
+  const requiredStatement =
+    manifest &&
+    asArray(manifest.getRequiredStatement())
+      .filter((l) => l && l.getValue())
+      .map((labelValuePair) => ({
+        label: null,
+        values: labelValuePair.getValues(),
+      }));
+
+  const collections = manifest.getCollections();
+
+  const currentFilter = filter || (collections.length > 0 ? 'collections' : 'manifests');
+
+  return (
+    <Dialog variant="contained" onClose={hideDialog} container={dialogContainer} open>
+      <DialogTitle id="select-collection">
+        <Typography component="div" variant="overline">
+          {t(isMultipart ? 'multipartCollection' : 'collection')}
+        </Typography>
+        <Typography component="div" variant="h3">
+          <IIIFResourceLabel resource={manifest} />
+        </Typography>
+      </DialogTitle>
+      <StyledScrollIndicatedDialogContent>
+        {collection && (
+          <Button startIcon={<ArrowBackIcon />} onClick={() => goToPreviousCollection()}>
+            <IIIFResourceLabel resource={collection} />
+          </Button>
+        )}
+
+        <StyledCollectionMetadata>
+          <ManifestInfo manifestId={manifest.id} />
+          <CollapsibleSection id="select-collection-rights" label={t('attributionTitle')}>
+            {requiredStatement && <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />}
+            {rights && rights.length > 0 && (
+              <>
+                <Typography variant="subtitle2" component="dt">
+                  {t('rights')}
+                </Typography>
+                {rights.map((v) => (
+                  <Typography variant="body1" component="dd" key={v}>
+                    <Link target="_blank" rel="noopener noreferrer" href={v}>
+                      {v}
+                    </Link>
+                  </Typography>
+                ))}
+              </>
+            )}
+          </CollapsibleSection>
+        </StyledCollectionMetadata>
+        <StyledCollectionFilter>
+          {manifest.getTotalCollections() > 0 && (
+            <Chip
+              clickable
+              color={currentFilter === 'collections' ? 'primary' : 'default'}
+              onClick={() => setFilter('collections')}
+              label={t('totalCollections', { count: manifest.getTotalCollections() })}
+            />
+          )}
+          {manifest.getTotalManifests() > 0 && (
+            <Chip
+              clickable
+              color={currentFilter === 'manifests' ? 'primary' : 'default'}
+              onClick={() => setFilter('manifests')}
+              label={t('totalManifests', { count: manifest.getTotalManifests() })}
+            />
+          )}
+        </StyledCollectionFilter>
+        {currentFilter === 'collections' && (
+          <MenuList>
+            {collections.map((c) => (
+              <MenuItem
+                key={c.id}
+                onClick={() => {
+                  selectCollection(c);
+                }}
+                variant="multiline"
+              >
+                <IIIFResourceLabel resource={c} />
+              </MenuItem>
+            ))}
+          </MenuList>
+        )}
+        {currentFilter === 'manifests' && (
+          <MenuList>
+            {manifest.getManifests().map((m) => (
+              <MenuItem
+                key={m.id}
+                onClick={() => {
+                  selectManifest(m);
+                }}
+                variant="multiline"
+              >
+                <IIIFResourceLabel resource={m} />
+              </MenuItem>
+            ))}
+          </MenuList>
+        )}
+      </StyledScrollIndicatedDialogContent>
+      <DialogActions>
+        <Button onClick={hideDialog}>{t('close')}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+CollectionDialog.propTypes = {
+  addWindow: PropTypes.func.isRequired,
+  collection: PropTypes.object,
+  dialogCollectionPath: PropTypes.arrayOf(PropTypes.string),
+  error: PropTypes.string,
+  hideCollectionDialog: PropTypes.func.isRequired,
+  isMultipart: PropTypes.bool,
+  manifest: PropTypes.object.isRequired,
+  manifestId: PropTypes.string.isRequired,
+  ready: PropTypes.bool,
+  setWorkspaceAddVisibility: PropTypes.func.isRequired,
+  showCollectionDialog: PropTypes.func.isRequired,
+  updateWindow: PropTypes.func.isRequired,
+  windowId: PropTypes.string,
+};

package/src/components/CollectionInfo.jsx

@@ -0,0 +1,48 @@
+import { useId } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import ViewListIcon from '@mui/icons-material/ViewListSharp';
+import { useTranslation } from 'react-i18next';
+import CollapsibleSection from '../containers/CollapsibleSection';
+
+/**
+ * CollectionInfo
+ */
+export function CollectionInfo({ collectionLabel = null, collectionPath = [], showCollectionDialog, windowId = null }) {
+  const { t } = useTranslation();
+  const id = useId();
+  const titleId = useId();
+
+  /**
+   * Show the containing collection.
+   */
+  const openCollectionDialog = () => {
+    const manifestId = collectionPath[collectionPath.length - 1];
+
+    showCollectionDialog(manifestId, collectionPath.slice(0, -1), windowId);
+  };
+
+  if (collectionPath.length === 0) return null;
+
+  return (
+    <CollapsibleSection id={id} label={t('collection')}>
+      {collectionLabel && (
+        <Typography aria-labelledby={`${id} ${titleId}`} id={titleId} variant="h4">
+          {collectionLabel}
+        </Typography>
+      )}
+
+      <Button color="primary" onClick={openCollectionDialog} startIcon={<ViewListIcon />}>
+        {t('showCollection')}
+      </Button>
+    </CollapsibleSection>
+  );
+}
+
+CollectionInfo.propTypes = {
+  collectionLabel: PropTypes.string,
+  collectionPath: PropTypes.arrayOf(PropTypes.string),
+  showCollectionDialog: PropTypes.func.isRequired,
+  windowId: PropTypes.string,
+};

package/src/components/CompanionArea.jsx

@@ -0,0 +1,140 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Slide from '@mui/material/Slide';
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp';
+import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import CompanionWindowFactory from '../containers/CompanionWindowFactory';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import ns from '../config/css-ns';
+
+const Root = styled('div', { name: 'CompanionArea', slot: 'root' })(({ ownerState, theme }) => ({
+  display: 'flex',
+  minHeight: 0,
+  position: 'relative',
+  zIndex: theme.zIndex.appBar - 2,
+  ...((ownerState.position === 'bottom' || ownerState.position === 'far-bottom') && {
+    flexDirection: 'column',
+    width: '100%',
+  }),
+}));
+
+const Container = styled('div', { name: 'CompanionArea', slot: 'container' })(({ ownerState }) => ({
+  display: ownerState?.companionAreaOpen ? 'flex' : 'none',
+  ...((ownerState?.position === 'bottom' || ownerState?.position === 'far-bottom') && {
+    flexDirection: 'column',
+    width: '100%',
+  }),
+  ...(ownerState?.position === 'left' &&
+    ownerState?.companionWindowIds &&
+    ownerState.companionWindowIds.length > 0 && {
+      minWidth: '235px',
+    }),
+}));
+
+const StyledToggle = styled('div', { name: 'CompanionArea', slot: 'toggle' })(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.shades?.dark}`,
+  ...theme.applyStyles('dark', { borderColor: theme.palette.divider }),
+  borderInlineStart: 0,
+  borderRadius: 0,
+  display: 'inline-flex',
+  height: '48px',
+  left: '100%',
+  marginTop: '1rem',
+  overflow: 'hidden',
+  padding: 2,
+  position: 'absolute',
+  width: '23px',
+  zIndex: theme.zIndex.drawer,
+}));
+
+/** */
+export function CompanionArea({
+  classes = {},
+  className = undefined,
+  direction,
+  companionWindowIds,
+  companionAreaOpen,
+  setCompanionAreaOpen = () => {},
+  position,
+  sideBarOpen = false,
+  windowId,
+}) {
+  const { t } = useTranslation();
+  /** */
+  const areaLayoutClass = position === 'bottom' || position === 'far-bottom' ? classes.horizontal : null;
+
+  /** */
+  const collapseIcon = (() => {
+    if (direction === 'rtl') {
+      if (companionAreaOpen) return <ArrowRightIcon />;
+      return <ArrowLeftIcon />;
+    }
+
+    if (companionAreaOpen) return <ArrowLeftIcon />;
+    return <ArrowRightIcon />;
+  })();
+
+  /** */
+  const slideDirection = (() => {
+    const defaultPosition = direction === 'rtl' ? 'left' : 'right';
+    const oppositePosition = direction === 'rtl' ? 'right' : 'left';
+
+    switch (position) {
+      case 'right':
+      case 'far-right':
+        return oppositePosition;
+      case 'bottom':
+      case 'far-bottom':
+        return 'up';
+      default:
+        return defaultPosition;
+    }
+  })();
+
+  const rootClasses = classNames(areaLayoutClass, ns(`companion-area-${position}`), className);
+  // eslint-disable-next-line prefer-rest-params
+  const ownerState = arguments[0];
+
+  return (
+    <Root ownerState={ownerState} className={rootClasses}>
+      <Slide in={companionAreaOpen} direction={slideDirection}>
+        <Container ownerState={ownerState} className={`${ns('companion-windows')}`}>
+          {companionWindowIds.map((id) => (
+            <CompanionWindowFactory id={id} key={id} windowId={windowId} />
+          ))}
+        </Container>
+      </Slide>
+      {setCompanionAreaOpen && position === 'left' && sideBarOpen && companionWindowIds.length > 0 && (
+        <StyledToggle>
+          <MiradorMenuButton
+            aria-expanded={companionAreaOpen}
+            aria-label={companionAreaOpen ? t('collapseSidePanel') : t('expandSidePanel')}
+            edge="start"
+            onClick={() => {
+              setCompanionAreaOpen(windowId, !companionAreaOpen);
+            }}
+            TooltipProps={{ placement: 'right' }}
+          >
+            {collapseIcon}
+          </MiradorMenuButton>
+        </StyledToggle>
+      )}
+    </Root>
+  );
+}
+
+CompanionArea.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
+  className: PropTypes.string,
+  companionAreaOpen: PropTypes.bool.isRequired,
+  companionWindowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  direction: PropTypes.string.isRequired,
+  position: PropTypes.string.isRequired,
+  setCompanionAreaOpen: PropTypes.func,
+  sideBarOpen: PropTypes.bool,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/CompanionWindow.jsx

@@ -0,0 +1,228 @@
+/* eslint-disable react/require-default-props */
+import { Children, cloneElement, forwardRef } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import CloseIcon from '@mui/icons-material/CloseSharp';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewSharp';
+import MoveIcon from '@mui/icons-material/DragIndicatorSharp';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Toolbar from '@mui/material/Toolbar';
+import { useTranslation } from 'react-i18next';
+import { Rnd } from 'react-rnd';
+import { useElementSize } from '@custom-react-hooks/use-element-size';
+import mergeRefs from 'merge-refs';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import ns from '../config/css-ns';
+import LocaleContext from '../contexts/LocaleContext';
+import { getCompanionWindowLocale } from '../state/selectors/companionWindows';
+
+const Root = styled(Paper, { name: 'CompanionWindow', slot: 'root' })({});
+const StyledToolbar = styled(Toolbar, { name: 'CompanionWindow', slot: 'toolbar' })({});
+const StyledTitle = styled(Typography, { name: 'CompanionWindow', slot: 'title' })({});
+const StyledTitleControls = styled('div', { name: 'CompanionWindow', slot: 'controls' })({});
+const Contents = styled(Paper, { name: 'CompanionWindow', slot: 'contents' })({});
+const StyledRnd = styled(Rnd, { name: 'CompanionWindow', slot: 'resize' })({});
+const StyledPositionButton = styled(MiradorMenuButton, {
+  name: 'CompanionWindow',
+  slot: 'positionButton',
+})({});
+const StyledCloseButton = styled(MiradorMenuButton, {
+  name: 'CompanionWindow',
+  slot: 'closeButton',
+})({});
+
+/**
+ * CompanionWindow
+ */
+// eslint-disable-next-line complexity
+export const CompanionWindow = forwardRef((props, innerRef) => {
+  const {
+    ariaLabel = undefined,
+    classes = {},
+    direction,
+    id,
+    paperClassName = '',
+    onCloseClick = () => {},
+    updateCompanionWindow = undefined,
+    isDisplayed = false,
+    position = null,
+    title = null,
+    children = undefined,
+    titleControls = null,
+    defaultSidebarPanelWidth = 235,
+    defaultSidebarPanelHeight = 201,
+  } = props;
+  const [sizeRef, size] = useElementSize();
+  const { t } = useTranslation();
+  const locale = useSelector((state) => getCompanionWindowLocale(state, { companionWindowId: id }), [id]);
+
+  /** */
+  const openInNewStyle = direction === 'rtl' ? { transform: 'scale(-1, 1)' } : {};
+
+  /** */
+  const resizeHandles = (() => {
+    const positions = {
+      ltr: {
+        default: 'left',
+        opposite: 'right',
+      },
+      rtl: {
+        default: 'right',
+        opposite: 'left',
+      },
+    };
+
+    const base = {
+      bottom: false,
+      bottomLeft: false,
+      bottomRight: false,
+      left: false,
+      right: false,
+      top: false,
+      topLeft: false,
+      topRight: false,
+    };
+
+    if (position === 'right' || position === 'far-right') {
+      return { ...base, [positions[direction].default]: true };
+    }
+
+    if (position === 'left') {
+      return { ...base, [positions[direction].opposite]: true };
+    }
+
+    if (position === 'bottom' || position === 'far-bottom') {
+      return { ...base, top: true };
+    }
+
+    return base;
+  })();
+
+  const isBottom = position === 'bottom' || position === 'far-bottom';
+
+  const childrenWithAdditionalProps = Children.map(children, (child) => {
+    if (!child) return null;
+    return cloneElement(child, {
+      parentactions: {
+        closeCompanionWindow: onCloseClick,
+      },
+    });
+  });
+
+  return (
+    <Root
+      ownerState={props}
+      ref={mergeRefs(innerRef, sizeRef)}
+      style={{
+        display: isDisplayed ? null : 'none',
+        order: position === 'left' ? -1 : null,
+      }}
+      className={[
+        ns(`companion-window-${position}`),
+        paperClassName,
+        position === 'bottom' ? classes.horizontal : classes.vertical,
+      ].join(' ')}
+      square
+      component="aside"
+      role="region"
+      aria-label={ariaLabel || title}
+    >
+      <LocaleContext.Provider value={locale}>
+        <StyledRnd
+          style={{ display: 'inherit', position: 'inherit' }}
+          ownerState={props}
+          default={{
+            height: isBottom ? defaultSidebarPanelHeight : '100%',
+            width: isBottom ? 'auto' : defaultSidebarPanelWidth,
+          }}
+          disableDragging
+          enableResizing={resizeHandles}
+          minHeight={50}
+          minWidth={position === 'left' ? 235 : 100}
+        >
+          <StyledToolbar
+            variant="dense"
+            className={[ns('companion-window-header'), size.width < 370 ? 'test' : null].join(' ')}
+            disableGutters
+          >
+            <StyledTitle variant="h3">{title}</StyledTitle>
+            {position === 'left' ? (
+              updateCompanionWindow && (
+                <MiradorMenuButton
+                  aria-label={t('openInCompanionWindow')}
+                  onClick={() => {
+                    updateCompanionWindow({ position: 'right' });
+                  }}
+                >
+                  <OpenInNewIcon style={openInNewStyle} />
+                </MiradorMenuButton>
+              )
+            ) : (
+              <>
+                {updateCompanionWindow && (
+                  <StyledPositionButton
+                    aria-label={position === 'bottom' ? t('moveCompanionWindowToRight') : t('moveCompanionWindowToBottom')}
+                    onClick={() => {
+                      updateCompanionWindow({
+                        position: position === 'bottom' ? 'right' : 'bottom',
+                      });
+                    }}
+                  >
+                    <MoveIcon />
+                  </StyledPositionButton>
+                )}
+                <StyledCloseButton
+                  sx={{
+                    ...(size.width < 370 && {
+                      order: 'unset',
+                    }),
+                  }}
+                  aria-label={t('closeCompanionWindow')}
+                  onClick={onCloseClick}
+                >
+                  <CloseIcon />
+                </StyledCloseButton>
+              </>
+            )}
+            {titleControls && (
+              <StyledTitleControls
+                ownerState={{ position }}
+                sx={{
+                  order: isBottom || size.width < 370 ? 'unset' : 1000,
+                }}
+                className={ns('companion-window-title-controls')}
+              >
+                {titleControls}
+              </StyledTitleControls>
+            )}
+          </StyledToolbar>
+          <Contents className={ns('scrollto-scrollable')} elevation={0}>
+            {childrenWithAdditionalProps}
+          </Contents>
+        </StyledRnd>
+      </LocaleContext.Provider>
+    </Root>
+  );
+});
+
+CompanionWindow.propTypes = {
+  ariaLabel: PropTypes.string,
+  children: PropTypes.node,
+  classes: PropTypes.objectOf(PropTypes.string),
+  defaultSidebarPanelHeight: PropTypes.number,
+  defaultSidebarPanelWidth: PropTypes.number,
+  direction: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  isDisplayed: PropTypes.bool,
+  onCloseClick: PropTypes.func,
+  paperClassName: PropTypes.string,
+  position: PropTypes.string,
+  size: PropTypes.shape({ width: PropTypes.number }),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleControls: PropTypes.node,
+  updateCompanionWindow: PropTypes.func,
+};
+
+CompanionWindow.displayName = 'CompanionWindow';

package/src/components/CompanionWindowFactory.jsx

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useTranslation } from 'react-i18next';
+import CompanionWindowRegistry from '../lib/CompanionWindowRegistry';
+import CompanionWindow from '../containers/CompanionWindow';
+import ErrorContent from '../containers/ErrorContent';
+
+/**
+ * Render a companion window using the appropriate component for the content
+ */
+export function CompanionWindowFactory({ content = null, id, windowId }) {
+  const { t } = useTranslation();
+  const ErroredCompanionWindow = useCallback(
+    ({ error }) => (
+      <CompanionWindow title={t('error')} windowId={windowId} id={id}>
+        <ErrorContent error={error} windowId={windowId} companionWindowId={id} />
+      </CompanionWindow>
+    ),
+    [windowId, t, id],
+  );
+
+  const DynamicCompanionWindowType = CompanionWindowRegistry[content];
+
+  if (!DynamicCompanionWindowType) return null;
+
+  return (
+    <ErrorBoundary fallbackComponent={ErroredCompanionWindow}>
+      <DynamicCompanionWindowType id={id} windowId={windowId} />
+    </ErrorBoundary>
+  );
+}
+
+CompanionWindowFactory.propTypes = {
+  content: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};