Merge pull request #2183 from ProjectMirador/2114-add-a-canvas-page-counter

2114 add a canvas page counter

__tests__/src/components/ViewerInfo.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import { Typography } from '@material-ui/core';
+import { ViewerInfo } from '../../../src/components/ViewerInfo';
+
+/** create wrapper */
+function createWrapper(props) {
+  return shallow(
+    <ViewerInfo
+      canvasCount={8}
+      canvasIndex={2}
+      canvasLabel="testLabel"
+      t={k => k}
+      {...props}
+    />,
+  );
+}
+
+describe('ViewerNavigation', () => {
+  let wrapper;
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(wrapper.find(Typography).length).toBe(1);
+    expect(wrapper.find(Typography).at(0)
+      .matchesElement(<Typography>3 of 8 • testLabel</Typography>)).toBe(true);
+  });
+});

__tests__/src/components/WindowCanvasNavigationControls.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
 import { WindowCanvasNavigationControls } from '../../../src/components/WindowCanvasNavigationControls';
+import ViewerInfo from '../../../src/containers/ViewerInfo';
 import ViewerNavigation from '../../../src/containers/ViewerNavigation';
 import ZoomControls from '../../../src/containers/ZoomControls';
 
@@ -26,7 +26,7 @@ describe('WindowCanvasNavigationControls', () => {
       <div>
         <ZoomControls />
         <ViewerNavigation />
-        <Typography>label</Typography>
+        <ViewerInfo />
       </div>,
     )).toBe(true);
   });

locales/de/translation.json

@@ -39,6 +39,7 @@
     "mosaic": "Mosaik",
     "nextCanvas": "Nächstes Objekt",
     "numItems": "{{number}} Elemente",
+    "of": "von",
     "off": "Keine",
     "openAnnotationCompanionWindow": "Annotationsfenster öffnen",
     "openCanvasNavigationCompanionWindow": "Hilfsfenster für die Leinwandnavigation schließen",

locales/en/translation.json

@@ -45,6 +45,7 @@
     "moveCompanionWindowToRight": "Move to right",
     "nextCanvas": "Next item",
     "numItems": "{{number}} items",
+    "of": "of",
     "off": "Off",
     "openAnnotationCompanionWindow": "Open annotation companion window",
     "openCanvasNavigationCompanionWindow": "Open canvas navigation companion window",
@@ -69,7 +70,6 @@
     "tryAgain": "Try again",
     "untitled": "[Untitled]",
     "view": "View",
-    "window": "Window: {{label}}",
     "windowMenu": "Window menu",
     "workspace": "Workspace",
     "workspaceFullScreen": "Full Screen",

src/components/ViewerInfo.js

+import React, { Component } from 'react';
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+import ns from '../config/css-ns';
+
+/**
+ *
+ */
+export class ViewerInfo extends Component {
+  /** */
+  render() {
+    const {
+      canvasCount,
+      canvasIndex,
+      canvasLabel,
+      t,
+    } = this.props;
+
+    return (
+      <div className={ns('osd-info')}>
+        <Typography variant="caption" className={ns('canvas-label')}>
+          {`${canvasIndex + 1} ${t('of')} ${canvasCount}`}
+          {canvasLabel && ` ${String.fromCharCode(8226)} ${canvasLabel}`}
+        </Typography>
+      </div>
+    );
+  }
+}
+
+ViewerInfo.defaultProps = {
+  canvasLabel: undefined,
+  t: () => {},
+};
+
+ViewerInfo.propTypes = {
+  canvasCount: PropTypes.number.isRequired,
+  canvasIndex: PropTypes.number.isRequired,
+  canvasLabel: PropTypes.string,
+  t: PropTypes.func,
+};

src/components/WindowCanvasNavigationControls.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
 import ZoomControls from '../containers/ZoomControls';
+import ViewerInfo from '../containers/ViewerInfo';
 import ViewerNavigation from '../containers/ViewerNavigation';
 import ns from '../config/css-ns';
 
@@ -12,7 +12,7 @@ export class WindowCanvasNavigationControls extends Component {
   /** */
   render() {
     const {
-      canvases, canvasLabel, visible, window,
+      canvases, visible, window,
     } = this.props;
 
     if (!visible) return (<></>);
@@ -21,11 +21,7 @@ export class WindowCanvasNavigationControls extends Component {
       <div className={ns('canvas-nav')}>
         <ZoomControls windowId={window.id} />
         <ViewerNavigation window={window} canvases={canvases} />
-        {
-          canvasLabel && (
-            <Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
-          )
-        }
+        <ViewerInfo windowId={window.id} />
       </div>
     );
   }
@@ -35,11 +31,9 @@ export class WindowCanvasNavigationControls extends Component {
 WindowCanvasNavigationControls.propTypes = {
   canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  canvasLabel: PropTypes.string,
   visible: PropTypes.bool,
 };
 
 WindowCanvasNavigationControls.defaultProps = {
-  canvasLabel: undefined,
   visible: true,
 };

src/components/index.js

@@ -10,6 +10,7 @@ export * from './NestedMenu';
 export * from './OpenSeadragonViewer';
 export * from './SanitizedHtml';
 export * from './ThumbnailNavigation';
+export * from './ViewerInfo';
 export * from './ViewerNavigation';
 export * from './Window';
 export * from './WindowList';

src/containers/ViewerInfo.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+import { ViewerInfo } from '../components/ViewerInfo';
+import { getCanvasLabel, getWindowManifest, getManifestCanvases } from '../state/selectors';
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof Window
+ * @private
+ */
+const mapStateToProps = (state, props) => {
+  const { windowId } = props;
+  const manifest = getWindowManifest(state, windowId);
+  const canvases = getManifestCanvases(manifest);
+  const { canvasIndex } = state.windows[windowId];
+
+  return {
+    canvasCount: canvases.length,
+    canvasIndex,
+    canvasLabel: getCanvasLabel(canvases[canvasIndex], canvasIndex),
+  };
+};
+
+const enhance = compose(
+  withTranslation(),
+  connect(mapStateToProps, null),
+  // further HOC go here
+);
+
+export default enhance(ViewerInfo);

src/styles/index.scss

@@ -111,10 +111,19 @@
     top: 12px;
   }
 
+  &-osd-navigation {
+    order: 1;
+  }
+
+  &-osd-info {
+    order: 2
+  }
+
   &-canvas-nav {
     display: flex;
-    justify-content: center;
     flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: center;
     text-align: center;
   }