Skip to content

Commit eb2cc8e

Browse files
thehabesthehabes
authored
Links That Change location.href (#489)
* First pass at changing links * Changes while reviewing * oo gunna have to look at tpen-action-link on its own
1 parent 64a5cd9 commit eb2cc8e

23 files changed

Lines changed: 103 additions & 80 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: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,7 @@ class AnnotoriousAnnotator extends HTMLElement {
203203
display: block;
204204
text-align: center;
205205
text-decoration: none;
206+
font: inherit;
206207
border: none;
207208
box-sizing: border-box;
208209
}
@@ -317,6 +318,8 @@ class AnnotoriousAnnotator extends HTMLElement {
317318
transition: background-color 0.3s;
318319
z-index: 9;
319320
border: none;
321+
text-decoration: none;
322+
font: inherit;
320323
}
321324
#projectManagementBtn:hover,
322325
#projectManagementBtn:focus-visible {
@@ -364,12 +367,12 @@ class AnnotoriousAnnotator extends HTMLElement {
364367
<input type="checkbox" id="seeTool" checked>
365368
</label>
366369
<button id="deleteAllBtn" type="button">Delete All Annotations</button>
367-
<button id="createColumnsBtn" type="button">Manage Columns</button>
370+
<a id="createColumnsBtn">Manage Columns</a>
368371
<button id="saveBtn" type="button">Save Annotations</button>
369372
</div>
370373
<button type="button" id="autoParseBtn">Auto Parse</button>
371374
<tpen-page-selector></tpen-page-selector>
372-
<button type="button" id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</button>
375+
<a id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</a>
373376
<div id="annotator-container"> Loading Annotorious and getting the TPEN3 Page information... </div>
374377
<div id="ruler"></div>
375378
<span id="sampleRuler"></span>
@@ -453,9 +456,7 @@ class AnnotoriousAnnotator extends HTMLElement {
453456
this.renderCleanup.onElement(editTool, "change", (e) => this.toggleEditingMode(e))
454457
this.renderCleanup.onElement(eraseTool, "change", (e) => this.toggleErasingMode(e))
455458
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-
)
459+
createColumnsBtn.href = `/manage-columns?projectID=${TPEN.activeProject._id}&pageID=${this.#annotationPageID}`
459460
this.renderCleanup.onElement(saveButton, "click", (e) => {
460461
this.#annotoriousInstance.cancelSelected()
461462
// Timeout required in order to allow the unfocus native functionality to complete for $isDirty.
@@ -702,6 +703,9 @@ class AnnotoriousAnnotator extends HTMLElement {
702703
})
703704

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

‎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/leave-project/index.js‎

Lines changed: 8 additions & 3 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()
@@ -129,9 +136,7 @@ class LeaveProject extends HTMLElement {
129136
this.renderCleanup.run()
130137

131138
const leaveBtn = this.shadowRoot.getElementById("leaveBtn")
132-
const noLeaveBtn = this.shadowRoot.getElementById("noLeaveBtn")
133139
this.renderCleanup.onElement(leaveBtn, 'click', () => this.leaveProject())
134-
this.renderCleanup.onElement(noLeaveBtn, 'click', () => document.location.href = `/project?projectID=${TPEN.activeProject._id}`)
135140
}
136141

137142
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: 3 additions & 3 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 => `
@@ -140,7 +140,7 @@ class ProjectOptions extends HTMLElement {
140140
TPEN.eventDispatcher.dispatch('tpen-gui-action-link', {
141141
label: hasLines ? 'Transcribe' : 'Find Lines',
142142
callback: () => {
143-
const url = hasLines
143+
const url = hasLines
144144
? this.getNavigationUrl('transcribe', project)
145145
: this.getNavigationUrl('defineLines', project)
146146
window.location.href = url

‎components/projects/list-navigation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ export default class ProjectsListNavigation extends HTMLElement {
196196
try {
197197
await(new Project(project._id).fetch())
198198
const isManageProjectPermission = CheckPermissions.checkEditAccess('PROJECT')
199-
manageLink = isManageProjectPermission ? `<a title="Manage Project" part="project-opt" href="/project/manage?projectID=${project._id}">⚙</a>` : ``
199+
manageLink = isManageProjectPermission ? `<a title="Manage Project" part="project-opt" href="/project/manage?projectID=${project._id}" aria-label="Manage Project">⚙</a>` : ``
200200
} catch (error) {
201201
console.warn(`Failed to check permissions for project ${project._id}:`, error)
202202
}

‎components/user-profile/contributionActivity.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -275,11 +275,11 @@ class ContributionActivity extends HTMLElement {
275275
<li>
276276
<div class="contribution-details">
277277
<div class="logo-container">
278-
<img class="logo" src="https://rerum.io/logo.png" alt="Rerum Logo" onclick="window.open('${c.id}', '_blank')" />
278+
<a href="${c.id}" target="_blank" rel="noopener noreferrer" aria-label="View in RERUM"><img class="logo" src="https://rerum.io/logo.png" alt="Rerum Logo" /></a>
279279
</div>
280280
${c.page ? `
281281
<div class="logo-container">
282-
<img class="logo" src="../../assets/icons/transcribe.png" alt="Transcribe Icon" onclick="window.open('${TPEN.BASEURL}/transcribe?projectID=${c.projectId}&pageID=${c.page}', '_blank')" />
282+
<a href="${TPEN.BASEURL}/transcribe?projectID=${c.projectId}&pageID=${c.page}" target="_blank" rel="noopener noreferrer" aria-label="Transcribe page"><img class="logo" src="../../assets/icons/transcribe.png" alt="Transcribe Icon" /></a>
283283
</div>` : ''}
284284
<p>${c.type}</p>
285285
</div>
@@ -314,11 +314,11 @@ class ContributionActivity extends HTMLElement {
314314
li.innerHTML = `
315315
<div class="contribution-details">
316316
<div class="logo-container">
317-
<img class="logo" src="https://rerum.io/logo.png" alt="Rerum Logo" onclick="window.open('${c.id}', '_blank')" />
317+
<a href="${c.id}" target="_blank" rel="noopener noreferrer" aria-label="View in RERUM"><img class="logo" src="https://rerum.io/logo.png" alt="Rerum Logo" /></a>
318318
</div>
319319
${c.page ? `
320320
<div class="logo-container">
321-
<img class="logo" src="../../assets/icons/transcribe.png" alt="Transcribe Icon" onclick="window.open('${TPEN.BASEURL}/transcribe?projectID=${c.projectId}&pageID=${c.page}', '_blank')" />
321+
<a href="${TPEN.BASEURL}/transcribe?projectID=${c.projectId}&pageID=${c.page}" target="_blank" rel="noopener noreferrer" aria-label="Transcribe page"><img class="logo" src="../../assets/icons/transcribe.png" alt="Transcribe Icon" /></a>
322322
</div>` : ''}
323323
<p>${c.type}</p>
324324
</div>

0 commit comments

Comments
 (0)