mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-08 15:25:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

use mutation observer to observe fav class and update its icon accordingly any time mutation is observed

Browse source
This commit is contained in:
Robin Scholtes 2023-07-24 12:09:35 +12:00
parent 1562c86211
commit e40df1fec0
1 changed files with 11 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/web/components/c-operation-li.mjs
View file

@ -27,8 +27,11 @@ export class COperationLi extends HTMLElement {
this.build(); this.build();
this.addEventListener('click', this.handleClick.bind(this)); this.addEventListener("click", this.handleClick.bind(this));
this.addEventListener('dblclick', this.handleDoubleClick.bind(this)); this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
this.observer = new MutationObserver(this.updateFavourite.bind(this));
this.observer.observe( this.querySelector("li"), { attributes: true } );
} }
/** /**
@ -37,6 +40,7 @@ export class COperationLi extends HTMLElement {
disconnectedCallback() { disconnectedCallback() {
this.removeEventListener("click", this.handleClick.bind(this)); this.removeEventListener("click", this.handleClick.bind(this));
this.removeEventListener("dblclick", this.handleDoubleClick.bind(this)); this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
this.observer.disconnect();
} }
/** /**
@ -45,7 +49,7 @@ export class COperationLi extends HTMLElement {
*/ */
handleDoubleClick(e) { handleDoubleClick(e) {
if (e.target === this.querySelector("li")) { if (e.target === this.querySelector("li")) {
this.querySelector("li.operation").classList.add("selected"); this.app.manager.recipe.addOperation(this.name);
} }
} }
@ -55,8 +59,8 @@ export class COperationLi extends HTMLElement {
*/ */
handleClick(e) { handleClick(e) {
if (e.target === this.querySelector("i.star-icon")) { if (e.target === this.querySelector("i.star-icon")) {
this.querySelector("li").classList.add("favourite");
this.app.addFavourite(this.name); this.app.addFavourite(this.name);
this.updateFavourite(true);
} }
if (e.target === this.querySelector("i.remove-icon")) { if (e.target === this.querySelector("i.remove-icon")) {
this.remove(); this.remove();
@ -178,14 +182,12 @@ export class COperationLi extends HTMLElement {
} }
/** /**
* Update favourite icon for this list item and add 'favourite' class * Update fav icon and 'fav' class on this li
*/ */
updateFavourite(isFavourite) { updateFavourite() {
if (isFavourite) { if (this.querySelector("li").classList.contains("favourite")) {
this.querySelector("li").classList.add("favourite");
this.querySelector("i.star-icon").innerText = "star"; this.querySelector("i.star-icon").innerText = "star";
} else { } else {
this.querySelector("li").classList.remove("favourite");
this.querySelector("i.star-icon").innerText = "star_outline"; this.querySelector("i.star-icon").innerText = "star_outline";
} }
} }