mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-03 13:09:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

reorder fav list with keyboard

Browse source
This commit is contained in:
e218736 2024-02-26 15:10:18 +00:00
parent 61d587a4a5
commit 213d834e74
2 changed files with 72 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/web/HTMLOperation.mjs
View file

@ -52,14 +52,14 @@ class HTMLOperation {
const infoLink = this.infoURL ? `<hr>${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 += "<i class='material-icons remove-icon op-icon'>delete</i>";
html += "<i class='material-icons remove-icon op-icon' tabindex='0'>delete</i>";
}
html += "</li>";

70
src/web/waiters/OperationsWaiter.mjs
View file

@ -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.