@cu-mkp/editioncrafter 1.1.0-beta.1 → 1.2.0-beta.1

package/dist/es/src/{component → EditionCrafter/component}/TranscriptionView.js

@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { connect } from 'react-redux'
 import { useSearchParams } from 'react-router-dom'
+import TagFilterContext from '../context/TagFilterContext'
 import EditorComment from './EditorComment'
 import ErrorBoundary from './ErrorBoundary'
 import Navigation from './Navigation'
@@ -34,10 +35,30 @@ function setUpForZoneHighlighting(selectedZone, domNode) {
   return domNode
 }
 
-function htmlToReactParserOptions(selectedZone) {
+function handleTags(domNode, selectedTags) {
+  const ana = domNode.attribs?.ana
+
+  if (ana) {
+    const truncated = ana.split(' ').map(t => t.slice(1))
+    if (truncated.some(tag => selectedTags.includes(tag))) {
+      domNode.attribs.class = 'active'
+    }
+  }
+
+  return domNode
+}
+
+function htmlToReactParserOptions(selectedZone, selectedTags) {
   const parserOptions = {
     replace(domNode) {
       switch (domNode.name) {
+        case 'div': {
+          domNode = handleTags(domNode, selectedTags)
+          return setUpForZoneHighlighting(selectedZone, domNode)
+        }
+        case 'tei-seg': {
+          return handleTags(domNode, selectedTags)
+        }
         case 'tei-line': {
           return setUpForZoneHighlighting(selectedZone, domNode)
         }
@@ -74,10 +95,6 @@ function htmlToReactParserOptions(selectedZone) {
           )
         }
 
-        case 'div': {
-          return setUpForZoneHighlighting(selectedZone, domNode)
-        }
-
         default:
           /* Otherwise, Just pass through */
           return domNode
@@ -90,6 +107,8 @@ function htmlToReactParserOptions(selectedZone) {
 function TranscriptionView(props) {
   const [searchParams] = useSearchParams()
 
+  const { tags } = useContext(TagFilterContext)
+
   const {
     side,
     folioID,
@@ -120,6 +139,7 @@ function TranscriptionView(props) {
       />
     )
   }
+
   const transcriptionData = folio && folio.transcription && folio.transcription[transcriptionType]
 
   if (folio && !folio.loading && !transcriptionData) {
@@ -133,7 +153,7 @@ function TranscriptionView(props) {
   }
 
   // Configure parser to replace certain tags with components
-  const htmlToReactParserOptionsSide = htmlToReactParserOptions(searchParams.get('zone'))
+  const htmlToReactParserOptionsSide = htmlToReactParserOptions(searchParams.get('zone'), tags)
   const html = transcriptionData && transcriptionData.html
   const layout = transcriptionData && transcriptionData.layout
 

package/dist/es/src/EditionCrafter/context/TagFilter.jsx

@@ -0,0 +1,61 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  createSearchParams,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from 'react-router-dom'
+import TagFilterContext from './TagFilterContext'
+
+function getTagsFromParams(val) {
+  if (val) {
+    return val.split(',')
+  }
+
+  return []
+}
+
+function TagFilterProvider(props) {
+  const [searchParams] = useSearchParams()
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const [tags, setTags] = useState(getTagsFromParams(searchParams.get('tags')))
+
+  const tagParams = searchParams.get('tags')
+
+  useEffect(() => {
+    const newTags = getTagsFromParams(tagParams)
+    setTags(newTags)
+  }, [tagParams])
+
+  const ctxValue = useMemo(() => {
+    const toggleTag = (xmlId) => {
+      if (tags.includes(xmlId)) {
+        const oldTags = getTagsFromParams(tagParams)
+        const newTags = oldTags.filter(t => t !== xmlId)
+        searchParams.set('tags', newTags.join(','))
+        setTags(newTags)
+        navigate(`${location.pathname}?${createSearchParams(searchParams.toString())}`)
+      }
+      else {
+        searchParams.set('tags', `${tagParams},${xmlId}`)
+        setTags([...tags, xmlId])
+        navigate(`${location.pathname}?${createSearchParams(searchParams.toString())}`)
+      }
+    }
+
+    return {
+      tags,
+      toggleTag,
+    }
+  }, [location.pathname, navigate, searchParams, tagParams, tags])
+
+  return (
+    <TagFilterContext.Provider value={ctxValue}>
+      {props.children}
+    </TagFilterContext.Provider>
+  )
+}
+
+export default TagFilterProvider

package/dist/es/src/EditionCrafter/context/TagFilterContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+const TagFilterContext = createContext({
+  tags: [],
+  toggleTag: () => null,
+})
+
+export default TagFilterContext

package/dist/es/src/EditionCrafter/icons/DocumentPagesIcon.jsx

@@ -0,0 +1,18 @@
+function DocumentPagesIcon() {
+  return (
+    <svg className="document-pages-icon" width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="fluent:document-one-page-20-regular" clipPath="url(#clip0_288_13990)">
+        <path id="Vector" d="M2.16667 0H8.83333C9.27536 0 9.69928 0.210714 10.0118 0.585786C10.3244 0.960859 10.5 1.46957 10.5 2V14C10.5 14.5304 10.3244 15.0391 10.0118 15.4142C9.69928 15.7893 9.27536 16 8.83333 16H2.16667C1.72464 16 1.30072 15.7893 0.988155 15.4142C0.675595 15.0391 0.5 14.5304 0.5 14V2C0.5 1.46957 0.675595 0.960859 0.988155 0.585786C1.30072 0.210714 1.72464 0 2.16667 0ZM2.16667 1C1.94565 1 1.73369 1.10536 1.57741 1.29289C1.42113 1.48043 1.33333 1.73478 1.33333 2V14C1.33333 14.2652 1.42113 14.5196 1.57741 14.7071C1.73369 14.8946 1.94565 15 2.16667 15H8.83333C9.05435 15 9.26631 14.8946 9.42259 14.7071C9.57887 14.5196 9.66667 14.2652 9.66667 14V2C9.66667 1.73478 9.57887 1.48043 9.42259 1.29289C9.26631 1.10536 9.05435 1 8.83333 1H2.16667ZM8 4.5C8.00003 4.61703 7.96586 4.73036 7.90343 4.82026C7.84099 4.91016 7.75426 4.97094 7.65833 4.992L7.58333 5H3.41667C3.31255 5.00023 3.21212 4.95367 3.13518 4.86949C3.05824 4.78531 3.01035 4.66961 3.00094 4.54518C2.99153 4.42074 3.02129 4.29659 3.08435 4.19717C3.14741 4.09775 3.23921 4.03026 3.34167 4.008L3.41667 4H7.58333C7.69384 4 7.79982 4.05268 7.87796 4.14645C7.9561 4.24021 8 4.36739 8 4.5ZM8 8C8.00003 8.11703 7.96586 8.23036 7.90343 8.32026C7.84099 8.41016 7.75426 8.47093 7.65833 8.492L7.58333 8.5H3.41667C3.31255 8.50023 3.21212 8.45367 3.13518 8.36949C3.05824 8.28531 3.01035 8.16961 3.00094 8.04518C2.99153 7.92074 3.02129 7.79659 3.08435 7.69717C3.14741 7.59775 3.23921 7.53026 3.34167 7.508L3.41667 7.5H7.58333C7.69384 7.5 7.79982 7.55268 7.87796 7.64645C7.9561 7.74021 8 7.86739 8 8ZM8 11.5C8.00003 11.617 7.96586 11.7304 7.90343 11.8203C7.84099 11.9102 7.75426 11.9709 7.65833 11.992L7.58333 12H3.41667C3.31255 12.0002 3.21212 11.9537 3.13518 11.8695C3.05824 11.7853 3.01035 11.6696 3.00094 11.5452C2.99153 11.4207 3.02129 11.2966 3.08435 11.1972C3.14741 11.0977 3.23921 11.0303 3.34167 11.008L3.41667 11H7.58333C7.69384 11 7.79982 11.0527 7.87796 11.1464C7.9561 11.2402 8 11.3674 8 11.5Z" />
+        <path id="Vector_2" d="M13.1667 0H19.8333C20.2754 0 20.6993 0.210714 21.0118 0.585786C21.3244 0.960859 21.5 1.46957 21.5 2V14C21.5 14.5304 21.3244 15.0391 21.0118 15.4142C20.6993 15.7893 20.2754 16 19.8333 16H13.1667C12.7246 16 12.3007 15.7893 11.9882 15.4142C11.6756 15.0391 11.5 14.5304 11.5 14V2C11.5 1.46957 11.6756 0.960859 11.9882 0.585786C12.3007 0.210714 12.7246 0 13.1667 0ZM13.1667 1C12.9457 1 12.7337 1.10536 12.5774 1.29289C12.4211 1.48043 12.3333 1.73478 12.3333 2V14C12.3333 14.2652 12.4211 14.5196 12.5774 14.7071C12.7337 14.8946 12.9457 15 13.1667 15H19.8333C20.0543 15 20.2663 14.8946 20.4226 14.7071C20.5789 14.5196 20.6667 14.2652 20.6667 14V2C20.6667 1.73478 20.5789 1.48043 20.4226 1.29289C20.2663 1.10536 20.0543 1 19.8333 1H13.1667ZM19 4.5C19 4.61703 18.9659 4.73036 18.9034 4.82026C18.841 4.91016 18.7543 4.97094 18.6583 4.992L18.5833 5H14.4167C14.3125 5.00023 14.2121 4.95367 14.1352 4.86949C14.0582 4.78531 14.0103 4.66961 14.0009 4.54518C13.9915 4.42074 14.0213 4.29659 14.0843 4.19717C14.1474 4.09775 14.2392 4.03026 14.3417 4.008L14.4167 4H18.5833C18.6938 4 18.7998 4.05268 18.878 4.14645C18.9561 4.24021 19 4.36739 19 4.5ZM19 8C19 8.11703 18.9659 8.23036 18.9034 8.32026C18.841 8.41016 18.7543 8.47093 18.6583 8.492L18.5833 8.5H14.4167C14.3125 8.50023 14.2121 8.45367 14.1352 8.36949C14.0582 8.28531 14.0103 8.16961 14.0009 8.04518C13.9915 7.92074 14.0213 7.79659 14.0843 7.69717C14.1474 7.59775 14.2392 7.53026 14.3417 7.508L14.4167 7.5H18.5833C18.6938 7.5 18.7998 7.55268 18.878 7.64645C18.9561 7.74021 19 7.86739 19 8ZM19 11.5C19 11.617 18.9659 11.7304 18.9034 11.8203C18.841 11.9102 18.7543 11.9709 18.6583 11.992L18.5833 12H14.4167C14.3125 12.0002 14.2121 11.9537 14.1352 11.8695C14.0582 11.7853 14.0103 11.6696 14.0009 11.5452C13.9915 11.4207 14.0213 11.2966 14.0843 11.1972C14.1474 11.0977 14.2392 11.0303 14.3417 11.008L14.4167 11H18.5833C18.6938 11 18.7998 11.0527 18.878 11.1464C18.9561 11.2402 19 11.3674 19 11.5Z" />
+      </g>
+      <defs>
+        <clipPath id="clip0_288_13990">
+          <rect width="21" height="16" transform="translate(0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+
+  )
+}
+
+export default DocumentPagesIcon

package/dist/es/src/{model → EditionCrafter/model}/Folio.js

@@ -1,6 +1,29 @@
 import OpenSeadragon from 'openseadragon'
 import { layoutMargin3 } from './folioLayout'
 
+function getTagIds(html) {
+  const tagIds = []
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+
+  const tagEls = doc.querySelectorAll('tei-div[ana], tei-seg[ana]')
+
+  for (const tagEl of tagEls) {
+    const ana = tagEl.getAttribute('ana')
+
+    if (ana) {
+      const split = ana.split(' ').map(t => t.slice(1))
+
+      for (const tag of split) {
+        if (!tagIds.includes(tag)) {
+          tagIds.push(tag)
+        }
+      }
+    }
+  }
+
+  return tagIds
+}
+
 export async function loadFolio(folioData) {
   if (folioData.loading) {
     return folioData
@@ -18,7 +41,8 @@ export async function loadFolio(folioData) {
     const imageServerResponse = await response.json()
     // Handle the image server response
     folio.tileSource = new OpenSeadragon.IIIFTileSource(imageServerResponse)
-  } else {
+  }
+  else {
     folio.tileSource = new OpenSeadragon.ImageTileSource({
       type: 'image',
       url: folio.image_zoom_url,
@@ -37,12 +61,14 @@ export async function loadFolio(folioData) {
         const xmlURLResponse = await fetch(xmlURL)
         const html = await htmlURLResponse.text()
         const xml = await xmlURLResponse.text()
+        const tagIds = getTagIds(html)
         const transcription = parseTranscription(html, xml)
         if (!transcription) {
           throw new Error(`Unable to load transcription: ${htmlURL}`)
         }
         else {
           folio.transcription[transcriptionType] = transcription
+          folio.tagIds = tagIds
           folio.loading = false
           transcriptionTypeTracker[transcriptionType] = true
         }

package/dist/es/src/{model → EditionCrafter/model}/folioLayout.js

@@ -231,6 +231,7 @@ function layoutMargin(html, emptyZoneFrame, layoutDecoder) {
       const entryID = zone.id
       const blocks = zone.children
       const facs = zone.getAttribute('facs')
+      const tags = zone.getAttribute('ana')
 
       for (const block of blocks) {
         const layoutCode = validLayoutCode(block)
@@ -254,7 +255,7 @@ function layoutMargin(html, emptyZoneFrame, layoutDecoder) {
 
       for (const blockSet of Object.values(marginFrame)) {
         if (blockSet) {
-          gridContent = gridContent.concat(renderBlockSet(blockSet, facs))
+          gridContent = gridContent.concat(renderBlockSet(blockSet, facs, tags))
         }
       }
 
@@ -266,7 +267,7 @@ function layoutMargin(html, emptyZoneFrame, layoutDecoder) {
     }
   }
   catch (error) {
-    console.log(error)
+    console.error(error)
   }
 
   const gridLayout = zoneGridToLayout(zoneGrid)
@@ -295,7 +296,7 @@ function zoneGridToLayout(zoneGrid) {
   return gridLayout
 }
 
-function renderBlockSet(blockSet, facs) {
+function renderBlockSet(blockSet, facs, tags) {
   // use ID and class from the first block in the set
   const firstBlock = blockSet[0]
   const elementID = firstBlock.id
@@ -307,7 +308,7 @@ function renderBlockSet(blockSet, facs) {
 
   // combine the blocks in the block set. divs are all merged into a single div
   // other element types become children of the single div.
-  let el = `<div id="${elementID}" className="${classStr}" data-entry-id="${entryID}" data-facs="${facs || ''}">`
+  let el = `<div id="${elementID}" className="${classStr}" ana="${tags}" data-entry-id="${entryID}" data-facs="${facs || ''}">`
   for (const block of blockSet) {
     if (block.getAttribute('facs')) {
       block.setAttribute('data-facs', block.getAttribute('facs'))
@@ -382,7 +383,7 @@ export function layoutGrid(html) {
     }
   }
   catch (error) {
-    console.log(error)
+    console.error(error)
   }
 
   const gridLayout = zoneGridToLayout(zoneGrid)

package/dist/es/src/{saga → EditionCrafter/saga}/RouteListenerSaga.js

@@ -6,15 +6,47 @@ import { putResolveAction } from '../model/ReduxStore'
 const justDocument = state => state.document
 const justGlossary = state => state.glossary
 
+function* parseTags(headerUrl) {
+  const tags = {}
+
+  const res = yield fetch(headerUrl)
+
+  if (!res.ok) {
+    yield putResolveAction('DocumentActions.loadTags', tags)
+    return null
+  }
+
+  const html = yield res.text()
+
+  const headerDoc = new DOMParser().parseFromString(html, 'text/html')
+
+  const categoryEls = headerDoc.querySelectorAll('tei-category')
+
+  for (const categoryEl of categoryEls) {
+    const xmlId = categoryEl.getAttribute('id')
+
+    if (xmlId) {
+      const desc = categoryEl.querySelector('tei-catdesc')
+      if (desc) {
+        const name = desc.textContent
+        tags[xmlId] = name
+      }
+    }
+  }
+
+  yield putResolveAction('DocumentActions.loadTags', tags)
+}
+
 function* userNavigation(action) {
-  const { pathname } = action.payload.params[0]
+  const pathname = action.payload.params[0]
   const pathSegments = pathname.split('/')
 
   if (pathSegments.length > 1) {
     switch (pathSegments[1]) {
       case 'ec':
       {
-        const manifest = yield resolveDocumentManifest()
+        yield resolveDocumentManifest()
+        yield resolveDocumentTags()
         yield resolveGlossary()
         yield resolveFolio(pathSegments)
         break
@@ -24,8 +56,17 @@ function* userNavigation(action) {
   }
 }
 
+function* resolveDocumentTags() {
+  const document = yield select(justDocument)
+
+  if (!document.tags) {
+    yield parseTags(document.headerUrl)
+  }
+}
+
 function* resolveDocumentManifest() {
   const document = yield select(justDocument)
+
   if (!document.loaded) {
     // handle the case where we've passed in an array of manifest URLs, in which case the `variorum` parameter should be set to `true`
     if (document.variorum) {
@@ -94,5 +135,5 @@ function* resolveGlossary() {
 }
 
 export default function* routeListenerSaga() {
-  yield takeEvery('RouteListenerSaga.userNavigatation', userNavigation)
+  yield takeEvery('RouteListenerSaga.userNavigation', userNavigation)
 }

package/dist/es/src/{scss → EditionCrafter/scss}/_base.scss

@@ -5,6 +5,10 @@ $dark-maroon: #460C0A;
 
 .editioncrafter {
 
+	.MuiInputBase-root {
+		font-family: 'Inter', sans-serif;
+	}
+
 	*{
 		box-sizing: border-box;
 	}
@@ -45,6 +49,12 @@ $dark-maroon: #460C0A;
 	.fa.fa-lock-open {
 		border-radius: max(2rem, 32px) 0 0 max(2rem, 32px);
 	}
+
+	.vertical-separator {
+		height: 100%;
+		border-right: 1px solid #6F747C;
+		margin: 10px 0;
+	}
 	
 	.line-clamp {
 		display: -webkit-box;
@@ -129,7 +139,7 @@ $dark-maroon: #460C0A;
 	}
 	
 	.invisible{
-	  opacity:0;
+		display: none;
 	}
 	
 	.disabled{

package/dist/es/src/{scss → EditionCrafter/scss}/_diplomatic.scss

@@ -1,7 +1,7 @@
 #diplomatic.editioncrafter {
 	container-type: inline-size;
 	container-name: diplomatic;
-	#content-view, .header-wrapper, #entry-list-view, #annotation-list-view {
+	#content-view, .header-wrapper, #annotation-list-view {
 		h1,
 		h2,
 		h3,
@@ -11,29 +11,29 @@
 			padding: 0;
 			margin: 0;
 		}
-		
+
 		h1{
 			font-family: 'Taviraj', serif;
 			font-size: 32px;
 		}
-		
+
 		h2,h3{
 			font-weight: 700;
 		}
-		
+
 		h2{
 			font-size: 22px;
 		}
-		
+
 		h3{
 			font-size: 18px;
 		}
-		
+
 		h4{
 			font-size: 18px;
 			font-weight: 700;
 		}
-		
+
 		p {
 			font-family: "Martel", serif;
 			line-height: 1.25;
@@ -43,17 +43,17 @@
 			line-height: 1.25;
 			margin: 0;
 		}
-		
+
 		a.MuiButton-containedPrimary.cta-button {
 			color: white;
 			padding: 10px 70px;
 			border-radius: 0;
 			.MuiButton-label span{
 				font-family: 'Lato', sans-serif;
-				font-size: 20px;	
+				font-size: 20px;
 			}
 		}
-		
+
 		a{
 			color: $maroon;
 			&:hover{
@@ -77,15 +77,6 @@
 			@include md {
 				font-size: 18px;
 			}
-			&.with-icon{
-				&:after{
-					font-family: "Font Awesome 5 Free"; 
-					margin-left: 7px;
-					font-weight: 600;
-					content: "\f054";
-					font-size: 15px;
-				}
-			}
 			&:before{
 				position: absolute;
 				content: "";
@@ -109,7 +100,7 @@
 				}
 			}
 		}
-		
+
 		a.cta-link.active{
 			&:before{
 				background-color: $maroon;
@@ -122,7 +113,7 @@
 				color: $maroon;
 			}
 		}
-		
+
 		a.cta-link.light{
 			color: #444444;
 			&:before{
@@ -134,7 +125,7 @@
 				}
 			}
 		}
-		
+
 		a.cta-link.video-link{
 			&:after{
 				content: "\f04b";
@@ -142,7 +133,7 @@
 				margin-bottom: -2px;
 			}
 		}
-		
+
 		a.cta-link.search-link{
 			&:after{
 				font-family: 'Material Icons';
@@ -287,7 +278,7 @@
 				}
 				@include sm {
 					width: 250px;
-				}	
+				}
 			}
 		}
 		.footer-links {