60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
|
// src/components/carousel/autoplay-controller.ts
|
||
|
var AutoplayController = class {
|
||
|
constructor(host, tickCallback) {
|
||
|
this.timerId = 0;
|
||
|
this.activeInteractions = 0;
|
||
|
this.paused = false;
|
||
|
this.stopped = true;
|
||
|
this.pause = () => {
|
||
|
if (!this.activeInteractions++) {
|
||
|
this.paused = true;
|
||
|
this.host.requestUpdate();
|
||
|
}
|
||
|
};
|
||
|
this.resume = () => {
|
||
|
if (!--this.activeInteractions) {
|
||
|
this.paused = false;
|
||
|
this.host.requestUpdate();
|
||
|
}
|
||
|
};
|
||
|
host.addController(this);
|
||
|
this.host = host;
|
||
|
this.tickCallback = tickCallback;
|
||
|
}
|
||
|
hostConnected() {
|
||
|
this.host.addEventListener("mouseenter", this.pause);
|
||
|
this.host.addEventListener("mouseleave", this.resume);
|
||
|
this.host.addEventListener("focusin", this.pause);
|
||
|
this.host.addEventListener("focusout", this.resume);
|
||
|
this.host.addEventListener("touchstart", this.pause, { passive: true });
|
||
|
this.host.addEventListener("touchend", this.resume);
|
||
|
}
|
||
|
hostDisconnected() {
|
||
|
this.stop();
|
||
|
this.host.removeEventListener("mouseenter", this.pause);
|
||
|
this.host.removeEventListener("mouseleave", this.resume);
|
||
|
this.host.removeEventListener("focusin", this.pause);
|
||
|
this.host.removeEventListener("focusout", this.resume);
|
||
|
this.host.removeEventListener("touchstart", this.pause);
|
||
|
this.host.removeEventListener("touchend", this.resume);
|
||
|
}
|
||
|
start(interval) {
|
||
|
this.stop();
|
||
|
this.stopped = false;
|
||
|
this.timerId = window.setInterval(() => {
|
||
|
if (!this.paused) {
|
||
|
this.tickCallback();
|
||
|
}
|
||
|
}, interval);
|
||
|
}
|
||
|
stop() {
|
||
|
clearInterval(this.timerId);
|
||
|
this.stopped = true;
|
||
|
this.host.requestUpdate();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
export {
|
||
|
AutoplayController
|
||
|
};
|