@twobirds/microcomponents 0.0.20 → 0.0.22

package/src/formValues.ts

@@ -0,0 +1,275 @@
+"use strict";
+
+import { LooseObject } from './helpers.js'
+import { MC, addListener } from './MC.js'
+
+type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+const getInputName = ( e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement ): string => {
+
+	let ret = e instanceof HTMLInputElement
+		? 'input'
+		: e instanceof HTMLSelectElement
+			? 'select'
+			: e instanceof HTMLTextAreaElement
+				? 'textarea'
+				: ''
+		;
+
+	return ret;
+}
+
+abstract class InputBase{
+	constructor( e: any ){
+	}
+
+	abstract get val(): any;
+
+	abstract set val( value: any );
+
+}
+
+const getInputHandlers = ( e: HTMLElement | ShadowRoot ): LooseObject => {
+
+		let
+			//inputList = ( Array.from( e.querySelectorAll('*') ) as HTMLElement[] ).filter( i => isInputElement(i) ),
+			inputList = [ ...( e || document).querySelectorAll('input,select,textarea') ],
+			handlers: LooseObject = {};
+
+		inputList.forEach( (i) => {
+			const
+				name: string = ( i as inputTypes ).getAttribute('name') || 'undefined';
+
+			if ( name ){
+				let h: InputBase;
+				switch ( getInputName( i as inputTypes ) ){
+					case 'input':
+						//console.log( i, 'is HTMLInputElement');
+						h = new InputHandler( i as HTMLInputElement, e ); // e = element to search radios in = radioBase
+						Object.defineProperty( handlers, name, {
+							enumerable: true,
+							configurable: true,
+							get: (): any => { return h.val },
+							set: ( value: any ) => { h.val = value }
+						});
+						break;
+					case 'select':
+						//console.log( i, 'is HTMLSelectElement');
+						h = new SelectHandler( i as HTMLSelectElement );
+						Object.defineProperty( handlers, name, {
+							enumerable: true,
+							configurable: true,
+							get: (): any => { return h.val },
+							set: ( value: any ) => { h.val = value }
+						});
+						break;
+					case 'textarea':
+						//console.log( i, 'is HTMLTextAreaElement');
+						h = new TextAreaHandler( i as HTMLTextAreaElement );
+						Object.defineProperty( handlers, name, {
+							enumerable: true,
+							configurable: true,
+							get: (): any => { return h.val },
+							set: ( value: any ) => { h.val = value }
+						});
+						break;
+					default:
+						console.warn('handler missing:', name, 'for', i);
+						break;
+				}
+			}
+		});
+
+		return handlers;
+}
+
+class InputHandler extends InputBase {
+
+	#e: HTMLInputElement;
+	#type: string;
+	#radioBase: any;
+
+	constructor( e: HTMLInputElement, radioBase?: HTMLElement | ShadowRoot ){
+		super( e );
+		this.#e = e;
+		this.#type = e.type;
+		this.#radioBase = radioBase;
+	}
+
+	get val(): any{
+		let that = this,
+			type = that.#type,
+			ret: any;
+
+		switch (type){
+			case 'radio':
+				const check = [ ...(this.#radioBase || document).querySelectorAll( `input[type="radio"][name="${ this.#e.getAttribute('name') }"]` ) ]
+					.filter( e => e.checked );
+				if ( !check.length ) return '';
+				ret = check?.[0];
+				return ret.value;
+			case 'checkbox':
+				return that.#e.checked;
+			default:
+				return that.#e.value;
+				break;
+		}
+
+		return '';
+	}
+
+	set val( value: any ){
+		let that = this,
+			type = that.#type,
+			ret: any;
+
+		switch (type){
+			case 'radio':
+				const
+					radios = [ ...(this.#radioBase || document).querySelectorAll(  `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`  ) ];
+
+				// console.log('set radios', selection, this.#radioBase, radios.array );
+
+				if ( !radios.length ) return;
+
+				if ( value === '' ){ // uncheck all
+					radios.forEach( r => { if (r.checked) r.checked = false } );
+					//console.log('unset all radios', radios.array );
+					return;
+				}
+
+				const setRadioElement = radios.filter( r => r.getAttribute('value') === value );
+
+				if ( !setRadioElement.length ) return;
+
+				// console.log('set this radio', setRadioElement.array );
+
+				(setRadioElement?.[0] as HTMLInputElement).checked = true;
+
+				// console.log('done', setRadioElement.array );
+				return;
+				break;
+			case 'checkbox':
+				that.#e.checked = value;
+				break;
+			default:
+				that.#e.value = value;
+				break;
+		}
+
+		return;
+	}
+
+}
+
+class SelectHandler extends InputBase {
+
+	#e: HTMLSelectElement;
+	#multi: boolean = false;
+
+	constructor( e: HTMLSelectElement ){
+		super( e );
+		this.#e = e;
+		this.#multi = e.type === 'select-multiple';
+	}
+
+	get val(): string[] | string{
+		const
+			that = this,
+			ret: string[] = [];
+
+		// get all options
+		const options = [ ...that.#e.querySelectorAll('option') ]
+			.filter( o => o.selected )
+			.forEach( o => { if ( o.selected ) 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;
+
+		//console.log('set values', value );
+
+		// set all options
+		const options =  [ ...that.#e.querySelectorAll('option') ]
+			.forEach( o => {
+				if ( value.indexOf( o.value ) > -1 ) {
+					o.setAttribute( 'selected', 'selected' )
+					o.selected = true;
+				} else {
+					o.removeAttribute( 'selected' )
+					o.selected = false;
+				}
+			});
+
+		return;
+	}
+
+}
+
+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;
+		return;
+	}
+
+}
+
+export const formValues = ( target: HTMLElement | ShadowRoot, values: Object = {}, mc?: typeof MC, observable?: string ): LooseObject => {
+
+	//console.log( 'values(', target, ',', values, ',', observable, ')' );
+
+	//console.log( 'values()', values );
+	let handlers = getInputHandlers( target );
+
+	function updateForm( values: Object ){
+		Object
+			.keys( values )
+			.forEach( (key) => {
+				if ( handlers.hasOwnProperty(key) && values.hasOwnProperty(key) ) {
+					//console.log( 'set value', key, values[key] );
+					handlers[key] = (values as LooseObject)[key];
+				}
+		});
+	}
+
+	if ( Object.keys(values).length > 0 ){
+		updateForm( values );
+	}
+
+	//console.log( 'set observable on form change', observable );
+	if ( observable !== undefined ){
+		let obs = ( mc as LooseObject )[observable];
+		if ( !obs.constructor?.hasFormHandler ){
+			obs.constructor.hasFormHandler = true;
+			obs.observe( updateForm );
+		}
+
+		( mc as any)[observable].observe( () => { } );
+
+		[ ...target.querySelectorAll('input, textarea, select') ].forEach( ( e ) => {
+			addListener( (e as HTMLElement), 'keyup', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
+			addListener( (e as HTMLElement), 'change', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
+			if ( (e as HTMLElement) instanceof HTMLSelectElement ){
+				addListener( (e as HTMLElement), 'select', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
+			};
+		});
+	}
+
+	return observable ? ( mc as any)[observable] : Object.assign( {}, handlers );
+}

package/src/helpers.ts

@@ -0,0 +1,173 @@
+"use strict";
+
+export function isObject( value: any ): boolean {
+  return value != null && typeof value === 'object';
+}
+
+export interface LooseObject {
+	[key: string | symbol]: any;
+}
+
+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 deepEqual( o1: any, o2:any): boolean {
+	const k1 = Object.keys(o1);
+	const k2 = Object.keys(o2);
+	if (k1.length !== k2.length) {
+		return false;
+	}
+	for (const key of k1) {
+		const
+			v1 = o1[key],
+			v2 = o2[key],
+			recurse = isObject(v1) && isObject(v2);
+		;
+		if (
+			( recurse && !deepEqual(v1, v2) )
+			|| (!recurse && v1 !== v2)
+		) {
+			return false;
+		}
+	}
+	return true;
+}
+
+export function nameSpace( ns: string, obj: LooseObject, val: any = null, orig?: any ): any {
+	let leftOver: Array<any> = ns.split('.');
+
+	if ( !orig ){
+		orig = obj;
+	}
+
+	// console.log( 'start', ns, obj, val, leftOver );
+
+	let
+		last: string = leftOver.shift(),	// this property name
+		lns: string = leftOver.join('.')	// the leftover namespace
+	;
+
+	if ( val !== null && last.length && obj[last] === undefined ){ // extend if val given and ns leftover...
+		// console.log( 'add prop', last );
+		obj[last] = {};
+	}
+
+	let
+		lob: any = obj[last]	// the leftover value or obj
+	;
+
+	// console.log( 'lob', lob, 'last:', last, 'lns:', lns, 'obj:', obj );
+
+	if ( lns.length === 0 ){ // this should be the value to set or get
+		if ( val !== null ){
+			obj[last] = val;
+			return orig;
+		}
+		return obj[last];
+	}
+
+	if ( isObject( obj[last] ) ){
+		return nameSpace( lns, obj[last], val, orig );
+	} else {
+		if (val){
+			return orig;
+		}
+
+		return lob[last];
+	}
+
+}
+
+export function parse( what: string | Object | any[], parseThis: Object ){
+	var args = Array.from(arguments);
+
+	if (!args.length){
+		console.error('no arguments give to parse');
+		return;
+	}
+
+	if (args.length === 1){
+		return args[1];
+	} else if (args.length > 2) {
+		while (args.length > 1){
+			args[0] = parse( args[0], args[1]);
+			args.splice(1, 1);
+		}
+		return args[0];
+	}
+
+	// implicit else: exactly 2 arguments
+	if ( typeof what === 'string' ){
+		var vars = what.match( /\{[^\{\}]*\}/g );
+
+		if ( !!vars ) {
+			vars
+				.forEach(
+					function (pPropname) {
+						var propname = pPropname.substr(1, pPropname.length - 2),
+							value = nameSpace( propname, parseThis );
+
+						if ( typeof value !== 'undefined' ){
+							what = (what as string).replace( pPropname, value );
+						}
+					}
+				);
+		}
+	} else if ( isObject(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 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[] );
+}