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

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

@@ -1,356 +1,402 @@
-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, { useState, useRef, useEffect } from 'react';
-import { connect } from 'react-redux';
-import { FaArrowCircleLeft, FaArrowCircleRight } from 'react-icons/fa';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import JumpToFolio from './JumpToFolio';
-import DocumentHelper from '../model/DocumentHelper';
-import HelpPopper from './HelpPopper';
-import AlphabetLinks from './AlphabetLinks';
-import useIsWidthUp from '../hooks/useIsWidthUp';
-var initialPopoverObj = {
-  anchorEl: null
-};
-var Navigation = function Navigation(props) {
-  var _document$folioIndex$;
-  var _useState = useState(_objectSpread({}, initialPopoverObj)),
-    _useState2 = _slicedToArray(_useState, 2),
-    popover = _useState2[0],
-    setPopover = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    openHelp = _useState4[0],
-    setOpenHelp = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    openHelpNarrow = _useState6[0],
-    setOpenHelpNarrow = _useState6[1];
-  var helpRef = useRef(null);
-  var helpRefNarrow = useRef(null);
-  var onJumpBoxBlur = function onJumpBoxBlur(event) {
-    setPopover({
-      anchorEl: null
-    });
-  };
-  var changeType = function changeType(event) {
-    if (event.target.value === undefined || event.target.value === 0) return;
-    props.documentViewActions.changeTranscriptionType(props.side, event.target.value);
-  };
-  var onGoToGrid = function onGoToGrid(event) {
-    props.documentViewActions.changeTranscriptionType(props.side, 'g');
-  };
-  var toggleHelp = function toggleHelp(event) {
-    setOpenHelp(!openHelp);
-  };
-  var toggleHelpNarrow = function toggleHelpNarrow(event) {
-    setOpenHelpNarrow(!openHelpNarrow);
-  };
-  var toggleBookmode = function toggleBookmode(event) {
+import MenuItem from '@material-ui/core/MenuItem'
+import Select from '@material-ui/core/Select'
+import React, { useRef, useState } from 'react'
+import {
+  FaArrowCircleLeft,
+  FaArrowCircleRight,
+} from 'react-icons/fa'
+import { connect } from 'react-redux'
+import useIsWidthUp from '../hooks/useIsWidthUp'
+import DocumentHelper from '../model/DocumentHelper'
+import AlphabetLinks from './AlphabetLinks'
+import HelpPopper from './HelpPopper'
+import JumpToFolio from './JumpToFolio'
+
+const initialPopoverObj = {
+  anchorEl: null,
+}
+
+function Navigation(props) {
+  const [popover, setPopover] = useState({ ...initialPopoverObj })
+  const [openHelp, setOpenHelp] = useState(false)
+  const [openHelpNarrow, setOpenHelpNarrow] = useState(false)
+
+  const helpRef = useRef(null)
+  const helpRefNarrow = useRef(null)
+
+  const onJumpBoxBlur = (event) => {
+    setPopover({ anchorEl: null })
+  }
+
+  const changeType = (event) => {
+    if (event.target.value === undefined || event.target.value === 0)
+      return
+    props.documentViewActions.changeTranscriptionType(
+      props.side,
+      event.target.value,
+    )
+  }
+
+  const onGoToGrid = (event) => {
+    props.documentViewActions.changeTranscriptionType(props.side, 'g')
+  }
+
+  const toggleHelp = (event) => {
+    setOpenHelp(!openHelp)
+  }
+
+  const toggleHelpNarrow = (event) => {
+    setOpenHelpNarrow(!openHelpNarrow)
+  }
+
+  const toggleBookmode = (event) => {
     if (!props.documentView.bookMode) {
-      props.documentViewActions.changeCurrentFolio(props.documentView.left.iiifShortID, 'left', props.documentView.left.transcriptionType);
-      props.documentViewActions.changeCurrentFolio(props.documentView.left.nextFolioShortID, 'right', props.documentView.left.transcriptionType);
+      props.documentViewActions.changeCurrentFolio(
+        props.documentView.left.iiifShortID,
+        'left',
+        props.documentView.left.transcriptionType,
+      )
+
+      props.documentViewActions.changeCurrentFolio(
+        props.documentView.left.nextFolioShortID,
+        'right',
+        props.documentView.left.transcriptionType,
+      )
     }
-    props.documentViewActions.setBookMode(props.documentView.left.iiifShortID, !props.documentView.bookMode);
-  };
-  var toggleXMLMode = function toggleXMLMode(event) {
-    props.documentViewActions.setXMLMode(props.side, !props.documentView[props.side].isXMLMode);
-  };
-  var toggleLockmode = function toggleLockmode(event) {
+
+    props.documentViewActions.setBookMode(
+      props.documentView.left.iiifShortID,
+      !props.documentView.bookMode,
+    )
+  }
+
+  const toggleXMLMode = (event) => {
+    props.documentViewActions.setXMLMode(
+      props.side,
+      !props.documentView[props.side].isXMLMode,
+    )
+  }
+
+  const toggleLockmode = (event) => {
     if (props.documentView.bookMode) {
-      toggleBookmode();
-      return;
+      toggleBookmode()
+      return
     }
 
     // If we are transitioning from unlocked to locked, sync up the panes
     if (props.documentView.linkedMode === false) {
       if (props.side === 'left') {
-        props.documentViewActions.changeCurrentFolio(props.documentView.left.iiifShortID, 'right', props.documentView.right.transcriptionType);
-      } else {
-        props.documentViewActions.changeCurrentFolio(props.documentView.right.iiifShortID, 'left', props.documentView.left.transcriptionType);
+        props.documentViewActions.changeCurrentFolio(
+          props.documentView.left.iiifShortID,
+          'right',
+          props.documentView.right.transcriptionType,
+        )
+      }
+      else {
+        props.documentViewActions.changeCurrentFolio(
+          props.documentView.right.iiifShortID,
+          'left',
+          props.documentView.left.transcriptionType,
+        )
       }
     }
 
     // Set lock
-    props.documentViewActions.setLinkedMode(!props.documentView.linkedMode);
-  };
-  var changeCurrentFolio = function changeCurrentFolio(event) {
-    var documentViewActions = props.documentViewActions,
-      documentView = props.documentView,
-      side = props.side;
+    props.documentViewActions.setLinkedMode(
+      !props.documentView.linkedMode,
+    )
+  }
+
+  const changeCurrentFolio = (event) => {
+    const {
+      documentViewActions,
+      documentView,
+      side,
+    } = props
+
     if (typeof event.currentTarget.dataset.id === 'undefined' || event.currentTarget.dataset.id.length === 0) {
-      return;
+      return
     }
-    var folioID = event.currentTarget.dataset.id;
-    documentViewActions.changeCurrentFolio(folioID, side, documentView[side].transcriptionType);
-  };
-  var revealJumpBox = function revealJumpBox(event) {
+    const folioID = event.currentTarget.dataset.id
+    documentViewActions.changeCurrentFolio(
+      folioID,
+      side,
+      documentView[side].transcriptionType,
+    )
+  }
+
+  const revealJumpBox = (event) => {
     setPopover({
-      anchorEl: event.currentTarget
-    });
-  };
-  var side = props.side,
-    document = props.document,
-    documentView = props.documentView,
-    documentViewActions = props.documentViewActions,
-    onFilterChange = props.onFilterChange;
-  var isWidthUp = useIsWidthUp('md');
+      anchorEl: event.currentTarget,
+    })
+  }
+
+  const {
+    side,
+    document,
+    documentView,
+    documentViewActions,
+    onFilterChange,
+  } = props
+
+  const isWidthUp = useIsWidthUp('md')
+
   if (!documentView) {
-    return /*#__PURE__*/React.createElement("div", null, "Unknown Transcription Type");
+    return (
+      <div>
+        Unknown Transcription Type
+      </div>
+    )
   }
-  var getSelectContainerStyle = function getSelectContainerStyle() {
+
+  const getSelectContainerStyle = () => {
     if (isWidthUp) {
       if (documentView[side].width < 500 && !document.variorum) {
-        return {
-          display: 'none'
-        };
+        return { display: 'none' }
       }
-      return {
-        display: 'flex'
-      };
+
+      return { display: 'flex' }
     }
-    return null;
-  };
-  var recommendedWidth = documentView[side].width - 8; // the divder is 16 px wide so each side is minus 8
-  var widthStyle = {
-    width: recommendedWidth,
-    maxWidth: recommendedWidth
-  };
-  var selectColorStyle = documentView[side].transcriptionType === 'f' ? {
-    color: 'white'
-  } : {
-    color: 'black'
-  };
-  var selectClass = documentView[side].transcriptionType === 'f' ? 'dark' : 'light';
-  var showButtonsStyle = documentView[side].transcriptionType === 'glossary' ? {
-    visibility: 'hidden'
-  } : {
-    visibility: 'visible'
-  };
-  var selectContainerStyle = {
-    display: 'flex'
-  }; //what's the reason we want this to be hidden sometimes?
-  var lockIconClass = documentView.linkedMode ? 'fa fa-lock' : 'fa fa-lock-open';
+
+    return null
+  }
+
+  const selectColorStyle = documentView[side].transcriptionType === 'f' ? { color: 'white' } : { color: 'black' }
+  const selectClass = documentView[side].transcriptionType === 'f' ? 'dark' : 'light'
+  const showButtonsStyle = documentView[side].transcriptionType === 'glossary' ? { visibility: 'hidden' } : { visibility: 'visible' }
+  const selectContainerStyle = { display: 'flex' } // what's the reason we want this to be hidden sometimes?
+  let lockIconClass = (documentView.linkedMode) ? 'fa fa-lock' : 'fa fa-lock-open'
   if (!documentView.bookMode) {
-    lockIconClass += ' active';
+    lockIconClass += ' active'
   }
-  var imageViewActive = documentView[side].transcriptionType === 'f';
-  var bookIconClass = documentView.bookMode ? 'fa fa-book active' : 'fa fa-book';
-  var xmlIconClass = documentView[side].isXMLMode ? 'fa fa-code active' : 'fa fa-code';
-  var folioName = (_document$folioIndex$ = document.folioIndex[documentView[side].iiifShortID]) === null || _document$folioIndex$ === void 0 ? void 0 : _document$folioIndex$.name;
-  var jumpToIconStyle = imageViewActive ? {
-    color: 'white'
-  } : {
-    color: 'black'
-  };
+  const imageViewActive = documentView[side].transcriptionType === 'f'
+  const bookIconClass = (documentView.bookMode) ? 'fa fa-book active' : 'fa fa-book'
+  const xmlIconClass = (documentView[side].isXMLMode) ? 'fa fa-code active' : 'fa fa-code'
+  const folioName = document.folioIndex[documentView[side].iiifShortID]?.name
+  const jumpToIconStyle = (imageViewActive) ? { color: 'white' } : { color: 'black' }
   // this is messy but faster for the moment then figuring out why the sides dont behave the same
-  var helpMarginStyle = side === 'left' ? {
-    marginRight: '55px'
-  } : {
-    marginRight: '15px'
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "navigationComponent"
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "navigation-row",
-    className: "navigationRow"
-  }, documentView[side].transcriptionType !== 'glossary' ? /*#__PURE__*/React.createElement("div", {
-    id: "tool-bar-buttons",
-    className: "breadcrumbs",
-    style: showButtonsStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'baseline',
-      gap: '4px'
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "fas fa-th",
-    style: {
-      cursor: documentView[side].transcriptionType !== 'g' ? 'pointer' : 'default',
-      padding: '0 15px'
-    },
-    title: documentView[side].transcriptionType !== 'g' && "Return to Grid View",
-    onClick: documentView[side].transcriptionType !== 'g' && onGoToGrid
-  }), /*#__PURE__*/React.createElement("span", {
-    title: "Toggle coordination of views",
-    onClick: toggleLockmode,
-    className: lockIconClass
-  }), /*#__PURE__*/React.createElement("span", {
-    title: "Toggle book mode",
-    onClick: toggleBookmode,
-    className: bookIconClass
-  }), /*#__PURE__*/React.createElement("span", {
-    title: "Toggle XML mode",
-    onClick: toggleXMLMode,
-    style: {
-      paddingRight: '15px'
-    },
-    className: imageViewActive ? 'invisible' : xmlIconClass
-  }), /*#__PURE__*/React.createElement("span", {
-    title: "Go back",
-    onClick: changeCurrentFolio,
-    "data-id": documentView[side].previousFolioShortID,
-    className: documentView[side].hasPrevious ? 'arrow' : 'arrow disabled'
-  }, /*#__PURE__*/React.createElement(FaArrowCircleLeft, null)), /*#__PURE__*/React.createElement("span", {
-    title: "Go forward",
-    onClick: changeCurrentFolio,
-    "data-id": documentView[side].nextFolioShortID,
-    className: documentView[side].hasNext ? 'arrow' : 'arrow disabled'
-  }, /*#__PURE__*/React.createElement(FaArrowCircleRight, null))), "\xA0\xA0", /*#__PURE__*/React.createElement("div", {
-    title: "".concat(props.documentName || document.documentName, "/").concat(folioName),
-    style: {
-      display: 'flex',
-      overflowX: 'hidden',
-      justifyContent: 'flex-end'
-    }
-  }, /*#__PURE__*/React.createElement("span", null, props.documentName || document.documentName), /*#__PURE__*/React.createElement("span", null, ' / '), /*#__PURE__*/React.createElement("div", {
-    onClick: revealJumpBox,
-    className: "folioName",
-    style: {
-      flexShrink: '0',
-      minWidth: '40px'
-    }
-  }, folioName, /*#__PURE__*/React.createElement("span", {
-    style: jumpToIconStyle,
-    className: "fa fa-hand-point-right"
-  }))), /*#__PURE__*/React.createElement(JumpToFolio, {
-    side: side,
-    anchorEl: popover.anchorEl,
-    submitHandler: documentViewActions.jumpToFolio,
-    blurHandler: onJumpBoxBlur
-  })) : /*#__PURE__*/React.createElement(AlphabetLinks, {
-    onFilterChange: onFilterChange,
-    value: props.value
-  }), /*#__PURE__*/React.createElement("div", {
-    id: "doc-type-help",
-    style: selectContainerStyle,
-    ref: helpRef
-  }, /*#__PURE__*/React.createElement(Select, {
-    className: selectClass,
-    style: _objectSpread(_objectSpread({}, selectColorStyle), {}, {
-      marginRight: 15,
-      fontSize: 'max(16px, 1rem)'
-    }),
-    value: documentView[side].transcriptionType,
-    id: "doc-type",
-    onClick: changeType
-  }, Object.keys(props.document.folios.find(function (fol) {
-    return fol.id == props.documentView[props.side].iiifShortID;
-  }).annotationURLs).map(function (ttKey) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      value: ttKey,
-      key: ttKey
-    }, props.document.variorum ? props.document.transcriptionTypes[props.document.folios.find(function (fol) {
-      return fol.id == props.documentView[props.side].iiifShortID;
-    }).doc_id][ttKey] : props.document.transcriptionTypes[ttKey]);
-  }), /*#__PURE__*/React.createElement(MenuItem, {
-    value: "f",
-    key: "f"
-  }, DocumentHelper.transcriptionTypeLabels.f), props.glossary && /*#__PURE__*/React.createElement(MenuItem, {
-    value: "glossary",
-    key: "glossary"
-  }, DocumentHelper.transcriptionTypeLabels.glossary)), /*#__PURE__*/React.createElement("span", {
-    title: "Toggle folio help",
-    onClick: toggleHelp,
-    className: "helpIcon"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "fas fa-question-circle"
-  })), /*#__PURE__*/React.createElement(HelpPopper, {
-    marginStyle: helpMarginStyle,
-    anchorEl: helpRef.current,
-    open: openHelp,
-    onClose: toggleHelp
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "navigationComponentNarrow"
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "navigation-row",
-    className: "navigationRowNarrow"
-  }, documentView[side].transcriptionType !== 'glossary' ? /*#__PURE__*/React.createElement("div", {
-    id: "tool-bar-buttons",
-    className: "breadcrumbsNarrow",
-    style: showButtonsStyle
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "fas fa-th",
-    style: {
-      cursor: documentView[side].transcriptionType !== 'g' ? 'pointer' : 'default',
-      padding: '0 15px'
-    },
-    title: documentView[side].transcriptionType !== 'g' && "Return to Grid View",
-    onClick: documentView[side].transcriptionType !== 'g' && onGoToGrid
-  }), "\xA0", /*#__PURE__*/React.createElement("span", {
-    title: "Toggle XML mode",
-    onClick: toggleXMLMode,
-    className: imageViewActive ? 'invisible' : xmlIconClass
-  }), imageViewActive && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    title: "Go back",
-    onClick: changeCurrentFolio,
-    "data-id": documentView[side].previousFolioShortID,
-    className: documentView[side].hasPrevious ? 'arrow' : 'arrow disabled'
-  }, ' ', /*#__PURE__*/React.createElement(FaArrowCircleLeft, null), ' '), /*#__PURE__*/React.createElement("span", {
-    title: "Go forward",
-    onClick: changeCurrentFolio,
-    "data-id": documentView[side].nextFolioShortID,
-    className: documentView[side].hasNext ? 'arrow' : 'arrow disabled'
-  }, ' ', /*#__PURE__*/React.createElement(FaArrowCircleRight, null)))) : /*#__PURE__*/React.createElement(AlphabetLinks, {
-    onFilterChange: onFilterChange,
-    value: props.value
-  }), /*#__PURE__*/React.createElement("div", {
-    id: "doc-type-help",
-    style: selectContainerStyle,
-    ref: helpRefNarrow
-  }, /*#__PURE__*/React.createElement(Select, {
-    className: selectClass,
-    style: _objectSpread(_objectSpread({}, selectColorStyle), {}, {
-      marginRight: 15,
-      fontSize: 'max(16px, 1rem)'
-    }),
-    value: documentView[side].transcriptionType,
-    id: "doc-type",
-    onClick: changeType
-  }, Object.keys(props.document.folios.find(function (fol) {
-    return fol.id == props.documentView[props.side].iiifShortID;
-  }).annotationURLs).map(function (ttKey) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      value: ttKey,
-      key: ttKey,
-      title: ttKey
-    }, props.document.variorum ? props.document.transcriptionTypes[props.document.folios.find(function (fol) {
-      return fol.id == props.documentView[props.side].iiifShortID;
-    }).doc_id][ttKey] : props.document.transcriptionTypes[ttKey]);
-  }), /*#__PURE__*/React.createElement(MenuItem, {
-    value: "f",
-    key: "f"
-  }, DocumentHelper.transcriptionTypeLabels.f), props.glossary && /*#__PURE__*/React.createElement(MenuItem, {
-    value: "glossary",
-    key: "glossary"
-  }, DocumentHelper.transcriptionTypeLabels.glossary)), /*#__PURE__*/React.createElement("span", {
-    title: "Toggle folio help",
-    onClick: toggleHelpNarrow,
-    className: "helpIcon"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "fas fa-question-circle"
-  })), /*#__PURE__*/React.createElement(HelpPopper, {
-    marginStyle: helpMarginStyle,
-    anchorEl: helpRefNarrow.current,
-    open: openHelpNarrow,
-    onClose: toggleHelpNarrow
-  })))));
-};
+  const helpMarginStyle = side === 'left' ? { marginRight: '55px' } : { marginRight: '15px' }
+
+  return (
+    <>
+      <div className="navigationComponent">
+        <div id="navigation-row" className="navigationRow">
+
+          { documentView[side].transcriptionType !== 'glossary' ? (
+
+            <div id="tool-bar-buttons" className="breadcrumbs" style={showButtonsStyle}>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
+                <span
+                  className="fas fa-th"
+                  style={{ cursor: documentView[side].transcriptionType !== 'g' ? 'pointer' : 'default', padding: '0 15px' }}
+                  title={documentView[side].transcriptionType !== 'g' && 'Return to Grid View'}
+                  onClick={documentView[side].transcriptionType !== 'g' && onGoToGrid}
+                />
+
+                <span
+                  title="Toggle coordination of views"
+                  onClick={toggleLockmode}
+                  className={lockIconClass}
+                />
+
+                <span
+                  title="Toggle book mode"
+                  onClick={toggleBookmode}
+                  className={bookIconClass}
+                />
+
+                <span
+                  title="Toggle XML mode"
+                  onClick={toggleXMLMode}
+                  style={{ paddingRight: '15px' }}
+                  className={imageViewActive ? 'invisible' : xmlIconClass}
+                />
+
+                {/* <span title="Toggle single column mode"  onClick={this.toggleColumns}
+                                                        className={columnIconClass}></span> */}
+
+                <span
+                  title="Go back"
+                  onClick={changeCurrentFolio}
+                  data-id={documentView[side].previousFolioShortID}
+                  className={(documentView[side].hasPrevious) ? 'arrow' : 'arrow disabled'}
+                >
+
+                  <FaArrowCircleLeft />
+
+                </span>
+
+                <span
+                  title="Go forward"
+                  onClick={changeCurrentFolio}
+                  data-id={documentView[side].nextFolioShortID}
+                  className={(documentView[side].hasNext) ? 'arrow' : 'arrow disabled'}
+                >
+
+                  <FaArrowCircleRight />
+                </span>
+              </div>
+                                                &nbsp;&nbsp;
+              <div title={`${props.documentName || document.documentName}/${folioName}`} style={{ display: 'flex', overflowX: 'hidden', justifyContent: 'flex-end' }}>
+                <span>{props.documentName || document.documentName}</span>
+                <span>{' / '}</span>
+                <div
+                  onClick={revealJumpBox}
+                  className="folioName"
+                  style={{ flexShrink: '0', minWidth: '40px' }}
+                >
+
+                  {folioName}
+
+                  <span style={jumpToIconStyle} className="fa fa-hand-point-right" />
+                </div>
+              </div>
+
+              <JumpToFolio
+                side={side}
+                anchorEl={popover.anchorEl}
+                submitHandler={documentViewActions.jumpToFolio}
+                blurHandler={onJumpBoxBlur}
+              />
+
+            </div>
+          )
+            : (<AlphabetLinks onFilterChange={onFilterChange} value={props.value} />)}
+
+          <div id="doc-type-help" style={selectContainerStyle} ref={helpRef}>
+            <Select
+              className={selectClass}
+              style={{ ...selectColorStyle, marginRight: 15, fontSize: 'max(16px, 1rem)' }}
+              value={documentView[side].transcriptionType}
+              id="doc-type"
+              onClick={changeType}
+            >
+              {Object.keys(props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).annotationURLs).map(ttKey => (
+                <MenuItem value={ttKey} key={ttKey}>{props.document.variorum ? props.document.transcriptionTypes[props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).doc_id][ttKey] : props.document.transcriptionTypes[ttKey]}</MenuItem>
+              ))}
+              <MenuItem value="f" key="f">
+                {DocumentHelper.transcriptionTypeLabels.f}
+              </MenuItem>
+              { props.glossary && (
+                <MenuItem value="glossary" key="glossary">
+                  {DocumentHelper.transcriptionTypeLabels.glossary}
+                </MenuItem>
+              ) }
+            </Select>
+            <span
+              title="Toggle folio help"
+              onClick={toggleHelp}
+              className="helpIcon"
+            >
+              <i className="fas fa-question-circle" />
+            </span>
+            <HelpPopper
+              marginStyle={helpMarginStyle}
+              anchorEl={helpRef.current}
+              open={openHelp}
+              onClose={toggleHelp}
+            />
+          </div>
+
+        </div>
+      </div>
+      <div className="navigationComponentNarrow">
+        <div id="navigation-row" className="navigationRowNarrow">
+
+          { documentView[side].transcriptionType !== 'glossary'
+            ? (
+
+                <div id="tool-bar-buttons" className="breadcrumbsNarrow" style={showButtonsStyle}>
+
+                  <span
+                    className="fas fa-th"
+                    style={{ cursor: documentView[side].transcriptionType !== 'g' ? 'pointer' : 'default', padding: '0 15px' }}
+                    title={documentView[side].transcriptionType !== 'g' && 'Return to Grid View'}
+                    onClick={documentView[side].transcriptionType !== 'g' && onGoToGrid}
+                  />
+                                                &nbsp;
+                  <span
+                    title="Toggle XML mode"
+                    onClick={toggleXMLMode}
+                    className={imageViewActive ? 'invisible' : xmlIconClass}
+                  />
+
+                  { imageViewActive && (
+                    <>
+                      <span
+                        title="Go back"
+                        onClick={changeCurrentFolio}
+                        data-id={documentView[side].previousFolioShortID}
+                        className={(documentView[side].hasPrevious) ? 'arrow' : 'arrow disabled'}
+                      >
+                        {' '}
+                        <FaArrowCircleLeft />
+                        {' '}
+
+                      </span>
+
+                      <span
+                        title="Go forward"
+                        onClick={changeCurrentFolio}
+                        data-id={documentView[side].nextFolioShortID}
+                        className={(documentView[side].hasNext) ? 'arrow' : 'arrow disabled'}
+                      >
+                        {' '}
+                        <FaArrowCircleRight />
+                      </span>
+                    </>
+                  )}
+
+                </div>
+              )
+            : (<AlphabetLinks onFilterChange={onFilterChange} value={props.value} />)}
+
+          <div id="doc-type-help" style={selectContainerStyle} ref={helpRefNarrow}>
+            <Select
+              className={selectClass}
+              style={{ ...selectColorStyle, marginRight: 15, fontSize: 'max(16px, 1rem)' }}
+              value={documentView[side].transcriptionType}
+              id="doc-type"
+              onClick={changeType}
+            >
+              {Object.keys(props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).annotationURLs).map(ttKey => (
+                <MenuItem value={ttKey} key={ttKey} title={ttKey}>{props.document.variorum ? props.document.transcriptionTypes[props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).doc_id][ttKey] : props.document.transcriptionTypes[ttKey]}</MenuItem>
+              ))}
+              <MenuItem value="f" key="f">
+                {DocumentHelper.transcriptionTypeLabels.f}
+              </MenuItem>
+              { props.glossary && (
+                <MenuItem value="glossary" key="glossary">
+                  {DocumentHelper.transcriptionTypeLabels.glossary}
+                </MenuItem>
+              ) }
+            </Select>
+            <span
+              title="Toggle folio help"
+              onClick={toggleHelpNarrow}
+              className="helpIcon"
+            >
+              <i className="fas fa-question-circle" />
+            </span>
+            <HelpPopper
+              marginStyle={helpMarginStyle}
+              anchorEl={helpRefNarrow.current}
+              open={openHelpNarrow}
+              onClose={toggleHelpNarrow}
+            />
+          </div>
+
+        </div>
+      </div>
+    </>
+  )
+}
+
 function mapStateToProps(state) {
   return {
     document: state.document,
-    glossary: !!state.glossary.URL
-  };
+    glossary: !!state.glossary.URL,
+  }
 }
-export default connect(mapStateToProps)(Navigation);
+
+export default (connect(mapStateToProps)(Navigation))