@cu-mkp/editioncrafter 0.2.2 → 0.2.4

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

@@ -37,7 +37,10 @@ var DiploMatic = function DiploMatic(props) {
     className: fixedFrameModeClass,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(RouteListener, null), /*#__PURE__*/React.createElement("div", {
-    id: "content"
+    id: "content",
+    style: {
+      height: '100%'
+    }
   }, /*#__PURE__*/React.createElement(Routes, null, /*#__PURE__*/React.createElement(Route, {
     path: "/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3",
     element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {

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

@@ -427,7 +427,11 @@ var DocumentView = function DocumentView(props) {
     right: _objectSpread({}, viewportState('right'))
   };
   if (isWidthUp('md', props.width) && !singlePaneMode) {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SplitPaneView, {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(SplitPaneView, {
       leftPane: renderPane('left', docView),
       rightPane: renderPane('right', docView),
       thirdPane: renderPane('third', docView),
@@ -435,7 +439,11 @@ var DocumentView = function DocumentView(props) {
       threePanel: props.document.threePanel
     }));
   }
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SinglePaneView, {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(SinglePaneView, {
     singlePane: renderPane(viewportState('left').iiifShortID === "-1" ? 'left' : 'right', docView)
   }));
 };

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

@@ -4,12 +4,15 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { Popover } from '@material-ui/core';
 import React, { useEffect, useState, useRef } from 'react';
 var JumpToFolio = function JumpToFolio(props) {
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     textInput = _useState2[0],
     setTextInput = _useState2[1];
+  var open = Boolean(props.anchorEl);
+  var id = open ? "".concat(props.side, "_jumpInput") : undefined;
   var handleSubmit = function handleSubmit(event) {
     // Consume the event
     event.preventDefault();
@@ -33,18 +36,23 @@ var JumpToFolio = function JumpToFolio(props) {
     if (inputRef.current) {
       inputRef.current.focus();
     }
-  }, [inputRef, props.isVisible]);
+  }, [inputRef, open]);
   var divStyle = {
     position: 'fixed',
     zIndex: 1,
     top: props.positionY,
     left: props.positionX,
-    display: props.isVisible ? 'inline' : 'none'
+    display: open ? 'inline' : 'none'
   };
-  var id = "".concat(props.side, "_jumpInput");
-  return /*#__PURE__*/React.createElement("div", {
-    className: "jumpToFolio_component",
-    style: divStyle
+  return /*#__PURE__*/React.createElement(Popover, {
+    id: id,
+    open: open,
+    anchorEl: props.anchorEl,
+    onClose: props.blurHandler,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    }
   }, /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit
   }, /*#__PURE__*/React.createElement("input", {

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

@@ -20,9 +20,7 @@ import HelpPopper from './HelpPopper';
 import AlphabetLinks from './AlphabetLinks';
 import useIsWidthUp from '../hooks/useIsWidthUp';
 var initialPopoverObj = {
-  show: false,
-  x: -1,
-  y: -1
+  anchorEl: null
 };
 var Navigation = function Navigation(props) {
   var _document$folioIndex$;
@@ -44,9 +42,9 @@ var Navigation = function Navigation(props) {
     console.log(helpRef.current);
   }, []);
   var onJumpBoxBlur = function onJumpBoxBlur(event) {
-    setPopover(_objectSpread(_objectSpread({}, popover), {}, {
-      show: false
-    }));
+    setPopover({
+      anchorEl: null
+    });
   };
   var changeType = function changeType(event) {
     if (event.target.value === undefined) return;
@@ -101,9 +99,7 @@ var Navigation = function Navigation(props) {
   };
   var revealJumpBox = function revealJumpBox(event) {
     setPopover({
-      show: true,
-      x: event.clientX,
-      y: event.clientY
+      anchorEl: event.currentTarget
     });
   };
   var side = props.side,
@@ -230,9 +226,7 @@ var Navigation = function Navigation(props) {
     className: "fa fa-hand-point-right"
   }))), /*#__PURE__*/React.createElement(JumpToFolio, {
     side: side,
-    isVisible: popover.show,
-    positionX: popover.x,
-    positionY: popover.y,
+    anchorEl: popover.anchorEl,
     submitHandler: documentViewActions.jumpToFolio,
     blurHandler: onJumpBoxBlur
   })) : /*#__PURE__*/React.createElement(AlphabetLinks, {

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

@@ -41,11 +41,13 @@ var Pagination = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
         side = _this$props2.side,
         document = _this$props2.document,
-        documentView = _this$props2.documentView;
+        documentView = _this$props2.documentView,
+        _this$props2$bottom = _this$props2.bottom,
+        bottom = _this$props2$bottom === void 0 ? false : _this$props2$bottom;
       if (documentView[side].iiifShortID === '-1') return null;
       var folioName = document.folioIndex[documentView[side].iiifShortID].name;
       return /*#__PURE__*/React.createElement("div", {
-        className: "paginationComponent"
+        className: bottom ? "paginationComponent bottom" : "paginationComponent"
       }, /*#__PURE__*/React.createElement("div", {
         className: "paginationControl"
       }, /*#__PURE__*/React.createElement("span", {

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

@@ -18,24 +18,30 @@ var SeaDragonComponent = function SeaDragonComponent(props) {
     loading = _useState2[0],
     setLoading = _useState2[1];
   var viewerRef = useRef(null);
-  useEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (!viewerRef.current) {
-            _context.next = 3;
-            break;
+  useEffect(function () {
+    var _ref;
+    var loader = function loader() {
+      return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!viewerRef.current) {
+                _context.next = 3;
+                break;
+              }
+              _context.next = 3;
+              return initViewer(viewerRef.current, tileSource).then(function () {
+                return setLoading(false);
+              });
+            case 3:
+            case "end":
+              return _context.stop();
           }
-          _context.next = 3;
-          return initViewer(viewerRef.current, tileSource).then(function () {
-            return setLoading(false);
-          });
-        case 3:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), []);
+        }, _callee);
+      }))).apply(this, arguments);
+    };
+    loader();
+  }, []);
   var viewer = useMemo(function () {
     return /*#__PURE__*/React.createElement("div", {
       id: "image-view-seadragon-".concat(side),

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

@@ -144,11 +144,7 @@ var TranscriptionView = function TranscriptionView(props) {
     });
   }
   if (folio && folio.loading) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: "relative"
-      }
-    }, /*#__PURE__*/React.createElement(Navigation, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Navigation, {
       side: side,
       documentView: documentView,
       documentViewActions: documentViewActions,
@@ -167,7 +163,8 @@ var TranscriptionView = function TranscriptionView(props) {
     })))), /*#__PURE__*/React.createElement(Pagination, {
       side: side,
       documentView: documentView,
-      documentViewActions: documentViewActions
+      documentViewActions: documentViewActions,
+      bottom: true
     }));
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -198,7 +195,8 @@ var TranscriptionView = function TranscriptionView(props) {
   }))))), /*#__PURE__*/React.createElement(Pagination, {
     side: side,
     documentView: documentView,
-    documentViewActions: documentViewActions
+    documentViewActions: documentViewActions,
+    bottom: true
   }));
 };
 function mapStateToProps(state) {

package/dist/es/src/scss/_diplomatic.scss

@@ -1,5 +1,5 @@
 #diplomatic {
-	container-type: size;
+	container-type: inline-size;
 	container-name: diplomatic;
 	#content-view, .header-wrapper, #entry-list-view, #annotation-list-view {
 		h1,
@@ -303,7 +303,8 @@
 	background: white;
 	// position: fixed;
 	width: auto;
-	height: auto;
+	height: min(100%, 100dvh);
+	overflow-y: scroll;
 	// height: calc(100% - $chrome-height);
 	// @include sm {
 	// 	height: calc(100% - $sm-chrome-height);

package/dist/es/src/scss/_glossary.scss

@@ -7,7 +7,7 @@
 			margin: 52px 0 0 0;
 		}
 		width: calc(100% - 1.2rem);
-            height: calc(100vh - 170px);
+            max-height: calc(100vh - 170px);
             padding: 5px 16px;
 	}
 
@@ -94,7 +94,7 @@
 
 	#glossaryContent {
 		padding: 5rem 0 0;
-		min-height: 100vh;
+		max-height: 100vh;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;

package/dist/es/src/scss/_imageGridView.scss

@@ -2,7 +2,8 @@
 	background-color: #000000;
 	font-size: 0.8rem;
 	overflow: scroll;
-	height: 100vh;
+	height: 100%;
+	max-height: 100dvh;
 }
 
 .imageGridComponent > ul {

package/dist/es/src/scss/_imageView.scss

@@ -4,6 +4,7 @@
 #image-view-seadragon-third {
   width: 100%;
   height: 100%;
+  max-height: 100dvh;
   grid-area: image_viewer;
   background: black;
 }
@@ -13,7 +14,8 @@
 		padding: 0;
 		margin: 0;
 		width: 100%;
-		height: 100vh;
+		height: 100%;
+		max-height: 100dvh;
 	}
 
 .a9s-annotation.a9s-annotation.selected > rect,

package/dist/es/src/scss/_pagination.scss

@@ -17,6 +17,10 @@
 //   padding:1rem 0 0 0;
 // }
 
+.paginationComponent.bottom {
+	margin-top: 0;
+}
+
 .paginationControl {
 	padding: 16px;
 	
@@ -27,6 +31,7 @@
 	color: #4A4A4A;
 	margin: 1rem 1rem 0;
 	cursor: pointer;
+	display: inline-block;
 }
 
 .paginationControl .folioName {

package/dist/es/src/scss/_transcriptView.scss

@@ -1,7 +1,7 @@
 
 .transcriptionViewComponent {
 	overflow: scroll;
-    height:calc(100vh - 7rem);
+    max-height:calc(100vh - 7rem);
 	.transcriptContent {
 		padding: 50px 16px;
 		@include md {
@@ -12,7 +12,7 @@
 	  -moz-user-select: text;
 	  -ms-user-select: text;
 	  user-select: text;
-	  margin-bottom:92px;
+	  //margin-bottom:92px;
 
 	  figure {
 		  display: inline-flex;

package/dist/es/src/scss/_xmlView.scss

@@ -6,7 +6,8 @@
   padding: 0;
   margin: 4.5rem 0 0;
   width: calc(100% - 1.2rem);
-  min-height: 100vh;
+  max-height: 100vh;
+  min-height: 100%;
   -webkit-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
@@ -17,7 +18,7 @@
 .xmlViewComponent {
   overflow: auto;
   margin: 0 0 0 1rem;
-  height: calc(100vh - 7rem);
+  max-height: calc(100vh - 7rem);
 }
 
 .xmlContentInner {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cu-mkp/editioncrafter",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "",
   "private": false,
   "main": "dist/editioncrafter.min.js",