WIP icon changes in CUL plugins for XML and canvas nav

__tests__/integration/mirador/cul.html

@@ -37,7 +37,7 @@
          { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843', provider: 'Other Organization' },
        ],
      },
-     [...Mirador.culPlugins.downloadDialogPlugin].concat([...Mirador.culPlugins.viewXmlPlugin]).concat([...Mirador.culPlugins.citationsSidebarPlugin]).concat([...Mirador.culPlugins.videojsPlugin]).concat([...Mirador.culPlugins.canvasRelatedLinksPlugin]).concat([...Mirador.culPlugins.hintingSideBar])
+     [...Mirador.culPlugins.downloadDialogPlugin].concat([...Mirador.culPlugins.viewXmlPlugin]).concat([...Mirador.culPlugins.citationsSidebarPlugin]).concat([...Mirador.culPlugins.videojsPlugin]).concat([...Mirador.culPlugins.canvasRelatedLinksPlugin]).concat([...Mirador.culPlugins.hintingSideBar]).concat([...Mirador.culPlugins.viewerNavigation])
      );
     </script>
   </body>

src/culPlugins/index.js

@@ -5,6 +5,7 @@ import downloadDialogPlugin from './mirador-downloaddialog';
 import hintingSideBar from './mirador-hinting-sidebar';
 import videojsPlugin from './mirador-videojs';
 import viewXmlPlugin from './mirador-viewXml';
+import viewerNavigation from './mirador-pageIconViewerNavigation';
 
 export default {
   canvasLinkPlugin,
@@ -14,4 +15,5 @@ export default {
   hintingSideBar,
   videojsPlugin,
   viewXmlPlugin,
+  viewerNavigation,
 };

src/culPlugins/mirador-pageIconViewerNavigation/components/PageIconViewerNavigation.js

@@ -0,0 +1,87 @@
+import { Component } from 'react';
+import LtrNextPage from '@mui/icons-material/AutoStories';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import MiradorMenuButton from '../../../containers/MiradorMenuButton';
+import ns from '../../../config/css-ns';
+
+/**
+ */
+export class PageIconViewerNavigation extends Component {
+  /**
+   * Renders previous next canvas buttons, but only if there are such canvases
+   * The AutoStories icon appears to be a page turning, and is thus flipped
+   * via a scale transform rather than a 180deg rotation. Rotations
+   * for the reading direction can thus be applied uniformly to both but before
+   * the scale transform.
+   */
+  render() {
+    const {
+      hasNextCanvas, hasPreviousCanvas, setNextCanvas, setPreviousCanvas, t,
+      viewingDirection,
+    } = this.props;
+
+    if (!hasPreviousCanvas && !hasNextCanvas) return (null);
+    let htmlDir = 'ltr';
+    let prevTransform = ['scale(-1, 1)'];
+    let nextTransform = [];
+    switch (viewingDirection) {
+      case 'top-to-bottom':
+        prevTransform.unshift('rotate(90deg)');
+        nextTransform.unshift('rotate(90deg)');
+        break;
+      case 'bottom-to-top':
+        prevTransform.unshift('rotate(270deg)');
+        nextTransform.unshift('rotate(270deg)');
+        break;
+      case 'right-to-left':
+        htmlDir = 'rtl';
+        nextTransform.push(prevTransform.pop());
+        break;
+      default:
+        break;
+    }
+    const previousIconStyle = (prevTransform.length > 0) ? { transform: prevTransform.join(' ') } : {};
+    const nextIconStyle = (nextTransform.length > 0) ? { transform: nextTransform.join(' ') } : {};
+    return (
+      <div
+        className={classNames(ns('osd-navigation'))}
+        dir={htmlDir}
+      >
+        <MiradorMenuButton
+          aria-label={t('previousCanvas')}
+          className={ns('previous-canvas-button')}
+          disabled={!hasPreviousCanvas}
+          onClick={() => { hasPreviousCanvas && setPreviousCanvas(); }}
+        >
+          <LtrNextPage style={previousIconStyle} />
+        </MiradorMenuButton>
+        <MiradorMenuButton
+          aria-label={t('nextCanvas')}
+          className={ns('next-canvas-button')}
+          disabled={!hasNextCanvas}
+          onClick={() => { hasNextCanvas && setNextCanvas(); }}
+        >
+          <LtrNextPage style={nextIconStyle} />
+        </MiradorMenuButton>
+      </div>
+    );
+  }
+}
+
+PageIconViewerNavigation.propTypes = {
+  hasNextCanvas: PropTypes.bool,
+  hasPreviousCanvas: PropTypes.bool,
+  setNextCanvas: PropTypes.func,
+  setPreviousCanvas: PropTypes.func,
+  t: PropTypes.func.isRequired,
+  viewingDirection: PropTypes.string,
+};
+
+PageIconViewerNavigation.defaultProps = {
+  hasNextCanvas: false,
+  hasPreviousCanvas: false,
+  setNextCanvas: () => {},
+  setPreviousCanvas: () => {},
+  viewingDirection: '',
+};

src/culPlugins/mirador-pageIconViewerNavigation/index.js

@@ -0,0 +1,32 @@
+import {
+  getContainerId,
+  getSequenceViewingDirection,
+  getNextCanvasGrouping,
+  getPreviousCanvasGrouping,
+} from '../../state/selectors';
+import { setNextCanvas, setPreviousCanvas } from '../../state/actions';
+
+import { PageIconViewerNavigation } from './components/PageIconViewerNavigation';
+
+export {
+  PageIconViewerNavigation,
+};
+
+export default [
+  {
+    component: PageIconViewerNavigation,
+    config: {},
+    mapDispatchToProps: (dispatch, { windowId }) => ({
+      setNextCanvas: (...args) => dispatch(setNextCanvas(windowId)),
+      setPreviousCanvas: (...args) => dispatch(setPreviousCanvas(windowId)),
+    }),
+    mapStateToProps: (state, { windowId }) => ({
+      hasNextCanvas: !!getNextCanvasGrouping(state, { windowId }),
+      hasPreviousCanvas: !!getPreviousCanvasGrouping(state, { windowId }),
+      viewingDirection: getSequenceViewingDirection(state, { windowId }),
+    }),
+    mode: 'wrap',
+    name: 'PageIconViewerNavigation',
+    target: 'ViewerNavigation',
+  },
+];

src/culPlugins/mirador-viewXml/MiradorViewXmlPlugin.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import CodeIcon from '@mui/icons-material/Code';
+import DataObject from '@mui/icons-material/DataObject';
 import MiradorMenuButton from '../../containers/MiradorMenuButton';
 
 self.$RefreshReg$ = () => {}; /* eslint-disable-line no-restricted-globals */
@@ -23,7 +23,7 @@ const MiradorViewXml = ({ config, container, updateConfig }) => {
         dialogOpen: !dialogOpen,
       })}
     >
-      <CodeIcon />
+      <DataObject />
     </MiradorMenuButton>
   );
 };