From 4947f809a9b21869d5181298eaccb1af62ccd5a5 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Tue, 15 Aug 2023 12:41:33 +1200 Subject: [PATCH] move breakpoint icon functionality into c-recipe-li, upgrade code a bit for className consistency and replacing 'parentNode.parentNode' with this.queryselector --- src/web/App.mjs | 2 +- src/web/Manager.mjs | 1 - src/web/components/c-recipe-li.mjs | 17 ++++++++++++- src/web/stylesheets/components/_operation.css | 2 +- src/web/waiters/BindingsWaiter.mjs | 2 +- src/web/waiters/RecipeWaiter.mjs | 24 +------------------ 6 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 087da2bf..6a49f9f4 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -627,7 +627,7 @@ class App { item.querySelector(".disable-icon").click(); } if (recipeConfig[i].breakpoint) { - item.querySelector(".breakpoint").click(); + item.querySelector(".breakpoint-icon").click(); } this.manager.recipe.triggerArgEvents(item); diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 675ba0f6..7c4e30c9 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -153,7 +153,6 @@ class Manager { // Recipe this.addDynamicListener(".arg:not(select)", "input", this.recipe.ingChange, this.recipe); this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe); - this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe); this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe); this.addDynamicListener("textarea.arg", "dragover", this.recipe.textArgDragover, this.recipe); this.addDynamicListener("textarea.arg", "dragleave", this.recipe.textArgDragLeave, this.recipe); diff --git a/src/web/components/c-recipe-li.mjs b/src/web/components/c-recipe-li.mjs index 835584f0..78c69bf5 100644 --- a/src/web/components/c-recipe-li.mjs +++ b/src/web/components/c-recipe-li.mjs @@ -50,7 +50,9 @@ export class CRecipeLi extends HTMLElement { */ handleClick(e) { const disableIcon = this.querySelector("i.disable-icon"); + const breakpointIcon = this.querySelector("i.breakpoint-icon"); + // handle click on 'disable-icon' if (e.target === disableIcon) { if (disableIcon.getAttribute("disabled") === "false") { disableIcon.setAttribute("disabled", "true"); @@ -65,6 +67,19 @@ export class CRecipeLi extends HTMLElement { this.app.progress = 0; window.dispatchEvent(this.app.manager.statechange); } + + // handle click on 'breakpoint-icon' + if (e.target === breakpointIcon) { + if (breakpointIcon.getAttribute("break") === "false") { + breakpointIcon.setAttribute("break", "true"); + breakpointIcon.classList.add("breakpoint-selected"); + } else { + breakpointIcon.setAttribute("break", "false"); + breakpointIcon.classList.remove("breakpoint-selected"); + } + + window.dispatchEvent(this.app.manager.statechange); + } } /** @@ -132,7 +147,7 @@ export class CRecipeLi extends HTMLElement { const breakPointIcon = document.createElement("i"); breakPointIcon.classList.add("material-icons"); - breakPointIcon.classList.add("breakpoint"); + breakPointIcon.classList.add("breakpoint-icon"); breakPointIcon.setAttribute("title", "Set breakpoint"); breakPointIcon.setAttribute("break", "false"); breakPointIcon.setAttribute("data-help-title", "Setting breakpoints"); diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index 2cc8f5b7..b4b5e073 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -301,7 +301,7 @@ input.toggle-string { color: var(--disable-icon-selected-colour); } -.breakpoint { +.breakpoint-icon { color: var(--breakpoint-icon-colour); } diff --git a/src/web/waiters/BindingsWaiter.mjs b/src/web/waiters/BindingsWaiter.mjs index b8951c41..5403acfb 100755 --- a/src/web/waiters/BindingsWaiter.mjs +++ b/src/web/waiters/BindingsWaiter.mjs @@ -64,7 +64,7 @@ class BindingsWaiter { case "KeyB": // Set breakpoint e.preventDefault(); try { - elem = document.activeElement.closest(".operation").querySelectorAll(".breakpoint")[0]; + elem = document.activeElement.closest(".operation").querySelectorAll(".breakpoint-icon")[0]; if (elem.getAttribute("break") === "false") { elem.setAttribute("break", "true"); // add break point if not already enabled elem.classList.add("breakpoint-selected"); diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs index 99fb6ece..a062b01d 100755 --- a/src/web/waiters/RecipeWaiter.mjs +++ b/src/web/waiters/RecipeWaiter.mjs @@ -161,28 +161,6 @@ class RecipeWaiter { } - /** - * Handler for breakpoint click events. - * Updates the icon status. - * - * @fires Manager#statechange - * @param {Event} e - */ - breakpointClick(e) { - const bp = e.target; - - if (bp.getAttribute("break") === "false") { - bp.setAttribute("break", "true"); - bp.classList.add("breakpoint-selected"); - } else { - bp.setAttribute("break", "false"); - bp.classList.remove("breakpoint-selected"); - } - - window.dispatchEvent(this.manager.statechange); - } - - /** * Generates a configuration object to represent the current recipe. * @@ -196,7 +174,7 @@ class RecipeWaiter { for (let i = 0; i < operations.length; i++) { ingredients = []; disabled = operations[i].querySelector(".disable-icon"); - bp = operations[i].querySelector(".breakpoint"); + bp = operations[i].querySelector(".breakpoint-icon"); ingList = operations[i].querySelectorAll(".arg"); for (let j = 0; j < ingList.length; j++) {