@cu-mkp/editioncrafter 0.1.0 → 0.2.1

package/dist/es/src/action/DocumentActions.js

@@ -148,6 +148,16 @@ function parseAnnotationURLs(canvas, transcriptionTypes) {
 // The largest dimension for either width or height allowed in a thumbnail.
 var MAX_THUMBNAIL_DIMENSION = 130;
 function parseManifest(manifest, transcriptionTypes) {
+  if (manifest.type === 'variorum') {
+    var folios = [];
+    Object.keys(manifest.documentData).forEach(function (key) {
+      folios = folios.concat(parseSingleManifest(manifest.documentData[key], transcriptionTypes[key], key));
+    });
+    return folios;
+  }
+  return parseSingleManifest(manifest, transcriptionTypes);
+}
+function parseSingleManifest(manifest, transcriptionTypes, document) {
   var folios = [];
 
   // make sure this is a IIIF Presentation API v3 Manifest
@@ -177,6 +187,7 @@ function parseManifest(manifest, transcriptionTypes) {
     var thumbnailURL = "".concat(bodyId, "/full/").concat(thumbnailDimensions.join(','), "/0/default.jpg");
     var folio = {
       id: folioID,
+      doc_id: document || manifest.id,
       name: canvasLabel,
       pageNumber: i,
       image_zoom_url: imageURL,

package/dist/es/src/action/initialState/documentInitialState.js

@@ -1,8 +1,14 @@
 export default function documentInitalState(iiifManifest, documentName, transcriptionTypes) {
+  var variorum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var derivativeNames = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  var threePanel = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   return {
     documentName: documentName,
+    derivativeNames: derivativeNames,
     manifestURL: iiifManifest,
     transcriptionTypes: transcriptionTypes,
+    variorum: variorum,
+    threePanel: threePanel,
     folios: [],
     loaded: false,
     folioIndex: {},

package/dist/es/src/action/rootReducer.js

@@ -1,4 +1,6 @@
 import { combineReducers } from 'redux';
+
+// eslint-disable-next-line import/no-cycle
 import { createReducer } from '../model/ReduxStore';
 import GlossaryActions from './GlossaryActions';
 import DocumentActions from './DocumentActions';
@@ -7,12 +9,27 @@ import diplomaticInitialState from './initialState/diplomaticInitialState';
 import glossaryInitialState from './initialState/glossaryInitialState';
 import documentInitialState from './initialState/documentInitialState';
 export default function rootReducer(config) {
-  var iiifManifest = config.iiifManifest,
-    documentName = config.documentName,
-    transcriptionTypes = config.transcriptionTypes;
+  var documentName = config.documentName,
+    documentInfo = config.documentInfo,
+    _config$threePanel = config.threePanel,
+    threePanel = _config$threePanel === void 0 ? false : _config$threePanel;
+  var variorum = documentInfo && Object.keys(documentInfo).length > 1;
+  var transcriptionTypesInfo = {};
+  var manifestInfo = {};
+  var derivativesInfo = {};
+  if (variorum) {
+    Object.keys(config.documentInfo).forEach(function (key) {
+      transcriptionTypesInfo[key] = config.documentInfo[key].transcriptionTypes;
+      manifestInfo[key] = config.documentInfo[key].iiifManifest;
+      derivativesInfo[key] = config.documentInfo[key].documentName;
+    });
+  }
+  var transcriptionTypes = variorum ? transcriptionTypesInfo : config.transcriptionTypes;
+  var iiifManifest = variorum ? manifestInfo : config.iiifManifest;
+  var derivativeNames = variorum && derivativesInfo;
   return combineReducers({
     diplomatic: createReducer('DiplomaticActions', DiplomaticActions, diplomaticInitialState),
-    document: createReducer('DocumentActions', DocumentActions, documentInitialState(iiifManifest, documentName, transcriptionTypes)),
+    document: createReducer('DocumentActions', DocumentActions, documentInitialState(iiifManifest, documentName, transcriptionTypes, variorum, derivativeNames, threePanel)),
     glossary: createReducer('GlossaryActions', GlossaryActions, glossaryInitialState())
   });
 }

package/dist/es/src/component/DiploMatic.js

@@ -1,41 +1,72 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import withWidth from '@material-ui/core/withWidth';
 import { createBrowserHistory } from 'history';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect, Provider } from 'react-redux';
 import { HashRouter, Route, Navigate, Routes } from 'react-router-dom';
 import DocumentView from './DocumentView';
 import RouteListener from './RouteListener';
 var DiploMatic = function DiploMatic(props) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var containerRef = useRef(null);
   useEffect(function () {
     var history = createBrowserHistory();
     history.listen(function () {
       window.scrollTo(0, 0);
     });
-  });
+  }, []);
+  useEffect(function () {
+    if (containerRef.current) {
+      setContainerWidth(containerRef.current.offsetWidth);
+    }
+  }, [containerRef]);
   var fixedFrameMode = props.diplomatic.fixedFrameMode;
   var fixedFrameModeClass = fixedFrameMode ? 'fixed' : 'sticky';
   return /*#__PURE__*/React.createElement(Provider, {
     store: props.store
   }, /*#__PURE__*/React.createElement(HashRouter, null, /*#__PURE__*/React.createElement("div", {
     id: "diplomatic",
-    className: fixedFrameModeClass
+    className: fixedFrameModeClass,
+    ref: containerRef
   }, /*#__PURE__*/React.createElement(RouteListener, null), /*#__PURE__*/React.createElement("div", {
     id: "content"
   }, /*#__PURE__*/React.createElement(Routes, null, /*#__PURE__*/React.createElement(Route, {
+    path: "/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3",
+    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
+      containerWidth: containerWidth
+    })),
+    exact: true
+  }), /*#__PURE__*/React.createElement(Route, {
     path: "/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2",
-    element: /*#__PURE__*/React.createElement(DocumentView, props),
+    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
+      containerWidth: containerWidth
+    })),
     exact: true
   }), /*#__PURE__*/React.createElement(Route, {
     path: "/ec/:folioID/:transcriptionType",
-    element: /*#__PURE__*/React.createElement(DocumentView, props),
+    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
+      containerWidth: containerWidth
+    })),
     exact: true
   }), /*#__PURE__*/React.createElement(Route, {
     path: "/ec/:folioID",
-    element: /*#__PURE__*/React.createElement(DocumentView, props),
+    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
+      containerWidth: containerWidth
+    })),
     exact: true
   }), /*#__PURE__*/React.createElement(Route, {
     path: "/ec",
-    element: /*#__PURE__*/React.createElement(DocumentView, props),
+    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
+      containerWidth: containerWidth
+    })),
     exact: true
   }), /*#__PURE__*/React.createElement(Route, {
     path: "/",

package/dist/es/src/component/DocumentView.js

@@ -26,7 +26,7 @@ var paneDefaults = {
   width: 0
 };
 var DocumentView = function DocumentView(props) {
-  var _useState = useState(true),
+  var _useState = useState(!props.document.variorum),
     _useState2 = _slicedToArray(_useState, 2),
     linkedMode = _useState2[0],
     setLinkedMode = _useState2[1];
@@ -42,9 +42,20 @@ var DocumentView = function DocumentView(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     right = _useState8[0],
     setRight = _useState8[1];
+  var _useState9 = useState(paneDefaults),
+    _useState10 = _slicedToArray(_useState9, 2),
+    third = _useState10[0],
+    setThird = _useState10[1];
+  var _useState11 = useState(props.containerWidth < 960),
+    _useState12 = _slicedToArray(_useState11, 2),
+    singlePaneMode = _useState12[0],
+    setSinglePaneMode = _useState12[1];
   var params = useParams();
   var navigate = useNavigate();
   var location = useLocation();
+  useEffect(function () {
+    setSinglePaneMode(props.containerWidth < 960);
+  }, [props.containerWidth]);
 
   // Navigate while keeping existing search params
   var navigateWithParams = function navigateWithParams(pathname) {
@@ -54,9 +65,11 @@ var DocumentView = function DocumentView(props) {
     var folioID = params.folioID,
       transcriptionType = params.transcriptionType,
       folioID2 = params.folioID2,
-      transcriptionType2 = params.transcriptionType2;
+      transcriptionType2 = params.transcriptionType2,
+      folioID3 = params.folioID3,
+      transcriptionType3 = params.transcriptionType3;
     var document = props.document;
-    var firstTranscriptionType = Object.keys(document.transcriptionTypes)[0];
+    var firstTranscriptionType = document.variorum ? Object.keys(document.transcriptionTypes[Object.keys(document.transcriptionTypes)[0]])[0] : Object.keys(document.transcriptionTypes)[0];
     if (!folioID) {
       // route /folios
       return {
@@ -66,7 +79,11 @@ var DocumentView = function DocumentView(props) {
         },
         right: {
           folioID: '-1',
-          transcriptionType: firstTranscriptionType
+          transcriptionType: document.variorum ? 'g' : firstTranscriptionType
+        },
+        third: {
+          folioID: '-1',
+          transcriptionType: 'g'
         }
       };
     }
@@ -74,17 +91,29 @@ var DocumentView = function DocumentView(props) {
     var leftTranscriptionType;
     var rightFolioID;
     var rightTranscriptionType;
+    var thirdFolioID;
+    var thirdTranscriptionType;
     if (folioID2) {
       // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2
       leftTranscriptionType = transcriptionType;
       rightFolioID = folioID2;
       rightTranscriptionType = transcriptionType2 || firstTranscriptionType;
+      if (folioID3) {
+        // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3
+        thirdFolioID = folioID3;
+        thirdTranscriptionType = transcriptionType3 || firstTranscriptionType;
+      } else {
+        thirdFolioID = '-1';
+        thirdTranscriptionType = 'g';
+      }
     } else {
       // route /ec/:folioID
       // route /ec/:folioID/:transcriptionType
       leftTranscriptionType = 'f';
       rightFolioID = folioID;
       rightTranscriptionType = transcriptionType || firstTranscriptionType;
+      thirdFolioID = '-1';
+      thirdTranscriptionType = 'g';
     }
     return {
       left: {
@@ -94,6 +123,10 @@ var DocumentView = function DocumentView(props) {
       right: {
         folioID: rightFolioID,
         transcriptionType: rightTranscriptionType
+      },
+      third: {
+        folioID: thirdFolioID,
+        transcriptionType: thirdTranscriptionType
       }
     };
   };
@@ -106,10 +139,14 @@ var DocumentView = function DocumentView(props) {
       setLeft(_objectSpread(_objectSpread({}, left), {}, {
         isXMLMode: xmlMode
       }));
-    } else {
+    } else if (side === 'right') {
       setRight(_objectSpread(_objectSpread({}, right), {}, {
         isXMLMode: xmlMode
       }));
+    } else {
+      setThird(_objectSpread(_objectSpread({}, third), {}, {
+        isXMLMode: xmlMode
+      }));
     }
   };
   var handleSetBookMode = function handleSetBookMode(shortid, bool) {
@@ -136,32 +173,41 @@ var DocumentView = function DocumentView(props) {
     var versoFolio = document.folioIndex[folioID];
     var name = versoFolio.name,
       pageNumber = versoFolio.pageNumber;
+    var documentFolios = document.variorum ? document.folios.filter(function (f) {
+      return f.doc_id === versoFolio.doc_id;
+    }) : document.folios;
     if (!name.endsWith('v') && name.endsWith('r')) {
-      return [document.folios[pageNumber - 1].id, document.folios[pageNumber].id];
+      return [documentFolios[pageNumber - 1].id, documentFolios[pageNumber].id];
     }
-    return [document.folios[pageNumber].id, document.folios[pageNumber + 1].id];
+    return [documentFolios[pageNumber].id, documentFolios[pageNumber + 1].id];
   };
-  var onWidth = function onWidth(leftWidth, rightWidth) {
+  var onWidth = function onWidth(leftWidth, rightWidth, thirdWidth) {
     setLeft(_objectSpread(_objectSpread({}, left), {}, {
       width: leftWidth
     }));
     setRight(_objectSpread(_objectSpread({}, right), {}, {
       width: rightWidth
     }));
+    setThird(_objectSpread(_objectSpread({}, third), {}, {
+      width: thirdWidth
+    }));
   };
   var changeTranscriptionType = function changeTranscriptionType(side, transcriptionType) {
     var currentViewports = getViewports();
     if (side === 'left') {
       var folioID = currentViewports.left.folioID;
       var otherSide = currentViewports.right;
-      navigateFolios(folioID, transcriptionType, otherSide.folioID, otherSide.transcriptionType);
-    } else {
+      navigateFolios(folioID, transcriptionType, otherSide.folioID, otherSide.transcriptionType, currentViewports.third.folioID, currentViewports.third.transcriptionType);
+    } else if (side === 'right') {
       var _folioID = currentViewports.right.folioID;
       var _otherSide = currentViewports.left;
-      navigateFolios(_otherSide.folioID, _otherSide.transcriptionType, _folioID, transcriptionType);
+      navigateFolios(_otherSide.folioID, _otherSide.transcriptionType, _folioID, transcriptionType, currentViewports.third.folioID, currentViewports.third.transcriptionType);
+    } else {
+      var _folioID2 = currentViewports.third.folioID;
+      navigateFolios(currentViewports.left.folioID, currentViewports.left.transcriptionType, currentViewports.right.folioID, currentViewports.right.transcriptionType, _folioID2, transcriptionType);
     }
   };
-  var navigateFolios = function navigateFolios(folioID, transcriptionType, folioID2, transcriptionType2) {
+  var navigateFolios = function navigateFolios(folioID, transcriptionType, folioID2, transcriptionType2, folioID3, transcriptionType3) {
     if (!folioID) {
       // goto grid view
       navigateWithParams('/ec');
@@ -182,8 +228,18 @@ var DocumentView = function DocumentView(props) {
       navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/tc"));
       return;
     }
-    // goto folioID, transcriptionType, folioID2, transcriptionType2
-    navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/").concat(transcriptionType2));
+    if (!folioID3) {
+      // goto folioID, transcriptionType, folioID2, transcriptionType2
+      navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/").concat(transcriptionType2));
+      return;
+    }
+    if (!transcriptionType3) {
+      // goto folioID, transcriptionType, folioID2, transcriptionType2, folioID3, tc
+      navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/").concat(transcriptionType2, "/").concat(folioID3, "/f"));
+      return;
+    }
+    // goto folioID, transcrptionType, folioID2, transcriptionType2, folioID3, transcriptionType3
+    navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/").concat(transcriptionType2, "/").concat(folioID3, "/").concat(transcriptionType3));
   };
   var changeCurrentFolio = function changeCurrentFolio(folioID, side, transcriptionType) {
     // Lookup prev/next
@@ -200,21 +256,27 @@ var DocumentView = function DocumentView(props) {
       if (side === 'left') {
         var otherSide = currentViewports.right;
         navigateFolios(folioID, transcriptionType, folioID, otherSide.transcriptionType);
-      } else {
+      } else if (side === 'right') {
         var _otherSide2 = currentViewports.left;
         navigateFolios(folioID, _otherSide2.transcriptionType, folioID, transcriptionType);
+      } else {
+        navigateFolios(currentViewports.left.folioID, currentViewports.left.transcriptionType, currentViewports.right.folioID, currentViewports.right.transcriptionType, folioID, transcriptionType);
       }
     } else if (side === 'left') {
       var _otherSide3 = currentViewports.right;
-      navigateFolios(folioID, transcriptionType, _otherSide3.folioID, _otherSide3.transcriptionType);
-    } else {
+      var thirdPane = currentViewports.third;
+      navigateFolios(folioID, transcriptionType, _otherSide3.folioID, _otherSide3.transcriptionType, thirdPane.folioID, thirdPane.transcriptionType);
+    } else if (side === 'right') {
       var _otherSide4 = currentViewports.left;
-      navigateFolios(_otherSide4.folioID, _otherSide4.transcriptionType, folioID, transcriptionType);
+      var _thirdPane = currentViewports.third;
+      navigateFolios(_otherSide4.folioID, _otherSide4.transcriptionType, folioID, transcriptionType, _thirdPane.folioID, _thirdPane.transcriptionType);
+    } else {
+      navigateFolios(currentViewports.left.folioID, currentViewports.left.transcriptionType, currentViewports.right.folioID, currentViewports.right.transcriptionType, folioID, transcriptionType);
     }
   };
   var determineViewType = function determineViewType(side) {
     var transcriptionType = getViewports()[side].transcriptionType;
-    var xmlMode = side === 'left' ? left.isXMLMode : right.isXMLMode;
+    var xmlMode = side === 'left' ? left.isXMLMode : side === 'right' ? right.isXMLMode : third.isXMLMode;
     if (transcriptionType === 'g') {
       return 'ImageGridView';
     }
@@ -232,13 +294,16 @@ var DocumentView = function DocumentView(props) {
 
     // blank folio ID
     if (viewport.folioID === '-1') {
-      return _objectSpread(_objectSpread({}, side === 'left' ? left : right), {}, {
+      return _objectSpread(_objectSpread({}, side === 'left' ? left : side === 'right' ? right : third), {}, {
         iiifShortID: viewport.folioID,
         transcriptionType: viewport.transcriptionType
       });
     }
     var shortID = viewport.folioID;
-    var folioCount = doc.folios.length;
+    var documentFolios = doc.variorum ? doc.folios.filter(function (f) {
+      return f.doc_id === doc.folioIndex[shortID].doc_id;
+    }) : doc.folios;
+    var folioCount = documentFolios.length;
     var nextID = '';
     var prevID = '';
     var current_hasPrev = false;
@@ -250,20 +315,20 @@ var DocumentView = function DocumentView(props) {
       var current_idx = doc.folioIndex[versoID].pageNumber;
       if (current_idx > -1) {
         current_hasNext = current_idx < folioCount - 2;
-        nextID = current_hasNext ? doc.folios[current_idx + 2].id : '';
+        nextID = current_hasNext ? documentFolios[current_idx + 2].id : '';
         current_hasPrev = current_idx > 1 && folioCount > 1;
-        prevID = current_hasPrev ? doc.folios[current_idx - 2].id : '';
+        prevID = current_hasPrev ? documentFolios[current_idx - 2].id : '';
       }
     } else {
       var _current_idx = doc.folioIndex[shortID].pageNumber;
       if (_current_idx > -1) {
         current_hasNext = _current_idx < folioCount - 1;
-        nextID = current_hasNext ? doc.folios[_current_idx + 1].id : '';
+        nextID = current_hasNext ? documentFolios[_current_idx + 1].id : '';
         current_hasPrev = _current_idx > 0 && folioCount > 1;
-        prevID = current_hasPrev ? doc.folios[_current_idx - 1].id : '';
+        prevID = current_hasPrev ? documentFolios[_current_idx - 1].id : '';
       }
     }
-    return _objectSpread(_objectSpread({}, side === 'left' ? left : right), {}, {
+    return _objectSpread(_objectSpread({}, side === 'left' ? left : side === 'right' ? right : third), {}, {
       iiifShortID: shortID,
       transcriptionType: viewport.transcriptionType,
       hasPrevious: current_hasPrev,
@@ -319,7 +384,8 @@ var DocumentView = function DocumentView(props) {
         key: key,
         documentView: docView,
         documentViewActions: documentViewActions,
-        side: side
+        side: side,
+        selectedDoc: props.document.variorum && Object.keys(props.document.derivativeNames)[side === 'left' ? 0 : side === 'right' ? 1 : Object.keys(props.document.derivativeNames).length > 2 ? 2 : 1]
       });
     }
     if (viewType === 'GlossaryView') {
@@ -333,7 +399,7 @@ var DocumentView = function DocumentView(props) {
     return /*#__PURE__*/React.createElement("div", null, "ERROR: Unrecognized viewType.");
   };
   var viewPaneKey = function viewPaneKey(side) {
-    var pane = side === 'left' ? left : right;
+    var pane = side === 'left' ? left : side === 'right' ? right : third;
     if (pane.viewType === 'ImageGridView') {
       return "".concat(side, "-").concat(pane.viewType);
     }
@@ -351,7 +417,8 @@ var DocumentView = function DocumentView(props) {
     linkedMode: linkedMode,
     bookMode: bookMode,
     left: viewportState('left'),
-    right: viewportState('right')
+    right: viewportState('right'),
+    third: viewportState('third')
   };
   var mobileDocView = {
     linkedMode: linkedMode,
@@ -359,15 +426,17 @@ var DocumentView = function DocumentView(props) {
     left: left,
     right: _objectSpread({}, viewportState('right'))
   };
-  if (isWidthUp('md', props.width)) {
+  if (isWidthUp('md', props.width) && !singlePaneMode) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SplitPaneView, {
       leftPane: renderPane('left', docView),
       rightPane: renderPane('right', docView),
-      onWidth: onWidth
+      thirdPane: renderPane('third', docView),
+      onWidth: onWidth,
+      threePanel: props.document.threePanel
     }));
   }
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SinglePaneView, {
-    singlePane: renderPane('right', mobileDocView)
+    singlePane: renderPane(viewportState('left').iiifShortID === "-1" ? 'left' : 'right', docView)
   }));
 };
 function mapStateToProps(state) {

package/dist/es/src/component/ImageGridView.js

@@ -16,6 +16,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 import React from 'react';
 import { connect } from 'react-redux';
 import InfiniteScroll from 'react-infinite-scroller';
+import { MenuItem, Select } from '@material-ui/core';
 var ImageGridView = /*#__PURE__*/function (_React$Component) {
   _inherits(ImageGridView, _React$Component);
   var _super = _createSuper(ImageGridView);
@@ -48,9 +49,31 @@ var ImageGridView = /*#__PURE__*/function (_React$Component) {
         jumpToBuffer: ''
       }));
     };
+    _this.onSelectDoc = function (event) {
+      if (event.target.value !== 'none') {
+        _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
+          currentDoc: event.target.value
+        }));
+      } else {
+        _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
+          currentDoc: null
+        }));
+      }
+      var documentView = _this.props.documentView;
+      var folioID = documentView[_this.props.side].iiifShortID;
+      var thumbs = _this.generateThumbs(folioID, event.target.value !== 'none' ? _this.props.document.folios.filter(function (folio) {
+        return folio.doc_id === event.target.value;
+      }) : _this.props.document.folios);
+      var thumbCount = thumbs.length > _this.loadIncrement ? _this.loadIncrement : thumbs.length;
+      var visibleThumbs = thumbs.slice(0, thumbCount);
+      _this.setState({
+        thumbs: thumbs,
+        visibleThumbs: visibleThumbs
+      });
+    };
     _this.onClickThumb = function (id, e) {
       // Set the folio for this side
-      _this.props.documentViewActions.changeCurrentFolio(id, _this.props.side);
+      _this.props.documentViewActions.changeCurrentFolio(id, _this.props.side, 'f');
     };
     _this.moreThumbs = function () {
       var thumbs = _this.state.thumbs;
@@ -70,18 +93,22 @@ var ImageGridView = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       jumpToBuffer: '',
       thumbs: '',
-      visibleThumbs: []
+      visibleThumbs: [],
+      currentDoc: props.selectedDoc || null
     };
     return _this;
   }
   _createClass(ImageGridView, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
       var documentView = this.props.documentView;
       var folioID = documentView[this.props.side].iiifShortID;
       var nextFolioID = this.props.documentView[this.props.side].iiifShortID;
       if (folioID !== nextFolioID) {
-        var thumbs = this.generateThumbs(nextFolioID, this.props.document.folios);
+        var thumbs = this.generateThumbs(nextFolioID, this.state.currentDoc ? this.props.document.folios.filter(function (folio) {
+          return folio.doc_id === _this2.state.currentDoc;
+        }) : this.props.document.folios);
         var thumbCount = thumbs.length > this.loadIncrement ? this.loadIncrement : thumbs.length;
         var visibleThumbs = thumbs.slice(0, thumbCount);
         this.setState({
@@ -95,7 +122,17 @@ var ImageGridView = /*#__PURE__*/function (_React$Component) {
     value: function renderToolbar() {
       return /*#__PURE__*/React.createElement("div", {
         className: "imageGridToolbar"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "fas fa-th",
+        style: {
+          paddingLeft: '15px'
+        }
+      }), this.props.document.variorum ? this.renderDocSelect() : /*#__PURE__*/React.createElement("div", {
+        className: "doc-select",
+        style: {
+          marginTop: '5px'
+        }
+      }, this.props.document.documentName), /*#__PURE__*/React.createElement("div", {
         className: "jump-to"
       }, /*#__PURE__*/React.createElement("form", {
         onSubmit: this.onJumpTo
@@ -114,12 +151,38 @@ var ImageGridView = /*#__PURE__*/function (_React$Component) {
         className: "fa fa-hand-point-right"
       })))));
     }
+
+    // in the case of a variorum, allow for filtering by document
+  }, {
+    key: "renderDocSelect",
+    value: function renderDocSelect() {
+      var _this3 = this;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "doc-select"
+      }, /*#__PURE__*/React.createElement(Select, {
+        id: "doc-filter",
+        className: "dark",
+        style: {
+          color: 'white'
+        },
+        value: this.state.currentDoc || Object.keys(this.props.document.derivativeNames)[0],
+        onClick: this.onSelectDoc
+      }, Object.keys(this.props.document.derivativeNames).map(function (key) {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          value: key,
+          key: key
+        }, _this3.props.document.derivativeNames[key]);
+      })));
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this4 = this;
       var documentView = this.props.documentView;
       var folioID = documentView[this.props.side].iiifShortID;
-      var thumbs = this.generateThumbs(folioID, this.props.document.folios);
+      var thumbs = this.generateThumbs(folioID, this.state.currentDoc ? this.props.document.folios.filter(function (folio) {
+        return folio.doc_id === _this4.state.currentDoc;
+      }) : this.props.document.folios);
       var thumbCount = thumbs.length > this.loadIncrement ? this.loadIncrement : thumbs.length;
       var visibleThumbs = thumbs.slice(0, thumbCount);
       this.setState({
@@ -130,22 +193,35 @@ var ImageGridView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "generateThumbs",
     value: function generateThumbs(currentID, folios) {
-      var _this2 = this;
+      var _this5 = this;
       var thumbs = folios.map(function (folio, index) {
-        return /*#__PURE__*/React.createElement("li", {
-          key: "thumb-".concat(index),
-          className: "thumbnail"
-        }, /*#__PURE__*/React.createElement("figure", {
-          className: folio.id === currentID ? 'current' : ''
-        }, /*#__PURE__*/React.createElement("a", {
-          id: folio.id,
-          onClick: _this2.onClickThumb.bind(_this2, folio.id)
-        }, /*#__PURE__*/React.createElement("img", {
-          src: folio.image_thumbnail_url,
-          alt: folio.name
-        }))), /*#__PURE__*/React.createElement("figcaption", {
-          className: folio.id === currentID ? 'thumbnail-caption current' : 'thumbnail-caption'
-        }, folio.id === currentID ? "*".concat(folio.name) : folio.name));
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line react/no-array-index-key
+          React.createElement("li", {
+            key: "thumb-".concat(index),
+            className: "thumbnail"
+          }, /*#__PURE__*/React.createElement("figure", {
+            className: folio.id === currentID ? 'current' : ''
+          }, /*#__PURE__*/React.createElement("a", {
+            id: folio.id,
+            onClick: _this5.onClickThumb.bind(_this5, folio.id)
+          }, /*#__PURE__*/React.createElement("img", {
+            src: folio.image_thumbnail_url,
+            alt: folio.name,
+            style: {
+              maxWidth: "130px",
+              maxHeight: "130px"
+            },
+            onError: function onError(_ref) {
+              var currentTarget = _ref.currentTarget;
+              currentTarget.onerror = null;
+              currentTarget.src = "".concat(folio.image_zoom_url.slice(0, -9), "full/full/0/default.jpg");
+            }
+          }))), /*#__PURE__*/React.createElement("figcaption", {
+            className: folio.id === currentID ? 'thumbnail-caption current' : 'thumbnail-caption'
+          }, folio.id === currentID ? "*".concat(folio.name) : folio.name))
+        );
       });
       return thumbs;
     }