Skip to content

Commit 5e68dd4

Browse files
thehabesthehabes
committed
First pass at changing links
1 parent 64a5cd9 commit 5e68dd4

25 files changed

Lines changed: 115 additions & 88 deletions

File tree

‎about.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h2>TPEN 3.0</h2>
1919
an invaluable tool for historians, archivists, and researchers.
2020
</p>
2121
<p>
22-
<a href="https://three.t-pen.org/about/">Learn more at the TPEN3 home site!</a>
22+
<a href="https://three.t-pen.org/about/" target="_blank" rel="noopener noreferrer">Learn more at the TPEN3 home site!</a>
2323
</p>
2424
</tpen-page>
2525
</body>

‎components/annotorious-annotator/line-parser.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,8 @@ class AnnotoriousAnnotator extends HTMLElement {
317317
transition: background-color 0.3s;
318318
z-index: 9;
319319
border: none;
320+
text-decoration: none;
321+
font: inherit;
320322
}
321323
#projectManagementBtn:hover,
322324
#projectManagementBtn:focus-visible {
@@ -364,12 +366,12 @@ class AnnotoriousAnnotator extends HTMLElement {
364366
<input type="checkbox" id="seeTool" checked>
365367
</label>
366368
<button id="deleteAllBtn" type="button">Delete All Annotations</button>
367-
<button id="createColumnsBtn" type="button">Manage Columns</button>
369+
<a id="createColumnsBtn">Manage Columns</a>
368370
<button id="saveBtn" type="button">Save Annotations</button>
369371
</div>
370372
<button type="button" id="autoParseBtn">Auto Parse</button>
371373
<tpen-page-selector></tpen-page-selector>
372-
<button type="button" id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</button>
374+
<a id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</a>
373375
<div id="annotator-container"> Loading Annotorious and getting the TPEN3 Page information... </div>
374376
<div id="ruler"></div>
375377
<span id="sampleRuler"></span>
@@ -453,9 +455,7 @@ class AnnotoriousAnnotator extends HTMLElement {
453455
this.renderCleanup.onElement(editTool, "change", (e) => this.toggleEditingMode(e))
454456
this.renderCleanup.onElement(eraseTool, "change", (e) => this.toggleErasingMode(e))
455457
this.renderCleanup.onElement(seeTool, "change", (e) => this.toggleAnnotationVisibility(e))
456-
this.renderCleanup.onElement(createColumnsBtn, "click", () =>
457-
window.location.href = `/manage-columns?projectID=${TPEN.activeProject._id}&pageID=${this.#annotationPageID}`
458-
)
458+
createColumnsBtn.href = `/manage-columns?projectID=${TPEN.activeProject._id}&pageID=${this.#annotationPageID}`
459459
this.renderCleanup.onElement(saveButton, "click", (e) => {
460460
this.#annotoriousInstance.cancelSelected()
461461
// Timeout required in order to allow the unfocus native functionality to complete for $isDirty.
@@ -702,6 +702,9 @@ class AnnotoriousAnnotator extends HTMLElement {
702702
})
703703

704704
// Link to transcribe if they have view permissions for it
705+
// NOTE: This uses OpenSeadragon.Button which creates <div> elements, not standard HTML links.
706+
// The OSD Button API does not support <a> elements, so this is an intentional exception
707+
// to the consistent navigation pattern (issue #465).
705708
if (CheckPermissions.checkViewAccess("LINE", "TEXT") || CheckPermissions.checkEditAccess("LINE", "TEXT")) {
706709
let parsingRedirectButton = new OpenSeadragon.Button({
707710
tooltip: "Go Transcribe",
@@ -892,7 +895,7 @@ class AnnotoriousAnnotator extends HTMLElement {
892895
if (CheckPermissions.checkEditAccess("PROJECT")) {
893896
const manageProjectBtn = this.shadowRoot.querySelector("#projectManagementBtn")
894897
manageProjectBtn.style.display = "block"
895-
this.renderCleanup.onElement(manageProjectBtn, "click", (e) => document.location.href = `/project/manage?projectID=${TPEN.activeProject._id}`)
898+
manageProjectBtn.href = `/project/manage?projectID=${TPEN.activeProject._id}`
896899
}
897900
}
898901

‎components/gui/site/Footer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ class TpenFooter extends HTMLElement {
2121
footerContent.className = 'footer-content'
2222

2323
const p = document.createElement('p')
24-
p.innerHTML = `&copy; ${new Date().getFullYear()} TPEN. Licensed under <a href="/LICENSE" target="_blank">Apache 2.0</a>.`
24+
p.innerHTML = `&copy; ${new Date().getFullYear()} TPEN. Licensed under <a href="/LICENSE" target="_blank" rel="noopener noreferrer">Apache 2.0</a>.`
2525

2626
const nav = document.createElement('nav')
2727
nav.className = 'footer-nav'

‎components/gui/site/Header.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class TpenHeader extends HTMLElement {
4444
</h1>
4545
<h1 class="banner ${this.getAttribute('title') ? "" : "hidden"}">${this.getAttribute('title') ?? ""}</h1>
4646
<tpen-action-link data-description="Whatever the TPEN.actionLink is will be a button-looking link here.">
47-
<button type="button" class="action-button hidden">Action</button>
47+
<a class="action-button hidden">Action</a>
4848
</tpen-action-link>
4949
<nav>
5050
<ul>
@@ -73,13 +73,12 @@ class TpenHeader extends HTMLElement {
7373
const btn = this.shadowRoot.querySelector('.action-button')
7474
btn.classList.remove('hidden')
7575
btn.textContent = ev.detail.label
76-
// Use onclick assignment to prevent listener accumulation on repeated dispatches
77-
btn.onclick = ev.detail.callback
76+
btn.href = ev.detail.href
7877
}
7978
const actionLinkRemoveHandler = () => {
8079
const btn = this.shadowRoot.querySelector('.action-button')
8180
btn.classList.add('hidden')
82-
btn.onclick = null
81+
btn.removeAttribute('href')
8382
}
8483

8584
this.cleanup.onEvent(TPEN.eventDispatcher, 'tpen-gui-title', titleHandler)

‎components/gui/site/header.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,18 @@ a:hover, .logout-btn button:hover {
124124
outline: var(--primary-light) 1px solid;
125125
outline-offset: -3.5px;
126126
transition: all .3s;
127+
text-decoration: none;
128+
font: inherit;
129+
display: inline-flex;
130+
align-items: center;
131+
justify-content: center;
132+
text-align: center;
127133
}
128134
.action-button:focus, .action-button:hover {
129135
outline: var(--primary-color) 1px solid;
130136
outline-offset: -1.5px;
137+
background-color: var(--primary-light);
138+
color: var(--darkest);
131139
}
132140
.hidden {
133141
visibility: hidden;

‎components/leave-project/index.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,13 @@ class LeaveProject extends HTMLElement {
9999
margin-top: 1em;
100100
}
101101
102+
#noLeaveBtn {
103+
text-decoration: none;
104+
font: inherit;
105+
font-size: 15pt;
106+
display: inline-block;
107+
}
108+
102109
#leaveBtn:hover {
103110
background-color: var(--accent);
104111
}
@@ -115,7 +122,7 @@ class LeaveProject extends HTMLElement {
115122
longer appear as a collaborator and the project will not appear in your projects
116123
list. To restore access you will have to be invited into the project again.
117124
</p>
118-
<button type="button" id="noLeaveBtn">I Am Not Ready To Leave!</button>
125+
<a id="noLeaveBtn" href="/project?projectID=${TPEN.activeProject._id}">I Am Not Ready To Leave!</a>
119126
<button type="button" id="leaveBtn">I Am Ready To Leave This Project</button>
120127
`
121128
this.addEventListeners()
@@ -131,7 +138,6 @@ class LeaveProject extends HTMLElement {
131138
const leaveBtn = this.shadowRoot.getElementById("leaveBtn")
132139
const noLeaveBtn = this.shadowRoot.getElementById("noLeaveBtn")
133140
this.renderCleanup.onElement(leaveBtn, 'click', () => this.leaveProject())
134-
this.renderCleanup.onElement(noLeaveBtn, 'click', () => document.location.href = `/project?projectID=${TPEN.activeProject._id}`)
135141
}
136142

137143
leaveProject() {

‎components/manage-role/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,8 @@ class ManageRole extends HTMLElement {
291291
cursor: pointer;
292292
transition: background-color 0.3s;
293293
border: none;
294+
text-decoration: none;
295+
font: inherit;
294296
}
295297
296298
#projectManagementBtn:hover,
@@ -413,7 +415,7 @@ class ManageRole extends HTMLElement {
413415
</div>
414416
</div>
415417
</div>
416-
<button type="button" id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</button>
418+
<a id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</a>
417419
`
418420

419421
// Clear previous render-specific listeners before adding new ones
@@ -427,7 +429,7 @@ class ManageRole extends HTMLElement {
427429
if (CheckPermissions.checkEditAccess("PROJECT")) {
428430
const manageBtn = this.shadowRoot.getElementById("projectManagementBtn")
429431
manageBtn.style.display = "block"
430-
this.renderCleanup.onElement(manageBtn, 'click', () => document.location.href = `/project/manage?projectID=${TPEN.activeProject._id}`)
432+
manageBtn.href = `/project/manage?projectID=${TPEN.activeProject._id}`
431433
}
432434

433435
const rolesList = this.shadowRoot.querySelector(".roles-list")

‎components/page-tool/index.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,8 @@ export default class PageTool extends HTMLElement {
8989
this.shadowRoot.querySelector('.parsing-section').style.display = "block"
9090
linesBtn.style.display = "block"
9191
columnsBtn.style.display = "block"
92-
this.renderCleanup.onElement(linesBtn, 'click', () =>
93-
document.location.href = `/annotator?projectID=${TPEN.activeProject._id}&pageID=${TPEN.screen.pageInQuery}`)
94-
this.renderCleanup.onElement(columnsBtn, 'click', () =>
95-
document.location.href = `/manage-columns?projectID=${TPEN.activeProject._id}&pageID=${TPEN.screen.pageInQuery}`)
92+
linesBtn.href = `/annotator?projectID=${TPEN.activeProject._id}&pageID=${TPEN.screen.pageInQuery}`
93+
columnsBtn.href = `/manage-columns?projectID=${TPEN.activeProject._id}&pageID=${TPEN.screen.pageInQuery}`
9694
}
9795
}
9896

@@ -416,6 +414,9 @@ export default class PageTool extends HTMLElement {
416414
margin: 10px auto;
417415
display: none;
418416
width: fit-content;
417+
text-decoration: none;
418+
font: inherit;
419+
text-align: center;
419420
}
420421
421422
.grayscale-btn, .invert-btn, .reset-btn, .lines-btn, .columns-btn {
@@ -506,8 +507,8 @@ export default class PageTool extends HTMLElement {
506507
</div>
507508
<div class="tool-section parsing-section">
508509
<h4 class="tool-section-title">LINES & COLUMNS</h4>
509-
<button type="button" class="lines-btn">IDENTIFY LINES</button>
510-
<button type="button" class="columns-btn">IDENTIFY COLUMNS</button>
510+
<a class="lines-btn">IDENTIFY LINES</a>
511+
<a class="columns-btn">IDENTIFY COLUMNS</a>
511512
</div>
512513
</div>
513514
</div>

‎components/project-export/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -144,16 +144,16 @@ customElements.define('tpen-project-export', class extends HTMLElement {
144144
case 7:
145145
// This case indicates that the deployment is failed
146146
if (urlExists) {
147-
html += `<a href="${url}" target="_blank">${url}</a>`
148-
html += `<a class="iiif-drag-drop" href="${url}?manifest=${url}" target="_blank"><img src="https://iiif.io/img/logo-iiif-34x30.png" alt="IIIF Drag and Drop" title="Drag and Drop IIIF Resource"></a>`
147+
html += `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`
148+
html += `<a class="iiif-drag-drop" href="${url}?manifest=${url}" target="_blank" rel="noopener noreferrer"><img src="https://iiif.io/img/logo-iiif-34x30.png" alt="IIIF Drag and Drop" title="Drag and Drop IIIF Resource"></a>`
149149
} else {
150150
html += `<p class="error">Manifest Not Found</p>`
151151
}
152152
break
153153
case 4:
154154
// This case indicates that the manifest is being generated successfully
155-
html += `<a href="${url}" target="_blank">${url}</a>`
156-
html += `<a class="iiif-drag-drop" href="${url}?manifest=${url}" target="_blank"><img src="https://iiif.io/img/logo-iiif-34x30.png" alt="IIIF Drag and Drop" title="Drag and Drop IIIF Resource"></a>`
155+
html += `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`
156+
html += `<a class="iiif-drag-drop" href="${url}?manifest=${url}" target="_blank" rel="noopener noreferrer"><img src="https://iiif.io/img/logo-iiif-34x30.png" alt="IIIF Drag and Drop" title="Drag and Drop IIIF Resource"></a>`
157157
break
158158
default:
159159
html += `<p class="error">Unknown Status</p>`

‎components/project-options/index.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,15 @@ class ProjectOptions extends HTMLElement {
9797
</style>
9898
<p>
9999
${project.description ?? 'No description provided.'}
100-
<a href="/project/metadata?projectID=${project._id}">✏️</a>
100+
<a href="/project/metadata?projectID=${project._id}" aria-label="Edit metadata">✏️</a>
101101
</p>
102102
<ul style="padding-left:1em;">
103103
<li><b>Label:</b> ${project.getLabel()}</li>
104104
<li><b>Created:</b> ${stringFromDate(project._createdAt)}</li>
105105
<li><b>Last Modified:</b> ${stringFromDate(project._modifiedAt)}</li>
106106
<li><b>Owner:</b> ${project.getOwner()?.displayName ?? ''}</li>
107107
</ul>
108-
<h3>Project Tools <a href="${this.getNavigationUrl('manageProject', project)}">✏️</a></h3>
108+
<h3>Project Tools <a href="${this.getNavigationUrl('manageProject', project)}" aria-label="Manage project tools">✏️</a></h3>
109109
<tpen-project-tools readonly="true"></tpen-project-tools>
110110
<h3>Define Lines</h3>
111111
${project.layers?.map(layer => `
@@ -137,14 +137,12 @@ class ProjectOptions extends HTMLElement {
137137
layer.pages?.some(page => page.items && page.items.length > 0)
138138
) ?? false
139139

140+
const url = hasLines
141+
? this.getNavigationUrl('transcribe', project)
142+
: this.getNavigationUrl('defineLines', project)
140143
TPEN.eventDispatcher.dispatch('tpen-gui-action-link', {
141144
label: hasLines ? 'Transcribe' : 'Find Lines',
142-
callback: () => {
143-
const url = hasLines
144-
? this.getNavigationUrl('transcribe', project)
145-
: this.getNavigationUrl('defineLines', project)
146-
window.location.href = url
147-
}
145+
href: url
148146
})
149147
}
150148
}

0 commit comments

Comments
 (0)