From 213d834e74f870b223fb76ea0183de0c45702adc Mon Sep 17 00:00:00 2001 From: e218736 <147728997+e218736@users.noreply.github.com> Date: Mon, 26 Feb 2024 15:10:18 +0000 Subject: [PATCH 1/5] reorder fav list with keyboard --- src/web/HTMLOperation.mjs | 4 +- src/web/waiters/OperationsWaiter.mjs | 70 ++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs index ae61b58d..7c59b67a 100755 --- a/src/web/HTMLOperation.mjs +++ b/src/web/HTMLOperation.mjs @@ -52,14 +52,14 @@ class HTMLOperation { const infoLink = this.infoURL ? `
${titleFromWikiLink(this.infoURL)}` : ""; html += ` data-container='body' data-toggle='popover' data-placement='right' - data-content="${this.description}${infoLink}" data-html='true' data-trigger='hover' + data-content="${this.description}${infoLink}" data-html='true' data-trigger='hover focus' data-boundary='viewport'`; } html += ">" + this.name; if (removeIcon) { - html += "delete"; + html += "delete"; } html += ""; diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index dee0dd06..b232e3c0 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -237,9 +237,16 @@ class OperationsWaiter { } const editFavouritesList = document.getElementById("edit-favourites-list"); + const editFavouritesListElements = editFavouritesList.getElementsByTagName('li'); editFavouritesList.innerHTML = html; this.removeIntent = false; + for (let i = 0; i < editFavouritesListElements.length; i++) { + editFavouritesListElements[i].setAttribute("tabindex", "0"); + editFavouritesListElements[i].addEventListener("keydown", this.ArrowNavFavourites.bind(this), false) + editFavouritesListElements[i].firstElementChild.addEventListener("keydown", this.deleteFavourite.bind(this), false) + } + const editableList = Sortable.create(editFavouritesList, { filter: ".remove-icon", onFilter: function (evt) { @@ -270,6 +277,69 @@ class OperationsWaiter { } + /** + * Handler for navigation key press events. + * Navigates through the favourites list and corresponding delete buttons. + * Move favourites elements up and down with Ctrl + Arrow keys to imite drag and drop mouse functionality. + */ + ArrowNavFavourites(event) { + const currentElement = event.target; + const nextElement = currentElement.nextElementSibling; + const prevElement = currentElement.previousElementSibling; + const favouritesList = currentElement.parentNode; + + event.preventDefault(); + event.stopPropagation(); + if (event.key === "ArrowDown" && !event.ctrlKey) { + if (nextElement === null) { + currentElement.parentElement.firstElementChild.focus(); + } else { + nextElement.focus(); + } + } else if (event.key === "ArrowUp" && !event.ctrlKey) { + if (prevElement === null) { + currentElement.parentElement.lastElementChild.focus(); + } else { + prevElement.focus(); + } + } else if (event.key === "Tab") { + currentElement.parentElement.closest(".modal-body").nextElementSibling.getElementsByTagName("Button")[0].focus(); + } else if (event.key === "ArrowRight" ) { + if (currentElement.firstElementChild !== null) { + currentElement.firstElementChild.focus(); + } else { + return + } + } else if (event.key === "ArrowLeft" && (currentElement.classList.contains("remove-icon"))) { + currentElement.parentElement.focus(); + } else if (event.ctrlKey && event.key === "ArrowDown") { + + if (nextElement === null) { + favouritesList.insertBefore(currentElement, currentElement.parentElement.firstElementChild) + } else { + favouritesList.insertBefore(currentElement, nextElement.nextElementSibling) + } + currentElement.focus(); + } else if (event.ctrlKey && event.key === "ArrowUp") { + favouritesList.insertBefore(currentElement, prevElement) + currentElement.focus(); +} +} + + /** + * Handler for save favourites click events. + * Saves the selected favourites and reloads them. + */ + deleteFavourite(event) { + if (event.key === "Enter") { + const el = event.target + if (el && el.parentNode) { + el.parentNode.remove(); + } + } +} + + /** * Handler for save favourites click events. * Saves the selected favourites and reloads them. From 69c23dea8a670aaa8166484675701c03fd6368ca Mon Sep 17 00:00:00 2001 From: e218736 <147728997+e218736@users.noreply.github.com> Date: Mon, 26 Feb 2024 17:02:23 +0000 Subject: [PATCH 2/5] updae fav dialog reorder instructions --- src/web/html/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web/html/index.html b/src/web/html/index.html index 5c3c3263..af9eb4c1 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -536,7 +536,7 @@

From 0d47aa6886f0125855fd094d2ebc3550c14abb9e Mon Sep 17 00:00:00 2001 From: e218736 <147728997+e218736@users.noreply.github.com> Date: Mon, 26 Feb 2024 17:48:22 +0000 Subject: [PATCH 3/5] formatting --- src/web/waiters/OperationsWaiter.mjs | 95 ++++++++++++++-------------- 1 file changed, 46 insertions(+), 49 deletions(-) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index b232e3c0..026f5192 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -237,14 +237,14 @@ class OperationsWaiter { } const editFavouritesList = document.getElementById("edit-favourites-list"); - const editFavouritesListElements = editFavouritesList.getElementsByTagName('li'); + const editFavouritesListElements = editFavouritesList.getElementsByTagName("li"); editFavouritesList.innerHTML = html; this.removeIntent = false; for (let i = 0; i < editFavouritesListElements.length; i++) { editFavouritesListElements[i].setAttribute("tabindex", "0"); - editFavouritesListElements[i].addEventListener("keydown", this.ArrowNavFavourites.bind(this), false) - editFavouritesListElements[i].firstElementChild.addEventListener("keydown", this.deleteFavourite.bind(this), false) + editFavouritesListElements[i].addEventListener("keydown", this.ArrowNavFavourites.bind(this), false); + editFavouritesListElements[i].firstElementChild.addEventListener("keydown", this.deleteFavourite.bind(this), false); } const editableList = Sortable.create(editFavouritesList, { @@ -280,51 +280,48 @@ class OperationsWaiter { /** * Handler for navigation key press events. * Navigates through the favourites list and corresponding delete buttons. - * Move favourites elements up and down with Ctrl + Arrow keys to imite drag and drop mouse functionality. + * Move favourites elements up and down with Ctrl + Arrow keys to imite drag and drop mouse functionality. */ ArrowNavFavourites(event) { - const currentElement = event.target; - const nextElement = currentElement.nextElementSibling; - const prevElement = currentElement.previousElementSibling; - const favouritesList = currentElement.parentNode; + const currentElement = event.target; + const nextElement = currentElement.nextElementSibling; + const prevElement = currentElement.previousElementSibling; + const favouritesList = currentElement.parentNode; - event.preventDefault(); - event.stopPropagation(); - if (event.key === "ArrowDown" && !event.ctrlKey) { - if (nextElement === null) { - currentElement.parentElement.firstElementChild.focus(); - } else { - nextElement.focus(); - } - } else if (event.key === "ArrowUp" && !event.ctrlKey) { - if (prevElement === null) { - currentElement.parentElement.lastElementChild.focus(); - } else { - prevElement.focus(); - } - } else if (event.key === "Tab") { - currentElement.parentElement.closest(".modal-body").nextElementSibling.getElementsByTagName("Button")[0].focus(); - } else if (event.key === "ArrowRight" ) { - if (currentElement.firstElementChild !== null) { - currentElement.firstElementChild.focus(); - } else { - return - } - } else if (event.key === "ArrowLeft" && (currentElement.classList.contains("remove-icon"))) { - currentElement.parentElement.focus(); - } else if (event.ctrlKey && event.key === "ArrowDown") { - - if (nextElement === null) { - favouritesList.insertBefore(currentElement, currentElement.parentElement.firstElementChild) - } else { - favouritesList.insertBefore(currentElement, nextElement.nextElementSibling) + event.preventDefault(); + event.stopPropagation(); + if (event.key === "ArrowDown" && !event.ctrlKey) { + if (nextElement === null) { + currentElement.parentElement.firstElementChild.focus(); + } else { + nextElement.focus(); } - currentElement.focus(); - } else if (event.ctrlKey && event.key === "ArrowUp") { - favouritesList.insertBefore(currentElement, prevElement) - currentElement.focus(); -} -} + } else if (event.key === "ArrowUp" && !event.ctrlKey) { + if (prevElement === null) { + currentElement.parentElement.lastElementChild.focus(); + } else { + prevElement.focus(); + } + } else if (event.key === "Tab") { + currentElement.parentElement.closest(".modal-body").nextElementSibling.getElementsByTagName("Button")[0].focus(); + } else if (event.key === "ArrowRight") { + if (currentElement.firstElementChild !== null) { + currentElement.firstElementChild.focus(); + } + } else if (event.key === "ArrowLeft" && (currentElement.classList.contains("remove-icon"))) { + currentElement.parentElement.focus(); + } else if (event.ctrlKey && event.key === "ArrowDown") { + if (nextElement === null) { + favouritesList.insertBefore(currentElement, currentElement.parentElement.firstElementChild); + } else { + favouritesList.insertBefore(currentElement, nextElement.nextElementSibling); + } + currentElement.focus(); + } else if (event.ctrlKey && event.key === "ArrowUp") { + favouritesList.insertBefore(currentElement, prevElement); + currentElement.focus(); + } + } /** * Handler for save favourites click events. @@ -332,12 +329,12 @@ class OperationsWaiter { */ deleteFavourite(event) { if (event.key === "Enter") { - const el = event.target - if (el && el.parentNode) { - el.parentNode.remove(); + const el = event.target; + if (el && el.parentNode) { + el.parentNode.remove(); + } + } } - } -} /** From 3dc4b7b761482ac044d41ae4cb75c19c25f501a3 Mon Sep 17 00:00:00 2001 From: e218736 <147728997+e218736@users.noreply.github.com> Date: Mon, 26 Feb 2024 17:54:10 +0000 Subject: [PATCH 4/5] delete on space --- src/web/waiters/OperationsWaiter.mjs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 026f5192..5ca6c2e4 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -324,11 +324,11 @@ class OperationsWaiter { } /** - * Handler for save favourites click events. - * Saves the selected favourites and reloads them. + * Handler for delete favourites keydown events. + * delete the selected favourite from the list. */ deleteFavourite(event) { - if (event.key === "Enter") { + if (event.key === "Enter" || event.key === " ") { const el = event.target; if (el && el.parentNode) { el.parentNode.remove(); From 39bc09ff31d36e0022f8d8d010536afc9d053424 Mon Sep 17 00:00:00 2001 From: e218736 <147728997+e218736@users.noreply.github.com> Date: Tue, 27 Feb 2024 12:58:32 +0000 Subject: [PATCH 5/5] more detail to reorder instructions --- src/web/html/index.html | 2 +- src/web/waiters/OperationsWaiter.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/html/index.html b/src/web/html/index.html index af9eb4c1..4f90daad 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -536,7 +536,7 @@

diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 5ca6c2e4..0b49c28a 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -280,7 +280,7 @@ class OperationsWaiter { /** * Handler for navigation key press events. * Navigates through the favourites list and corresponding delete buttons. - * Move favourites elements up and down with Ctrl + Arrow keys to imite drag and drop mouse functionality. + * Move favourites elements up and down with Ctrl + Arrow keys to imitate drag and drop mouse functionality. */ ArrowNavFavourites(event) { const currentElement = event.target;