darkwiiplayer/skooma-js
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

Add attribute change event

Browse source
This commit is contained in:
Talia 2024-10-09 22:30:30 +02:00
parent 22558caa9e
commit b1436e5194
Signed by: darkwiiplayer
GPG key ID: 7808674088232B3E
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
render.js
View file

@ -71,6 +71,21 @@ export class ReplacedEvent extends Event {
} }
} }
/** Event triggered when a reactive attribute changes on an element */
export class AttributeEvent extends Event {
/**
* @param {String} attribute
* @param {any} from
* @param {any} to
*/
constructor(attribute, from, to) {
super("skooma:attribute", { cancelable: true })
this.attribute = attribute
this.from = from
this.to = to
}
}
// Other utility exports // Other utility exports
/** Wraps an event handler in a function that calls preventDefault on the event /** Wraps an event handler in a function that calls preventDefault on the event
@ -265,7 +280,7 @@ export class DomRenderer extends Renderer {
const special = this.getSpecialAttribute(element, attribute) const special = this.getSpecialAttribute(element, attribute)
if (this.isObservable(value)) if (this.isObservable(value))
this.setReactiveAttribute(element, attribute, value) { this.setReactiveAttribute(element, attribute, value) }
else if (typeof value === "function") else if (typeof value === "function")
element.addEventListener(attribute, value, { signal: cleanupSignal }) element.addEventListener(attribute, value, { signal: cleanupSignal })
else if (special?.set) else if (special?.set)
@ -290,7 +305,8 @@ export class DomRenderer extends Renderer {
observable.addEventListener("change", () => { observable.addEventListener("change", () => {
multiAbort.abort() multiAbort.abort()
this.setAttribute(element, attribute, observable.value, multiAbort.signal) if (element.dispatchEvent(new AttributeEvent(attribute, element.getAttribute(attribute), observable.value)))
this.setAttribute(element, attribute, observable.value, multiAbort.signal)
}) })
this.setAttribute(element, attribute, observable.value, multiAbort.signal) this.setAttribute(element, attribute, observable.value, multiAbort.signal)