121 lines
2.5 KiB
JavaScript
121 lines
2.5 KiB
JavaScript
import { Events } from "./events.mjs";
|
|
import { documentManipulatorObject } from "./document-manipulator.mjs";
|
|
|
|
export class UiLive extends HTMLElement {
|
|
#config = {
|
|
url: window.location.href,
|
|
template: {
|
|
fetch : true
|
|
}
|
|
}
|
|
|
|
#intervalId;
|
|
|
|
#connected = false;
|
|
|
|
disconnectedCallback() {
|
|
this.intervalId && clearTimeout(this.intervalId);
|
|
|
|
documentManipulatorObject.unregisterLiveElement(this);
|
|
|
|
console.debug("component disconnected: ", this);
|
|
}
|
|
|
|
connectedCallback() {
|
|
documentManipulatorObject.registerLiveElement(this);
|
|
|
|
this.on("live:swap", () => new Events(this, true));
|
|
|
|
new Events(this, false);
|
|
|
|
if (this.pool) {
|
|
const self = {};
|
|
self[this.name] = this;
|
|
|
|
this.intervalId = setInterval(() => documentManipulatorObject.fetchFromUrl(this.config.url, self), this.pool * 1000);
|
|
}
|
|
|
|
this.#connected = true;
|
|
|
|
console.debug("component connected: ", this);
|
|
}
|
|
|
|
adoptedCallback() {
|
|
}
|
|
|
|
on(type, listener, options) {
|
|
this.addEventListener(type, listener, options);
|
|
|
|
return this;
|
|
}
|
|
|
|
off(type, listener, options) {
|
|
this.removeEventListener(type, listener, options);
|
|
|
|
return this;
|
|
}
|
|
|
|
emit(name, detail, bubbles, cancelable, composed) {
|
|
this.dispatchEvent(new CustomEvent(name, {
|
|
detail: detail ? detail : null,
|
|
bubbles: !! bubbles,
|
|
cancelable: !! cancelable,
|
|
composed: !! composed,
|
|
}));
|
|
}
|
|
|
|
swapHtml(html) {
|
|
this.innerHTML = html;
|
|
|
|
this.emit("live:swap");
|
|
}
|
|
|
|
/** @return string */
|
|
get url() {
|
|
return this.dataset.src;
|
|
}
|
|
|
|
/** @return string */
|
|
set url(value) {
|
|
return this.dataset.src = value;
|
|
}
|
|
|
|
/** @return string */
|
|
get selector() {
|
|
return this.dataset.selector;
|
|
}
|
|
|
|
/** @return string */
|
|
get name() {
|
|
return this.dataset.name;
|
|
}
|
|
|
|
/** @return string */
|
|
get config() {
|
|
return this.#config;
|
|
}
|
|
|
|
/** @return string */
|
|
set config(value) {
|
|
return this.#config = value;
|
|
}
|
|
|
|
/** @return int | undefined */
|
|
get intervalId() {
|
|
return this.#intervalId;
|
|
}
|
|
|
|
/** @return int | undefined */
|
|
set intervalId(value) {
|
|
return this.#intervalId = value;
|
|
}
|
|
|
|
/** @return int | undefined */
|
|
get pool() {
|
|
if (isNaN(this.dataset.pool)) {
|
|
return undefined;
|
|
}
|
|
|
|
return this.dataset.pool;
|
|
}
|
|
} |