Merge branch 'main' into dev

Updating dev with new CSS
cu-mkp · Mar 25, 2024 · 5b5422d · 5b5422d
2 parents a1e80fb + 56c2927
commit 5b5422d
Show file tree

Hide file tree

Showing 19 changed files with 543 additions and 167 deletions.
diff --git a/editioncrafter-umd/package.json b/editioncrafter-umd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cu-mkp/editioncrafter-umd",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "private": false,
   "source": "src/index.js",

diff --git a/editioncrafter/package.json b/editioncrafter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cu-mkp/editioncrafter",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "private": false,
   "main": "dist/editioncrafter.min.js",

diff --git a/editioncrafter/src/component/DiploMatic.js b/editioncrafter/src/component/DiploMatic.js
@@ -1,7 +1,7 @@
 import withWidth from '@material-ui/core/withWidth';
 import { createBrowserHistory } from 'history';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect, Provider } from 'react-redux';
 import {
   HashRouter, Route, Navigate, Routes,
@@ -10,28 +10,36 @@ import DocumentView from './DocumentView';
 import RouteListener from './RouteListener';
 
 const DiploMatic = (props) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef(null)
   useEffect(() => {
     const history = createBrowserHistory();
     history.listen(() => {
       window.scrollTo(0, 0);
     });
-  });
+  }, []);
+
+  useEffect(() => {
+    if(containerRef.current){ 
+      setContainerWidth(containerRef.current.offsetWidth);  
+    }
+  }, [containerRef]);
 
   const { fixedFrameMode } = props.diplomatic;
   const fixedFrameModeClass = fixedFrameMode ? 'fixed' : 'sticky';
 
   return (
     <Provider store={props.store}>
       <HashRouter>
-        <div id="diplomatic" className={fixedFrameModeClass}>
+        <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef}>
           <RouteListener />
           <div id="content">
             <Routes>
-              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} />} exact />
-              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} />} exact />
-              <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} />} exact />
-              <Route path="/ec/:folioID" element={<DocumentView {...props} />} exact />
-              <Route path="/ec" element={<DocumentView {...props} />} exact />
+              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec/:folioID" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
               <Route path="/" element={<Navigate to="/ec" />} exact />
             </Routes>
           </div>

diff --git a/editioncrafter/src/component/DocumentView.js b/editioncrafter/src/component/DocumentView.js
@@ -24,11 +24,16 @@ const DocumentView = (props) => {
   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();
 
+  useEffect(() => {
+    setSinglePaneMode(props.containerWidth < 960);
+  }, [props.containerWidth]);
+
   // Navigate while keeping existing search params
   const navigateWithParams = (pathname) => {
     navigate(pathname + location.search);
@@ -472,7 +477,7 @@ const DocumentView = (props) => {
     right: { ...viewportState('right') },
   };
 
-  if (isWidthUp('md', props.width)) {
+  if (isWidthUp('md', props.width) && !singlePaneMode) {
     return (
       <div>
         <SplitPaneView
@@ -488,7 +493,7 @@ const DocumentView = (props) => {
   return (
     <div>
       <SinglePaneView
-        singlePane={renderPane('right', mobileDocView)}
+        singlePane={renderPane(viewportState('left').iiifShortID === "-1" ? 'left' : 'right', docView)}
       />
     </div>
   );

diff --git a/editioncrafter/src/component/GlossaryView.js b/editioncrafter/src/component/GlossaryView.js
@@ -94,7 +94,7 @@ class GlossaryView extends Component {
     if (!this.props.glossary.loaded) return null;
 
     return (
-      <div id="glossaryView">
+      <div id="glossaryView" style={{ position: "relative" }}>
         <Navigation
           side={this.props.side}
           onFilterChange={this.onFilterChange}

diff --git a/editioncrafter/src/component/ImageView.js b/editioncrafter/src/component/ImageView.js
@@ -12,15 +12,25 @@ import ImageZoomControl from './ImageZoomControl';
 import SeaDragonComponent from './SeaDragonComponent';
 
 import '@recogito/annotorious-openseadragon/dist/annotorious.min.css';
+import { BigRingSpinner } from './RingSpinner';
 
 const ImageView = (props) => {
   const [viewer, setViewer] = useState(null);
   const [anno, setAnno] = useState(null);
 
+  // const [onZoomFixed_1, setOnZoomFixed_1] = useState(() => null);
+  // const [onZoomFixed_2, setOnZoomFixed_2] = useState(() => null);
+  // const [onZoomFixed_3, setOnZoomFixed_3] = useState(() => null);
+  // const [onZoomOut, setOnZoomOut] = useState(() => null);
+  // const [onZoomIn, setOnZoomIn] = useState(() => null);
+
+
+
   const location = useLocation();
   const navigate = useNavigate();
 
   const [searchParams] = useSearchParams();
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     if (anno && searchParams.get('zone')) {
@@ -38,7 +48,7 @@ const ImageView = (props) => {
     viewer.viewport.zoomTo(viewer.viewport.getMaxZoom());
   };
 
-  const onZoomFixed_2 = (e) => {
+  const onZoomFixed_2= (e) => {
     viewer.viewport.zoomTo((viewer.viewport.getMaxZoom() / 2));
   };
 
@@ -47,12 +57,13 @@ const ImageView = (props) => {
   };
 
   const onZoomIn = (e) => {
+    console.log(viewer.viewport.fitVertically());
     viewer.viewport.zoomBy(2)
-  }
+  };
 
   const onZoomOut = (e) => {
     viewer.viewport.zoomBy(0.5)
-  }
+  };
 
   useEffect(() => {
     if (anno) {
@@ -119,19 +130,25 @@ const ImageView = (props) => {
 
   useEffect(() => {
     const folio = props.document.folioIndex[props.folioID];
+    if (folio.loading) {
+      setLoading(true);
+    }
     if (folio.tileSource && viewer) {
       viewer.open(folio.tileSource);
       if (folio.annotations && anno) {
         anno.setAnnotations(folio.annotations);
       }
     }
+    if (!folio.loading) {
+      setLoading(false);
+    }
   }, [anno, viewer, props.folioID, props.document.folioIndex]);
 
   return (
     <div>
       { tileSource
-      && (
-      <div className={`image-view imageViewComponent ${props.side}`}>
+      ? (
+      <div className={`image-view imageViewComponent ${props.side}`} style={{ position: "relative" }}>
         <Navigation
           side={props.side}
           documentView={props.documentView}
@@ -147,14 +164,18 @@ const ImageView = (props) => {
           onZoomGrid={onZoomGrid}
           onZoomIn={onZoomIn}
           onZoomOut={onZoomOut}
+          viewer={viewer}
         />
         <SeaDragonComponent
           key={props.folioID}
           side={props.side}
           tileSource={tileSource}
           initViewer={initViewer}
+          loading={loading}
         />
       </div>
+      ) : (
+        <BigRingSpinner color="dark" delay={300} />
       )}
     </div>
   );