Merge pull request #117 from cu-mkp/dev

Adding ODT example to storybook and fixing variorum bugs
cu-mkp · May 20, 2024 · 1219f05 · 1219f05
2 parents dcf200a + 538f492
commit 1219f05
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ __tests__/integration/editioncrafter/css/
 .cache/
 storybook-static
 .DS_Store
+.github
diff --git a/astro-web/.gitignore b/astro-web/.gitignore
@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# github workflows
+.github
diff --git a/editioncrafter-umd/package.json b/editioncrafter-umd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cu-mkp/editioncrafter-umd",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "homepage": "https://cu-mkp.github.io/editioncrafter/",
   "description": "A simple digital critical edition publication tool",
   "private": false,

diff --git a/editioncrafter/package-lock.json b/editioncrafter/package-lock.json
diff --git a/editioncrafter/package.json b/editioncrafter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cu-mkp/editioncrafter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple digital critical edition publication tool",
   "homepage": "https://cu-mkp.github.io/editioncrafter/",
   "private": false,

diff --git a/editioncrafter/src/action/DocumentActions.js b/editioncrafter/src/action/DocumentActions.js
@@ -160,7 +160,7 @@ function parseSingleManifest(manifest, transcriptionTypes, document) {
       const thumbnailURL = `${bodyId}/full/${thumbnailDimensions.join(',')}/0/default.jpg`;
 
       const folio = {
-        id: folioID,
+        id: document ? `${document}_${folioID}` : folioID,
         doc_id: document || manifest.id,
         name: canvasLabel,
         pageNumber: i,

diff --git a/editioncrafter/src/component/DocumentView.js b/editioncrafter/src/component/DocumentView.js
@@ -30,6 +30,11 @@ const DocumentView = (props) => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  //"reload" the page if the config props change
+  useEffect(() => {
+    dispatchAction(props, 'RouteListenerSaga.userNavigatation', location);
+  }, [props.config]);
+
   useEffect(() => {
     setSinglePaneMode(props.containerWidth < 960);
   }, [props.containerWidth]);
@@ -62,19 +67,21 @@ const DocumentView = (props) => {
         }
       };
     }
-
-    const leftFolioID = folioID;
+    const leftFolioValid = Object.keys(document.folioIndex).includes(folioID);
+    const leftFolioID = leftFolioValid ? folioID : '-1';
     let leftTranscriptionType; let rightFolioID; let
       rightTranscriptionType; let thirdFolioID; let thirdTranscriptionType;
     if (folioID2) {
       // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2
-      leftTranscriptionType = transcriptionType;
-      rightFolioID = folioID2;
-      rightTranscriptionType = transcriptionType2 || firstTranscriptionType;
+      const rightFolioValid = Object.keys(document.folioIndex).includes(folioID2);
+      leftTranscriptionType = leftFolioValid ? transcriptionType : 'g';
+      rightFolioID = rightFolioValid ? folioID2 : '-1';
+      rightTranscriptionType = rightFolioValid ? transcriptionType2 ? transcriptionType2 : firstTranscriptionType : 'g';
       if (folioID3) {
         // route /ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3
-        thirdFolioID = folioID3;
-        thirdTranscriptionType = transcriptionType3 || firstTranscriptionType;
+        const thirdFolioValid = Object.keys(document.folioIndex).includes(folioID3);
+        thirdFolioID = thirdFolioValid ? folioID3 : '-1';
+        thirdTranscriptionType = thirdFolioValid ? transcriptionType3 ? transcriptionType3 : firstTranscriptionType : 'g';
       } else {
         thirdFolioID = '-1';
         thirdTranscriptionType = 'g';
@@ -83,8 +90,8 @@ const DocumentView = (props) => {
       // route /ec/:folioID
       // route /ec/:folioID/:transcriptionType
       leftTranscriptionType = 'f';
-      rightFolioID = folioID;
-      rightTranscriptionType = transcriptionType || firstTranscriptionType;
+      rightFolioID = leftFolioValid ? folioID : '-1';
+      rightTranscriptionType = leftFolioValid ? transcriptionType ? transcriptionType : firstTranscriptionType : 'g';
       thirdFolioID = '-1';
       thirdTranscriptionType = 'g';
     }
@@ -368,6 +375,7 @@ const DocumentView = (props) => {
       hasNext: current_hasNext,
       previousFolioShortID: prevID,
       nextFolioShortID: nextID,
+      documentID: doc.variorum ? doc.folioIndex[shortID].doc_id : doc.documentName,
     };
   };
 
@@ -384,6 +392,7 @@ const DocumentView = (props) => {
     const viewType = determineViewType(side);
     const key = viewPaneKey(side);
     const folioID = docView[side].iiifShortID;
+    const document = docView[side].documentID;
     const { transcriptionType } = docView[side];
 
     if (viewType === 'ImageView') {
@@ -425,7 +434,7 @@ const DocumentView = (props) => {
           documentView={docView}
           documentViewActions={documentViewActions}
           side={side}
-          selectedDoc={props.document.variorum && Object.keys(props.document.derivativeNames)[side === 'left' ? 0 : side === 'right' ? 1 : Object.keys(props.document.derivativeNames).length > 2 ? 2 : 1]}
+          selectedDoc={document ? document : props.document.variorum && Object.keys(props.document.derivativeNames)[side === 'left' ? 0 : side === 'right' ? 1 : Object.keys(props.document.derivativeNames).length > 2 ? 2 : 1]}
         />
       );
     } if (viewType === 'GlossaryView') {
@@ -502,6 +511,7 @@ const DocumentView = (props) => {
 function mapStateToProps(state) {
   return {
     document: state.document,
+    glossary: state.glossary
   };
 }
 

diff --git a/editioncrafter/src/component/ImageGridView.js b/editioncrafter/src/component/ImageGridView.js
@@ -117,7 +117,9 @@ class ImageGridView extends React.Component {
   componentDidMount() {
     const { documentView } = this.props;
     const folioID = documentView[this.props.side].iiifShortID;
-    const thumbs = this.generateThumbs(folioID, this.state.currentDoc ? this.props.document.folios.filter((folio) => (folio.doc_id === this.state.currentDoc)) : this.props.document.folios);
+    const thumbs = this.generateThumbs(folioID, this.props.document.variorum && this.state.currentDoc ? this.props.document.folios.filter((folio) => (folio.doc_id === this.state.currentDoc)) : this.props.document.folios);
+    console.log(thumbs);
+    console.log(this.props.document.folios);
     const thumbCount = (thumbs.length > this.loadIncrement) ? this.loadIncrement : thumbs.length;
     const visibleThumbs = thumbs.slice(0, thumbCount);
     this.setState({ thumbs, visibleThumbs });
@@ -136,9 +138,9 @@ class ImageGridView extends React.Component {
     const thumbs = folios.map((folio, index) => (
       // eslint-disable-next-line react/no-array-index-key
       <li key={`thumb-${index}`} className="thumbnail">
-        <figure className={(folio.id === currentID) ? 'current' : ''}><a id={folio.id} onClick={this.onClickThumb.bind(this, folio.id)}><img src={folio.image_thumbnail_url} alt={folio.name} style={{maxWidth: "130px", maxHeight: "130px"}} onError={({ currentTarget }) => {currentTarget.onerror = null; if (folio.image_zoom_url && currentTarget.src !== `${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`) {currentTarget.src=`${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`;} }} /></a></figure>
-        <figcaption className={(folio.id === currentID) ? 'thumbnail-caption current' : 'thumbnail-caption'}>
-          {(folio.id === currentID) ? (`*${folio.name}`) : folio.name}
+        <figure><a id={folio.id} onClick={this.onClickThumb.bind(this, folio.id)}><img src={folio.image_thumbnail_url} alt={folio.name} style={{maxWidth: "130px", maxHeight: "130px"}} onError={({ currentTarget }) => {currentTarget.onerror = null; if (folio.image_zoom_url && currentTarget.src !== `${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`) {currentTarget.src=`${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`;} }} /></a></figure>
+        <figcaption className='thumbnail-caption'>
+          {folio.name}
         </figcaption>
 
       </li>

diff --git a/editioncrafter/src/component/SplitPaneView.js b/editioncrafter/src/component/SplitPaneView.js
@@ -109,8 +109,8 @@ class SplitPaneView extends Component {
 
   componentDidMount() {
     this.updateUI();
-    window.addEventListener('mousemove', this.onDrag);
-    window.addEventListener('mouseup', this.onEndDrag);
+    window.addEventListener('pointermove', this.onDrag);
+    window.addEventListener('pointerup', this.onEndDrag);
     window.addEventListener('resize', this.onResize);
     console.log(this.props);
     // Set the default width on mount
@@ -129,16 +129,16 @@ class SplitPaneView extends Component {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('mousemove', this.onDrag);
-    window.removeEventListener('mouseup', this.onEndDrag);
+    window.removeEventListener('pointermove', this.onDrag);
+    window.removeEventListener('pointerup', this.onEndDrag);
     window.removeEventListener('resize', this.onResize);
   }
 
   renderDivider(position) {
     const drawerIconClass = 'drawer-icon fas fa-caret-left fa-2x';
 
     return (
-      <div className={`divider ${position}_divider`} onMouseDown={() => this.onStartDrag(position)}>
+      <div className={`divider ${position}_divider`} onPointerDown={() => this.onStartDrag(position)}>
         <div className="drawer-button hidden" onClick={this.onDrawerButton}>
           <i className={drawerIconClass}> </i>
         </div>

diff --git a/editioncrafter/stories/EditionCrafter.stories.js b/editioncrafter/stories/EditionCrafter.stories.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import EditionCrafter from '../src/index';
 
 export const BowInTheCloud = () => (
@@ -57,25 +57,49 @@ export const IntervistePescatori = () => (
   />
 );
 
-export const MultiDocument = () => (
+export const OrnamentDesignTranslation = () => (
   <EditionCrafter
-    documentName='FHL_007548733_TAOS_BAPTISMS_BATCH_2 and eng-415-145a'
-    threePanel
+    documentName='Ornament : Design : Translation'
     documentInfo={{
-      FHL_007548733_TAOS_BAPTISMS_BATCH_2: {
-        documentName: 'Taos Baptisms Batch 2',
+      caryatidum: {
+        documentName: 'caryatidum',
+        transcriptionTypes: {
+          'text-1': 'Text 1',
+          'text-2': 'Text 2',
+        },
+        iiifManifest: 'https://cu-mkp.github.io/odt-editioncrafter-data/texts/caryatidum/iiif/manifest.json',
+      },
+      grotisch_fur_alle_kunstler: {
+        documentName: 'grotisch_fur_alle_kunstler',
+        transcriptionTypes: {
+          'text-1': 'Text 1',
+          'text-2': 'Text 2',
+        },
+        iiifManifest: 'https://cu-mkp.github.io/odt-editioncrafter-data/texts/grotisch_fur_alle_kunstler/iiif/manifest.json',
+      },
+      mansches_de_coutiaus: {
+        documentName: 'mansches_de_coutiaus',
         transcriptionTypes: {
-          translation: 'Translation',
-          transcription: 'Transcription',
+          'text-1': 'Text 1',
+          'text-2': 'Text 2',
         },
-        iiifManifest: 'https://cu-mkp.github.io/editioncrafter/taos-baptisms-example/iiif/manifest.json',
+        iiifManifest: 'https://cu-mkp.github.io/odt-editioncrafter-data/texts/mansches_de_coutiaus/iiif/manifest.json',
       },
-      eng_415_145a: {
-        documentName: 'Eng 415-145a',
+      passio_verbigenae: {
+        documentName: 'passio_verbigenae',
         transcriptionTypes: {
-          'eng-415-145a': 'Transcription',
+          'text-1': 'Text 1',
+          'text-2': 'Text 2',
         },
-        iiifManifest: 'https://cu-mkp.github.io/bic-editioncrafter-data/eng-415-145a/iiif/manifest.json',
+        iiifManifest: 'https://cu-mkp.github.io/odt-editioncrafter-data/texts/passio_verbigenae/iiif/manifest.json',
+      },
+      veelderley_veranderinghe_van_grotissen: {
+        documentName: 'veelderley_veranderinghe_van_grotissen',
+        transcriptionTypes: {
+          'text-1': 'Text 1',
+          'text-2': 'Text 2',
+        },
+        iiifManifest: 'https://cu-mkp.github.io/odt-editioncrafter-data/texts/veelderley_veranderinghe_van_grotissen/iiif/manifest.json',
       },
     }}
   />
@@ -107,6 +131,31 @@ export const fullScreen = () => (
   </div>
 )
 
+export const stateChange = () => {
+  const [manifest, setManifest] = useState('https://cu-mkp.github.io/editioncrafter/taos-baptisms-example/iiif/manifest.json');
+  const [glossary, setGlossary] = useState(undefined);
+  const [title, setTitle] = useState('FHL_007548733_TAOS_BAPTISMS_BATCH_2')
+
+  useEffect(() => {
+    setTimeout(() => {
+      //setManifest('https://cu-mkp.github.io/dyngleyfamily-editioncrafter-data/O_8_35/iiif/manifest.json');
+      setGlossary('https://cu-mkp.github.io/editioncrafter-data/fr640_3r-3v-example/glossary.json');
+      setTitle('Taos Baptisms Batch 2');
+    }, 10000);
+  }, [])
+
+  return (<EditionCrafter
+  documentName={title}
+  transcriptionTypes={{
+    translation: 'Translation',
+    transcription: 'Transcription',
+  }}
+  iiifManifest={manifest}
+  glossaryURL={glossary}
+/>)
+
+}
+
 export default {
   title: 'EditionCrafter',
 };