diff --git a/src/web/components/c-category-li.mjs b/src/web/components/c-category-li.mjs index 24186492..6b01572f 100644 --- a/src/web/components/c-category-li.mjs +++ b/src/web/components/c-category-li.mjs @@ -31,16 +31,21 @@ export class CCategoryLi extends HTMLElement { this.addEventListener("click", this.handleClick.bind(this)); } + /** + * Remove listeners on disconnectedCallback + */ + disconnectedCallback() { + this.removeEventListener("click", this.handleClick.bind(this)); + } + /** * Handle click * * @param {Event} e */ handleClick(e) { - // todo some event (target ) bs here - if (e.target === this.querySelector("button")) { - // todo back to this "hitbox" issue w the icon inside the button - console.log(e.target); + if (e.target === this.querySelector("button") || e.target === this.querySelector("button > i")) { + e.stopPropagation(); // stop the event from propagating to the collapsable panel this.app.manager.ops.editFavouritesClick(e); } } diff --git a/src/web/components/c-operation-li.mjs b/src/web/components/c-operation-li.mjs index fcc33171..035989d3 100644 --- a/src/web/components/c-operation-li.mjs +++ b/src/web/components/c-operation-li.mjs @@ -31,7 +31,13 @@ export class COperationLi extends HTMLElement { this.addEventListener('dblclick', this.handleDoubleClick.bind(this)); } - // todo: dont think I need config separately, just use this.app.operations[name].xx? + /** + * Remove listeners on disconnectedCallback + */ + disconnectedCallback() { + this.removeEventListener("click", this.handleClick.bind(this)); + this.removeEventListener("dblclick", this.handleDoubleClick.bind(this)); + } /** * @fires OperationsWaiter#operationDblclick on double click @@ -52,6 +58,9 @@ export class COperationLi extends HTMLElement { this.app.addFavourite(this.name); this.updateFavourite(true); } + if (e.target === this.querySelector("i.remove-icon")) { + this.remove(); + } } /** @@ -168,6 +177,9 @@ export class COperationLi extends HTMLElement { return icon; } + /** + * Update favourite icon for this list item and add 'favourite' class + */ updateFavourite(isFavourite) { if (isFavourite) { this.querySelector("li").classList.add("favourite"); diff --git a/src/web/components/c-operation-list.mjs b/src/web/components/c-operation-list.mjs index e0ad33c9..0f39defc 100644 --- a/src/web/components/c-operation-list.mjs +++ b/src/web/components/c-operation-list.mjs @@ -18,6 +18,9 @@ export class COperationList extends HTMLElement { this.icon = icon; } + /** + * Build c-operation-list + */ build() { const ul = document.createElement("ul"); ul.classList.add("op-list");