dbf-mirador 4.2.3

package/src/components/WindowSideBarButtons.jsx

@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Badge from '@mui/material/Badge';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Tooltip from '@mui/material/Tooltip';
+import InfoIcon from '@mui/icons-material/InfoSharp';
+import AnnotationIcon from '@mui/icons-material/CommentSharp';
+import AttributionIcon from '@mui/icons-material/CopyrightSharp';
+import LayersIcon from '@mui/icons-material/LayersSharp';
+import SearchIcon from '@mui/icons-material/SearchSharp';
+import { useTranslation } from 'react-i18next';
+import CanvasIndexIcon from './icons/CanvasIndexIcon';
+import { usePlugins } from '../extend/usePlugins';
+
+const Root = styled(Tabs, { name: 'WindowSideBarButtons', slot: 'root' })({
+  '& .MuiTabs-flexContainer': {
+    flexDirection: 'column',
+  },
+  '&.MuiTabs-indicator': {
+    display: 'none',
+  },
+});
+
+const StyledTabButton = styled(Tab, { name: 'WindowSideBarButtons', slot: 'button' })(({ theme }) => ({
+  '&.Mui-selected': {
+    borderRight: '2px solid',
+    borderRightColor: theme.palette.primary.main,
+  },
+  '&.MuiTab-root': {
+    '&:active': {
+      backgroundColor: theme.palette.action.active,
+    },
+    '&:focus': {
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+      backgroundColor: theme.palette.action.hover,
+      textDecoration: 'none',
+      // Reset on touch devices, it doesn't add specificity
+    },
+    '&:hover': {
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+      backgroundColor: theme.palette.action.hover,
+      textDecoration: 'none',
+      // Reset on touch devices, it doesn't add specificity
+    },
+    borderRight: '2px solid transparent',
+    minWidth: 'auto',
+  },
+  fill: 'currentcolor',
+}));
+
+/** */
+function TabButton({ value, ...tabProps }) {
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t('openCompanionWindow', { context: value })}>
+      <StyledTabButton {...tabProps} value={value} aria-label={t('openCompanionWindow', { context: value })} disableRipple />
+    </Tooltip>
+  );
+}
+
+TabButton.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+/**
+ *
+ */
+export function WindowSideBarButtons({
+  addCompanionWindow,
+  hasAnnotations = false,
+  hasAnyAnnotations = false,
+  hasAnyLayers = false,
+  hasCurrentLayers = false,
+  hasSearchResults = false,
+  hasSearchService = false,
+  panels = [],
+  sideBarPanel = 'closed',
+}) {
+  const { t } = useTranslation();
+  const { PluginComponents } = usePlugins('WindowSideBarButtons');
+  /** */
+  const handleChange = (event, value) => {
+    addCompanionWindow(value);
+  };
+
+  return (
+    <Root
+      value={sideBarPanel === 'closed' ? false : sideBarPanel}
+      onChange={handleChange}
+      variant="fullWidth"
+      indicatorColor="primary"
+      textColor="primary"
+      orientation="vertical"
+    >
+      {panels.info && <TabButton value="info" icon={<InfoIcon />} />}
+      {panels.attribution && <TabButton value="attribution" icon={<AttributionIcon />} />}
+      {panels.canvas && <TabButton value="canvas" icon={<CanvasIndexIcon />} />}
+      {panels.annotations && (hasAnnotations || hasAnyAnnotations) && (
+        <TabButton
+          value="annotations"
+          icon={
+            <Badge overlap="rectangular" color="notification" invisible={!hasAnnotations} variant="dot">
+              <AnnotationIcon />
+            </Badge>
+          }
+        />
+      )}
+      {panels.search && hasSearchService && (
+        <TabButton
+          value="search"
+          icon={
+            <Badge overlap="rectangular" color="notification" invisible={!hasSearchResults} variant="dot">
+              <SearchIcon />
+            </Badge>
+          }
+        />
+      )}
+      {panels.layers && hasAnyLayers && (
+        <TabButton
+          value="layers"
+          icon={
+            <Badge overlap="rectangular" color="notification" invisible={!hasCurrentLayers} variant="dot">
+              <LayersIcon />
+            </Badge>
+          }
+        />
+      )}
+      {PluginComponents &&
+        PluginComponents.map((PluginComponent) => (
+          <TabButton key={PluginComponent.value} value={PluginComponent.value} icon={<PluginComponent />} />
+        ))}
+    </Root>
+  );
+}
+
+WindowSideBarButtons.propTypes = {
+  addCompanionWindow: PropTypes.func.isRequired,
+  hasAnnotations: PropTypes.bool,
+  hasAnyAnnotations: PropTypes.bool,
+  hasAnyLayers: PropTypes.bool,
+  hasCurrentLayers: PropTypes.bool,
+  hasSearchResults: PropTypes.bool,
+  hasSearchService: PropTypes.bool,
+  panels: PropTypes.objectOf(PropTypes.bool),
+  sideBarPanel: PropTypes.string,
+};

package/src/components/WindowSideBarCanvasPanel.jsx

@@ -0,0 +1,165 @@
+import { useId, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import ItemListIcon from '@mui/icons-material/ReorderSharp';
+import TocIcon from '@mui/icons-material/SortSharp';
+import ThumbnailListIcon from '@mui/icons-material/ViewListSharp';
+import Typography from '@mui/material/Typography';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForwardSharp';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { useTranslation } from 'react-i18next';
+import CompanionWindow from '../containers/CompanionWindow';
+import SidebarIndexList from '../containers/SidebarIndexList';
+import SidebarIndexTableOfContents from '../containers/SidebarIndexTableOfContents';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
+
+const StyledBreak = styled('div')(() => ({
+  flexBasis: '100%',
+  height: 0,
+}));
+
+/**
+ * a panel showing the canvases for a given manifest
+ */
+export function WindowSideBarCanvasPanel({
+  collection = null,
+  id,
+  showMultipart,
+  sequenceId = null,
+  sequences = [],
+  variant,
+  showToc = false,
+  updateSequence,
+  updateVariant,
+  windowId,
+}) {
+  const { t } = useTranslation();
+  const containerRef = useRef();
+  const tabPanelId = useId();
+
+  /** */
+  const handleSequenceChange = (event) => {
+    updateSequence(event.target.value);
+  };
+
+  /** */
+  const handleVariantChange = (event, value) => {
+    updateVariant(value);
+  };
+
+  let listComponent;
+
+  if (variant === 'tableOfContents') {
+    listComponent = <SidebarIndexTableOfContents id={id} containerRef={containerRef} windowId={windowId} />;
+  } else {
+    listComponent = <SidebarIndexList id={id} containerRef={containerRef} windowId={windowId} />;
+  }
+
+  return (
+    <CompanionWindow
+      title={t('canvasIndex')}
+      id={id}
+      windowId={windowId}
+      ref={containerRef}
+      titleControls={
+        <>
+          {sequences && sequences.length > 1 && (
+            <FormControl>
+              <Select
+                MenuProps={{
+                  anchorOrigin: {
+                    horizontal: 'left',
+                    vertical: 'bottom',
+                  },
+                }}
+                displayEmpty
+                value={sequenceId}
+                onChange={handleSequenceChange}
+                name="sequenceId"
+                sx={{
+                  '&.MuiSelect-select': {
+                    '&:focus': {
+                      backgroundColor: 'background.paper',
+                    },
+                  },
+                  backgroundColor: 'background.paper',
+                }}
+                data-testid="sequence-select"
+              >
+                {sequences.map((s, i) => (
+                  <MenuItem value={s.id} key={s.id}>
+                    <Typography variant="body2">
+                      <IIIFResourceLabel resource={s} />
+                    </Typography>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+          <StyledBreak />
+          <Tabs value={variant} onChange={handleVariantChange} variant="fullWidth" indicatorColor="primary" textColor="primary">
+            {showToc && (
+              <Tooltip title={t('tableOfContentsList')} value="tableOfContents">
+                <Tab
+                  sx={{ minWidth: 'auto' }}
+                  value="tableOfContents"
+                  aria-label={t('tableOfContentsList')}
+                  aria-controls={tabPanelId}
+                  icon={<TocIcon style={{ transform: 'scale(-1, 1)' }} />}
+                />
+              </Tooltip>
+            )}
+            <Tooltip title={t('itemList')} value="item">
+              <Tab
+                sx={{ minWidth: 'auto' }}
+                value="item"
+                aria-label={t('itemList')}
+                aria-controls={tabPanelId}
+                icon={<ItemListIcon />}
+              />
+            </Tooltip>
+            <Tooltip title={t('thumbnailList')} value="thumbnail">
+              <Tab
+                sx={{ minWidth: 'auto' }}
+                value="thumbnail"
+                aria-label={t('thumbnailList')}
+                aria-controls={tabPanelId}
+                icon={<ThumbnailListIcon />}
+              />
+            </Tooltip>
+          </Tabs>
+        </>
+      }
+    >
+      <div id={tabPanelId}>
+        {collection && (
+          <Button fullWidth onClick={showMultipart} endIcon={<ArrowForwardIcon />}>
+            <Typography sx={{ textTransform: 'none' }}>
+              <IIIFResourceLabel resource={collection} />
+            </Typography>
+          </Button>
+        )}
+        {listComponent}
+      </div>
+    </CompanionWindow>
+  );
+}
+
+WindowSideBarCanvasPanel.propTypes = {
+  collection: PropTypes.object,
+  id: PropTypes.string.isRequired,
+  sequenceId: PropTypes.string,
+  sequences: PropTypes.arrayOf(PropTypes.object),
+  showMultipart: PropTypes.func.isRequired,
+  showToc: PropTypes.bool,
+  updateSequence: PropTypes.func.isRequired,
+  updateVariant: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['item', 'thumbnail', 'tableOfContents']).isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowSideBarCollectionPanel.jsx

@@ -0,0 +1,179 @@
+import PropTypes from 'prop-types';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpwardSharp';
+import { useTranslation } from 'react-i18next';
+import CompanionWindow from '../containers/CompanionWindow';
+import IIIFThumbnail from '../containers/IIIFThumbnail';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
+
+/** */
+function Item({ manifest, canvasNavigation, variant, ...otherProps }) {
+  return (
+    <MenuItem
+      divider
+      component="li"
+      variant="multiline"
+      sx={{
+        alignItems: 'flex-start',
+        paddingRight: 1,
+      }}
+      {...otherProps}
+    >
+      {variant === 'thumbnail' && (
+        <ListItemIcon>
+          <IIIFThumbnail resource={manifest} maxHeight={canvasNavigation.height} maxWidth={canvasNavigation.width} />
+        </ListItemIcon>
+      )}
+      <ListItemText>
+        <IIIFResourceLabel resource={manifest} />
+      </ListItemText>
+    </MenuItem>
+  );
+}
+
+Item.propTypes = {
+  canvasNavigation: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }).isRequired,
+  manifest: PropTypes.object.isRequired,
+  variant: PropTypes.string.isRequired,
+};
+
+/** */
+export function WindowSideBarCollectionPanel({
+  canvasNavigation,
+  collectionPath = [],
+  collection = null,
+  id,
+  isFetching = false,
+  manifestId,
+  parentCollection = null,
+  updateCompanionWindow,
+  updateWindow,
+  variant = null,
+  windowId,
+}) {
+  const { t } = useTranslation();
+  /** */
+  const isMultipart = (() => {
+    if (!collection) return false;
+
+    const behaviors = collection.getProperty('behavior');
+
+    if (!behaviors) return false;
+
+    if (Array.isArray(behaviors)) return behaviors.includes('multi-part');
+
+    return behaviors === 'multi-part';
+  })();
+
+  return (
+    <CompanionWindow
+      title={t(isMultipart ? 'multipartCollection' : 'collection')}
+      windowId={windowId}
+      id={id}
+      titleControls={
+        <>
+          {parentCollection && (
+            <List>
+              <ListItemButton onClick={() => updateCompanionWindow({ collectionPath: collectionPath.slice(0, -1) })}>
+                <ListItemIcon>
+                  <ArrowUpwardIcon />
+                </ListItemIcon>
+                <ListItemText
+                  slotProps={{
+                    primary: { variant: 'body1' },
+                  }}
+                >
+                  <IIIFResourceLabel resource={parentCollection} />
+                </ListItemText>
+              </ListItemButton>
+            </List>
+          )}
+          <Typography variant="h6">
+            {collection && <IIIFResourceLabel resource={collection} />}
+            {isFetching && <Skeleton variant="text" />}
+          </Typography>
+        </>
+      }
+    >
+      <MenuList>
+        {isFetching && (
+          <MenuItem>
+            <ListItemText>
+              <Skeleton variant="text" />
+              <Skeleton variant="text" />
+              <Skeleton variant="text" />
+            </ListItemText>
+          </MenuItem>
+        )}
+        {collection &&
+          collection.getCollections().map((manifest) => {
+            /** select the new manifest and go back to the normal index */
+            const onClick = () => {
+              // close collection
+              updateCompanionWindow({ collectionPath: [...collectionPath, manifest.id] });
+            };
+
+            return (
+              <Item
+                key={manifest.id}
+                onClick={onClick}
+                canvasNavigation={canvasNavigation}
+                manifest={manifest}
+                variant={variant}
+                selected={manifestId === manifest.id}
+              />
+            );
+          })}
+        {collection &&
+          collection.getManifests().map((manifest) => {
+            /** select the new manifest and go back to the normal index */
+            const onClick = () => {
+              // select new manifest
+              updateWindow({ canvasId: null, collectionPath, manifestId: manifest.id });
+              // close collection
+              updateCompanionWindow({ multipart: false });
+            };
+
+            return (
+              <Item
+                key={manifest.id}
+                onClick={onClick}
+                canvasNavigation={canvasNavigation}
+                manifest={manifest}
+                variant={variant}
+                selected={manifestId === manifest.id}
+              />
+            );
+          })}
+      </MenuList>
+    </CompanionWindow>
+  );
+}
+
+WindowSideBarCollectionPanel.propTypes = {
+  canvasNavigation: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }).isRequired,
+  collection: PropTypes.object,
+  collectionPath: PropTypes.arrayOf(PropTypes.string),
+  id: PropTypes.string.isRequired,
+  isFetching: PropTypes.bool,
+  manifestId: PropTypes.string.isRequired,
+  parentCollection: PropTypes.object,
+  updateCompanionWindow: PropTypes.func.isRequired,
+  updateWindow: PropTypes.func.isRequired,
+  variant: PropTypes.string,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowSideBarInfoPanel.jsx

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import CompanionWindow from '../containers/CompanionWindow';
+import { CompanionWindowSection } from './CompanionWindowSection';
+import CanvasInfo from '../containers/CanvasInfo';
+import LocalePicker from '../containers/LocalePicker';
+import ManifestInfo from '../containers/ManifestInfo';
+import CollectionInfo from '../containers/CollectionInfo';
+import ManifestRelatedLinks from '../containers/ManifestRelatedLinks';
+import ns from '../config/css-ns';
+
+/**
+ * WindowSideBarInfoPanel
+ */
+export function WindowSideBarInfoPanel({
+  windowId,
+  id,
+  canvasIds = [],
+  collectionPath = [],
+  locale = '',
+  setLocale = undefined,
+  availableLocales = [],
+  showLocalePicker = false,
+}) {
+  const { t } = useTranslation();
+  return (
+    <CompanionWindow
+      title={t('aboutThisItem')}
+      paperClassName={ns('window-sidebar-info-panel')}
+      windowId={windowId}
+      id={id}
+      titleControls={
+        showLocalePicker && <LocalePicker locale={locale} setLocale={setLocale} availableLocales={availableLocales} />
+      }
+    >
+      {canvasIds.map((canvasId, index) => (
+        <CompanionWindowSection key={canvasId}>
+          <CanvasInfo canvasId={canvasId} companionWindowId={id} index={index} totalSize={canvasIds.length} windowId={windowId} />
+        </CompanionWindowSection>
+      ))}
+      {collectionPath.length > 0 && (
+        <CompanionWindowSection>
+          <CollectionInfo companionWindowId={id} windowId={windowId} />
+        </CompanionWindowSection>
+      )}
+
+      <CompanionWindowSection>
+        <ManifestInfo companionWindowId={id} windowId={windowId} />
+      </CompanionWindowSection>
+
+      <CompanionWindowSection>
+        <ManifestRelatedLinks companionWindowId={id} windowId={windowId} />
+      </CompanionWindowSection>
+    </CompanionWindow>
+  );
+}
+
+WindowSideBarInfoPanel.propTypes = {
+  availableLocales: PropTypes.arrayOf(PropTypes.string),
+  canvasIds: PropTypes.arrayOf(PropTypes.string),
+  collectionPath: PropTypes.arrayOf(PropTypes.string),
+  id: PropTypes.string.isRequired,
+  locale: PropTypes.string,
+  setLocale: PropTypes.func,
+  showLocalePicker: PropTypes.bool,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowThumbnailSettings.jsx

@@ -0,0 +1,130 @@
+import { styled } from '@mui/material/styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import ThumbnailsOffIcon from '@mui/icons-material/CropDinSharp';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
+import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
+
+const ThumbnailOption = styled(MenuItem, { name: 'WindowThumbnailSettings', slot: 'option' })(({ selected, theme }) => ({
+  '& .MuiFormControlLabel-label': {
+    borderBottom: '2px solid transparent',
+    ...(selected && {
+      borderBottomColor: theme.palette.secondary.main,
+    }),
+    '&.Mui-selected': {
+      backgroundColor: 'transparent !important',
+    },
+    '&.Mui-selected.Mui-focusVisible': {
+      backgroundColor: `${(theme.vars || theme).palette.action.focus} !important`,
+    },
+    '&:focused': {
+      backgroundColor: `${(theme.vars || theme).palette.action.focus} !important`,
+    },
+    color: selected ? theme.palette.secondary.main : undefined,
+    display: 'inline-flex',
+  },
+}));
+
+const StyledMenuList = styled(MenuList, { name: 'WindowViewSettings', slot: 'option' })(() => ({
+  display: 'inline-flex',
+}));
+/**
+ *
+ */
+export function WindowThumbnailSettings({
+  handleClose = () => {},
+  thumbnailNavigationPosition,
+  direction,
+  windowId,
+  setWindowThumbnailPosition,
+}) {
+  const { t } = useTranslation();
+  /** */
+  const handleChange = (value) => {
+    setWindowThumbnailPosition(windowId, value);
+    handleClose();
+  };
+
+  return (
+    <>
+      <ListSubheader role="presentation" disableSticky>
+        {t('thumbnails')}
+      </ListSubheader>
+      <StyledMenuList role="menubar">
+        <ThumbnailOption
+          aria-checked={thumbnailNavigationPosition === 'off'}
+          key="off"
+          onClick={() => {
+            handleChange('off');
+          }}
+          role="menuitemradio"
+          selected={thumbnailNavigationPosition === 'off'}
+        >
+          <FormControlLabel
+            control={
+              <ThumbnailsOffIcon color={thumbnailNavigationPosition === 'off' ? 'secondary' : undefined} fill="currentcolor" />
+            }
+            label={t('off')}
+            labelPlacement="bottom"
+            value="off"
+          />
+        </ThumbnailOption>
+        <ThumbnailOption
+          aria-checked={thumbnailNavigationPosition === 'far-bottom'}
+          key="far-bottom"
+          onClick={() => {
+            handleChange('far-bottom');
+          }}
+          role="menuitemradio"
+          selected={thumbnailNavigationPosition === 'far-bottom'}
+        >
+          <FormControlLabel
+            control={
+              <ThumbnailNavigationBottomIcon
+                color={thumbnailNavigationPosition === 'far-bottom' ? 'secondary' : undefined}
+                fill="currentcolor"
+              />
+            }
+            label={t('bottom')}
+            labelPlacement="bottom"
+            value="far-bottom"
+          />
+        </ThumbnailOption>
+        <ThumbnailOption
+          aria-checked={thumbnailNavigationPosition === 'far-right'}
+          key="far-right"
+          onClick={() => {
+            handleChange('far-right');
+          }}
+          role="menuitemradio"
+          selected={thumbnailNavigationPosition === 'far-right'}
+        >
+          <FormControlLabel
+            control={
+              <ThumbnailNavigationRightIcon
+                color={thumbnailNavigationPosition === 'far-right' ? 'secondary' : undefined}
+                fill="currentcolor"
+                style={direction === 'rtl' ? { transform: 'rotate(180deg)' } : {}}
+              />
+            }
+            label={t('right')}
+            labelPlacement="bottom"
+            value="far-right"
+          />
+        </ThumbnailOption>
+      </StyledMenuList>
+    </>
+  );
+}
+
+WindowThumbnailSettings.propTypes = {
+  direction: PropTypes.string.isRequired,
+  handleClose: PropTypes.func,
+  setWindowThumbnailPosition: PropTypes.func.isRequired,
+  thumbnailNavigationPosition: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};