Convert navigation buttons to anchor tags for right-click context menu support

components/annotorious-annotator/line-parser.js

@@ -164,6 +164,10 @@ class AnnotoriousAnnotator extends HTMLElement {
           cursor: pointer;
           width: 100%;
           margin-top: 1em;
+          display: block;
+          text-align: center;
+          text-decoration: none;
+          border: none;
         }
         #saveBtn[disabled], #createColumnsBtn[disabled], #deleteAllBtn[disabled] {
           background-color: gray;
@@ -269,7 +273,7 @@ class AnnotoriousAnnotator extends HTMLElement {
            <input type="checkbox" id="seeTool" checked> 
           </label>
           <input id="deleteAllBtn" type="button" value="Delete All Annotations"/>
-          <input id="createColumnsBtn" type="button" value="Manage Columns"/>
+          <a id="createColumnsBtn" href="#">Manage Columns</a>
           <input id="saveBtn" type="button" value="Save Annotations"/>
         </div>
         <button id="autoParseBtn">Auto Parse</button>

components/copy-existing-project/index.js

@@ -142,12 +142,10 @@ class CopyExistingProject extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)

components/copy-project-with-customization/index.js

@@ -477,12 +477,10 @@ class CopyExistingProjectWithCustomizations extends HTMLElement {
                 const projectTitle = document.createElement('span')
                 projectTitle.textContent = data.label
 
-                const manageButton = document.createElement('button')
+                const manageButton = document.createElement('a')
                 manageButton.className = 'manage-btn'
                 manageButton.textContent = 'Manage'
-                manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                }
+                manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                 projectInfo.appendChild(projectTitle)
                 projectInfo.appendChild(manageButton)

components/copy-project-with-group-member/index.js

@@ -143,12 +143,10 @@ class CopyProjectWithGroupMember extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)

components/copy-project-without-annotations/index.js

@@ -142,12 +142,10 @@ class CopyExistingProjectWithoutAnnotations extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)

components/import-image/index.js

@@ -182,12 +182,10 @@ class ImageImporter extends HTMLElement {
     const pageTitle = document.createElement('span')
     pageTitle.textContent = project.label || 'Untitled Page'
 
-    const manageButton = document.createElement('button')
+    const manageButton = document.createElement('a')
     manageButton.className = 'manage-btn'
     manageButton.textContent = 'Manage'
-    manageButton.onclick = () => {
-      window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
-    }
+    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
     pageInfo.appendChild(pageTitle)
     pageInfo.appendChild(manageButton)

components/import-project/index.js

@@ -133,12 +133,10 @@ class ProjectImporter extends HTMLElement {
     const projectTitle = document.createElement('span')
     projectTitle.textContent = project.label
 
-    const manageButton = document.createElement('button')
+    const manageButton = document.createElement('a')
     manageButton.className = 'manage-btn'
     manageButton.textContent = 'Manage'
-    manageButton.onclick = () => {
-      window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
-    }
+    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
     projectInfo.appendChild(projectTitle)
     projectInfo.appendChild(manageButton)

components/user-profile/userStats.js

@@ -473,7 +473,9 @@ class UserStats extends HTMLElement {
                     <div class="collaborators">
                         ${collaborators.map(c => `
                             <div class="collaborator">
-                                <img src="${c.img}" alt="${c.name}" onclick="window.location.href='${TPEN.BASEURL}/public-profile?userId=${c._id}'">
+                                <a href="${TPEN.BASEURL}/public-profile?userId=${c._id}">
+                                    <img src="${c.img}" alt="${c.name}">
+                                </a>
                                 <div class="collaborator-name">${c.name}</div>
                             </div>
                         `).join('')}

interfaces/import-tpen28/index.html

@@ -27,7 +27,7 @@ <h1 class="header">Select a Project :</h1>
             <div id="message" class="message">Loading projects...</div>
 
             <div class="form-group">
-                <select id="projectSelect" class="dropdown">
+                <select id="projectSelect" title="projectSelect" class="dropdown">
                 <option value="">-- Choose a Project --</option>
                 </select>
                 <button id="importProjectBtn" class="btn primary-btn">Import</button>
@@ -38,10 +38,10 @@ <h2>Invite the Collaborators :</h2>
                 <div class="collaborator-list" id="collaboratorList"></div>
             </section>
 
-            <button id="openProject" class="btn secondary-btn hidden">
+            <a id="openProject" class="btn secondary-btn hidden" href="#" role="button">
                 Open the Project
-            </button>
+            </a>
             </div>
         </tpen-page>
     </body>
-</html>
+</html>

interfaces/import-tpen28/index.js

@@ -124,4 +124,4 @@ async function openProject() {
     await importCollaborators(projectTPEN28Data, projectID)
 } 
 
-fetchProjects()
+fetchProjects()

interfaces/manage-project/index.html

@@ -23,39 +23,39 @@ <h2 slot="header">This Project</h2>
                 <tpen-project-details></tpen-project-details>
                 <div class="action-links">
                     <tpen-can tpen-view="*_SELECTOR_LINE"> 
-                        <a id="goParse" title="Go Parse Lines" class="left"><img src="../../assets/icons/parse-lines.svg"/>
+                        <a id="goParse" title="Go Parse Lines" class="left"><img src="../../assets/icons/parse-lines.svg" alt="icon"/>
                             <span>Parse Lines</span>
                         </a>
                     </tpen-can>
                     <tpen-can tpen-view="READ_TEXT_LINE"> 
                         <a id="goTranscribe" title="Go Transcribe" class="right">
                             <span>Transcribe Text</span>
-                            <img src="../../assets/icons/transcribe.png"/>
+                            <img src="../../assets/icons/transcribe.png" alt="icon"/>
                         </a>
                     </tpen-can>
                 </div>
             </div>
-            <button id="leave-project-btn" slot="footer" type="button">LEAVE PROJECT</button>
+            <a id="leave-project-btn" slot="footer" class="default-btn" href="#" role="button">LEAVE PROJECT</a>
         </tpen-card>
         <tpen-card tpen-scope="metadata">
             <h2 slot="header">Metadata</h2>
             <tpen-project-metadata slot="body"></tpen-project-metadata>
-            <button id="update-metadata-btn" slot="footer" type="button">EDIT METADATA</button>
+            <a id="update-metadata-btn" slot="footer" class="default-btn" href="#" role="button">EDIT METADATA</a>
         </tpen-card>
         <tpen-card tpen-entity="member">
             <h2 slot="header">Collaborators</h2>
             <project-collaborators slot="body"></project-collaborators>
-            <button id="manage-collaboration-btn" slot="footer" type="button">MANAGE COLLABORATORS</button>
+            <a id="manage-collaboration-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE COLLABORATORS</a>
         </tpen-card>
         <tpen-card tpen-entity="layer">
             <h2 slot="header">Layers & Pages</h2>
             <tpen-project-layers slot="body"></tpen-project-layers>
-            <button id="manage-layers-btn" slot="footer" type="button">SEE DETAILS / MODIFY</button>
+            <a id="manage-layers-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS / MODIFY</a>
         </tpen-card>
         <tpen-card tpen-entity="role">
             <h2 slot="header">Project Roles</h2>
             <tpen-project-permissions slot="body"></tpen-project-permissions>
-            <button id="manage-custom-role-btn" slot="footer" type="button">MANAGE ROLE</button>
+            <a id="manage-custom-role-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE ROLE</a>
         </tpen-card>
         <tpen-card tpen-scope="options">
             <h2 slot="header">Project Options</h2>
@@ -64,7 +64,7 @@ <h2 slot="header">Project Options</h2>
                     Default Transcription Interface: /transcribe
                 </div>
             </tpen-project-options>
-            <button id="manage-project-options-btn" slot="footer" type="button">SEE DETAILS</button>
+            <a id="manage-project-options-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS</a>
         </tpen-card>
         <tpen-card tpen-entity="tools">
             <h2 slot="header">Tools</h2>

interfaces/manage-project/index.js

@@ -13,17 +13,34 @@ TPEN.eventDispatcher.on('tpen-project-loaded', () => render())
 const container = document.body
 TPEN.attachAuthentication(container)
 
-document.getElementById('manage-collaboration-btn').addEventListener('click', () => {
-    const url = `/project/manage/collaborators?projectID=${TPEN.screen.projectInQuery}`
-    window.location.href = url
-})
-
-document.getElementById("update-metadata-btn").addEventListener('click', () => {  
-    window.location.href = `/project/metadata?projectID=${TPEN.screen.projectInQuery}`
-})
-
-document.getElementById('manage-layers-btn').addEventListener('click', () => {
-    window.location.href = `/components/manage-layers/index.html?projectID=${TPEN.screen.projectInQuery}`
+// Set href for navigation links once project ID is available
+TPEN.eventDispatcher.on('tpen-project-loaded', () => {
+    const projectID = TPEN.screen.projectInQuery
+
+    const manageCollabBtn = document.getElementById('manage-collaboration-btn')
+    if (manageCollabBtn) {
+        manageCollabBtn.href = `/project/manage/collaborators?projectID=${projectID}`
+    }
+
+    const updateMetadataBtn = document.getElementById("update-metadata-btn")
+    if (updateMetadataBtn) {
+        updateMetadataBtn.href = `/components/update-metadata/index.html?projectID=${projectID}`
+    }
+
+    const manageLayersBtn = document.getElementById('manage-layers-btn')
+    if (manageLayersBtn) {
+        manageLayersBtn.href = `/components/manage-layers/index.html?projectID=${projectID}`
+    }
+
+    const manageProjectOptionsBtn = document.getElementById('manage-project-options-btn')
+    if (manageProjectOptionsBtn) {
+        manageProjectOptionsBtn.href = `/project/options?projectID=${projectID}`
+    }
+
+    const leaveProjectBtn = document.getElementById('leave-project-btn')
+    if (leaveProjectBtn) {
+        leaveProjectBtn.href = `/project/leave?projectID=${projectID}`
+    }
 })
 
 document.getElementById('export-project-btn').addEventListener('click', async () => {
@@ -43,22 +60,16 @@ document.getElementById('export-project-btn').addEventListener('click', async ()
     })
 })
 
-document.getElementById('manage-project-options-btn').addEventListener('click', () => {
-    window.location.href = `/project/options?projectID=${TPEN.screen.projectInQuery}`
-})
-
-document.getElementById('leave-project-btn').addEventListener('click', (e) => {
-    window.location.href = `/project/leave?projectID=${TPEN.screen.projectInQuery}`
-})
-
 async function render() {
     const isManageProjectPermission = await CheckPermissions.checkEditAccess('PROJECT')
     if(!isManageProjectPermission) {
         alert("You do not have permissions to use this page.")
         document.location.href = `/project?projectID=${TPEN.screen.projectInQuery}`
     }
     document.querySelector('tpen-project-details').setAttribute('tpen-project-id', TPEN.screen.projectInQuery)
-    document.getElementById("manage-custom-role-btn").addEventListener('click', async () => {
-        window.location.href = `/components/manage-role/index.html?projectID=${TPEN.screen.projectInQuery}`  
-    })
+
+    const manageCustomRoleBtn = document.getElementById("manage-custom-role-btn")
+    if (manageCustomRoleBtn) {
+        manageCustomRoleBtn.href = `/components/manage-role/index.html?projectID=${TPEN.screen.projectInQuery}`
+    }
 }

interfaces/project/index.html

@@ -72,7 +72,7 @@ <h2 slot="header">Project Details</h2>
                         </tpen-can>
                     </div>
                 </div>
-                <button id="leaveProject" slot="footer" type="button">LEAVE PROJECT</button>
+                <a id="leaveProject" slot="footer" href="#">LEAVE PROJECT</a>
             </tpen-card>
         </div>
     </tpen-page>
@@ -83,9 +83,9 @@ <h2 slot="header">Project Details</h2>
         const goParse = document.getElementById("goParse")
         const goTranscribe = document.getElementById("goTranscribe")
         const leaveProject = document.getElementById("leaveProject")
-        leaveProject.addEventListener('click', (e) => {
-            window.location.href = `/project/leave?projectID=${ev.detail._id}`
-        })
+        if (leaveProject) {
+            leaveProject.href = `/project/leave?projectID=${ev.detail._id}`
+        }
         if(goParse) goParse.setAttribute("href", `/annotator?projectID=${ev.detail._id}`)
         if(goTranscribe) goTranscribe.setAttribute("href", `/transcribe?projectID=${ev.detail._id}`)
     })

interfaces/project/quick-guide.html

@@ -78,7 +78,7 @@ <h2>Save and Start Transcribing :</h2>
                 </div>
             </div>
             <div class="bottom-panel">
-                <button class="get-started-button" onclick="window.location.href='/components/quick-guide/'">Get Started</button>
+                <a class="get-started-button" href="/components/quick-guide/">Get Started</a>
             </div>
         </section>
     </tpen-page>

manage/collaboration.html

@@ -5,10 +5,10 @@
        <span class="text">Share Publicly</span>
        <span class="btn-icon share"></span>
      </button> 
-      <button class="default-btn" id="modify-team-btn" >
+      <a class="default-btn" id="modify-team-btn" href="#">
        <span class="text">Modify Project Team</span>
        <span class="btn-icon team"></span>
-     </button> 
+     </a> 
 
  <div class="project-owner" id="project-owner">
   <p>

manage/index.js

@@ -47,12 +47,9 @@ function loadManageInterface(){
         const modifyTeamBtn = document.getElementById("modify-team-btn")
 
         if (modifyTeamBtn) {
-          modifyTeamBtn.addEventListener("click", () => {
-            const URLParams = new URLSearchParams(window.location.search)
-            const projectID = URLParams.get("projectID")
-            const url = `/project/manage/collaborators?projectID=${projectID}`
-            window.location.href = url
-          })
+          const URLParams = new URLSearchParams(window.location.search)
+          const projectID = URLParams.get("projectID")
+          modifyTeamBtn.href = `/project/manage/collaborators?projectID=${projectID}`
         } 
         const { projectData } = await getActiveProject()
         console.log(projectData)