dbf-mirador 4.2.3

package/src/components/PluginHook.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-array-index-key */
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { usePlugins } from '../extend/usePlugins';
+
+/** Renders plugins */
+export const PluginHook = forwardRef(({ classes = {}, targetName, ...otherProps }, ref) => {
+  const { PluginComponents } = usePlugins(targetName);
+
+  return PluginComponents
+    ? PluginComponents.map((PluginComponent, index) =>
+        isValidElement(PluginComponent) ? (
+          cloneElement(PluginComponent, { ...otherProps, ref })
+        ) : (
+          <PluginComponent ref={ref} {...otherProps} key={index} />
+        ),
+      )
+    : null;
+});
+
+PluginHook.displayName = 'PluginHook';
+
+PluginHook.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  classes: PropTypes.object,
+  targetName: PropTypes.string.isRequired,
+};

package/src/components/PrimaryWindow.jsx

@@ -0,0 +1,115 @@
+import { lazy, Suspense } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import WindowSideBar from '../containers/WindowSideBar';
+import CompanionArea from '../containers/CompanionArea';
+import CollectionDialog from '../containers/CollectionDialog';
+import ns from '../config/css-ns';
+
+const AudioViewer = lazy(() => import('../containers/AudioViewer'));
+const GalleryView = lazy(() => import('../containers/GalleryView'));
+const SelectCollection = lazy(() => import('../containers/SelectCollection'));
+const WindowViewer = lazy(() => import('../containers/WindowViewer'));
+const VideoViewer = lazy(() => import('../containers/VideoViewer'));
+const TextViewer = lazy(() => import('../containers/TextViewer'));
+
+GalleryView.displayName = 'GalleryView';
+SelectCollection.displayName = 'SelectCollection';
+WindowViewer.displayName = 'WindowViewer';
+
+const Root = styled('div', { name: 'PrimaryWindow', slot: 'root' })(() => ({
+  display: 'flex',
+  flex: 1,
+  position: 'relative',
+}));
+
+/**  */
+const TypeSpecificViewer = ({
+  audioResources = [],
+  isCollection = false,
+  isFetching = false,
+  textResources = [],
+  videoResources = [],
+  view = undefined,
+  windowId,
+}) => {
+  if (isCollection) {
+    return <SelectCollection windowId={windowId} />;
+  }
+  if (isFetching === false) {
+    if (view === 'gallery') {
+      return <GalleryView windowId={windowId} />;
+    }
+    if (videoResources.length > 0) {
+      return <VideoViewer windowId={windowId} />;
+    }
+    if (audioResources.length > 0) {
+      return <AudioViewer windowId={windowId} />;
+    }
+    if (textResources.length > 0) {
+      return <TextViewer windowId={windowId} />;
+    }
+    return <WindowViewer windowId={windowId} />;
+  }
+  return null;
+};
+
+TypeSpecificViewer.propTypes = {
+  audioResources: PropTypes.arrayOf(PropTypes.object),
+  isCollection: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  textResources: PropTypes.arrayOf(PropTypes.object),
+  videoResources: PropTypes.arrayOf(PropTypes.object),
+  view: PropTypes.string,
+  windowId: PropTypes.string.isRequired,
+};
+
+/**
+ * PrimaryWindow - component that renders the primary content of a Mirador
+ * window. Right now this differentiates between a Image, Video, or Audio viewer.
+ */
+export function PrimaryWindow({
+  audioResources = undefined,
+  children = null,
+  className = undefined,
+  isCollection = false,
+  isCollectionDialogVisible = false,
+  isFetching = false,
+  textResources = undefined,
+  videoResources = undefined,
+  view = undefined,
+  windowId,
+}) {
+  const viewerProps = {
+    audioResources,
+    isCollection,
+    isFetching,
+    textResources,
+    videoResources,
+    view,
+    windowId,
+  };
+
+  return (
+    <Root data-testid="test-window" className={classNames(ns('primary-window'), className)}>
+      <WindowSideBar windowId={windowId} />
+      <CompanionArea windowId={windowId} position="left" />
+      {isCollectionDialogVisible && <CollectionDialog windowId={windowId} />}
+      <Suspense fallback={<div />}>{children || <TypeSpecificViewer {...viewerProps} />}</Suspense>
+    </Root>
+  );
+}
+
+PrimaryWindow.propTypes = {
+  audioResources: PropTypes.arrayOf(PropTypes.object),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  isCollection: PropTypes.bool,
+  isCollectionDialogVisible: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  textResources: PropTypes.arrayOf(PropTypes.object),
+  videoResources: PropTypes.arrayOf(PropTypes.object),
+  view: PropTypes.string,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/SanitizedHtml.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import DOMPurify from 'dompurify';
+import ns from '../config/css-ns';
+import htmlRules from '../lib/htmlRules';
+
+const Root = styled('span', { name: 'IIIFHtmlContent', slot: 'root' })({});
+
+// Add a hook to make all links open a new window
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+  // set all elements owning target to target=_blank
+  if ('target' in node) {
+    node.setAttribute('target', '_blank');
+    // prevent https://www.owasp.org/index.php/Reverse_Tabnabbing
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
+/**
+ */
+export function SanitizedHtml({ classes = {}, htmlString, ruleSet, ...rest }) {
+  return (
+    <Root
+      className={[ns('third-party-html'), classes.root].join(' ')}
+      dangerouslySetInnerHTML={{
+        __html: DOMPurify.sanitize(htmlString, htmlRules[ruleSet]),
+      }}
+      {...rest}
+    />
+  );
+}
+
+SanitizedHtml.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
+  htmlString: PropTypes.string.isRequired,
+  ruleSet: PropTypes.string.isRequired,
+};

package/src/components/ScrollIndicatedDialogContent.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import DialogContent from '@mui/material/DialogContent';
+import { alpha, styled } from '@mui/material/styles';
+
+/**
+ * From https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/styles/getOverlayAlpha.ts
+ */
+const getOverlayAlpha = (elevation) => {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+  return (alphaValue / 100).toFixed(2);
+};
+
+const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ ownerState, theme }) => {
+  // In dark mode, paper has a elevation-dependent background color:
+  // https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/Paper/Paper.js#L55-L60
+  const bgcolor =
+    theme.palette.mode === 'dark'
+      ? {
+          backgroundImage: `linear-gradient(${alpha(
+            '#fff',
+            getOverlayAlpha(ownerState?.elevation || 24),
+          )}, ${alpha('#fff', getOverlayAlpha(ownerState?.elevation || 24))})`,
+        }
+      : theme.palette.background.paper;
+  return {
+    /* Shadow covers */
+    background:
+      `linear-gradient(${bgcolor} 30%, rgba(255, 255, 255, 0)), ` +
+      `linear-gradient(rgba(255, 255, 255, 0), ${bgcolor} 70%) 0 100%, ` +
+      // Shadows
+      'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), ' +
+      'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
+    backgroundAttachment: 'local, local, scroll, scroll',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
+    overflowY: 'auto',
+  };
+});
+
+/**
+ * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component
+ *                                to indicate there is scrollable content
+ */
+export function ScrollIndicatedDialogContent({ classes = {}, className = '', ...otherProps }) {
+  const ourClassName = [className, classes.shadowScrollDialog].join(' ');
+
+  return <Root className={ourClassName} {...otherProps} />;
+}
+
+ScrollIndicatedDialogContent.propTypes = {
+  classes: PropTypes.shape({
+    shadowScrollDialog: PropTypes.string,
+  }),
+  className: PropTypes.string,
+};

package/src/components/ScrollTo.jsx

@@ -0,0 +1,61 @@
+import { cloneElement, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import ns from '../config/css-ns';
+
+/**  */
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+/**
+ * ScrollTo ~
+ */
+export function ScrollTo({ children, containerRef, offsetTop = 0, scrollTo, ...otherProps }) {
+  const scrollToRef = useRef();
+  const prevScrollTo = usePrevious(scrollTo);
+
+  useEffect(() => {
+    if (!scrollTo || scrollTo === prevScrollTo) return;
+
+    const elementToScrollTo = scrollToRef?.current;
+    if (!elementToScrollTo) return;
+
+    const scrollableContainer = containerRef?.current?.querySelector(`.${ns('scrollto-scrollable')}`);
+    if (!scrollableContainer) return;
+
+    const containerBoundingRect = containerRef?.current?.getBoundingClientRect() || {};
+    const scrollToBoundingRect = elementToScrollTo?.getBoundingClientRect() || {};
+    const elementIsVisible = (() => {
+      if (scrollToBoundingRect.top < containerBoundingRect.top + offsetTop) {
+        return false;
+      }
+      if (scrollToBoundingRect.bottom > containerBoundingRect.bottom) {
+        return false;
+      }
+
+      return true;
+    })();
+
+    if (elementIsVisible) return;
+
+    const scrollBy = elementToScrollTo.offsetTop - containerBoundingRect.height / 2 + offsetTop;
+
+    scrollableContainer.scrollTo(0, scrollBy);
+  }, [containerRef, scrollToRef, scrollTo, prevScrollTo, offsetTop]);
+
+  if (!scrollTo && isEmpty(otherProps)) return children;
+
+  return cloneElement(children, { ref: scrollToRef, ...otherProps });
+}
+
+ScrollTo.propTypes = {
+  children: PropTypes.node.isRequired,
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]).isRequired,
+  offsetTop: PropTypes.number,
+  scrollTo: PropTypes.bool.isRequired,
+};

package/src/components/SearchHit.jsx

@@ -0,0 +1,220 @@
+import { useEffect, useId, useMemo } from 'react';
+import { useEffectEvent } from 'use-effect-event';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemButton from '@mui/material/ListItemButton';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import SanitizedHtml from '../containers/SanitizedHtml';
+import TruncatedHit from '../lib/TruncatedHit';
+import { ScrollTo } from './ScrollTo';
+
+const Root = styled(ListItem, { name: 'SearchHit', slot: 'root' })(({ ownerState, theme }) => ({
+  '&.Mui-focused': {
+    '&:hover': {
+      ...(ownerState.windowSelected && {
+        backgroundColor: 'inherit',
+      }),
+    },
+    ...(ownerState.windowSelected && {
+      backgroundColor: 'inherit',
+    }),
+  },
+  paddingRight: theme.spacing(1),
+}));
+
+const CanvasLabel = styled('h4', { name: 'SearchHit', slot: 'canvasLabel' })(({ theme }) => ({
+  display: 'inline',
+  marginBottom: theme.spacing(1.5),
+}));
+
+const Counter = styled(Chip, { name: 'SearchHit', slot: 'counter' })(({ ownerState, theme }) => ({
+  backgroundColor: theme.palette.hitCounter.default,
+  ...(ownerState.windowSelected && {
+    backgroundColor: theme.palette.highlights.primary,
+  }),
+  ...(ownerState.adjacent &&
+    !ownerState.windowSelected && {
+      backgroundColor: theme.palette.highlights.secondary,
+    }),
+  height: 30,
+  marginRight: theme.spacing(1),
+  typography: 'subtitle2',
+  verticalAlign: 'inherit',
+}));
+
+/** */
+// eslint-disable-next-line complexity
+export function SearchHit({
+  adjacent = false,
+  annotation = undefined,
+  annotationId = undefined,
+  annotationLabel = undefined,
+  announcer = undefined,
+  canvasLabel = undefined,
+  companionWindowId = undefined,
+  containerRef = undefined,
+  focused = false,
+  hit = undefined,
+  index = undefined,
+  selectAnnotation = () => {},
+  selected = false,
+  showDetails = () => {},
+  total = undefined,
+  windowId,
+  windowSelected = false,
+}) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    if (selected) {
+      announceHit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected]);
+
+  /** */
+  const handleClick = () => {
+    if (annotation && annotationId) selectAnnotation(annotationId);
+  };
+
+  const truncatedHit = useMemo(() => hit && new TruncatedHit(hit, annotation), [hit, annotation]);
+
+  /**
+   * Pass content describing the hit to the announcer prop (intended for screen readers)
+   */
+  const announceHit = useEffectEvent(() => {
+    if (!announcer || !truncatedHit) return;
+
+    announcer(
+      [
+        t('pagination', { current: index + 1, total }),
+        canvasLabel,
+        annotationLabel,
+        truncatedHit.before,
+        truncatedHit.match,
+        truncatedHit.after,
+      ].join(' '),
+      'polite',
+    );
+  });
+
+  const canvasLabelHtmlId = useId();
+
+  if (focused && !selected) return null;
+
+  const renderedHit = focused ? hit : hit && truncatedHit;
+  const truncated = hit && (renderedHit.before !== hit.before || renderedHit.after !== hit.after);
+  const ownerState = {
+    adjacent,
+    focused,
+    selected,
+    windowSelected,
+  };
+
+  const header = (
+    <>
+      <Counter component="span" ownerState={ownerState} label={index + 1} />
+      <CanvasLabel id={canvasLabelHtmlId}>
+        {canvasLabel}
+        {annotationLabel && (
+          <Typography component="span" sx={{ display: 'block', marginTop: 1 }}>
+            {annotationLabel}
+          </Typography>
+        )}
+      </CanvasLabel>
+    </>
+  );
+
+  return (
+    <ScrollTo
+      containerRef={containerRef}
+      offsetTop={96} // offset for the height of the form above
+      scrollTo={windowSelected && !focused}
+    >
+      <Root
+        ownerState={ownerState}
+        className={windowSelected ? 'windowSelected' : ''}
+        divider
+        component={selected ? 'li' : ListItemButton}
+        onClick={handleClick}
+        selected={selected}
+      >
+        <ListItemText
+          primary={header}
+          secondary={
+            <>
+              {hit && (
+                <>
+                  <SanitizedHtml ruleSet="iiif" htmlString={renderedHit.before} />{' '}
+                  <strong>
+                    <SanitizedHtml ruleSet="iiif" htmlString={renderedHit.match} />
+                  </strong>{' '}
+                  <SanitizedHtml ruleSet="iiif" htmlString={renderedHit.after} />{' '}
+                  {truncated && !focused && (
+                    <Button
+                      sx={{
+                        '& span': {
+                          lineHeight: '1.5em',
+                        },
+                        margin: 0,
+                        padding: 0,
+                        textTransform: 'none',
+                      }}
+                      onClick={showDetails}
+                      color="secondary"
+                      size="small"
+                      aria-describedby={canvasLabelHtmlId}
+                    >
+                      {t('more')}
+                    </Button>
+                  )}
+                </>
+              )}
+              {!hit && annotation && <SanitizedHtml ruleSet="iiif" htmlString={annotation.chars} />}
+            </>
+          }
+          slotProps={{
+            primary: {
+              component: 'div',
+              sx: { marginBottom: 1 },
+              variant: 'subtitle2',
+            },
+
+            secondary: { variant: 'body1' },
+          }}
+        />
+      </Root>
+    </ScrollTo>
+  );
+}
+
+SearchHit.propTypes = {
+  adjacent: PropTypes.bool,
+  annotation: PropTypes.shape({
+    chars: PropTypes.string,
+    targetId: PropTypes.string,
+  }),
+  annotationId: PropTypes.string,
+  annotationLabel: PropTypes.string,
+  announcer: PropTypes.func,
+  canvasLabel: PropTypes.string,
+  companionWindowId: PropTypes.string,
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
+  focused: PropTypes.bool,
+  hit: PropTypes.shape({
+    after: PropTypes.string,
+    before: PropTypes.string,
+    match: PropTypes.string,
+  }),
+  index: PropTypes.number,
+  selectAnnotation: PropTypes.func,
+  selected: PropTypes.bool,
+  showDetails: PropTypes.func,
+  total: PropTypes.number,
+  windowId: PropTypes.string.isRequired,
+  windowSelected: PropTypes.bool,
+};

package/src/components/SearchPanel.jsx

@@ -0,0 +1,80 @@
+import { useRef } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import CompanionWindow from '../containers/CompanionWindow';
+import SearchPanelControls from '../containers/SearchPanelControls';
+import SearchResults from '../containers/SearchResults';
+
+/** */
+export function SearchPanel({
+  fetchSearch = undefined,
+  id,
+  query = '',
+  removeSearch,
+  searchService,
+  suggestedSearches = [],
+  windowId,
+}) {
+  const { t } = useTranslation();
+  const containerRef = useRef(null);
+
+  return (
+    <CompanionWindow
+      ariaLabel={t('searchTitle')}
+      title={
+        <>
+          {t('searchTitle')}
+          {query && query !== '' && (
+            <Chip
+              aria-label={t('clearSearchAria')}
+              role="button"
+              sx={{ marginLeft: 1 }}
+              color="secondary"
+              label={t('clearSearch')}
+              onClick={removeSearch}
+              onDelete={removeSearch}
+              size="small"
+              tabIndex={0}
+              variant="outlined"
+            />
+          )}
+        </>
+      }
+      windowId={windowId}
+      id={id}
+      titleControls={<SearchPanelControls companionWindowId={id} windowId={windowId} />}
+      ref={containerRef}
+    >
+      <SearchResults containerRef={containerRef} companionWindowId={id} windowId={windowId} />
+      {fetchSearch &&
+        suggestedSearches &&
+        query === '' &&
+        suggestedSearches.map((search) => (
+          <Typography component="p" key={search} variant="body1" sx={{ margin: 2 }}>
+            <Button
+              variant="inlineText"
+              color="secondary"
+              onClick={() => fetchSearch(`${searchService.id}?${new URLSearchParams({ q: search })}`, search)}
+            >
+              {t('suggestSearch', { query: search })}
+            </Button>
+          </Typography>
+        ))}
+    </CompanionWindow>
+  );
+}
+
+SearchPanel.propTypes = {
+  fetchSearch: PropTypes.func,
+  id: PropTypes.string.isRequired,
+  query: PropTypes.string,
+  removeSearch: PropTypes.func.isRequired,
+  searchService: PropTypes.shape({
+    id: PropTypes.string,
+  }).isRequired,
+  suggestedSearches: PropTypes.arrayOf(PropTypes.string),
+  windowId: PropTypes.string.isRequired,
+};