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

add enter and spacebar functionality to open and close panels

Browse source
This commit is contained in:
j264415 2024-02-14 15:32:06 +00:00
parent 0458941100
commit c2df7be908
2 changed files with 68 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/web/Manager.mjs
View file

@ -147,6 +147,7 @@ class Manager {
this.addDynamicListener(".op-list li.operation", "dblclick", this.ops.operationDblclick, this.ops);
document.getElementById("edit-favourites").addEventListener("click", this.ops.editFavouritesClick.bind(this.ops));
document.getElementById("save-favourites").addEventListener("click", this.ops.saveFavouritesClick.bind(this.ops));
document.getElementById("categories").addEventListener("keydown", this.ops.onKeyPress.bind(this.ops));
document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops));
this.addDynamicListener(".op-list", "oplistcreate", this.ops.opListCreate, this.ops);
this.addDynamicListener("li.operation", "operationadd", this.recipe.opAdd, this.recipe);

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

@ -7,6 +7,8 @@
import HTMLOperation from "../HTMLOperation.mjs";
import Sortable from "sortablejs";
import {fuzzyMatch, calcMatchRanges} from "../../core/lib/FuzzyMatch.mjs";
import { curveBumpX } from "d3";
import { recognize } from "tesseract.js";
/**
@ -284,6 +286,71 @@ class OperationsWaiter {
this.manager.recipe.initialiseOperationDragNDrop();
}
/**
* Handler for Enter/Space events.
*/
onKeyPress() {
let cat = document.getElementById("categories");
console.log("cat=" , cat);
for(let i = 0; i < cat.children.length; i++){
cat.children[i].addEventListener("keydown", this.EventHandler, false);
};
}
/**
* Handler for Enter/Space events.
* When "Enter" or "Space" if pressed it will mimick the click function and open the operations panels .
* @param {Event} ev
*/
EventHandler(ev){
if(ev.key === "Enter" || ev.key === "Space" || ev.key === " " ){
ev.preventDefault();
console.log("Enter Pressed");
const el = ev.target.childNodes[3].classList;
console.log(el);
if(!el.contains("show")){
const add = ev.target.childNodes[3].classList.add("show");
console.log("add" , add);
return add;
}else if(el.contains("show")){
const remove = ev.target.childNodes[3].classList.remove("show");
console.log("remove" , remove);
return remove;
}
}
};
// /**
// * Handler for to hide panels with Enter/Space events.
// * When "Enter" or "Space" if pressed it will mimick the click function and close the operations panels .
// * @param {Event} ev
// * @param {Element} ele
// */
// closeEventHandler(ev, ele){
// if(ev.key === "Enter" || ev.key === "Space" || ev.key === " " ){
// ev.preventDefault();
// console.log("Enter Pressed");
// if(ele.contains(ev.target) && ev.timeStamp !== instantiatingEvent.timeStamp){
// hidePanelOperation(ele);
// }
// const cl = ev.target.childNodes[3].classList.remove("show");
// console.log(cl);
// }
// }
// /**
// * Hides the panels and remove the keydown listener from it.
// * @param {Element} ele
// */
// hidePanelOperation(ele){
// ele.classList.remove("show");
// document.removeEventListener("keydown", this.closeEventHandler, false)
// }
/**
* Handler for reset favourites click events.