From 45095b221dfa197b1093ebc839782f67e2f80ebe Mon Sep 17 00:00:00 2001 From: Dave Mc Nicoll Date: Thu, 6 Nov 2025 17:16:58 +0000 Subject: [PATCH] - WIP on multiple components to set private vars --- asset/webcomponent/app.js | 2 - asset/webcomponent/element-observer.js | 2 +- asset/webcomponent/hourglass.js | 73 ++++++++++++----------- asset/webcomponent/module/ui-popup.js | 1 - asset/webcomponent/module/ui-select.js | 2 - asset/webcomponent/module/ui-tabs.js | 25 ++++---- asset/webcomponent/module/ui-textarea.js | 3 +- asset/webcomponent/module/webcomponent.js | 41 +++++++++++-- 8 files changed, 91 insertions(+), 58 deletions(-) diff --git a/asset/webcomponent/app.js b/asset/webcomponent/app.js index 154af99..a6c7bb7 100644 --- a/asset/webcomponent/app.js +++ b/asset/webcomponent/app.js @@ -1,6 +1,4 @@ -import { ElementObserver } from "./element-observer.js"; - import { UiTabs } from "./module/ui-tabs.js"; window.customElements.define("ui-tabs", UiTabs); diff --git a/asset/webcomponent/element-observer.js b/asset/webcomponent/element-observer.js index 12379e4..74ed74b 100644 --- a/asset/webcomponent/element-observer.js +++ b/asset/webcomponent/element-observer.js @@ -89,7 +89,7 @@ class ElementObserver { console.log("@todo!", split_selector); } else { - if ( $element.is( this.listeners[action][j].selector ) ) { + if ( element.is( this.listeners[action][j].selector ) ) { this.listeners[action][j].callback.call(element, element); } } diff --git a/asset/webcomponent/hourglass.js b/asset/webcomponent/hourglass.js index 2e6f910..12a7f99 100644 --- a/asset/webcomponent/hourglass.js +++ b/asset/webcomponent/hourglass.js @@ -1,43 +1,39 @@ -/* - * Really simple timer / timeout object - * - * @author Dave Mc Nicoll - * @version 2.0.0 - * - */ - -const config = { +const defaultConfig = { timer: 1000, start: false, loop: true, - run: false, // If you need a defined number of code execution, set a number to run and loop to false. + occurences: false, // If you need a defined number of code execution, set a number to run and loop to false. complete: function(){} // This complete callback function is called if the run exec number is reached. }; class Hourglass { + #callback; + #config = {}; constructor(callback, options) { - this.object_id = null; - this.counter = null; - this.callback = callback !== undefined ? callback : function() {}; + this.#config = {...this.#config, ...defaultConfig, ...( options ? options : {} ), }; - if ( config.start ) { + this.objectId = null; + this.counter = null; + this.callback = callback ? callback : function() {}; + + if ( this.config.start ) { this.start(); } } start(timeout) { - let time = ( timeout !== undefined ? timeout : config.timer ); + let time = ( timeout !== undefined ? timeout : this.config.timer ); - if ( config.loop ) { + if ( this.config.loop ) { if ( this.counter === null ) { - this.counter = config.loop ? 0 : null + this.counter = this.config.loop ? 0 : null } - this.object_id = window.setInterval( this.call_interval.bind(this), time); + this.objectId = window.setInterval( this.callInterval.bind(this), time); } else { - this.object_id = window.setTimeout( this.call_timeout.bind(this), time); + this.objectId = window.setTimeout( this.callTimeout.bind(this), time); } } @@ -47,44 +43,45 @@ class Hourglass { } stop() { - if ( config.loop ) { - this.object_id && window.clearInterval(this.object_id); + if ( this.config.loop ) { + this.objectId && window.clearInterval(this.objectId); } else { - this.object_id && window.clearTimeout(this.object_id); + this.objectId && window.clearTimeout(this.objectId); } } clear() { this.stop(); this.counter = null; - this.object_id = null; + this.objectId = null; } - call_timeout() { + callTimeout() { this.callback(); this.clear(); } - call_interval() { + callInterval() { this.callback(); - if ( this.counter !== null && ++this.counter === config.run ) { + if ( this.counter !== null && ++this.counter === this.config.occurences ) { this.clear(); - config.complete !== undefined && config.complete(); + + this.config.complete !== undefined && this.config.complete(); } } running() { - return !! this.object_id; + return !! this.objectId; } get callback() { - return this._callback; + return this.#callback; } set callback(value) { - return this._callback = value; + return this.#callback = value; } get counter() { @@ -95,12 +92,20 @@ class Hourglass { return this._counter = value; } - get object_id() { - return this._object_id; + get objectId() { + return this._objectId; } - set object_id(value) { - return this._object_id = value; + set objectId(value) { + return this._objectId = value; + } + + get config() { + return this.#config; + } + + set config(value) { + return this.#config = value; } } diff --git a/asset/webcomponent/module/ui-popup.js b/asset/webcomponent/module/ui-popup.js index 0ce6621..c56bec1 100644 --- a/asset/webcomponent/module/ui-popup.js +++ b/asset/webcomponent/module/ui-popup.js @@ -9,7 +9,6 @@ class UiPopup extends Webcomponent { constructor() { super(); - this.fetch_template(); this.message = this.querySelector('.message'); this.title = this.querySelector('.title'); diff --git a/asset/webcomponent/module/ui-select.js b/asset/webcomponent/module/ui-select.js index 8299888..59c45e1 100644 --- a/asset/webcomponent/module/ui-select.js +++ b/asset/webcomponent/module/ui-select.js @@ -15,8 +15,6 @@ class UiSelect extends Webcomponent { constructor() { super(); - this.fetch_template(); - this.wrapper = this.shadowRoot.querySelector(config.content.wrapper); this.list = this.shadowRoot.querySelector(config.content.list); this.input = this.querySelector('input:not([type="hidden"])'); diff --git a/asset/webcomponent/module/ui-tabs.js b/asset/webcomponent/module/ui-tabs.js index 9ca69ce..b7e643d 100644 --- a/asset/webcomponent/module/ui-tabs.js +++ b/asset/webcomponent/module/ui-tabs.js @@ -5,11 +5,14 @@ const config = { item: ".tab-item", content: ".tab-content", activeClass: "ui-tab-active", + template: { + fetch : false + } }; class UiTabs extends Webcomponent { - constructor(parameters) { - super(); + constructor() { + super(config); this.init(); } @@ -17,7 +20,7 @@ class UiTabs extends Webcomponent { init() { window.addEventListener("hashchange", this.hashChange.bind(this), false); - //this.querySelectorAll(config.item).forEach(ele => ele.addEventListener("click", this.clickTab.bind(this))); + //this.querySelectorAll(this.config.item).forEach(ele => ele.addEventListener("click", this.clickTab.bind(this))); if (window.location.hash) { let eve = new Event("click"); @@ -29,16 +32,16 @@ class UiTabs extends Webcomponent { hashChange(e) { let anchor = e.newURL.split('#')[1]; - document.querySelectorAll("#" + anchor + config.content).forEach(function(content) { - content.parentNode.querySelectorAll(config.content + "." + config.activeClass).forEach(ele => ele.classList.remove(config.activeClass)); - content.classList.add(config.activeClass); - }); + document.querySelectorAll("#" + anchor + this.config.content).forEach(function(content) { + content.parentNode.querySelectorAll(this.config.content + "." + this.config.activeClass).forEach(ele => ele.classList.remove(this.config.activeClass)); + content.classList.add(this.config.activeClass); + }.bind(this)); - let element = this.querySelector("." + config.activeClass); - element ? element.classList.remove(config.activeClass) : null; + let element = this.querySelector("." + this.config.activeClass); + element ? element.classList.remove(this.config.activeClass) : null; - element = this.querySelector(config.item + `[href="#${anchor}"]`); - element ? element.closest('div').classList.add(config.activeClass) : null; + element = this.querySelector(this.config.item + `[href="#${anchor}"]`); + element ? element.closest('div').classList.add(this.config.activeClass) : null; } clickTab(e) { diff --git a/asset/webcomponent/module/ui-textarea.js b/asset/webcomponent/module/ui-textarea.js index be0e567..5ae4f35 100644 --- a/asset/webcomponent/module/ui-textarea.js +++ b/asset/webcomponent/module/ui-textarea.js @@ -24,8 +24,7 @@ class UiTextarea extends Webcomponent { constructor() { super(); - - this.fetch_template(); + this.wrapper = this.shadowRoot.querySelector(domElements.wrapper); this.content = this.shadowRoot.querySelector(domElements.boilerplate); this.toolbar = this.shadowRoot.querySelector(domElements.toolbar); diff --git a/asset/webcomponent/module/webcomponent.js b/asset/webcomponent/module/webcomponent.js index 22524e5..cd09d0a 100644 --- a/asset/webcomponent/module/webcomponent.js +++ b/asset/webcomponent/module/webcomponent.js @@ -1,21 +1,38 @@ class Webcomponent extends HTMLElement { + #config = { + template: { + fetch : true + } + }; - fetch_template() { + constructor(config) { + super(); + + if (config) { + this.#config = {...this.#config, ...( config ? config : {} ) }; + } + + if (this.config.template.fetch) { + this.fetchTemplate(); + } + } + + fetchTemplate() { this.attachShadow({mode: 'open'}).appendChild( document.querySelector("template#" + this.tagName.toLowerCase()).content.cloneNode(true) ); } - get_name() { + getName() { return Object.getPrototypeOf(this).constructor.name; } - get_slot(name) { + getSlot(name) { return this.querySelector('[slot="' + name + '"]'); } - empty_element(element) { + emptyElement(element) { while (element.lastChild) { element.removeChild(element.lastChild); } @@ -23,11 +40,25 @@ class Webcomponent extends HTMLElement { return element; } - build_url(url, data) { + buildUrl(url, data) { return url + ( Object.entries(data).length ? "?" + Object.keys(data).map(function(key) { return [key, data[key]].map(encodeURIComponent).join("="); }).join("&") : "" ); } + + on(type, listener, options) { + this.addEventListener(type, listener, options); + + return this; + } + + get config() { + return this.#config; + } + + set config(value) { + return this.#config = value; + } } export { Webcomponent };