dbf-mirador 4.2.3

package/src/components/Window.jsx

@@ -0,0 +1,150 @@
+import { useContext, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import { MosaicWindowContext } from 'react-mosaic-component';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useTranslation } from 'react-i18next';
+import ns from '../config/css-ns';
+import WindowTopBar from '../containers/WindowTopBar';
+import PrimaryWindow from '../containers/PrimaryWindow';
+import CompanionArea from '../containers/CompanionArea';
+import MinimalWindow from '../containers/MinimalWindow';
+import ErrorContent from '../containers/ErrorContent';
+import IIIFAuthentication from '../containers/IIIFAuthentication';
+import { PluginHook } from './PluginHook';
+
+const rowMixin = {
+  display: 'flex',
+  flex: '1',
+  flexDirection: 'row',
+  minHeight: 0,
+};
+
+const columnMixin = {
+  display: 'flex',
+  flex: '1',
+  flexDirection: 'column',
+  minHeight: 0,
+};
+
+const Root = styled(Paper, { name: 'Window', slot: 'root' })(({ ownerState, theme }) => ({
+  ...columnMixin,
+  backgroundColor: theme.palette.shades?.dark,
+  borderRadius: 0,
+  height: '100%',
+  overflow: 'hidden',
+  width: '100%',
+  ...(ownerState?.maximized && {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    zIndex: theme.zIndex.modal - 1,
+  }),
+}));
+
+const ContentRow = styled('div', { name: 'Window', slot: 'row' })(() => ({
+  ...rowMixin,
+}));
+
+const ContentColumn = styled('div', { name: 'Window', slot: 'column' })(() => ({
+  ...columnMixin,
+}));
+
+const StyledPrimaryWindow = styled(PrimaryWindow, { name: 'Window', slot: 'primary' })(() => ({
+  ...rowMixin,
+  height: '300px',
+  position: 'relative',
+}));
+
+const StyledCompanionAreaBottom = styled(CompanionArea, { name: 'Window', slot: 'bottom' })(() => ({
+  ...rowMixin,
+  flex: '0',
+  flexBasis: 'auto',
+}));
+
+const StyledCompanionAreaRight = styled('div', { name: 'Window', slot: 'right' })(() => ({
+  ...rowMixin,
+  flex: '0 1 auto',
+}));
+
+/** Window title bar wrapper for drag controls in the mosaic view */
+const DraggableNavBar = ({ children, ...props }) => {
+  const { mosaicWindowActions } = useContext(MosaicWindowContext);
+  return mosaicWindowActions.connectDragSource(<nav {...props}>{children}</nav>);
+};
+
+/**
+ * Represents a Window in the mirador workspace
+ * @param {object} window
+ */
+export function Window({
+  focusWindow = () => {},
+  label = null,
+  isFetching = false,
+  sideBarOpen = false,
+  view = undefined,
+  windowDraggable = null,
+  windowId,
+  workspaceType = null,
+  manifestError = null,
+}) {
+  const { t } = useTranslation();
+  // eslint-disable-next-line prefer-rest-params
+  const ownerState = arguments[0];
+  const ErrorWindow = useCallback(
+    ({ error }) => (
+      <MinimalWindow windowId={windowId}>
+        <ErrorContent error={error} windowId={windowId} />
+      </MinimalWindow>
+    ),
+    [windowId],
+  );
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorWindow}>
+      <Root
+        onFocus={focusWindow}
+        ownerState={ownerState}
+        component="section"
+        elevation={1}
+        id={windowId}
+        className={ns('window')}
+        aria-label={t('window', { label })}
+      >
+        <WindowTopBar
+          component={workspaceType === 'mosaic' && windowDraggable ? DraggableNavBar : undefined}
+          windowId={windowId}
+          windowDraggable={windowDraggable}
+        />
+        <IIIFAuthentication windowId={windowId} />
+        {manifestError && <ErrorContent error={{ stack: manifestError }} windowId={windowId} />}
+        <ContentRow>
+          <ContentColumn>
+            <StyledPrimaryWindow view={view} windowId={windowId} isFetching={isFetching} sideBarOpen={sideBarOpen} />
+            <StyledCompanionAreaBottom windowId={windowId} position="bottom" />
+          </ContentColumn>
+          <StyledCompanionAreaRight>
+            <CompanionArea windowId={windowId} position="right" />
+            <CompanionArea windowId={windowId} position="far-right" />
+          </StyledCompanionAreaRight>
+        </ContentRow>
+        <CompanionArea windowId={windowId} position="far-bottom" />
+        <PluginHook targetName="Window" {...ownerState} />
+      </Root>
+    </ErrorBoundary>
+  );
+}
+
+Window.propTypes = {
+  focusWindow: PropTypes.func,
+  isFetching: PropTypes.bool,
+  label: PropTypes.string,
+  manifestError: PropTypes.string,
+  maximized: PropTypes.bool,
+  sideBarOpen: PropTypes.bool,
+  view: PropTypes.string,
+  windowDraggable: PropTypes.bool,
+  windowId: PropTypes.string.isRequired,
+  workspaceType: PropTypes.string,
+};

package/src/components/WindowAuthenticationBar.jsx

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { alpha, styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Collapse from '@mui/material/Collapse';
+import DialogActions from '@mui/material/DialogActions';
+import Typography from '@mui/material/Typography';
+import LockIcon from '@mui/icons-material/LockSharp';
+import { useTranslation } from 'react-i18next';
+import SanitizedHtml from '../containers/SanitizedHtml';
+import { PluginHook } from './PluginHook';
+
+const StyledTopBar = styled('div')(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: theme.palette.secondary.main,
+  color: theme.palette.secondary.contrastText,
+  display: 'flex',
+  padding: theme.spacing(1),
+}));
+
+const StyledFauxButton = styled('span')(({ theme }) => ({
+  marginLeft: theme.spacing(2.5),
+}));
+
+/** */
+export function WindowAuthenticationBar({
+  confirmButton = undefined,
+  continueLabel = undefined,
+  header = undefined,
+  description = undefined,
+  icon = undefined,
+  label,
+  ruleSet = 'iiif',
+  hasLogoutService = true,
+  status = undefined,
+  ConfirmProps = {},
+  onConfirm,
+}) {
+  const { t } = useTranslation();
+  // eslint-disable-next-line prefer-rest-params
+  const pluginProps = arguments[0];
+  const [open, setOpen] = useState(false);
+
+  /** */
+  const onSubmit = () => {
+    setOpen(false);
+    onConfirm();
+  };
+
+  if (status === 'ok' && !hasLogoutService) return null;
+
+  const button = (
+    <Button
+      onClick={onSubmit}
+      color="secondary"
+      sx={(theme) => ({
+        backgroundColor: theme.palette.secondary.contrastText,
+        lineHeight: '1.5rem',
+      })}
+      {...ConfirmProps}
+    >
+      {confirmButton || t('login')}
+    </Button>
+  );
+
+  if (!description && !header) {
+    return (
+      <Paper square elevation={4} color="secondary">
+        <StyledTopBar>
+          {icon || <LockIcon sx={{ marginInlineEnd: 5 }} />}
+          <Typography
+            component="h3"
+            variant="body1"
+            sx={{
+              color: 'inherit',
+            }}
+          >
+            {ruleSet ? <SanitizedHtml htmlString={label} ruleSet={ruleSet} /> : label}
+          </Typography>
+          <PluginHook targetName="WindowAuthenticationBar" {...pluginProps} />
+          {button}
+        </StyledTopBar>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper square elevation={4} color="secondary">
+      <Button
+        fullWidth
+        onClick={() => setOpen(true)}
+        component="div"
+        color="inherit"
+        sx={(theme) => ({
+          '&:hover': {
+            backgroundColor: theme.palette.secondary.main,
+          },
+          backgroundColor: theme.palette.secondary.main,
+          borderRadius: 0,
+          color: theme.palette.secondary.contrastText,
+          justifyContent: 'start',
+          textTransform: 'none',
+        })}
+      >
+        {icon || <LockIcon sx={{ marginInlineEnd: 1.5 }} />}
+        <Typography
+          component="h3"
+          variant="body1"
+          sx={{
+            color: 'inherit',
+            paddingBlockEnd: 1,
+            paddingBlockStart: 1,
+          }}
+        >
+          {ruleSet ? <SanitizedHtml htmlString={label} ruleSet={ruleSet} /> : label}
+        </Typography>
+        <PluginHook targetName="WindowAuthenticationBar" {...pluginProps} />
+        <StyledFauxButton>
+          {!open && (
+            <Typography
+              variant="button"
+              sx={{
+                color: 'inherit',
+              }}
+            >
+              {continueLabel || t('continue')}
+            </Typography>
+          )}
+        </StyledFauxButton>
+      </Button>
+      <Collapse
+        sx={(theme) => ({
+          backgroundColor: theme.palette.secondary.main,
+          color: theme.palette.secondary.contrastText,
+          paddingInlineEnd: theme.spacing(1),
+          paddingInlineStart: theme.spacing(1),
+        })}
+        in={open}
+        onClose={() => setOpen(false)}
+      >
+        <Typography
+          variant="body1"
+          sx={{
+            color: 'inherit',
+          }}
+        >
+          {ruleSet ? <SanitizedHtml htmlString={header} ruleSet={ruleSet} /> : header}
+          {header && description ? ': ' : ''}
+          {ruleSet ? <SanitizedHtml htmlString={description} ruleSet={ruleSet} /> : description}
+        </Typography>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)} color="inherit">
+            {t('cancel')}
+          </Button>
+
+          {button}
+        </DialogActions>
+      </Collapse>
+    </Paper>
+  );
+}
+
+WindowAuthenticationBar.propTypes = {
+  confirmButton: PropTypes.string,
+  ConfirmProps: PropTypes.object,
+  continueLabel: PropTypes.string,
+  description: PropTypes.node,
+  hasLogoutService: PropTypes.bool,
+  header: PropTypes.node,
+  icon: PropTypes.node,
+  label: PropTypes.node.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  ruleSet: PropTypes.string,
+  status: PropTypes.string,
+};

package/src/components/WindowCanvasNavigationControls.jsx

@@ -0,0 +1,91 @@
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { alpha, styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
+import { useElementSize } from '@custom-react-hooks/use-element-size';
+import mergeRefs from 'merge-refs';
+import ZoomControls from '../containers/ZoomControls';
+import ViewerInfo from '../containers/ViewerInfo';
+import ViewerNavigation from '../containers/ViewerNavigation';
+import ns from '../config/css-ns';
+import { PluginHook } from './PluginHook';
+
+const Root = styled(Paper, { name: 'WindowCanvasNavigationControls', slot: 'root' })(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: alpha(theme.palette.background.paper, 0.5),
+  bottom: 0,
+  cursor: 'default',
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  position: 'absolute',
+  textAlign: 'center',
+  width: '100%',
+  zIndex: 50,
+}));
+
+/**
+ * Represents the viewer controls in the mirador workspace.
+ */
+export const WindowCanvasNavigationControls = forwardRef(
+  ({ showZoomControls = false, visible = true, windowId, zoomToWorld, ...rest }, ref) => {
+    const [sizeRef, size] = useElementSize();
+
+    const pluginProps = {
+      showZoomControls,
+      size,
+      visible,
+      windowId,
+      ...rest,
+    };
+    /**
+     * Determine if canvasNavControls are stacked (based on a hard-coded width)
+     */
+    const canvasNavControlsAreStacked = size && size.width && size.width <= 253;
+
+    if (!visible)
+      return (
+        <Typography style={visuallyHidden} component="div">
+          <ViewerInfo windowId={windowId} />
+        </Typography>
+      );
+
+    return (
+      <Root
+        square
+        className={classNames(ns('canvas-nav'), canvasNavControlsAreStacked ? ns('canvas-nav-stacked') : null)}
+        elevation={0}
+        ref={mergeRefs(ref, sizeRef)}
+      >
+        <Stack
+          direction={canvasNavControlsAreStacked ? 'column' : 'row'}
+          divider={<Divider orientation={canvasNavControlsAreStacked ? 'horizontal' : 'vertical'} variant="middle" flexItem />}
+          spacing={0}
+        >
+          <ViewerNavigation windowId={windowId} />
+          {showZoomControls && <ZoomControls windowId={windowId} zoomToWorld={zoomToWorld} />}
+        </Stack>
+        <ViewerInfo windowId={windowId} />
+
+        <PluginHook targetName="WindowCanvasNavigationControls" {...pluginProps} />
+      </Root>
+    );
+  },
+);
+
+WindowCanvasNavigationControls.propTypes = {
+  // eslint-disable-next-line react/require-default-props -- this rule doesn't detect default args through forwardRef's inner callback (see the default arg on line 37); https://github.com/jsx-eslint/eslint-plugin-react/issues/2856
+  showZoomControls: PropTypes.bool,
+  // eslint-disable-next-line react/require-default-props -- same forwardRef detection gap as above
+  visible: PropTypes.bool,
+  windowId: PropTypes.string.isRequired,
+  zoomToWorld: PropTypes.func.isRequired,
+};
+
+WindowCanvasNavigationControls.displayName = 'WindowCanvasNavigationControls';

package/src/components/WindowList.jsx

@@ -0,0 +1,71 @@
+import { useContext } from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+
+/**
+ */
+export function WindowList({
+  handleClose,
+  windowIds,
+  focusWindow,
+  focusedWindowId = null,
+  titles = {},
+  tReady = false,
+  ...menuProps
+}) {
+  const { t } = useTranslation();
+  const container = useContext(WorkspaceContext);
+  return (
+    <Menu
+      anchorOrigin={{
+        horizontal: 'right',
+        vertical: 'top',
+      }}
+      transformOrigin={{
+        horizontal: 'left',
+        vertical: 'top',
+      }}
+      id="window-list-menu"
+      container={container?.current}
+      onClose={handleClose}
+      {...menuProps}
+    >
+      <ListSubheader role="presentation" selected={false} disabled tabIndex="-1">
+        {t('openWindows')}
+      </ListSubheader>
+      {windowIds.map((windowId, i) => (
+        <MenuItem
+          key={windowId}
+          selected={windowId === focusedWindowId}
+          onClick={(e) => {
+            focusWindow(windowId, true);
+            handleClose(e);
+          }}
+        >
+          <ListItemText
+            slotProps={{
+              primary: { variant: 'body1' },
+            }}
+          >
+            {titles[windowId] || t('untitled')}
+          </ListItemText>
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+}
+
+WindowList.propTypes = {
+  container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  focusedWindowId: PropTypes.string,
+  focusWindow: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  titles: PropTypes.objectOf(PropTypes.string),
+  tReady: PropTypes.bool,
+  windowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};

package/src/components/WindowListButton.jsx

@@ -0,0 +1,57 @@
+import { useId, useState } from 'react';
+import PropTypes from 'prop-types';
+import BookmarksIcon from '@mui/icons-material/BookmarksSharp';
+import { useTranslation } from 'react-i18next';
+import WindowList from '../containers/WindowList';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+
+/**
+ * WindowListButton ~
+ */
+export function WindowListButton({ disabled = false, windowCount }) {
+  const { t } = useTranslation();
+  const [windowListAnchor, setWindowListAnchor] = useState(null);
+  const id = useId();
+
+  /** */
+  const handleClose = () => {
+    setWindowListAnchor(null);
+  };
+  /** */
+  const handleOpen = (event) => {
+    setWindowListAnchor(event.currentTarget);
+  };
+
+  return (
+    <>
+      <MiradorMenuButton
+        aria-haspopup="true"
+        aria-label={t('listAllOpenWindows')}
+        aria-owns={windowListAnchor ? id : null}
+        selected={Boolean(windowListAnchor)}
+        disabled={disabled}
+        badge
+        BadgeProps={{
+          badgeContent: windowCount,
+          sx: {
+            '.MuiBadge-badge': {
+              paddingLeft: 1.5,
+            },
+          },
+        }}
+        onClick={(e) => handleOpen(e)}
+      >
+        <BookmarksIcon />
+      </MiradorMenuButton>
+
+      {Boolean(windowListAnchor) && (
+        <WindowList anchorEl={windowListAnchor} id={id} open={Boolean(windowListAnchor)} handleClose={handleClose} />
+      )}
+    </>
+  );
+}
+
+WindowListButton.propTypes = {
+  disabled: PropTypes.bool,
+  windowCount: PropTypes.number.isRequired,
+};

package/src/components/WindowSideBar.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Drawer from '@mui/material/Drawer';
+import Paper from '@mui/material/Paper';
+import { useTranslation } from 'react-i18next';
+import WindowSideBarButtons from '../containers/WindowSideBarButtons';
+
+const Root = styled(Drawer, { name: 'WindowSideBar', slot: 'root' })(({ theme }) => ({
+  flexShrink: 0,
+  order: -1000,
+  zIndex: theme.zIndex.appBar - 1,
+}));
+
+/**
+ * WindowSideBar
+ */
+export function WindowSideBar({ classes = {}, direction, windowId, sideBarOpen = false }) {
+  const { t } = useTranslation();
+  return (
+    <Drawer
+      sx={{ flexShrink: 0, order: -1000, zIndex: (theme) => theme.zIndex.appBar - 1 }}
+      variant="persistent"
+      className={classes.drawer}
+      anchor={direction === 'rtl' ? 'right' : 'left'}
+      slotProps={{
+        paper: {
+          component: 'nav',
+          sx: { width: sideBarOpen ? 48 : 0, position: 'relative' },
+        },
+        transition: {
+          direction: direction === 'rtl' ? 'left' : 'right',
+          mountOnEnter: true,
+          unmountOnExit: true,
+        },
+      }}
+      open={sideBarOpen}
+    >
+      <WindowSideBarButtons windowId={windowId} />
+    </Drawer>
+  );
+}
+
+WindowSideBar.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
+  direction: PropTypes.string.isRequired,
+  sideBarOpen: PropTypes.bool,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowSideBarAnnotationsPanel.jsx

@@ -0,0 +1,51 @@
+import { createRef } from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import AnnotationSettings from '../containers/AnnotationSettings';
+import CanvasAnnotations from '../containers/CanvasAnnotations';
+import CompanionWindow from '../containers/CompanionWindow';
+import { CompanionWindowSection } from './CompanionWindowSection';
+import ns from '../config/css-ns';
+
+/**
+ * WindowSideBarAnnotationsPanel ~
+ */
+export function WindowSideBarAnnotationsPanel({ annotationCount, canvasIds = [], windowId, id }) {
+  const { t } = useTranslation();
+  const containerRef = createRef();
+  return (
+    <CompanionWindow
+      title={t('annotations')}
+      paperClassName={ns('window-sidebar-annotation-panel')}
+      windowId={windowId}
+      id={id}
+      ref={containerRef}
+      titleControls={<AnnotationSettings windowId={windowId} />}
+    >
+      <CompanionWindowSection>
+        <Typography component="p" variant="subtitle2">
+          {t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}
+        </Typography>
+      </CompanionWindowSection>
+
+      {canvasIds.map((canvasId, index) => (
+        <CanvasAnnotations
+          canvasId={canvasId}
+          containerRef={containerRef}
+          key={canvasId}
+          index={index}
+          totalSize={canvasIds.length}
+          windowId={windowId}
+        />
+      ))}
+    </CompanionWindow>
+  );
+}
+
+WindowSideBarAnnotationsPanel.propTypes = {
+  annotationCount: PropTypes.number.isRequired,
+  canvasIds: PropTypes.arrayOf(PropTypes.string),
+  id: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};