Skip to content

Commit

Permalink
Default transcribe upgrade (#47)
Browse files Browse the repository at this point in the history 
* align with new structure

* starting to repair attribute/props

https://open-wc.org/guides/knowledge/attributes-and-properties/

* midway

* placeholder for line-text

* placeholder for line-text

* in progress

* unTPEN

* unTPENning

* WIP moving to generic

* heavy vault work

* redundant

* cleaner style
  • Loading branch information
@cubap
cubap authored Jan 14, 2025
1 parent 6d42b78 commit daa3514
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 157 deletions.
12 changes: 11 additions & 1 deletion components/default-transcribe/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TPEN Transcription</title>
<script type="module" src="index.js"></script>
<style>
tpen-transcription {
display: block;
margin: 0 auto;
max-width: 35em;
}
</style>
</head>
<body>
<tpen-transcription></tpen-transcription>
<div tpen-page="https://t-pen.org/TPEN/annotations/13248868/project/7066" iiif-manifest="https://t-pen.org/TPEN/manifest/7066?version=3">
<!-- <tpen-pagination></tpen-pagination> -->
<tpen-transcription tpen-page="https://t-pen.org/TPEN/annotations/13248868/project/7066"></tpen-transcription>
</div>
</body>
</html>
167 changes: 126 additions & 41 deletions components/default-transcribe/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,26 @@
// custom element named 'tpen-transcription' with a custom template built from the querystring 'projectID' parameter
import { fetchProject, userMessage, encodeContentState } from "../iiif-tools/index.mjs"
import "https://cdn.jsdelivr.net/npm/manifesto.js"
import { userMessage, encodeContentState } from "../iiif-tools/index.mjs"
import "../line-image/index.js"
import "../line-text/index.js"
import TPEN from "../../api/TPEN.mjs"
import User from "../../api/User.mjs"
import { Vault } from 'https://cdn.jsdelivr.net/npm/@iiif/helpers/+esm'

const vault = new Vault()
class TpenTranscriptionElement extends HTMLElement {
TPEN = new TPEN()
#transcriptionContainer
#activeCanvas = {}
#activeLine = {}
#activeLine
#activeCanvas
#manifest
userToken

static get observedAttributes() {
return ['tpen-project','tpen-user-id']
return ['tpen-page', 'iiif-manifest']
}

attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if(name === 'tpen-user-id') {
TPEN.currentUser = new User(newValue).getProfile()
if(name === 'tpen-page' ){
this.#loadPage(newValue)
}
if (name === 'tpen-project' && newValue !== TPEN.activeProject._id) {
this.#loadProject(newValue)
}
if (name === 'tpen-project') {
this.TPEN.activeProject = { _id: newValue }
}
if(this.userToken) this.#loadProject()
}
}

Expand All @@ -38,51 +30,71 @@ class TpenTranscriptionElement extends HTMLElement {
this.#transcriptionContainer = document.createElement('div')
this.#transcriptionContainer.setAttribute('id', 'transcriptionContainer')
this.shadowRoot.append(this.#transcriptionContainer)
TPEN.attachAuthentication(this)
eventDispatcher.on('tpen-project-loaded', () => this.#loadProject())
}

connectedCallback() {}

set activeCanvas(canvas) {
if (canvas === TPEN.activeCanvas) return
TPEN.activeCanvas = canvas
this.#activeCanvas = canvas
// this.querySelectorAll('iiif-canvas').forEach(el=>el.setAttribute('iiif-canvas',canvas.id))
}

get activeCanvas() {
return this.#activeCanvas ?? {}
}

set activeLine(line) {
this.#activeLine = line
}

get activeLine() {
return this.#activeLine ?? {}
}

set manifest(manifest) {
this.#manifest = manifest
}

get manifest() {
return this.#manifest ?? this.closest('[iiif-manifest]')?.getAttribute('iiif-manifest') ?? {}
}

set activeLine(line) {
if (line === TPEN.activeLine) return
TPEN.activeLine = line
this.contentState = JSON.stringify(TPEN.activeLine)
if (line === this.#activeLine) return
this.#activeLine = line
this.#transcriptionContainer.dispatchEvent(new CustomEvent('tpen-set-line', { detail: line }))
}

async #loadProject(projectID) {
async #loadPage(annotationPageID) {
let page = { id: annotationPageID }
try {
const project = await fetchProject(this.TPEN.activeProject._id, this.userToken ?? TPEN.getAuthorization())
if(!project) return userMessage('Project not found')
// load project.manifest
let manifest = await manifesto.loadManifest(project.manifest)
TPEN.manifest = new manifesto.Manifest(manifest)
// page from URL later
TPEN.activeCanvas = TPEN.manifest?.getSequenceByIndex(0)?.getCanvasByIndex(0)
TPEN.activeLine = this.getFirstLine()
const imgTop = document.createElement('tpen-line-image')
imgTop.setAttribute('id', 'imgTop')
imgTop.setAttribute('projectID', this.TPEN.activeProject._id)
const text = document.createElement('tpen-line-text')
text.setAttribute('id', 'text')
this.#transcriptionContainer.append(imgTop, text)
page = vault.get({id:annotationPageID,type:"AnnotationPage"}) ?? await vault.load(annotationPageID)
} catch (err) {
switch (err.status ?? err.code) {
case 401:
return userMessage('Unauthorized')
case 403:
case 403:
return userMessage('Forbidden')
case 404:
return userMessage('Project not found')
return userMessage('Project not found')
default:
return userMessage(err.message ?? err.statusText ?? err.text ?? 'Unknown error')
}
}
let lines = await Promise.all(page.items.flatMap(async l => {
const lineElem = document.createElement('tpen-line-text')
const lineImg = document.createElement('tpen-line-image')
lineElem.line = vault.get({id:l.id,type:"Annotation"}) ?? await vault.load(l.id)
lineElem.line.body[0] = vault.get({id:lineElem.line.body[0].id,type:"ContentResource"})
lineElem.setAttribute('tpen-line-id', l.id)
lineImg.setAttribute('tpen-line-id', l.id)
lineImg.setAttribute('iiif-canvas', lineElem.line.target.source.id)
lineImg.setAttribute('region', lineElem.line.target.selector.value)
lineImg.setAttribute('iiif-manifest', this.manifest)
return [lineElem, lineImg]
})).then(results => results.flat())
this.#transcriptionContainer.append(...lines)
this.activeLine = lines[0].line
}

getAllLines(canvas = TPEN.activeCanvas) {
Expand All @@ -107,3 +119,76 @@ class TpenTranscriptionElement extends HTMLElement {
}

customElements.define('tpen-transcription', TpenTranscriptionElement)

class TpenPaginationElement extends HTMLElement {
#paginationContainer
activeCanvas = {}
activeLine = {}
userToken

static get observedAttributes() {
return ['tpen-project']
}

attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === 'tpen-project' && newValue !== TPEN.activeProject._id) {
this.#loadPages(newValue)
}
}
}

constructor() {
super()
this.attachShadow({ mode: 'open' })
this.#paginationContainer = document.createElement('div')
this.#paginationContainer.setAttribute('id', 'paginationContainer')
this.shadowRoot.append(this.#paginationContainer)
}

connectedCallback() {
if (!TPEN.activeProject?._id) {
return
}
this.setAttribute('tpen-project', TPEN.activeProject._id)
}

async #loadPages(manifest) {
try {
// const project = TPEN.activeProject ?? await new Project(projectID).fetch()
// if(!project) return userMessage('Project not found')
// if (!TPEN.manifest?.getSequenceByIndex) {
// let manifest = await manifesto.loadManifest(project.manifest)
// TPEN.manifest = new manifesto.Manifest(manifest)
// }
// let pages = TPEN.manifest?.getSequenceByIndex(0)?.getCanvases()
// const select = document.createElement('select')
// select.setAttribute('id', 'pageSelect')
// pages.forEach(page => {
// const option = document.createElement('option')
// option.value = page.id
// option.textContent = page.getLabel().getValue(navigator.language)
// select.appendChild(option)
// })
// this.#paginationContainer.appendChild(select)
// select.addEventListener('change', () => {
// TPEN.activeCanvas = TPEN.manifest?.getSequenceByIndex(0)?.getCanvasById(select.value)
// eventDispatcher.dispatch('change-page')
// })
}
catch (err) {
switch (err.status ?? err.code) {
case 401:
return userMessage('Unauthorized')
case 403:
return userMessage('Forbidden')
case 404:
return userMessage('Project not found')
default:
return userMessage(err.message ?? err.statusText ?? err.text ?? 'Unknown error')
}
}
}
}

customElements.define('tpen-pagination', TpenPaginationElement)
Loading

0 comments on commit daa3514

Please sign in to comment.