diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 13fd4de6..f04fd5eb 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -155,10 +155,7 @@ class Manager { this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe); this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe); this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe); - this.addDynamicListener("c-recipe-li li.operation", "dblclick", this.recipe.operationDblclick, this.recipe); - this.addDynamicListener("c-recipe-li li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe); this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe); - this.addDynamicListener("#rec-list", "operationremove", this.recipe.opRemove.bind(this.recipe)); this.addDynamicListener("textarea.arg", "dragover", this.recipe.textArgDragover, this.recipe); this.addDynamicListener("textarea.arg", "dragleave", this.recipe.textArgDragLeave, this.recipe); this.addDynamicListener("textarea.arg", "drop", this.recipe.textArgDrop, this.recipe); diff --git a/src/web/TODO.md b/src/web/TODO.md index fcccb93b..945672b1 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -4,6 +4,4 @@ operations: manual testing issues mobile: -- double tap on mobile recipe list sometimes really annoying -- same for grabbing items in rec-list. Especially 'magic' for whatever reason? And 'to Hexdump' - ( so looks like recipe list items with 3 'rows', title + 2 rows or args ) +- all ops with bootstrap checkboxes in recipe break ( due to the bootstrap checkbox func not being applied ). Need to replace / remove this diff --git a/src/web/components/c-recipe-li.mjs b/src/web/components/c-recipe-li.mjs index 0370bdf3..18f8981b 100644 --- a/src/web/components/c-recipe-li.mjs +++ b/src/web/components/c-recipe-li.mjs @@ -31,21 +31,24 @@ export class CRecipeLi extends HTMLElement { this.build(); + this.addEventListener("click", this.handleClick.bind(this)); this.addEventListener("dblclick", this.handleDoubleClick.bind(this)); } - cloneNode() { - const { app, name, args } = this; - return new CRecipeLi( app, name, args ); - } - /** * Remove listeners on disconnectedCallback */ disconnectedCallback() { + this.removeEventListener("click", this.handleClick.bind(this)); this.removeEventListener("dblclick", this.handleDoubleClick.bind(this)); } + /** + * Handle click + * @param {Event} e + */ + handleClick(e) {} + /** * Handle double click * @param {Event} e @@ -53,10 +56,22 @@ export class CRecipeLi extends HTMLElement { handleDoubleClick(e) { // do not remove if icons or form elements are double clicked if (e.target === this.querySelector("li") || e.target === this.querySelector("div.op-title")) { - this.remove(); + this.removeOperation(); } } + /** + * Remove this operation from the recipe list + */ + removeOperation(){ + this.remove(); + log.debug("Operation removed from recipe"); + window.dispatchEvent(this.app.manager.statechange); + + // @TODO: this func can be moved to c-operation-list + this.app.manager.ops.updateListItemsClasses("#rec-list", "selected"); + } + /** * Build the ingredient list item */ @@ -119,6 +134,16 @@ export class CRecipeLi extends HTMLElement { return div; } + + /** + * Override native cloneNode method so we can clone c-recipe-li properly + * with constructor arguments for sortable and cloneable lists. This function + * is needed for the drag and drop functionality of the Sortable lists + */ + cloneNode() { + const { app, name, args } = this; + return new CRecipeLi( app, name, args ); + } } customElements.define("c-recipe-li", CRecipeLi); diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs index 4ce90c9d..a6142d42 100755 --- a/src/web/waiters/RecipeWaiter.mjs +++ b/src/web/waiters/RecipeWaiter.mjs @@ -208,32 +208,6 @@ class RecipeWaiter { } - /** - * Handler for operation doubleclick events. - * Removes the operation from the recipe and auto bakes. - * - * @fires Manager#statechange - * @param {Event} e - */ - operationDblclick(e) { - e.target.remove(); - this.opRemove(e); - } - - - /** - * Handler for operation child doubleclick events. - * Removes the operation from the recipe. - * - * @fires Manager#statechange - * @param {Event} e - */ - operationChildDblclick(e) { - e.target.parentNode.remove(); - this.opRemove(e); - } - - /** * Generates a configuration object to represent the current recipe. * @@ -416,21 +390,6 @@ class RecipeWaiter { } - /** - * Handler for operationremove events. - * Updates 'selected' classes in #operations - * - * @listens Manager#operationremove - * @fires Manager#statechange - * @param {Event} e - */ - opRemove(e) { - log.debug("Operation removed from recipe"); - window.dispatchEvent(this.manager.statechange); - this.manager.ops.updateListItemsClasses("#rec-list", "selected"); - } - - /** * Handler for text argument dragover events. * Gives the user a visual cue to show that items can be dropped here.