Skip to content

Instantly share code, notes, and snippets.

@majido
Last active November 15, 2018 16:22
Show Gist options
  • Save majido/1587b374c7260ad63d225779262d20e1 to your computer and use it in GitHub Desktop.
Save majido/1587b374c7260ad63d225779262d20e1 to your computer and use it in GitHub Desktop.
Event Delegation API ideas
// Element delegates to worker/worklet
interface EventDelegate {};
interface EventTarget {
void addEventDelegate(DOMString type?, EventDelegate delegate, EventDelegateOptions options?);
void removeEventDelegate(DOMString type?, EventDelegate delegate);
};
dictionary EventDelegateOptions {
boolean preventDefault = false;
boolean stopPropagation = false;
boolean stopImmediatePropagation = false;
};
interface Worker: EventDelegate {};
interface WorkletAnimation: EventDelegate {};
interface AudioWorkletNode : EventDelegate {};
// index.js
const myWorker = new Worker("worker.js");
document.getElementById("div1").addEventDelegate('pointermove', worker);
document.getElementById("div2").addEventDelegate('pointermove', worker);
await CSS.animationWorklet.addModule('animator.js');
const animation = new WorkletAnimation('follow-my-touch', ....).play();
document.getElementById("div3").addEventDelegate(['pointerdown', 'pointermove', 'pointerup'] , animation);
// worker.js
self.addEventListener("pointermove", (event) => {
console.log(event.clientX, event.clientY);
});
// animator.js
registerAnimator('follow-my-touch', class FooAnimator {
constructor() {
this.addEventListener('pointerdown', (e) => {console.log(e);};
this.addEventListener('pointermove', (e) => {
this.coords = {e.clientX, e.clientY}
this.requestAnimation();
};
this.addEventListener('pointerup', (e) => {this.coords = undefined;};
}
animate(currentTime, effects){
if (this.coords) {
effects.children()[0].localTime = translateCoordinateToTime(this.coords.clientX);
effects.children()[0].localTime = translateCoordinateToTime(this.coords.clientY);
}
}
});
interface EventDelegate {
// Should this accept a list of targets?
void addEventTarget(EventTarget target, EventDelegateOptions options?);
void removeEventTarget(EventTarget target);
};
dictionary EventDelegateOptions { /* allows adding options in future */ };
interface Worker: EventDelegate {};
interface WorkletAnimation: EventDelegate {};
interface AudioWorkletNode : EventDelegate {};
// index.js
const myWorker = new Worker("worker.js");
worker.addEventTarget(document.getElementById("div1"));
worker.addEventTarget(document.getElementById("div2").);
// worker.js
self.addEventListener("eventtargetadded", (target) => {
target.addEventListener("pointermove", (e) => {/* Handle event e */}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment