@cu-mkp/editioncrafter 1.0.2 → 1.0.4-beta.1

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

@@ -1,466 +1,542 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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 React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import SplitPaneView from './SplitPaneView';
-import { dispatchAction } from '../model/ReduxStore';
-import ImageView from './ImageView';
-import ImageGridView from './ImageGridView';
-import TranscriptionView from './TranscriptionView';
-import XMLView from './XMLView';
-import GlossaryView from './GlossaryView';
-import SinglePaneView from './SinglePaneView';
-var paneDefaults = {
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
+import React, { useEffect, useState } from 'react'
+import { connect } from 'react-redux'
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+} from 'react-router-dom'
+import { dispatchAction } from '../model/ReduxStore'
+import GlossaryView from './GlossaryView'
+import ImageGridView from './ImageGridView'
+import ImageView from './ImageView'
+import SinglePaneView from './SinglePaneView'
+import SplitPaneView from './SplitPaneView'
+import TranscriptionView from './TranscriptionView'
+import XMLView from './XMLView'
+
+const paneDefaults = {
   isXMLMode: false,
-  width: 0
-};
-var DocumentView = function DocumentView(props) {
-  var _useState = useState(!props.document.variorum),
-    _useState2 = _slicedToArray(_useState, 2),
-    linkedMode = _useState2[0],
-    setLinkedMode = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    bookMode = _useState4[0],
-    setBookMode = _useState4[1];
-  var _useState5 = useState(paneDefaults),
-    _useState6 = _slicedToArray(_useState5, 2),
-    left = _useState6[0],
-    setLeft = _useState6[1];
-  var _useState7 = useState(paneDefaults),
-    _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();
-
-  //"reload" the page if the config props change
-  useEffect(function () {
-    dispatchAction(props, 'RouteListenerSaga.userNavigatation', location);
-  }, [props.config]);
-  useEffect(function () {
-    setSinglePaneMode(props.containerWidth < 960);
-  }, [props.containerWidth]);
+  width: 0,
+}
+
+function DocumentView(props) {
+  const [linkedMode, setLinkedMode] = useState(!props.document.variorum)
+  const [bookMode, setBookMode] = useState(false)
+  const [left, setLeft] = useState(paneDefaults)
+  const [right, setRight] = useState(paneDefaults)
+  const [third, setThird] = useState(paneDefaults)
+  const [singlePaneMode, setSinglePaneMode] = useState(props.containerWidth < 960)
+
+  const params = useParams()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  // "reload" the page if the config props change
+  useEffect(() => {
+    dispatchAction(props, 'RouteListenerSaga.userNavigatation', location)
+  }, [props.config])
+
+  useEffect(() => {
+    setSinglePaneMode(props.containerWidth < 960)
+  }, [props.containerWidth])
 
   // Navigate while keeping existing search params
-  var navigateWithParams = function navigateWithParams(pathname) {
-    navigate(pathname + location.search);
-  };
-  var getViewports = function getViewports() {
-    var folioID = params.folioID,
-      transcriptionType = params.transcriptionType,
-      folioID2 = params.folioID2,
-      transcriptionType2 = params.transcriptionType2,
-      folioID3 = params.folioID3,
-      transcriptionType3 = params.transcriptionType3;
-    var document = props.document;
-    var firstTranscriptionType = document.variorum ? Object.keys(document.transcriptionTypes[Object.keys(document.transcriptionTypes)[0]])[0] : Object.keys(document.transcriptionTypes)[0];
+  const navigateWithParams = (pathname) => {
+    navigate(pathname + location.search)
+  }
+
+  const getViewports = () => {
+    const {
+      folioID,
+      transcriptionType,
+      folioID2,
+      transcriptionType2,
+      folioID3,
+      transcriptionType3,
+    } = params
+    const { document } = props
+    const firstTranscriptionType = document.variorum ? Object.keys(document.transcriptionTypes[Object.keys(document.transcriptionTypes)[0]])[0] : Object.keys(document.transcriptionTypes)[0]
     if (!folioID) {
       // route /folios
       return {
         left: {
           folioID: '-1',
-          transcriptionType: 'g'
+          transcriptionType: 'g',
         },
         right: {
           folioID: '-1',
-          transcriptionType: document.variorum ? 'g' : firstTranscriptionType
+          transcriptionType: document.variorum ? 'g' : firstTranscriptionType,
         },
         third: {
           folioID: '-1',
-          transcriptionType: 'g'
-        }
-      };
-    }
-    var leftFolioValid = Object.keys(document.folioIndex).includes(folioID);
-    var leftFolioID = leftFolioValid ? folioID : '-1';
-    var leftTranscriptionType;
-    var rightFolioID;
-    var rightTranscriptionType;
-    var thirdFolioID;
-    var thirdTranscriptionType;
+          transcriptionType: 'g',
+        },
+      }
+    }
+    const leftFolioValid = Object.keys(document.folioIndex).includes(folioID)
+    const leftFolioID = leftFolioValid ? folioID : '-1'
+    let leftTranscriptionType; let rightFolioID; let
+      rightTranscriptionType; let thirdFolioID; let thirdTranscriptionType
     if (folioID2) {
       // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2
-      var rightFolioValid = Object.keys(document.folioIndex).includes(folioID2);
-      leftTranscriptionType = leftFolioValid ? transcriptionType : 'g';
-      rightFolioID = rightFolioValid ? folioID2 : '-1';
-      rightTranscriptionType = rightFolioValid ? transcriptionType2 ? transcriptionType2 : firstTranscriptionType : 'g';
+      const rightFolioValid = Object.keys(document.folioIndex).includes(folioID2)
+      leftTranscriptionType = leftFolioValid ? transcriptionType : 'g'
+      rightFolioID = rightFolioValid ? folioID2 : '-1'
+      rightTranscriptionType = rightFolioValid ? transcriptionType2 || firstTranscriptionType : 'g'
       if (folioID3) {
         // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3
-        var thirdFolioValid = Object.keys(document.folioIndex).includes(folioID3);
-        thirdFolioID = thirdFolioValid ? folioID3 : '-1';
-        thirdTranscriptionType = thirdFolioValid ? transcriptionType3 ? transcriptionType3 : firstTranscriptionType : 'g';
-      } else {
-        thirdFolioID = '-1';
-        thirdTranscriptionType = 'g';
+        const thirdFolioValid = Object.keys(document.folioIndex).includes(folioID3)
+        thirdFolioID = thirdFolioValid ? folioID3 : '-1'
+        thirdTranscriptionType = thirdFolioValid ? transcriptionType3 || firstTranscriptionType : 'g'
+      }
+      else {
+        thirdFolioID = '-1'
+        thirdTranscriptionType = 'g'
       }
-    } else {
+    }
+    else {
       // route /ec/:folioID
       // route /ec/:folioID/:transcriptionType
-      leftTranscriptionType = 'f';
-      rightFolioID = leftFolioValid ? folioID : '-1';
-      rightTranscriptionType = leftFolioValid ? transcriptionType ? transcriptionType : firstTranscriptionType : 'g';
-      thirdFolioID = '-1';
-      thirdTranscriptionType = 'g';
+      leftTranscriptionType = 'f'
+      rightFolioID = leftFolioValid ? folioID : '-1'
+      rightTranscriptionType = leftFolioValid ? transcriptionType || firstTranscriptionType : 'g'
+      thirdFolioID = '-1'
+      thirdTranscriptionType = 'g'
     }
+
     return {
       left: {
         folioID: leftFolioID,
-        transcriptionType: leftTranscriptionType
+        transcriptionType: leftTranscriptionType,
       },
       right: {
         folioID: rightFolioID,
-        transcriptionType: rightTranscriptionType
+        transcriptionType: rightTranscriptionType,
       },
       third: {
         folioID: thirdFolioID,
-        transcriptionType: thirdTranscriptionType
-      }
-    };
-  };
-  useEffect(function () {
-    dispatchAction(props, 'DiplomaticActions.setFixedFrameMode', true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var setXMLMode = function setXMLMode(side, xmlMode) {
+        transcriptionType: thirdTranscriptionType,
+      },
+    }
+  }
+
+  useEffect(() => {
+    dispatchAction(props, 'DiplomaticActions.setFixedFrameMode', true)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const setXMLMode = (side, xmlMode) => {
     if (side === 'left') {
-      setLeft(_objectSpread(_objectSpread({}, left), {}, {
-        isXMLMode: xmlMode
-      }));
-    } else if (side === 'right') {
-      setRight(_objectSpread(_objectSpread({}, right), {}, {
-        isXMLMode: xmlMode
-      }));
-    } else {
-      setThird(_objectSpread(_objectSpread({}, third), {}, {
-        isXMLMode: xmlMode
-      }));
-    }
-  };
-  var handleSetBookMode = function handleSetBookMode(shortid, bool) {
-    setBookMode(bool);
+      setLeft({ ...left, isXMLMode: xmlMode })
+    }
+    else if (side === 'right') {
+      setRight({ ...right, isXMLMode: xmlMode })
+    }
+    else {
+      setThird({ ...third, isXMLMode: xmlMode })
+    }
+  }
+
+  const handleSetBookMode = (shortid, bool) => {
+    setBookMode(bool)
+
     if (bool) {
-      var _findBookFolios = findBookFolios(shortid),
-        _findBookFolios2 = _slicedToArray(_findBookFolios, 2),
-        versoID = _findBookFolios2[0],
-        rectoID = _findBookFolios2[1];
-      navigateFolios(versoID, 'f', rectoID, 'f');
-    }
-  };
-  var jumpToFolio = function jumpToFolio(folioName, side) {
-    var document = props.document;
+      const [versoID, rectoID] = findBookFolios(shortid)
+      navigateFolios(versoID, 'f', rectoID, 'f')
+    }
+  }
+
+  const jumpToFolio = (folioName, side) => {
+    const { document } = props
     // Convert folioName to ID (and confirm it exists)
     if (document.folioByName[folioName]) {
-      var _document$folioByName;
-      var folioID = (_document$folioByName = document.folioByName[folioName]) === null || _document$folioByName === void 0 ? void 0 : _document$folioByName.id;
-      changeCurrentFolio(folioID, side, getViewports()[side].transcriptionType);
-    }
-  };
-  var findBookFolios = function findBookFolios(folioID) {
-    var document = props.document;
-    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;
+      const folioID = document.folioByName[folioName]?.id
+      changeCurrentFolio(folioID, side, getViewports()[side].transcriptionType)
+    }
+  }
+
+  const findBookFolios = (folioID) => {
+    const { document } = props
+    const versoFolio = document.folioIndex[folioID]
+    const { name, pageNumber } = versoFolio
+
+    const documentFolios = document.variorum ? document.folios.filter(f => f.doc_id === versoFolio.doc_id) : document.folios
+
     if (!name.endsWith('v') && name.endsWith('r')) {
-      return [documentFolios[pageNumber - 1].id, documentFolios[pageNumber].id];
-    }
-    return [documentFolios[pageNumber].id, documentFolios[pageNumber + 1].id];
-  };
-  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();
+      return [documentFolios[pageNumber - 1].id, documentFolios[pageNumber].id]
+    }
+
+    if (documentFolios[pageNumber + 1]) {
+      return [documentFolios[pageNumber].id, documentFolios[pageNumber + 1].id]
+    }
+
+    return [documentFolios[pageNumber].id, null]
+  }
+
+  const onWidth = (leftWidth, rightWidth, thirdWidth) => {
+    setLeft({ ...left, width: leftWidth })
+    setRight({ ...right, width: rightWidth })
+    setThird({ ...third, width: thirdWidth })
+  }
+
+  const changeTranscriptionType = (side, transcriptionType) => {
+    const currentViewports = getViewports()
     if (side === 'left') {
-      var folioID = currentViewports.left.folioID;
-      var otherSide = currentViewports.right;
-      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, 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, folioID3, transcriptionType3) {
+      const { folioID } = currentViewports.left
+      const otherSide = currentViewports.right
+      navigateFolios(
+        folioID,
+        transcriptionType,
+        otherSide.folioID,
+        otherSide.transcriptionType,
+        currentViewports.third.folioID,
+        currentViewports.third.transcriptionType,
+      )
+    }
+    else if (side === 'right') {
+      const { folioID } = currentViewports.right
+      const otherSide = currentViewports.left
+      navigateFolios(
+        otherSide.folioID,
+        otherSide.transcriptionType,
+        folioID,
+        transcriptionType,
+        currentViewports.third.folioID,
+        currentViewports.third.transcriptionType,
+      )
+    }
+    else {
+      const { folioID } = currentViewports.third
+      navigateFolios(
+        currentViewports.left.folioID,
+        currentViewports.left.transcriptionType,
+        currentViewports.right.folioID,
+        currentViewports.right.transcriptionType,
+        folioID,
+        transcriptionType,
+      )
+    }
+  }
+
+  const navigateFolios = (folioID, transcriptionType, folioID2, transcriptionType2, folioID3, transcriptionType3) => {
     if (!folioID) {
       // goto grid view
-      navigateWithParams('/ec');
-      return;
+      navigateWithParams('/ec')
+      return
     }
     if (!transcriptionType) {
       // goto folioID, tc
-      navigateWithParams("/ec/".concat(folioID));
-      return;
+      navigateWithParams(`/ec/${folioID}`)
+      return
     }
     if (!folioID2) {
       // goto folioID, transcriptionType
-      navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType));
-      return;
+      navigateWithParams(`/ec/${folioID}/${transcriptionType}`)
+      return
     }
     if (!transcriptionType2) {
       // goto folioID, transcriptionType, folioID2, tc
-      navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/tc"));
-      return;
+      navigateWithParams(`/ec/${folioID}/${transcriptionType}/${folioID2}/tc`)
+      return
     }
     if (!folioID3) {
       // goto folioID, transcriptionType, folioID2, transcriptionType2
-      navigateWithParams("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/").concat(transcriptionType2));
-      return;
+      navigateWithParams(`/ec/${folioID}/${transcriptionType}/${folioID2}/${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;
+      navigateWithParams(`/ec/${folioID}/${transcriptionType}/${folioID2}/${transcriptionType2}/${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) {
+    navigateWithParams(`/ec/${folioID}/${transcriptionType}/${folioID2}/${transcriptionType2}/${folioID3}/${transcriptionType3}`)
+  }
+
+  const changeCurrentFolio = (folioID, side, transcriptionType) => {
     // Lookup prev/next
-    var currentViewports = getViewports();
+    const currentViewports = getViewports()
+
     if (bookMode) {
-      var _findBookFolios3 = findBookFolios(folioID),
-        _findBookFolios4 = _slicedToArray(_findBookFolios3, 2),
-        versoID = _findBookFolios4[0],
-        rectoID = _findBookFolios4[1];
+      const [versoID, rectoID] = findBookFolios(folioID)
       if (versoID) {
-        navigateFolios(versoID, 'f', rectoID, 'f');
+        navigateFolios(versoID, 'f', rectoID, 'f')
       }
-    } else if (linkedMode) {
+    }
+    else if (linkedMode) {
       if (side === 'left') {
-        var otherSide = currentViewports.right;
-        navigateFolios(folioID, transcriptionType, folioID, otherSide.transcriptionType);
-      } 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);
+        const otherSide = currentViewports.right
+        navigateFolios(
+          folioID,
+          transcriptionType,
+          folioID,
+          otherSide.transcriptionType,
+        )
+      }
+      else if (side === 'right') {
+        const otherSide = currentViewports.left
+        navigateFolios(
+          folioID,
+          otherSide.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;
-      var thirdPane = currentViewports.third;
-      navigateFolios(folioID, transcriptionType, _otherSide3.folioID, _otherSide3.transcriptionType, thirdPane.folioID, thirdPane.transcriptionType);
-    } else if (side === 'right') {
-      var _otherSide4 = currentViewports.left;
-      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 : side === 'right' ? right.isXMLMode : third.isXMLMode;
+    }
+    else if (side === 'left') {
+      const otherSide = currentViewports.right
+      const thirdPane = currentViewports.third
+      navigateFolios(
+        folioID,
+        transcriptionType,
+        otherSide.folioID,
+        otherSide.transcriptionType,
+        thirdPane.folioID,
+        thirdPane.transcriptionType,
+      )
+    }
+    else if (side === 'right') {
+      const otherSide = currentViewports.left
+      const thirdPane = currentViewports.third
+      navigateFolios(
+        otherSide.folioID,
+        otherSide.transcriptionType,
+        folioID,
+        transcriptionType,
+        thirdPane.folioID,
+        thirdPane.transcriptionType,
+      )
+    }
+    else {
+      navigateFolios(
+        currentViewports.left.folioID,
+        currentViewports.left.transcriptionType,
+        currentViewports.right.folioID,
+        currentViewports.right.transcriptionType,
+        folioID,
+        transcriptionType,
+      )
+    }
+  }
+
+  const determineViewType = (side) => {
+    const { transcriptionType } = getViewports()[side]
+    const xmlMode = side === 'left'
+      ? left.isXMLMode
+      : side === 'right' ? right.isXMLMode : third.isXMLMode
+
     if (transcriptionType === 'g') {
-      return 'ImageGridView';
+      return 'ImageGridView'
     }
     if (transcriptionType === 'f') {
-      return 'ImageView';
+      return 'ImageView'
     }
     if (transcriptionType === 'glossary') {
-      return 'GlossaryView';
+      return 'GlossaryView'
     }
-    return xmlMode ? 'XMLView' : 'TranscriptionView';
-  };
-  var viewportState = function viewportState(side) {
-    var doc = props.document;
-    var viewport = getViewports()[side];
+    return xmlMode ? 'XMLView' : 'TranscriptionView'
+  }
+
+  const viewportState = (side) => {
+    const { document: doc } = props
+    const viewport = getViewports()[side]
 
     // blank folio ID
     if (viewport.folioID === '-1') {
-      return _objectSpread(_objectSpread({}, side === 'left' ? left : side === 'right' ? right : third), {}, {
+      return {
+        ...side === 'left' ? left : side === 'right' ? right : third,
         iiifShortID: viewport.folioID,
-        transcriptionType: viewport.transcriptionType
-      });
-    }
-    var shortID = viewport.folioID;
-    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;
-    var current_hasNext = false;
+        transcriptionType: viewport.transcriptionType,
+      }
+    }
+
+    const shortID = viewport.folioID
+    const documentFolios = doc.variorum ? doc.folios.filter(f => f.doc_id === doc.folioIndex[shortID].doc_id) : doc.folios
+    const folioCount = documentFolios.length
+    let nextID = ''
+    let prevID = ''
+    let current_hasPrev = false
+    let current_hasNext = false
+
     if (bookMode) {
-      var _findBookFolios5 = findBookFolios(shortID),
-        _findBookFolios6 = _slicedToArray(_findBookFolios5, 1),
-        versoID = _findBookFolios6[0];
-      var current_idx = doc.folioIndex[versoID].pageNumber;
+      const [versoID] = findBookFolios(shortID)
+      const current_idx = doc.folioIndex[versoID].pageNumber
+
       if (current_idx > -1) {
-        current_hasNext = current_idx < folioCount - 2;
-        nextID = current_hasNext ? documentFolios[current_idx + 2].id : '';
-        current_hasPrev = current_idx > 1 && folioCount > 1;
-        prevID = current_hasPrev ? documentFolios[current_idx - 2].id : '';
+        current_hasNext = (current_idx < (folioCount - 2))
+        nextID = current_hasNext ? documentFolios[current_idx + 2].id : ''
+        current_hasPrev = (current_idx > 1 && folioCount > 1)
+        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 ? documentFolios[_current_idx + 1].id : '';
-        current_hasPrev = _current_idx > 0 && folioCount > 1;
-        prevID = current_hasPrev ? documentFolios[_current_idx - 1].id : '';
+    }
+    else {
+      const current_idx = doc.folioIndex[shortID].pageNumber
+      if (current_idx > -1) {
+        current_hasNext = (current_idx < (folioCount - 1))
+        nextID = current_hasNext ? documentFolios[current_idx + 1].id : ''
+
+        current_hasPrev = (current_idx > 0 && folioCount > 1)
+        prevID = current_hasPrev ? documentFolios[current_idx - 1].id : ''
       }
     }
-    return _objectSpread(_objectSpread({}, side === 'left' ? left : side === 'right' ? right : third), {}, {
+
+    return {
+      ...side === 'left' ? left : side === 'right' ? right : third,
       iiifShortID: shortID,
       transcriptionType: viewport.transcriptionType,
       hasPrevious: current_hasPrev,
       hasNext: current_hasNext,
       previousFolioShortID: prevID,
       nextFolioShortID: nextID,
-      documentID: doc.variorum ? doc.folioIndex[shortID].doc_id : doc.documentName
-    });
-  };
-  var documentViewActions = {
-    setXMLMode: setXMLMode,
-    setLinkedMode: setLinkedMode,
+      documentID: doc.variorum ? doc.folioIndex[shortID].doc_id : doc.documentName,
+    }
+  }
+
+  const documentViewActions = {
+    setXMLMode,
+    setLinkedMode,
     setBookMode: handleSetBookMode,
-    changeTranscriptionType: changeTranscriptionType,
-    changeCurrentFolio: changeCurrentFolio,
-    jumpToFolio: jumpToFolio
-  };
-  var renderPane = function renderPane(side, docView) {
-    var viewType = determineViewType(side);
-    var key = viewPaneKey(side);
-    var folioID = docView[side].iiifShortID;
-    var document = docView[side].documentID;
-    var transcriptionType = docView[side].transcriptionType;
+    changeTranscriptionType,
+    changeCurrentFolio,
+    jumpToFolio,
+  }
+
+  const renderPane = (side, docView) => {
+    const viewType = determineViewType(side)
+    const key = viewPaneKey(side)
+    const folioID = docView[side].iiifShortID
+    const document = docView[side].documentID
+    const { transcriptionType } = docView[side]
+
     if (viewType === 'ImageView') {
-      return /*#__PURE__*/React.createElement(ImageView, {
-        key: key,
-        folioID: folioID,
-        documentView: docView,
-        documentViewActions: documentViewActions,
-        side: side
-      });
-    }
-    if (viewType === 'TranscriptionView') {
-      return /*#__PURE__*/React.createElement(TranscriptionView, {
-        key: key,
-        documentView: docView,
-        documentViewActions: documentViewActions,
-        side: side,
-        folioID: folioID,
-        transcriptionType: transcriptionType
-      });
-    }
-    if (viewType === 'XMLView') {
-      return /*#__PURE__*/React.createElement(XMLView, {
-        key: key,
-        folioID: folioID,
-        transcriptionType: transcriptionType,
-        documentView: docView,
-        documentViewActions: documentViewActions,
-        side: side
-      });
-    }
-    if (viewType === 'ImageGridView') {
-      return /*#__PURE__*/React.createElement(ImageGridView, {
-        key: key,
-        documentView: docView,
-        documentViewActions: documentViewActions,
-        side: side,
-        selectedDoc: document ? document : 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') {
-      return /*#__PURE__*/React.createElement(GlossaryView, {
-        key: key,
-        documentView: docView,
-        documentViewActions: documentViewActions,
-        side: side
-      });
-    }
-    return /*#__PURE__*/React.createElement("div", null, "ERROR: Unrecognized viewType.");
-  };
-  var viewPaneKey = function viewPaneKey(side) {
-    var pane = side === 'left' ? left : side === 'right' ? right : third;
+      return (
+        <ImageView
+          key={key}
+          folioID={folioID}
+          documentView={docView}
+          documentViewActions={documentViewActions}
+          side={side}
+        />
+      )
+    } if (viewType === 'TranscriptionView') {
+      return (
+        <TranscriptionView
+          key={key}
+          documentView={docView}
+          documentViewActions={documentViewActions}
+          side={side}
+          folioID={folioID}
+          transcriptionType={transcriptionType}
+        />
+      )
+    } if (viewType === 'XMLView') {
+      return (
+        <XMLView
+          key={key}
+          folioID={folioID}
+          transcriptionType={transcriptionType}
+          documentView={docView}
+          documentViewActions={documentViewActions}
+          side={side}
+        />
+      )
+    } if (viewType === 'ImageGridView') {
+      return (
+        <ImageGridView
+          key={key}
+          documentView={docView}
+          documentViewActions={documentViewActions}
+          side={side}
+          selectedDoc={document || 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') {
+      return (
+        <GlossaryView
+          key={key}
+          documentView={docView}
+          documentViewActions={documentViewActions}
+          side={side}
+        />
+      )
+    }
+    return (
+      <div>ERROR: Unrecognized viewType.</div>
+    )
+  }
+
+  const viewPaneKey = (side) => {
+    const pane = side === 'left'
+      ? left
+      : side === 'right'
+        ? right
+        : third
+
     if (pane.viewType === 'ImageGridView') {
-      return "".concat(side, "-").concat(pane.viewType);
+      return `${side}-${pane.viewType}`
     }
     if (typeof pane.folio !== 'undefined') {
-      return "".concat(side, "-").concat(pane.viewType, "-").concat(pane.folio.id);
+      return `${side}-${pane.viewType}-${pane.folio.id}`
     }
-    return "".concat(side, "-").concat(pane.viewType);
-  };
-  if (!props.document.loaded) {
-    return null;
+    return `${side}-${pane.viewType}`
   }
 
+  if (!props.document.loaded) { return null }
+
   // combine component state with state from props
-  var docView = {
-    linkedMode: linkedMode,
-    bookMode: bookMode,
+  const docView = {
+    linkedMode,
+    bookMode,
     left: viewportState('left'),
     right: viewportState('right'),
-    third: viewportState('third')
-  };
-  var mobileDocView = {
-    linkedMode: linkedMode,
-    bookMode: bookMode,
-    left: left,
-    right: _objectSpread({}, viewportState('right'))
-  };
+    third: viewportState('third'),
+  }
+
+  const mobileDocView = {
+    linkedMode,
+    bookMode,
+    left,
+    right: { ...viewportState('right') },
+  }
+
   if (isWidthUp('md', props.width) && !singlePaneMode) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        height: '100%'
-      }
-    }, /*#__PURE__*/React.createElement(SplitPaneView, {
-      leftPane: renderPane('left', docView),
-      rightPane: renderPane('right', docView),
-      thirdPane: renderPane('third', docView),
-      onWidth: onWidth,
-      threePanel: props.document.threePanel
-    }));
+    return (
+      <div style={{ height: '100%' }}>
+        <SplitPaneView
+          leftPane={renderPane('left', docView)}
+          rightPane={renderPane('right', docView)}
+          thirdPane={renderPane('third', docView)}
+          onWidth={onWidth}
+          threePanel={props.document.threePanel}
+        />
+      </div>
+    )
   }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(SinglePaneView, {
-    singlePane: renderPane(viewportState('left').iiifShortID === "-1" ? 'left' : 'right', docView)
-  }));
-};
+  return (
+    <div style={{ height: '100%' }}>
+      <SinglePaneView
+        singlePane={renderPane(viewportState('left').iiifShortID === '-1' ? 'left' : 'right', docView)}
+      />
+    </div>
+  )
+}
+
 function mapStateToProps(state) {
   return {
     document: state.document,
-    glossary: state.glossary
-  };
+    glossary: state.glossary,
+  }
 }
-export default withWidth()(connect(mapStateToProps)(DocumentView));
+
+export default withWidth()(connect(mapStateToProps)(DocumentView))