move breakpoint icon functionality into c-recipe-li, upgrade code a bit for className consistency and replacing 'parentNode.parentNode' with this.queryselector

This commit is contained in:
Robin Scholtes 2023-08-15 12:41:33 +12:00
parent 5d876fb09a
commit 4947f809a9
6 changed files with 20 additions and 28 deletions

View file

@ -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);

View file

@ -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);

View file

@ -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");

View file

@ -301,7 +301,7 @@ input.toggle-string {
color: var(--disable-icon-selected-colour);
}
.breakpoint {
.breakpoint-icon {
color: var(--breakpoint-icon-colour);
}

View file

@ -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");

View file

@ -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++) {