- WIP on multiple components to set private vars

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);
 

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);
                 }
             }

asset/webcomponent/hourglass.js

@@ -1,43 +1,39 @@
-/*
+const defaultConfig = {
- * Really simple timer / timeout object
- *
- * @author Dave Mc Nicoll
- * @version 2.0.0
- *
- */
-
-const config = {
     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.#config = {...this.#config, ...defaultConfig, ...( options ? options : {} ), };
-        this.counter = null;
-        this.callback = callback !== undefined ? callback : function() {};
 
-        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 ) {
+        if ( this.config.loop ) {
-            this.object_id && window.clearInterval(this.object_id);
+            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() {
+    get objectId() {
-        return this._object_id;
+        return this._objectId;
     }
 
-    set object_id(value) {
+    set objectId(value) {
-        return this._object_id = value;
+        return this._objectId = value;
+    }
+
+    get config() {
+        return this.#config;
+    }
+
+    set config(value) {
+        return this.#config = value;
     }
 }
 

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');
 

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"])');

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) {
+    constructor() {
-        super();
+        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) {
+        document.querySelectorAll("#" + anchor + this.config.content).forEach(function(content) {
-            content.parentNode.querySelectorAll(config.content + "." + config.activeClass).forEach(ele => ele.classList.remove(config.activeClass));
+            content.parentNode.querySelectorAll(this.config.content + "." + this.config.activeClass).forEach(ele => ele.classList.remove(this.config.activeClass));
-            content.classList.add(config.activeClass);
+            content.classList.add(this.config.activeClass);
-        });
+        }.bind(this));
 
-        let element = this.querySelector("." + config.activeClass);
+        let element = this.querySelector("." + this.config.activeClass);
-        element ? element.classList.remove(config.activeClass) : null;
+        element ? element.classList.remove(this.config.activeClass) : null;
 
-        element = this.querySelector(config.item + `[href="#${anchor}"]`);
+        element = this.querySelector(this.config.item + `[href="#${anchor}"]`);
-        element ? element.closest('div').classList.add(config.activeClass) : null;
+        element ? element.closest('div').classList.add(this.config.activeClass) : null;
     }
 
     clickTab(e) {

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);

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 };