From 65b058fd68002ec8340143158875808187713726 Mon Sep 17 00:00:00 2001 From: j264415 Date: Fri, 9 Feb 2024 17:25:52 +0000 Subject: [PATCH 01/19] adding tab index to operations panel --- src/web/HTMLCategory.mjs | 2 +- src/web/HTMLOperation.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/HTMLCategory.mjs b/src/web/HTMLCategory.mjs index 0414fd71..bb0581be 100755 --- a/src/web/HTMLCategory.mjs +++ b/src/web/HTMLCategory.mjs @@ -39,7 +39,7 @@ class HTMLCategory { */ toHtml() { const catName = "cat" + this.name.replace(/[\s/\-:_]/g, ""); - let html = `
+ let html = `
${this.name} diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs index ae61b58d..81ccd821 100755 --- a/src/web/HTMLOperation.mjs +++ b/src/web/HTMLOperation.mjs @@ -46,7 +46,7 @@ class HTMLOperation { * @returns {string} */ toStubHtml(removeIcon) { - let html = "
  • ${titleFromWikiLink(this.infoURL)}` : ""; From c2df7be908fac58a36885247416946ca8f379fab Mon Sep 17 00:00:00 2001 From: j264415 Date: Wed, 14 Feb 2024 15:32:06 +0000 Subject: [PATCH 02/19] add enter and spacebar functionality to open and close panels --- src/web/Manager.mjs | 1 + src/web/waiters/OperationsWaiter.mjs | 67 ++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index b02a7eee..9d5ab6be 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -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); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index dee0dd06..955dfc04 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -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. From 2bade1c37597b722a9042e5d353affd137e0f182 Mon Sep 17 00:00:00 2001 From: j264415 Date: Wed, 14 Feb 2024 15:33:37 +0000 Subject: [PATCH 03/19] remove unused imports --- src/web/waiters/OperationsWaiter.mjs | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 955dfc04..7e56dbfb 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -7,9 +7,6 @@ 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"; - /** * Waiter to handle events related to the operations. From 068811a6bf19e6576ae95e16c4ffd815714be549 Mon Sep 17 00:00:00 2001 From: j264415 Date: Wed, 14 Feb 2024 17:01:24 +0000 Subject: [PATCH 04/19] tidy up previous commit and added functionality to add operations to recipe --- src/web/Manager.mjs | 1 + src/web/waiters/OperationsWaiter.mjs | 56 ++++++++++------------------ 2 files changed, 21 insertions(+), 36 deletions(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 9d5ab6be..562a13fb 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -148,6 +148,7 @@ class Manager { 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)); + this.addDynamicListener(".op-list li.operation","keydown", this.ops.ddlEnter.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); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 7e56dbfb..2d119045 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -302,53 +302,37 @@ class OperationsWaiter { 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; + ev.target.childNodes[3].classList.add("show"); }else if(el.contains("show")){ - const remove = ev.target.childNodes[3].classList.remove("show"); - console.log("remove" , remove); - return remove; + ev.target.childNodes[3].classList.remove("show"); } } }; - // /** - // * 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) - // } + operationDblEnter(){ + let cat = document.querySelectorAll(".op-list li.operation"); + console.log("cat=" , cat); + for(let i = 0; i < cat.children.length; i++){ + cat.children[i].addEventListener("keydown", this.ddlEnter, false); + }; + } + /** + * Handler to add operators to recipe with keyboard. + * @param {Event} ev + */ + ddlEnter(ev){ + if(ev.ctrlKey && ev.key ==="Enter"){ + const li = ev.target + this.manager.recipe.addOperation(li.textContent); + } + } + /** * Handler for reset favourites click events. * Resets favourites to their defaults. From 1b877ca4825c0e829883da49d5657da41bd78610 Mon Sep 17 00:00:00 2001 From: j264415 Date: Wed, 14 Feb 2024 17:16:09 +0000 Subject: [PATCH 05/19] rewrite comments for handlers --- src/web/Manager.mjs | 2 +- src/web/waiters/OperationsWaiter.mjs | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 562a13fb..298a515f 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -148,7 +148,7 @@ class Manager { 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)); - this.addDynamicListener(".op-list li.operation","keydown", this.ops.ddlEnter.bind(this.ops)); + this.addDynamicListener(".op-list li.operation","keydown", this.ops.operationPopulateRecipe.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); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 2d119045..ac63bee2 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -284,7 +284,8 @@ class OperationsWaiter { } /** - * Handler for Enter/Space events. + * Handler for on key press events. + * Get the children of categories and add event listener to them. */ onKeyPress() { let cat = document.getElementById("categories"); @@ -295,8 +296,8 @@ class OperationsWaiter { } /** - * Handler for Enter/Space events. - * When "Enter" or "Space" if pressed it will mimick the click function and open the operations panels . + * Handler for keyboard enter/space events. + * Uses "Enter" or "Space" to mimick the click function and open the operations panels . * @param {Event} ev */ EventHandler(ev){ @@ -313,20 +314,25 @@ class OperationsWaiter { }; - operationDblEnter(){ + /** + * Handler to populate recipe. + * Get the children of op-list and add event listener to them. + */ + operationPopulateRecipe(){ let cat = document.querySelectorAll(".op-list li.operation"); console.log("cat=" , cat); for(let i = 0; i < cat.children.length; i++){ - cat.children[i].addEventListener("keydown", this.ddlEnter, false); + cat.children[i].addEventListener("keydown", this.keysPopulateRecipe, false); }; } /** * Handler to add operators to recipe with keyboard. + * Uses keyboard shortcut "CTRl + Enter" to mimick operationDblClick handler function * @param {Event} ev */ - ddlEnter(ev){ + keysPopulateRecipe(ev){ if(ev.ctrlKey && ev.key ==="Enter"){ const li = ev.target this.manager.recipe.addOperation(li.textContent); From ab816b62ece40a5bd56dfac4f8925cc1f8580d38 Mon Sep 17 00:00:00 2001 From: j264415 Date: Wed, 14 Feb 2024 17:29:43 +0000 Subject: [PATCH 06/19] made small change --- src/web/Manager.mjs | 2 +- src/web/waiters/OperationsWaiter.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 298a515f..11347016 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -148,7 +148,7 @@ class Manager { 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)); - this.addDynamicListener(".op-list li.operation","keydown", this.ops.operationPopulateRecipe.bind(this.ops)); + this.addDynamicListener(".op-list li.operation","keydown", this.ops.keysPopulateRecipe.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); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index ac63bee2..fd3de87a 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -333,7 +333,7 @@ class OperationsWaiter { * @param {Event} ev */ keysPopulateRecipe(ev){ - if(ev.ctrlKey && ev.key ==="Enter"){ + if(ev.ctrlKey && ev.key === "Enter"){ const li = ev.target this.manager.recipe.addOperation(li.textContent); } From 80c1c6d3ed1e5b599c492d09914d3fda0fdcec8f Mon Sep 17 00:00:00 2001 From: j264415 Date: Thu, 15 Feb 2024 12:34:34 +0000 Subject: [PATCH 07/19] fixed classList error --- src/web/waiters/OperationsWaiter.mjs | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index fd3de87a..5cad4d26 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -303,13 +303,18 @@ class OperationsWaiter { EventHandler(ev){ if(ev.key === "Enter" || ev.key === "Space" || ev.key === " " ){ ev.preventDefault(); - const el = ev.target.childNodes[3].classList; - if(!el.contains("show")){ - ev.target.childNodes[3].classList.add("show"); - }else if(el.contains("show")){ - ev.target.childNodes[3].classList.remove("show"); + for(let i = 0; i < ev.target.childNodes.length; i++){ + let targetChild = ev.target.childNodes[i].classList; + if(targetChild !== undefined && targetChild.value.includes("panel-collapse collapse")){ + if(!targetChild.contains("show")){ + targetChild.add("show"); + }else if(targetChild.contains("show")){ + targetChild.remove("show"); + } + + }; + } - } }; From 3abd952f4f8fcc84f8fad75a2028d843134c8644 Mon Sep 17 00:00:00 2001 From: j264415 Date: Thu, 15 Feb 2024 12:45:46 +0000 Subject: [PATCH 08/19] changed function names for easy readability --- src/web/Manager.mjs | 2 +- src/web/waiters/OperationsWaiter.mjs | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 11347016..e4b797cd 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -148,7 +148,7 @@ class Manager { 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)); - this.addDynamicListener(".op-list li.operation","keydown", this.ops.keysPopulateRecipe.bind(this.ops)); + this.addDynamicListener(".op-list li.operation","keydown", this.ops.keyboardPopulateRecipe.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); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 5cad4d26..f2aa5a1e 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -291,7 +291,7 @@ class OperationsWaiter { 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); + cat.children[i].addEventListener("keydown", this.keyboardEventHandler, false); }; } @@ -300,7 +300,7 @@ class OperationsWaiter { * Uses "Enter" or "Space" to mimick the click function and open the operations panels . * @param {Event} ev */ - EventHandler(ev){ + keyboardEventHandler(ev){ if(ev.key === "Enter" || ev.key === "Space" || ev.key === " " ){ ev.preventDefault(); for(let i = 0; i < ev.target.childNodes.length; i++){ @@ -327,7 +327,7 @@ class OperationsWaiter { let cat = document.querySelectorAll(".op-list li.operation"); console.log("cat=" , cat); for(let i = 0; i < cat.children.length; i++){ - cat.children[i].addEventListener("keydown", this.keysPopulateRecipe, false); + cat.children[i].addEventListener("keydown", this.keyboardPopulateRecipe, false); }; } @@ -337,7 +337,7 @@ class OperationsWaiter { * Uses keyboard shortcut "CTRl + Enter" to mimick operationDblClick handler function * @param {Event} ev */ - keysPopulateRecipe(ev){ + keyboardPopulateRecipe(ev){ if(ev.ctrlKey && ev.key === "Enter"){ const li = ev.target this.manager.recipe.addOperation(li.textContent); From 55fbe283a763d731276c10f077fffbe4d0aee53c Mon Sep 17 00:00:00 2001 From: j264415 Date: Mon, 19 Feb 2024 11:09:52 +0000 Subject: [PATCH 09/19] removed console log --- src/web/waiters/OperationsWaiter.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index f2aa5a1e..c31aea49 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -289,7 +289,6 @@ class OperationsWaiter { */ 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.keyboardEventHandler, false); }; From 5d6544ed6a574adffaec29edac6f1a95ccd4e09c Mon Sep 17 00:00:00 2001 From: j264415 Date: Mon, 19 Feb 2024 13:22:00 +0000 Subject: [PATCH 10/19] spelling change and removed console log --- src/web/waiters/OperationsWaiter.mjs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index c31aea49..151c6cea 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -296,7 +296,7 @@ class OperationsWaiter { /** * Handler for keyboard enter/space events. - * Uses "Enter" or "Space" to mimick the click function and open the operations panels . + * Uses "Enter" or "Space" to mimic the click function and open the operations panels . * @param {Event} ev */ keyboardEventHandler(ev){ @@ -324,7 +324,6 @@ class OperationsWaiter { */ operationPopulateRecipe(){ let cat = document.querySelectorAll(".op-list li.operation"); - console.log("cat=" , cat); for(let i = 0; i < cat.children.length; i++){ cat.children[i].addEventListener("keydown", this.keyboardPopulateRecipe, false); }; @@ -333,7 +332,7 @@ class OperationsWaiter { /** * Handler to add operators to recipe with keyboard. - * Uses keyboard shortcut "CTRl + Enter" to mimick operationDblClick handler function + * Uses keyboard shortcut "CTRl + Enter" to mimic operationDblClick handler function * @param {Event} ev */ keyboardPopulateRecipe(ev){ From 6b1086ddb9124f32fdf1a87fa9bbecaa9ee16d6f Mon Sep 17 00:00:00 2001 From: j264415 Date: Mon, 19 Feb 2024 13:38:02 +0000 Subject: [PATCH 11/19] changes made --- src/web/waiters/OperationsWaiter.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 151c6cea..2e8fcd87 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -288,8 +288,8 @@ class OperationsWaiter { * Get the children of categories and add event listener to them. */ onKeyPress() { - let cat = document.getElementById("categories"); - for(let i = 0; i < cat.children.length; i++){ + const cat = document.getElementById("categories"); + for (let i = 0; i < cat.children.length; i++){ cat.children[i].addEventListener("keydown", this.keyboardEventHandler, false); }; } From 959aa709c356e2f4faf4d9c0e9ec32c621dd9426 Mon Sep 17 00:00:00 2001 From: j264415 Date: Mon, 19 Feb 2024 14:08:00 +0000 Subject: [PATCH 12/19] fixed linting errors --- src/web/Manager.mjs | 2 +- src/web/waiters/OperationsWaiter.mjs | 64 ++++++++++++++-------------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index e4b797cd..c3d981c4 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -148,7 +148,7 @@ class Manager { 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)); - this.addDynamicListener(".op-list li.operation","keydown", this.ops.keyboardPopulateRecipe.bind(this.ops)); + this.addDynamicListener(".op-list li.operation", "keydown", this.ops.keyboardPopulateRecipe.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); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 2e8fcd87..cc76ec7d 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -283,50 +283,50 @@ class OperationsWaiter { this.manager.recipe.initialiseOperationDragNDrop(); } - /** - * Handler for on key press events. - * Get the children of categories and add event listener to them. - */ + /** + * Handler for on key press events. + * Get the children of categories and add event listener to them. + */ onKeyPress() { const cat = document.getElementById("categories"); - for (let i = 0; i < cat.children.length; i++){ + for (let i = 0; i < cat.children.length; i++) { cat.children[i].addEventListener("keydown", this.keyboardEventHandler, false); - }; + } } - /** - * Handler for keyboard enter/space events. - * Uses "Enter" or "Space" to mimic the click function and open the operations panels . - * @param {Event} ev - */ - keyboardEventHandler(ev){ - if(ev.key === "Enter" || ev.key === "Space" || ev.key === " " ){ + /** + * Handler for keyboard enter/space events. + * Uses "Enter" or "Space" to mimic the click function and open the operations panels . + * @param {Event} ev + */ + keyboardEventHandler(ev) { + if (ev.key === "Enter" || ev.key === "Space" || ev.key === " ") { ev.preventDefault(); - for(let i = 0; i < ev.target.childNodes.length; i++){ - let targetChild = ev.target.childNodes[i].classList; - if(targetChild !== undefined && targetChild.value.includes("panel-collapse collapse")){ - if(!targetChild.contains("show")){ + for (let i = 0; i < ev.target.childNodes.length; i++) { + const targetChild = ev.target.childNodes[i].classList; + if (targetChild !== undefined && targetChild.value.includes("panel-collapse collapse")) { + if (!targetChild.contains("show")) { targetChild.add("show"); - }else if(targetChild.contains("show")){ + } else if (targetChild.contains("show")) { targetChild.remove("show"); } - - }; - + + } + } } - }; + } /** - * Handler to populate recipe. - * Get the children of op-list and add event listener to them. + * Handler to populate recipe. + * Get the children of op-list and add event listener to them. */ - operationPopulateRecipe(){ - let cat = document.querySelectorAll(".op-list li.operation"); - for(let i = 0; i < cat.children.length; i++){ + operationPopulateRecipe() { + const cat = document.querySelectorAll(".op-list li.operation"); + for (let i = 0; i < cat.children.length; i++) { cat.children[i].addEventListener("keydown", this.keyboardPopulateRecipe, false); - }; + } } @@ -335,13 +335,13 @@ class OperationsWaiter { * Uses keyboard shortcut "CTRl + Enter" to mimic operationDblClick handler function * @param {Event} ev */ - keyboardPopulateRecipe(ev){ - if(ev.ctrlKey && ev.key === "Enter"){ - const li = ev.target + keyboardPopulateRecipe(ev) { + if (ev.ctrlKey && ev.key === "Enter") { + const li = ev.target; this.manager.recipe.addOperation(li.textContent); } } - + /** * Handler for reset favourites click events. * Resets favourites to their defaults. From c38bb8b454cb0700611e79c9835f50bf0eec335e Mon Sep 17 00:00:00 2001 From: j264415 Date: Thu, 22 Feb 2024 16:55:37 +0000 Subject: [PATCH 13/19] added functionality to open edit favourites with keyboard --- src/web/Manager.mjs | 1 + src/web/waiters/OperationsWaiter.mjs | 63 ++++++++++++++++++++++++---- 2 files changed, 56 insertions(+), 8 deletions(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index c3d981c4..f8d84170 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -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("edit-favourites").addEventListener("keydown", this.ops.editFavouritesKeyPress.bind(this.ops)); document.getElementById("categories").addEventListener("keydown", this.ops.onKeyPress.bind(this.ops)); this.addDynamicListener(".op-list li.operation", "keydown", this.ops.keyboardPopulateRecipe.bind(this.ops)); document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops)); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index cc76ec7d..aec7043c 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -283,6 +283,61 @@ class OperationsWaiter { this.manager.recipe.initialiseOperationDragNDrop(); } + /** + * Handler for reset favourites click events. + * Resets favourites to their defaults. + */ + resetFavouritesClick() { + this.app.resetFavourites(); + } + + /** + * Handler that allows users to open favourite modal by "Enter/Space". + * This codes mimics editFavouritesClick event handler. + * @param {Event} ev + */ + editFavouritesKeyPress(ev) { + if (ev.key === "Enter" || ev.key === "Space" || ev.key === " ") { + ev.preventDefault(); + ev.stopPropagation(); + const favCat = this.app.categories.filter(function (c) { + return c.name === "Favourites"; + })[0]; + + let html = ""; + for (let i = 0; i < favCat.ops.length; i++) { + const opName = favCat.ops[i]; + const operation = new HTMLOperation(opName, this.app.operations[opName], this.app, this.manager); + html += operation.toStubHtml(true); + } + + const editFavouritesList = document.getElementById("edit-favourites-list"); + editFavouritesList.innerHTML = html; + this.removeIntent = false; + + const editableList = Sortable.create(editFavouritesList, { + filter: ".remove-icon", + onFilter: function (evt) { + const el = editableList.closest(evt.item); + if (el && el.parentNode) { + $(el).popover("dispose"); + el.parentNode.removeChild(el); + } + }, + onEnd: function (evt) { + if (this.removeIntent) { + $(evt.item).popover("dispose"); + evt.item.remove(); + } + }.bind(this), + }); + + $("#edit-favourites-list [data-toggle=popover]").popover(); + $("#favourites-modal").modal(); + + } + } + /** * Handler for on key press events. * Get the children of categories and add event listener to them. @@ -342,14 +397,6 @@ class OperationsWaiter { } } - /** - * Handler for reset favourites click events. - * Resets favourites to their defaults. - */ - resetFavouritesClick() { - this.app.resetFavourites(); - } - } export default OperationsWaiter; 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 14/19] 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 15/19] 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 @@
    • To add: drag the operation over the favourites category and drop it
      • -
    • To reorder: drag up and down in the list below
      • +
    • To reorder: drag up and down in the list below or press Ctrl + Up/Down Arrow
    • To remove: hit the delete button or drag out of the list below

    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 16/19] 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 17/19] 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 18/19] 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 @@
    • To add: drag the operation over the favourites category and drop it
      • -
    • To reorder: drag up and down in the list below or press Ctrl + Up/Down Arrow
      • +
    • To reorder: drag up and down in the list below or focus on operation and press Ctrl + Up/Down Arrow to reorder using keyboard
    • To remove: hit the delete button or drag out of the list below

    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; From 03f5dc62ffe6907e081fb35e9744a888595e1921 Mon Sep 17 00:00:00 2001 From: j264415 Date: Fri, 1 Mar 2024 12:05:27 +0000 Subject: [PATCH 19/19] implemented edit favourites function to work with keyboard navigation --- src/web/waiters/OperationsWaiter.mjs | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index abbfb74f..18384688 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -379,9 +379,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) {