assets-package/webcomponent
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- WIP on multiple components to set private vars

Browse Source
This commit is contained in:
Dave M. 2025-11-06 17:16:58 +00:00
parent 14bccd50a8
commit 45095b221d
8 changed files with 91 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
asset/webcomponent/app.js
View File

@ -1,6 +1,4 @@
import { ElementObserver } from "./element-observer.js";
import { UiTabs } from "./module/ui-tabs.js";
window.customElements.define("ui-tabs", UiTabs);

2
asset/webcomponent/element-observer.js
View File

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

73
asset/webcomponent/hourglass.js
View File

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

1
asset/webcomponent/module/ui-popup.js
View File

@ -9,7 +9,6 @@ class UiPopup extends Webcomponent {
constructor() {
super();
this.fetch_template();
this.message = this.querySelector('.message');
this.title = this.querySelector('.title');

2
asset/webcomponent/module/ui-select.js
View File

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

25
asset/webcomponent/module/ui-tabs.js
View File

@ -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) {

3
asset/webcomponent/module/ui-textarea.js
View File

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

41
asset/webcomponent/module/webcomponent.js
View File

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