Merge branch 'dev' of https://github.com/cu-mkp/editioncrafter into dev

cu-mkp · Apr 19, 2024 · ea7684a · ea7684a
2 parents bbadaf8 + 9d63f04
commit ea7684a
Show file tree

Hide file tree

Showing 12 changed files with 10,991 additions and 61 deletions.
diff --git a/astro-web/package-lock.json b/astro-web/package-lock.json
diff --git a/editioncrafter/src/action/initialState/glossaryInitialState.js b/editioncrafter/src/action/initialState/glossaryInitialState.js
@@ -1,6 +1,7 @@
-export default function glossaryInitialState() {
+export default function glossaryInitialState(glossaryURL) {
   return {
     glossary: {},
     loaded: false,
+    URL: glossaryURL
   };
 }
diff --git a/editioncrafter/src/action/rootReducer.js b/editioncrafter/src/action/rootReducer.js
@@ -12,7 +12,7 @@ import documentInitialState from './initialState/documentInitialState';
 
 export default function rootReducer(config) {
   const {
-    documentName, documentInfo, threePanel = false
+    documentName, documentInfo, glossaryURL, threePanel = false
   } = config;
   const variorum = documentInfo && Object.keys(documentInfo).length > 1;
   const transcriptionTypesInfo = {};
@@ -31,6 +31,6 @@ export default function rootReducer(config) {
   return combineReducers({
     diplomatic: createReducer('DiplomaticActions', DiplomaticActions, diplomaticInitialState),
     document: createReducer('DocumentActions', DocumentActions, documentInitialState(iiifManifest, documentName, transcriptionTypes, variorum, derivativeNames, threePanel)),
-    glossary: createReducer('GlossaryActions', GlossaryActions, glossaryInitialState()),
+    glossary: createReducer('GlossaryActions', GlossaryActions, glossaryInitialState(glossaryURL)),
   });
 }
diff --git a/editioncrafter/src/component/DiploMatic.js b/editioncrafter/src/component/DiploMatic.js
@@ -11,6 +11,7 @@ import RouteListener from './RouteListener';
 
 const DiploMatic = (props) => {
   const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState('min(100%, 100dvh');
   const containerRef = useRef(null)
   useEffect(() => {
     const history = createBrowserHistory();
@@ -22,6 +23,9 @@ const DiploMatic = (props) => {
   useEffect(() => {
     if(containerRef.current){ 
       setContainerWidth(containerRef.current.offsetWidth);  
+      if (containerRef.current.clientHeight == 0) {
+        setContainerHeight('100dvh');
+      }
     }
   }, [containerRef]);
 
@@ -31,7 +35,7 @@ const DiploMatic = (props) => {
   return (
     <Provider store={props.store}>
       <HashRouter>
-        <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef}>
+        <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef} style={{ height: containerHeight }}>
           <RouteListener />
           <div id="content" style={{ height: '100%' }}>
             <Routes>

diff --git a/editioncrafter/src/component/GlossaryView.js b/editioncrafter/src/component/GlossaryView.js
@@ -4,6 +4,7 @@ import { Typography } from '@material-ui/core';
 import Parser from 'html-react-parser';
 import Navigation from './Navigation';
 import { alpha } from './AlphabetLinks';
+import Markdown from 'react-markdown';
 
 class GlossaryView extends Component {
   constructor() {
@@ -14,7 +15,7 @@ class GlossaryView extends Component {
   renderGlossary() {
     const { glossary } = this.props.glossary;
     const filterTerm = this.state.filterTerm.toLowerCase();
-    const entryList = Object.values(glossary);
+    const entryList = Object.values(glossary.entries);
 
     const checkHeadwords = (headword, term, delimiter) => {
       const words = headword.split(delimiter);
@@ -106,20 +107,26 @@ class GlossaryView extends Component {
         <div id="glossaryViewInner">
           <div id="glossaryContent">
             <Typography variant="h2" className="title">Glossary</Typography>
-            <Typography className="subtitle">
-              For short titles, e.g., [COT1611], see
-              <a href="#/content/resources/bibliography">Bibliography</a>
-              .
-            </Typography>
+            {
+              this.props.glossary.glossary.title && 
+                <div className="subtitle MuiTypography-root MuiTypography-body1">
+                  <Markdown>
+                    { this.props.glossary.glossary.title }
+                  </Markdown>
+                </div>
+          }
             <div className="cite-instructions">
-              <Typography className="cite-header">How to Cite</Typography>
-              <Typography>
-                “Glossary.” In
-                <i>Secrets of Craft and Nature in Renaissance France. A Digital Critical Edition and English Translation of BnF Ms. Fr. 640</i>
-                , edited by Making and Knowing Project, Pamela H. Smith, Naomi Rosenkranz, Tianna Helena Uchacz, Tillmann Taape, Clément Godbarge, Sophie Pitman, Jenny Boulboullé, Joel Klein, Donna Bilak, Marc Smith, and Terry Catapano. New York: Making and Knowing Project, 2020.
-                <a href="https://edition640.makingandknowing.org/#/folios/1r/f/1r/glossary">https://edition640.makingandknowing.org/#/folios/1r/f/1r/glossary</a>
-                .
-              </Typography>
+              {
+                this.props.glossary.glossary.citation &&
+                <>
+                  <Typography className="cite-header">How to Cite</Typography>
+                  <div className="MuiTypography-root MuiTypography-body1">
+                    <Markdown>
+                      { this.props.glossary.glossary.citation }
+                    </Markdown>
+                  </div>
+                </>
+              }
             </div>
             { this.renderGlossary() }
           </div>

diff --git a/editioncrafter/src/component/Navigation.js b/editioncrafter/src/component/Navigation.js
@@ -24,10 +24,6 @@ const Navigation = (props) => {
   const helpRef = useRef(null);
   const helpRefNarrow = useRef(null);
 
-  useEffect(() => {
-    console.log(helpRef.current);
-  }, []);
-
   const onJumpBoxBlur = (event) => {
     setPopover({ anchorEl: null });
   };
@@ -157,8 +153,6 @@ const Navigation = (props) => {
     return null;
   };
 
-  console.log(side, documentView[side]);
-
   const recommendedWidth = (documentView[side].width - 8);// the divder is 16 px wide so each side is minus 8
   const widthStyle = { width: recommendedWidth, maxWidth: recommendedWidth };
   const selectColorStyle = documentView[side].transcriptionType === 'f' ? { color: 'white' } : { color: 'black' };
@@ -185,7 +179,7 @@ const Navigation = (props) => {
           { documentView[side].transcriptionType !== 'glossary' ? (
 
             <div id="tool-bar-buttons" className="breadcrumbs" style={showButtonsStyle}>
-              <div style={{ display: 'flex', alignItems: 'baseline', gap: '2px' }}> 
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}> 
                 <span 
                   className="fas fa-th" 
                   style={{ cursor: documentView[side].transcriptionType !== 'g' ? 'pointer' : 'default', padding: '0 15px' }} 
@@ -208,6 +202,7 @@ const Navigation = (props) => {
                 <span
                   title="Toggle XML mode"
                   onClick={toggleXMLMode}
+                  style={{ paddingRight: '15px' }}
                   className={imageViewActive ? 'invisible' : xmlIconClass}
                 />
 
@@ -244,7 +239,7 @@ const Navigation = (props) => {
                 <div
                   onClick={revealJumpBox}
                   className="folioName"
-                  style={{ flexShrink: '0' }}
+                  style={{ flexShrink: '0', minWidth: '40px' }}
                 >
 
                   {folioName}
@@ -278,9 +273,9 @@ const Navigation = (props) => {
               <MenuItem value="f" key="f">
                 {DocumentHelper.transcriptionTypeLabels.f}
               </MenuItem>
-              <MenuItem value="glossary" key="glossary">
+              { props.glossary && <MenuItem value="glossary" key="glossary">
                 {DocumentHelper.transcriptionTypeLabels.glossary}
-              </MenuItem>
+              </MenuItem> }
             </Select>
             <span
               title="Toggle folio help"
@@ -391,6 +386,7 @@ const Navigation = (props) => {
 function mapStateToProps(state) {
   return {
     document: state.document,
+    glossary: !!state.glossary.URL
   };
 }
 

diff --git a/editioncrafter/src/saga/RouteListenerSaga.js b/editioncrafter/src/saga/RouteListenerSaga.js
@@ -18,7 +18,7 @@ function* userNavigation(action) {
       case 'ec':
       {
         const manifest = yield resolveDocumentManifest();
-        yield resolveGlossary(manifest);
+        yield resolveGlossary();
         yield resolveFolio(pathSegments);
         break;
       }
@@ -82,25 +82,12 @@ function* resolveFolio(pathSegments) {
   }
 }
 
-function* resolveGlossary(manifest) {
+function* resolveGlossary() {
   const glossary = yield select(justGlossary);
   // NOTE: need to figure out how to deal with glossary for multidocument manifests
-  if (!glossary.loaded) {
-    if (
-      !manifest?.seeAlso
-      || manifest.seeAlso.length === 0
-      || !manifest.seeAlso[0].id
-    ) {
-      if (manifest.type !== 'variorum') {
-        throw new Error('Missing glossary link in seeAlso array.');
-      }
-      yield putResolveAction('GlossaryActions.loadGlossary', {});
-    }
-    if (manifest.type !== 'variorum') {
-      const glossaryURL = manifest.seeAlso[0].id;
-      const response = yield axios.get(glossaryURL);
-      yield putResolveAction('GlossaryActions.loadGlossary', response.data);
-    }
+  if (!glossary.loaded && glossary.URL) {
+    const response = yield axios.get(glossary.URL);
+    yield putResolveAction('GlossaryActions.loadGlossary', response.data);
   }
 }
 

diff --git a/editioncrafter/src/scss/_glossary.scss b/editioncrafter/src/scss/_glossary.scss
@@ -22,19 +22,18 @@
 		margin-right: 15%;
 	}
 
-	.navigationComponent {
-		position: sticky;
-		top: 0;
-		@include md {
-			position: fixed;
-			top: initial;
-		}
-	}
+	// .navigationComponent {
+	// 	position: sticky;
+	// 	top: 0;
+	// 	@include md {
+	// 		top: initial;
+	// 	}
+	// }
 
-	.navigationComponentNarrow {
-		position: sticky;
-		top: 0;
-	}
+	// .navigationComponentNarrow {
+	// 	position: sticky;
+	// 	top: 0;
+	// }
 
 	.glossaryNav {
 

diff --git a/editioncrafter/src/scss/_transcriptView.scss b/editioncrafter/src/scss/_transcriptView.scss
@@ -4,6 +4,7 @@
     max-height:calc(100vh - 7rem);
 	.transcriptContent {
 		padding: 50px 16px;
+		font-size: 14.4px;
 		@include md {
 			padding: 5px 16px;
 		}

diff --git a/editioncrafter/stories/EditionCrafter.stories.js b/editioncrafter/stories/EditionCrafter.stories.js
@@ -42,6 +42,7 @@ export const BnFMsFr640 = () => (
       test: 'Test Field (EN)',
     }}
     iiifManifest='https://cu-mkp.github.io/editioncrafter-data/fr640_3r-3v-example/iiif/manifest.json'
+    glossaryURL='https://cu-mkp.github.io/editioncrafter-data/fr640_3r-3v-example/glossary.json'
   />
 );
 
@@ -81,7 +82,7 @@ export const MultiDocument = () => (
 );
 
 export const embeddedDiv = () => (
-  <div style={{ width: '1200px', height: '600px', margin: '0 auto' }}>
+  <div style={{ width: '1200px', height: '600px', margin: '0 auto', fontSize: '9px' }}>
     <EditionCrafter
       documentName='FHL_007548733_TAOS_BAPTISMS_BATCH_2'
       transcriptionTypes={{