diff --git a/src/js/popup.js b/src/js/popup.js index e1d434e..c159451 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -527,7 +527,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, { } }); - document.addEventListener("keydown", (e) => { + document.addEventListener("keydown", (e) => { const selectables = [...document.querySelectorAll("[tabindex='0'], [tabindex='-1']")]; const element = document.activeElement; const index = selectables.indexOf(element) || 0; @@ -618,10 +618,8 @@ Logic.registerPanel(P_CONTAINERS_LIST, { const DefaultText =document.getElementById("default-text"); const DefaultBox =document.getElementById("container-page-assigned"); currentContainer.innerText = identity.name; - if (currentContainer.innerText === "Default"){ - DefaultBox.style.display="none"; - DefaultText.style.display="none"; - currentContainer.style.display="none"; + if (identity.name === "Default"){ + document.getElementById("container-page-assigned-label").style.display = "none"; } currentContainer.setAttribute("data-identity-color", identity.color); } @@ -702,13 +700,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, { /* If no container is present disable the Edit Containers button */ const editContainer = document.querySelector("#edit-containers-link"); if (Logic.identities().length === 0) { - editContainer.classList.add("disable-edit-containers"); + editContainer.classList.add("disable-edit-containers"); } else { editContainer.classList.remove("disable-edit-containers"); } return Promise.resolve(); - }, + }, }); // P_CONTAINER_INFO: More info about a container. @@ -896,7 +894,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, { tr.querySelector(".container-name").textContent = identity.name; tr.querySelector(".edit-container").setAttribute("title", `Edit ${identity.name} container`); tr.querySelector(".remove-container").setAttribute("title", `Remove ${identity.name} container`); - + tr.setAttribute("tabindex","0"); Logic.addEnterHandler(tr, e => { if (e.target.matches(".edit-container-icon") || e.target.parentNode.matches(".edit-container-icon")) { @@ -906,14 +904,50 @@ Logic.registerPanel(P_CONTAINERS_EDIT, { } }); }); - + const list = document.querySelector("#edit-identities-list"); list.innerHTML = ""; list.appendChild(fragment); - + list.addEventListener("keydown", (e) => { + console.log("hi"); + const selectables = [...document.querySelectorAll("[tabindex='0'], [tabindex='-1']")]; + console.log(selectables[0].innerHTML); + const element = document.activeElement; + const index = selectables.indexOf(element) || 0; + function next() { + const nextElement = selectables[index + 1]; + if (nextElement) { + nextElement.focus(); + } + } + function previous() { + const previousElement = selectables[index - 1]; + if (previousElement) { + previousElement.focus(); + } + } + switch (e.keyCode) { + case 40: + next(); + break; + case 38: + previous(); + break; + default: + if ((e.keyCode >= 49 && e.keyCode <= 57) && + Logic._currentPanel === "containersEdit") { + const element = selectables[e.keyCode - 48]; + if (element) { + element.click(); + } + } + break; + } + }); return Promise.resolve(null); }, + }); // P_CONTAINER_EDIT: Editor for a container. diff --git a/src/popup.html b/src/popup.html index c3dc39a..db7d393 100644 --- a/src/popup.html +++ b/src/popup.html @@ -98,9 +98,9 @@

Current Tab

-