@cu-mkp/editioncrafter 0.0.4

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
+var _history = require("history");
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _reactRouterDom = require("react-router-dom");
+var _DocumentView = _interopRequireDefault(require("./DocumentView"));
+var _RouteListener = _interopRequireDefault(require("./RouteListener"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var DiploMatic = /*#__PURE__*/function (_Component) {
+  _inherits(DiploMatic, _Component);
+  var _super = _createSuper(DiploMatic);
+  function DiploMatic() {
+    _classCallCheck(this, DiploMatic);
+    return _super.apply(this, arguments);
+  }
+  _createClass(DiploMatic, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var history = (0, _history.createBrowserHistory)();
+      history.listen(function () {
+        window.scrollTo(0, 0);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var fixedFrameMode = this.props.diplomatic.fixedFrameMode;
+      var fixedFrameModeClass = fixedFrameMode ? 'fixed' : 'sticky';
+      return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+        store: this.props.store
+      }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.HashRouter, null, /*#__PURE__*/_react["default"].createElement("div", {
+        id: "diplomatic",
+        className: fixedFrameModeClass
+      }, /*#__PURE__*/_react["default"].createElement(_RouteListener["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "content"
+      }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Routes, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+        path: "/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2",
+        element: /*#__PURE__*/_react["default"].createElement(_DocumentView["default"], this.props),
+        exact: true
+      }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+        path: "/ec/:folioID/:transcriptionType",
+        element: /*#__PURE__*/_react["default"].createElement(_DocumentView["default"], this.props),
+        exact: true
+      }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+        path: "/ec/:folioID",
+        element: /*#__PURE__*/_react["default"].createElement(_DocumentView["default"], this.props),
+        exact: true
+      }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+        path: "/ec",
+        element: /*#__PURE__*/_react["default"].createElement(_DocumentView["default"], this.props),
+        exact: true
+      }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+        path: "/",
+        element: /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Navigate, {
+          to: "/ec"
+        }),
+        exact: true
+      }))))));
+    }
+  }]);
+  return DiploMatic;
+}(_react.Component);
+function mapStateToProps(state) {
+  return {
+    diplomatic: state.diplomatic,
+    documentView: state.documentView
+  };
+}
+var _default = (0, _withWidth["default"])()((0, _reactRedux.connect)(mapStateToProps)(DiploMatic));
+exports["default"] = _default;

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

@@ -0,0 +1,427 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _withWidth = _interopRequireWildcard(require("@material-ui/core/withWidth"));
+var _SplitPaneView = _interopRequireDefault(require("./SplitPaneView"));
+var _ReduxStore = require("../model/ReduxStore");
+var _ImageView = _interopRequireDefault(require("./ImageView"));
+var _ImageGridView = _interopRequireDefault(require("./ImageGridView"));
+var _TranscriptionView = _interopRequireDefault(require("./TranscriptionView"));
+var _XMLView = _interopRequireDefault(require("./XMLView"));
+var _GlossaryView = _interopRequireDefault(require("./GlossaryView"));
+var _SinglePaneView = _interopRequireDefault(require("./SinglePaneView"));
+var _withRouter = _interopRequireDefault(require("../hocs/withRouter"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var DocumentView = /*#__PURE__*/function (_Component) {
+  _inherits(DocumentView, _Component);
+  var _super = _createSuper(DocumentView);
+  function DocumentView(props) {
+    var _this;
+    _classCallCheck(this, DocumentView);
+    _this = _super.call(this, props);
+    _this.onWidth = function (left, right) {
+      _this.setState(function (state) {
+        var nextState = _objectSpread({}, state);
+        nextState.left.width = left;
+        nextState.right.width = right;
+        return nextState;
+      });
+    };
+    _this.getViewports = function () {
+      var _this$props$router$pa = _this.props.router.params,
+        folioID = _this$props$router$pa.folioID,
+        transcriptionType = _this$props$router$pa.transcriptionType,
+        folioID2 = _this$props$router$pa.folioID2,
+        transcriptionType2 = _this$props$router$pa.transcriptionType2;
+      var viewports;
+      if (!folioID) {
+        // route /folios
+        viewports = {
+          left: {
+            folioID: '-1',
+            transcriptionType: 'g'
+          },
+          right: {
+            folioID: '-1',
+            transcriptionType: 'tl'
+          }
+        };
+      } else {
+        var leftFolioID = folioID;
+        var leftTranscriptionType;
+        var rightFolioID;
+        var rightTranscriptionType;
+        if (folioID2) {
+          // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2
+          leftTranscriptionType = transcriptionType;
+          rightFolioID = folioID2;
+          rightTranscriptionType = transcriptionType2 || 'tl';
+        } else {
+          // route /ec/:folioID
+          // route /ec/:folioID/:transcriptionType
+          leftTranscriptionType = 'f';
+          rightFolioID = folioID;
+          rightTranscriptionType = transcriptionType || 'tl';
+        }
+        viewports = {
+          left: {
+            folioID: leftFolioID,
+            transcriptionType: leftTranscriptionType
+          },
+          right: {
+            folioID: rightFolioID,
+            transcriptionType: rightTranscriptionType
+          }
+        };
+      }
+      return viewports;
+    };
+    var paneDefaults = {
+      isXMLMode: false,
+      width: 0
+    };
+    _this.state = {
+      linkedMode: true,
+      bookMode: false,
+      left: _objectSpread({}, paneDefaults),
+      right: _objectSpread({}, paneDefaults),
+      viewports: _this.getViewports()
+    };
+    _this.documentViewActions = {
+      setXMLMode: _this.setXMLMode.bind(_assertThisInitialized(_this)),
+      setLinkedMode: _this.setLinkedMode.bind(_assertThisInitialized(_this)),
+      setBookMode: _this.setBookMode.bind(_assertThisInitialized(_this)),
+      changeTranscriptionType: _this.changeTranscriptionType.bind(_assertThisInitialized(_this)),
+      changeCurrentFolio: _this.changeCurrentFolio.bind(_assertThisInitialized(_this)),
+      jumpToFolio: _this.jumpToFolio.bind(_assertThisInitialized(_this))
+    };
+    return _this;
+  }
+  _createClass(DocumentView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      (0, _ReduxStore.dispatchAction)(this.props, 'DiplomaticActions.setFixedFrameMode', true);
+    }
+  }, {
+    key: "setXMLMode",
+    value: function setXMLMode(side, xmlMode) {
+      this.setState(function (state) {
+        var nextState = _objectSpread({}, state);
+        nextState[side].isXMLMode = xmlMode;
+        return nextState;
+      });
+    }
+  }, {
+    key: "setLinkedMode",
+    value: function setLinkedMode(linkedMode) {
+      this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          linkedMode: linkedMode
+        });
+      });
+    }
+  }, {
+    key: "setBookMode",
+    value: function setBookMode(shortid, bookMode) {
+      this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          bookMode: bookMode
+        });
+      });
+      if (bookMode) {
+        var _this$findBookFolios = this.findBookFolios(shortid),
+          _this$findBookFolios2 = _slicedToArray(_this$findBookFolios, 2),
+          versoID = _this$findBookFolios2[0],
+          rectoID = _this$findBookFolios2[1];
+        this.navigateFolios(versoID, 'f', rectoID, 'f');
+      }
+    }
+  }, {
+    key: "jumpToFolio",
+    value: function jumpToFolio(folioName, side) {
+      var document = this.props.document;
+      // 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;
+        this.changeCurrentFolio(folioID, side, this.getViewports()[side].transcriptionType);
+      }
+    }
+  }, {
+    key: "findBookFolios",
+    value: function findBookFolios(shortID) {
+      var document = this.props.document;
+      var versoFolio = document.folioNameByIDIndex[shortID];
+      var versoIndex = document.folioIndex.indexOf(shortID);
+      if (!versoFolio.endsWith('v')) {
+        if (versoFolio.endsWith('r')) {
+          versoIndex -= 1;
+        } else {
+          return [null, null];
+        }
+      }
+      var rectoIndex = versoIndex + 1;
+      return [document.folioIndex[versoIndex], document.folioIndex[rectoIndex]];
+    }
+  }, {
+    key: "changeTranscriptionType",
+    value: function changeTranscriptionType(side, transcriptionType) {
+      var viewports = this.getViewports();
+      if (side === 'left') {
+        var folioID = viewports.left.folioID;
+        var otherSide = viewports.right;
+        this.navigateFolios(folioID, transcriptionType, otherSide.folioID, otherSide.transcriptionType);
+      } else {
+        var _folioID = viewports.right.folioID;
+        var _otherSide = viewports.left;
+        this.navigateFolios(_otherSide.folioID, _otherSide.transcriptionType, _folioID, transcriptionType);
+      }
+    }
+  }, {
+    key: "navigateFolios",
+    value: function navigateFolios(folioID, transcriptionType, folioID2, transcriptionType2) {
+      if (!folioID) {
+        // goto grid view
+        this.props.router.navigate('/ec');
+        return;
+      }
+      if (!transcriptionType) {
+        // goto folioID, tc
+        this.props.router.navigate("/ec/".concat(folioID));
+        return;
+      }
+      if (!folioID2) {
+        // goto folioID, transcriptionType
+        this.props.router.navigate("/ec/".concat(folioID, "/").concat(transcriptionType));
+        return;
+      }
+      if (!transcriptionType2) {
+        // goto folioID, transcriptionType, folioID2, tc
+        this.props.router.navigate("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/tc"));
+        return;
+      }
+      // goto folioID, transcriptionType, folioID2, transcriptionType2
+      this.props.router.navigate("/ec/".concat(folioID, "/").concat(transcriptionType, "/").concat(folioID2, "/").concat(transcriptionType2));
+    }
+  }, {
+    key: "changeCurrentFolio",
+    value: function changeCurrentFolio(folioID, side, transcriptionType) {
+      // Lookup prev/next
+      var viewports = this.getViewports();
+      if (this.state.bookMode) {
+        var _this$findBookFolios3 = this.findBookFolios(folioID),
+          _this$findBookFolios4 = _slicedToArray(_this$findBookFolios3, 2),
+          versoID = _this$findBookFolios4[0],
+          rectoID = _this$findBookFolios4[1];
+        if (versoID) {
+          this.navigateFolios(versoID, 'f', rectoID, 'f');
+        }
+      } else if (this.state.linkedMode) {
+        if (side === 'left') {
+          var otherSide = viewports.right;
+          this.navigateFolios(folioID, transcriptionType, folioID, otherSide.transcriptionType);
+        } else {
+          var _otherSide2 = viewports.left;
+          this.navigateFolios(folioID, _otherSide2.transcriptionType, folioID, transcriptionType);
+        }
+      } else if (side === 'left') {
+        var _otherSide3 = viewports.right;
+        this.navigateFolios(folioID, transcriptionType, _otherSide3.folioID, _otherSide3.transcriptionType);
+      } else {
+        var _otherSide4 = viewports.left;
+        this.navigateFolios(_otherSide4.folioID, _otherSide4.transcriptionType, folioID, transcriptionType);
+      }
+    }
+  }, {
+    key: "determineViewType",
+    value: function determineViewType(side) {
+      var transcriptionType = this.getViewports()[side].transcriptionType;
+      var xmlMode = this.state[side].isXMLMode;
+      if (transcriptionType === 'g') {
+        return 'ImageGridView';
+      }
+      if (transcriptionType === 'f') {
+        return 'ImageView';
+      }
+      if (transcriptionType === 'glossary') {
+        return 'GlossaryView';
+      }
+      return xmlMode ? 'XMLView' : 'TranscriptionView';
+    }
+  }, {
+    key: "viewportState",
+    value: function viewportState(side) {
+      var doc = this.props.document;
+      var viewport = this.getViewports()[side];
+
+      // blank folio ID
+      if (viewport.folioID === '-1') {
+        return _objectSpread(_objectSpread({}, this.state[side]), {}, {
+          iiifShortID: viewport.folioID,
+          transcriptionType: viewport.transcriptionType
+        });
+      }
+      var shortID = viewport.folioID;
+      var folioCount = doc.folios.length;
+      var nextID = '';
+      var prevID = '';
+      var current_hasPrev = false;
+      var current_hasNext = false;
+      if (this.state.bookMode) {
+        var _this$findBookFolios5 = this.findBookFolios(shortID),
+          _this$findBookFolios6 = _slicedToArray(_this$findBookFolios5, 1),
+          versoID = _this$findBookFolios6[0];
+        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 : '';
+          current_hasPrev = current_idx > 1 && folioCount > 1;
+          prevID = current_hasPrev ? doc.folios[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 : '';
+          current_hasPrev = _current_idx > 0 && folioCount > 1;
+          prevID = current_hasPrev ? doc.folios[_current_idx - 1].id : '';
+        }
+      }
+      return _objectSpread(_objectSpread({}, this.state[side]), {}, {
+        iiifShortID: shortID,
+        transcriptionType: viewport.transcriptionType,
+        hasPrevious: current_hasPrev,
+        hasNext: current_hasNext,
+        previousFolioShortID: prevID,
+        nextFolioShortID: nextID
+      });
+    }
+  }, {
+    key: "renderPane",
+    value: function renderPane(side, docView) {
+      var viewType = this.determineViewType(side);
+      var key = this.viewPaneKey(side);
+      if (viewType === 'ImageView') {
+        var folioID = docView[side].iiifShortID;
+        return /*#__PURE__*/_react["default"].createElement(_ImageView["default"], {
+          key: key,
+          folioID: folioID,
+          documentView: docView,
+          documentViewActions: this.documentViewActions,
+          side: side
+        });
+      }
+      if (viewType === 'TranscriptionView') {
+        var _folioID2 = docView[side].iiifShortID;
+        var transcriptionType = docView[side].transcriptionType;
+        return /*#__PURE__*/_react["default"].createElement(_TranscriptionView["default"], {
+          key: key,
+          documentView: docView,
+          documentViewActions: this.documentViewActions,
+          side: side,
+          folioID: _folioID2,
+          transcriptionType: transcriptionType
+        });
+      }
+      if (viewType === 'XMLView') {
+        return /*#__PURE__*/_react["default"].createElement(_XMLView["default"], {
+          key: key,
+          documentView: docView,
+          documentViewActions: this.documentViewActions,
+          side: side
+        });
+      }
+      if (viewType === 'ImageGridView') {
+        return /*#__PURE__*/_react["default"].createElement(_ImageGridView["default"], {
+          key: key,
+          documentView: docView,
+          documentViewActions: this.documentViewActions,
+          side: side
+        });
+      }
+      if (viewType === 'GlossaryView') {
+        return /*#__PURE__*/_react["default"].createElement(_GlossaryView["default"], {
+          key: key,
+          documentView: docView,
+          documentViewActions: this.documentViewActions,
+          side: side
+        });
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", null, "ERROR: Unrecognized viewType.");
+    }
+  }, {
+    key: "viewPaneKey",
+    value: function viewPaneKey(side) {
+      var pane = this.state[side];
+      if (pane.viewType === 'ImageGridView') {
+        return "".concat(side, "-").concat(pane.viewType);
+      }
+      if (typeof pane.folio !== 'undefined') {
+        return "".concat(side, "-").concat(pane.viewType, "-").concat(pane.folio.id);
+      }
+      return "".concat(side, "-").concat(pane.viewType);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.props.document.loaded) {
+        return null;
+      }
+
+      // combine component state with state from props
+      var docView = _objectSpread(_objectSpread({}, this.state), {}, {
+        left: this.viewportState('left'),
+        right: this.viewportState('right')
+      });
+      var mobileDocView = _objectSpread(_objectSpread({}, this.state), {}, {
+        right: _objectSpread({}, this.viewportState('right'))
+      });
+      if ((0, _withWidth.isWidthUp)('md', this.props.width)) {
+        return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_SplitPaneView["default"], {
+          leftPane: this.renderPane('left', docView),
+          rightPane: this.renderPane('right', docView),
+          onWidth: this.onWidth
+        }));
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_SinglePaneView["default"], {
+        singlePane: this.renderPane('right', mobileDocView)
+      }));
+    }
+  }]);
+  return DocumentView;
+}(_react.Component);
+function mapStateToProps(state) {
+  return {
+    document: state.document
+  };
+}
+var _default = (0, _withWidth["default"])()((0, _reactRedux.connect)(mapStateToProps)((0, _withRouter["default"])(DocumentView)));
+exports["default"] = _default;

package/dist/cjs/src/component/EditorComment.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+var _Fade = _interopRequireDefault(require("@material-ui/core/Fade"));
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var EditorComment = /*#__PURE__*/function (_Component) {
+  _inherits(EditorComment, _Component);
+  var _super = _createSuper(EditorComment);
+  function EditorComment(props) {
+    var _this;
+    _classCallCheck(this, EditorComment);
+    _this = _super.call(this, props);
+    _this.onOpen = function (event) {
+      _this.setState({
+        anchorRef: event.currentTarget,
+        open: true
+      });
+    };
+    _this.onClose = function (event) {
+      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
+        open: false
+      }));
+    };
+    _this.state = {
+      anchorRef: null,
+      open: false
+    };
+    return _this;
+  }
+  _createClass(EditorComment, [{
+    key: "renderPopper",
+    value: function renderPopper() {
+      var _this$state = this.state,
+        anchorRef = _this$state.anchorRef,
+        open = _this$state.open;
+      var id = "comment-".concat(this.props.commentID);
+      var comments = this.props.comments.comments;
+      var comment = comments[this.props.commentID] ? comments[this.props.commentID].comment : null;
+      var interpreted;
+      if (comment) interpreted = (0, _htmlReactParser["default"])(comment);
+      var content = interpreted || comment || "ERROR: Could not find comment for id: ".concat(this.props.commentID, ".");
+      var style = {
+        maxWidth: 200,
+        padding: '25px 15px 15px 15px'
+      };
+      var closeXStyle = {
+        "float": 'right',
+        padding: 5,
+        fontStyle: 'bold'
+      };
+      return /*#__PURE__*/_react["default"].createElement(_Popper["default"], {
+        id: id,
+        open: open,
+        anchorEl: anchorRef
+      }, /*#__PURE__*/_react["default"].createElement(_Fade["default"], {
+        "in": open
+      }, /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+        className: "editor-comment-content"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: this.onClose,
+        style: closeXStyle
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "fa fa-window-close"
+      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        style: style
+      }, content))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var style = {
+        display: 'inline'
+      };
+      var asteriskStyle = {
+        fontStyle: 'bold',
+        fontSize: '18pt',
+        color: 'red'
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        onClick: function onClick(e) {
+          return _this2.onOpen(e);
+        },
+        style: asteriskStyle
+      }, "*"), this.renderPopper());
+    }
+  }]);
+  return EditorComment;
+}(_react.Component);
+function mapStateToProps(state) {
+  return {
+    comments: state.comments
+  };
+}
+var _default = (0, _reactRedux.connect)(mapStateToProps)(EditorComment);
+exports["default"] = _default;