@twobirds/microcomponents 0.0.66 → 0.0.68

package/public/src/elements.ts

@@ -0,0 +1,76 @@
+'use strict';
+
+import { DC } from './MC.js';
+import { kebabToPascal } from './helpers.js';
+
+class CeBaseClass extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		(DC as any).trigger(this, 'Connected');
+	}
+
+	disconnectedCallback() {
+		(DC as any).trigger(this, 'Disconnected');
+	}
+
+	adoptedCallback() {
+		(DC as any).trigger(this, 'Adopted');
+	}
+
+	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
+		(DC as any).trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+	}
+}
+
+function createNamedClass(
+	name: string,
+	ClassBody: { new (...args: any[]): any }
+) {
+	return Object.defineProperty(ClassBody, 'name', { value: name });
+}
+
+export function defineCE(
+	tagName: string,
+	DefinitionClass: { new (...args: any[]): any },
+	observedAttributes: string[] = []
+) {
+	if (customElements.get(tagName)) {
+		console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
+		return;
+	}
+
+	if (!tagName.includes('-')) {
+		throw new Error(
+			'createCustomElement: tagName must contain at least one hyphen ("-").'
+		);
+	}
+
+	let name = kebabToPascal(tagName);
+
+	customElements.define(
+		tagName,
+		createNamedClass(
+			name,
+			class extends CeBaseClass {
+				instance: any;
+
+				constructor(data?: any) {
+					super();
+					let instance = new DefinitionClass(this, data);
+					DC.add(this, name, instance);
+				}
+
+				static get observedAttributes() {
+					return observedAttributes;
+				}
+			}
+		)
+	);
+}
+
+export function getCE(tagName: string): CustomElementConstructor | undefined {
+	return customElements.get(tagName);
+}

package/public/src/formValues.ts

@@ -0,0 +1,233 @@
+'use strict';
+
+import { LooseObject, copyGettersSetters } from './helpers.js';
+import { DC, addListener } from './MC.js';
+import { observe } from './observables.js';
+
+type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+const getInputName = (
+	e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+): string => {
+	return e.tagName.toLowerCase();
+};
+
+abstract class InputBase {
+	constructor(e: inputTypes) {}
+
+	abstract get val(): any;
+
+	abstract set val(value: any);
+}
+
+class RadioHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
+
+		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
+		return ret as string;
+	}
+
+	set val(value: string) {
+		let arr = [
+			...(this.#e.form as HTMLFormElement).querySelectorAll(
+				`input[type="radio"][name="${this.#e.name}"]`
+			),
+		] as HTMLInputElement[];
+
+		(
+			arr
+				.filter((e) => e.getAttribute('value') === value)
+				.shift() as HTMLInputElement
+		).checked = true;
+	}
+}
+
+class CheckboxHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): boolean {
+		return this.#e.checked;
+	}
+
+	set val(value: boolean) {
+		this.#e.checked = value;
+	}
+}
+
+class InputHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		return this.#e.value;
+	}
+
+	set val(value: string) {
+		this.#e.value = value;
+	}
+}
+
+class SelectHandler extends InputBase {
+	#e: HTMLSelectElement;
+	#multi: boolean = false;
+
+	constructor(e: HTMLSelectElement) {
+		super(e);
+		this.#e = e;
+		this.#multi = e.multiple;
+	}
+
+	get val(): string[] | string {
+		const that = this,
+			ret: string[] = [];
+
+		// get all options
+		[...that.#e.querySelectorAll('option')]
+			.filter((o) => o.selected)
+			.forEach((o) => {
+				ret.push(o.value);
+			});
+
+		if (this.#multi) return ret;
+		return ret.length ? ret[0] : '';
+	}
+
+	set val(value: string[] | string) {
+		const that = this;
+
+		value = typeof value === 'string' ? [value] : value;
+
+		// set all options
+		[...that.#e.querySelectorAll('option')].forEach((o) => {
+			if (value.indexOf(o.value) > -1) {
+				o.selected = true;
+			} else {
+				o.selected = false;
+			}
+		});
+	}
+}
+
+class TextAreaHandler extends InputBase {
+	#e: HTMLTextAreaElement;
+	constructor(e: HTMLTextAreaElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		return this.#e.value || '';
+	}
+
+	set val(value: string) {
+		this.#e.value = value;
+	}
+}
+
+const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
+	let inputList = [
+			...(e || document).querySelectorAll('input,select,textarea'),
+		],
+		handlers: LooseObject = {};
+
+	inputList.forEach((i) => {
+		const name: string | null = (i as inputTypes).getAttribute('name');
+		if (name) {
+			let handler: any = false;
+			switch (getInputName(i as inputTypes)) {
+				case 'input':
+					switch ((i as HTMLInputElement).type) {
+						case 'radio':
+							handler = new RadioHandler(i as HTMLInputElement);
+							break;
+						case 'checkbox':
+							handler = new CheckboxHandler(i as HTMLInputElement);
+							break;
+						default:
+							handler = new InputHandler(i as HTMLInputElement);
+					}
+					break;
+				case 'select':
+					handler = new SelectHandler(i as HTMLSelectElement);
+					break;
+				case 'textarea':
+					handler = new TextAreaHandler(i as HTMLTextAreaElement);
+					break;
+				default:
+					console.warn(
+						'handler missing:',
+						name,
+						'for',
+						i.tagName.toLowerCase(),
+						i
+					);
+					break;
+			}
+
+			if (handler) {
+				DC.add(i, name, handler);
+				Object.defineProperty(handlers, name, {
+					enumerable: true,
+					configurable: true,
+					get: (): any => {
+						return handler.val;
+					},
+					set: (value: any) => {
+						if (handler.val !== value) {
+							handler.val = value;
+						}
+					},
+				});
+			}
+		}
+	});
+
+	return handlers;
+};
+
+export function formValues(
+	targetObject: LooseObject,
+	propertyName: string,
+	dom: HTMLElement | ShadowRoot
+) {
+	let handlers = getInputHandlers(dom);
+
+	targetObject[propertyName] = Object.assign({}, handlers);
+
+	observe(targetObject, propertyName);
+
+	copyGettersSetters(handlers, targetObject[propertyName]);
+
+	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+		addListener(input as inputTypes, 'keyup', (ev: Event) => {
+			//console.log('keyup', ev);
+			targetObject[propertyName].notify();
+		});
+		addListener(input as HTMLElement, 'change', (ev: Event) => {
+			//console.log('change', ev);
+			targetObject[propertyName].notify();
+		});
+		addListener(input as inputTypes, 'select', (ev: Event) => {
+			//console.log('select', ev);
+			targetObject[propertyName].notify();
+		});
+	});
+}
+

package/public/src/helpers.ts

@@ -0,0 +1,149 @@
+'use strict';
+
+export interface LooseObject {
+	[key: string | symbol]: any;
+}
+
+export function isNativeObject(value: any): boolean {
+	return value && value['constructor'] && value.constructor === Object;
+}
+
+export function sortObject(o: LooseObject): LooseObject {
+	let result: LooseObject = {},
+		keys = [...Object.keys(o)].sort();
+
+	keys.forEach((key) => {
+		if (isNativeObject(o[key])) {
+			result[key] = sortObject(o[key]);
+		} else {
+			result[key] = o[key];
+		}
+	});
+
+	return result;
+}
+
+export function flattenObject(
+	o: LooseObject,
+	doSort: boolean = true
+): LooseObject {
+	let result: LooseObject = {};
+
+	[...Object.getOwnPropertyNames(o)].forEach((propName) => {
+		if (
+			o[propName] &&
+			o[propName]['constructor'] &&
+			o[propName].constructor === Object
+		) {
+			const temp = flattenObject(o[propName], false);
+			for (const j in temp) {
+				result[propName + '.' + j] = temp[j];
+			}
+		} else {
+			result[propName] = o[propName];
+		}
+	});
+
+	return doSort ? sortObject(result) : result;
+}
+
+export function deepEqual(o1: LooseObject, o2: LooseObject): boolean {
+	return (
+		JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2))
+	);
+}
+
+export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
+	let nsa = ns.constructor === String ? ns.split('.') : ns;
+
+	if (!obj || !nsa[0] || !obj[nsa[0]]) {
+		console.warn('ns', nsa[0], 'not in', obj);
+		return;
+	}
+	if (obj[nsa[0]].constructor === Object && nsa.length > 1) {
+		return nameSpace((nsa as string[]).splice(1), obj[nsa[0]]);
+	}
+	return obj[nsa[0]];
+}
+
+export function parse(what: string | Object | any[], parseThis: Object) {
+	var args = Array.from(arguments);
+
+	if (args.length > 2) {
+		while (args.length > 1) {
+			args[0] = parse(args[0], args[1]);
+			args.splice(1, 1);
+		}
+		return args[0];
+	}
+
+	if (typeof what === 'string') {
+		what.match(/\{[^\{\}]*\}/g)?.forEach(function (pPropname) {
+			var propname = pPropname.substring(1, pPropname.length - 1),
+				value = nameSpace(propname, parseThis);
+			//console.log(propname, value);
+			if (typeof value !== 'undefined') {
+				what = (what as string).replace(pPropname, value);
+			}
+		});
+	} else if (isNativeObject(what)) {
+		switch (what.constructor) {
+			case Object:
+				Object.keys(what).forEach(function (pKey) {
+					if (what.hasOwnProperty(pKey)) {
+						(what as LooseObject)[pKey] = parse(
+							(what as LooseObject)[pKey],
+							parseThis
+						);
+					}
+				});
+				break;
+			case Array:
+				(what as Array<any>).forEach(function (pValue, pKey, original) {
+					original[pKey] = parse((what as any)[pKey], parseThis);
+				});
+				break;
+		}
+	}
+
+	return what;
+}
+
+export function kebabToPascal(str: string) {
+	return str
+		.split('-') // Split by hyphens
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each part
+		.join(''); // Join without spaces
+}
+
+export function debounce(func: Function, milliseconds: number): Function {
+	let timeout: any;
+	return () => {
+		clearTimeout(timeout);
+
+		timeout = setTimeout(function () {
+			func(...arguments);
+		}, milliseconds);
+	};
+}
+
+export function htmlToElements(html: string): HTMLElement[] {
+	let template = document.createElement('template');
+
+	html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>'); // replace XHTML closing tags by full closing tags
+
+	template.innerHTML = html;
+
+	template.content.normalize();
+
+	return Array.from(template.content.childNodes) as HTMLElement[];
+}
+
+export function copyGettersSetters(source: LooseObject, target: LooseObject) {
+	const descriptors = Object.getOwnPropertyDescriptors(source);
+	for (const [key, descriptor] of Object.entries(descriptors)) {
+		if ('get' in descriptor || 'set' in descriptor) {
+			Object.defineProperty(target, key, descriptor);
+		}
+	}
+}

package/public/src/microcomponents.ts

@@ -0,0 +1,8 @@
+"use strict";
+export * from './helpers.js';
+export * from './MC.js';
+export * from './McEvent.js';
+export * from './elements.js';
+export * from './observables.js';
+//export * from './selectors.js';
+export * from './formValues.js';