x4js 1.4.2

package/src/icon.ts

@@ -0,0 +1,237 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file icon.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+import { Component, CProps } from './component'
+import { Stylesheet } from './styles'
+import { HtmlString } from './tools';
+import { BasicEvent, EvChange, EventMap, EventSource } from './x4_events';
+
+// ============================================================================
+// [ICON]
+// ============================================================================
+
+export type IconID = string | number;
+
+export interface IconProps extends CProps {
+	icon: IconID;
+	size?: number;
+}
+
+
+export interface EvLoaded extends BasicEvent {
+	url: string;
+	svg: string;
+}
+
+export function EvLoaded( url: string, svg: string, context = null ) {
+	return BasicEvent<EvLoaded>({ url, svg, context });
+}
+
+interface LoadingEventMap extends EventMap {
+	loaded: EvLoaded;
+}
+
+class Loader extends EventSource<LoadingEventMap> {
+	svgs: Map<string,string>;
+
+	constructor( ) {
+		super( );
+		this.svgs = new Map( );
+	}
+
+	load( url: string ) {
+		if( this.svgs.has(url) ) {
+			const svg = this.svgs.get( url );
+			if( svg ) {
+				//console.log( 'cached=', url );
+				this.signal( 'loaded', EvLoaded(url,svg) );
+			}
+		}
+		else {
+			// mark it as loading
+			this.svgs.set( url, null );
+
+			// then start loading
+			const _load = async ( url ) => {
+				const r = await fetch( url );
+				if( r.ok ) {
+					const svg = await r.text();
+					this.svgs.set( url, svg );
+
+					//console.log( 'signal=', url );
+					this.signal( 'loaded', EvLoaded(url,svg) );
+				}
+			}
+
+			_load( url );			
+		}
+	}
+}
+
+const svgLoader = new Loader( );
+
+
+/**
+ * standard icon
+ */
+export class Icon extends Component<IconProps>
+{
+	private m_icon: string;
+	private m_iconName: IconID;
+
+	constructor( props: IconProps ) {
+		super( props );
+				
+		this._setIcon( props.icon, false );
+
+		if( props.size ) {
+			this.setStyleValue( 'fontSize', props.size );
+		}
+	}
+
+	private _setIcon(icon: IconID, remove_old: boolean) {
+
+		const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
+		const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
+		const reSvg2 = /(.*\.svg)$/gi;
+		const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
+		
+		if( !icon ) {
+			this.m_iconName = '';
+			return;
+		}
+
+		this.removeClass( '@svg' );
+		
+		let name, url;
+		if (typeof (icon) === 'number') {
+			icon = icon.toString(16);
+			name = icon;
+		}
+		else {
+			let match_svg = reSvg.exec( icon ) || reSvg2.exec(icon);
+			if( match_svg ) {
+				const url  = match_svg[1].trim( );
+				this._setSVG( url );
+				return;
+			}
+			
+			let match_cls = reCls.exec( icon );
+			if( match_cls ) {
+				const classes  = match_cls[1].trim( );
+				this.addClass( classes );
+				return;
+			}
+			
+			let match_url = reUrl.exec( icon );
+			if( match_url ) {
+				url  = match_url[1].trim( );
+				name = url.replace( /[/\\\.\* ]/g, '_' );
+			}
+			else {
+				name = icon;
+				icon = Stylesheet.getVar( 'icon-'+icon ) as string;
+
+				if( icon=='' || icon===undefined ) { 
+					// name your icon 'icon-xxx'
+					// ex:
+					// :root { --icon-zoom-p: f00e; }
+					console.assert( false );	
+					icon = '0'; 
+				}
+			}
+		}
+
+		this.m_iconName = name;
+		if( this.m_icon===icon ) {
+			return;
+		}
+
+		let css = Component.getCss(),
+			rulename: string;
+
+		if (remove_old && this.m_icon) {
+			rulename = 'icon-' + name;
+			this.removeClass(rulename);
+		}
+				
+		// generate dynamic css icon rule
+		rulename = 'icon-' + name;
+		
+		if( Icon.icon_cache[rulename]===undefined ) {
+			Icon.icon_cache[rulename] = true;
+
+			let rule: string;
+
+			if( url ) {
+				rule =  `display: block; content: ' '; background-image: url(${url}); background-size: contain; width: 100%; height: 100%; background-repeat: no-repeat; color: white;`;
+			}
+			else {
+				rule = `content: "\\${icon}";`;
+			}
+
+			css.setRule(rulename, `.${rulename}::before {${rule}}`);
+		}
+
+		this.addClass(rulename);
+		this.m_icon = icon;
+	}
+
+	/**
+	 * change the icon
+	 * @param icon - new icon
+	 */
+	public set icon( icon: IconID ) {
+		this._setIcon( icon, true );
+	}
+
+	public get icon( ) : IconID {
+		return this.m_iconName;
+	}
+
+	private _setSVG( url: string ) {
+
+		const set = ( ev: EvLoaded ) => {
+			//console.log( 'set=', ev.url, 'url=', url );
+			
+			if( ev.url==url ) {
+				this.addClass( '@svg-icon' );
+				this.setContent( HtmlString.from(ev.svg), false );
+				svgLoader.off( 'loaded', set );
+			}
+		}
+
+		svgLoader.on( 'loaded', set );
+		svgLoader.load( url );
+	}
+
+
+	/**
+	 * 
+	 */
+	
+	private static icon_cache = [];
+}
+

package/src/image.ts

@@ -0,0 +1,198 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file image.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+import { Component, CProps, html } from './component'
+
+// ============================================================================
+// [IMAGE]
+// ============================================================================
+
+interface ImageProps extends CProps
+{
+	src: string;
+	alt?: string;
+	lazy?: boolean;	// mark image as lazy loading
+	alignment?: 'fill' | 'contain' | 'cover' | 'scale-down' | 'none';
+}
+
+const emptyImageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+function _isStaticImage( src: string ) {
+	return src.substr(0,5)=='data:';
+}
+
+
+
+/**
+ * Standard image class
+ */
+export class Image extends Component<ImageProps>
+{
+	protected m_created: boolean;
+	protected m_lazysrc: string;		// expected 
+	
+	constructor(props: ImageProps) {
+		super(props);
+
+		this.m_created = false;
+		
+		this.m_props.lazy = props.lazy===false ? false : true;
+		this.m_props.alt = props.alt;
+		
+		if( props.lazy!==false ) {
+			this.m_lazysrc = props.src;
+			props.src = emptyImageSrc;
+		}
+		
+		this.setDomEvent( 'create', ( ) => {
+			if( props.lazy ) {
+				this.setImage( this.m_lazysrc, true );
+			}
+		});
+	}
+
+	/** @ignore */
+	render( ) {
+		let mp = this.m_props;
+
+		const img = new Component( {
+			tag: 'img',
+			attrs: {
+				draggable: false,
+				alt: mp.alt ?? '',
+				decoding: mp.lazy ? 'async' : undefined,
+			},
+			style: {
+				objectFit: mp.alignment ? mp.alignment : undefined
+			}
+		});
+
+		this.setContent( img );
+	}
+	
+	/**
+	 * change the image
+	 * @param src - image path
+	 */
+
+	public setImage( src: string, force?: boolean ) {
+
+		if( !src ) {
+			src = emptyImageSrc;
+		}
+		
+		if( !this.m_props.lazy ) {
+			this.m_props.src = src;
+			this.m_lazysrc = src;
+
+			if( this.dom ) {
+				(<HTMLElement>this.dom.firstChild).setAttribute( 'src', src );
+			}
+		}
+		else if( force || this.m_lazysrc!=src ) {
+			if( _isStaticImage(src) ) {
+				// not to download -> direct display
+				this.m_props.src = src;
+				this.m_lazysrc = src;
+
+				if( this.dom ) {
+					(<HTMLElement>this.dom.firstChild).setAttribute( 'src', this.m_props.src );
+				}
+			}
+			else {
+				// clear current image while waiting
+				this.m_props.src = emptyImageSrc;
+				if( this.dom ) {
+					(<HTMLElement>this.dom.firstChild).setAttribute( 'src', this.m_props.src );
+				}
+				
+				this.m_lazysrc = src;
+				if( this.dom ) {
+					this._update_image( );			
+				}
+			}
+		}
+	}
+
+	private _update_image( ) {
+
+		console.assert( !!this.dom );
+
+		if( this.m_lazysrc && !_isStaticImage(this.m_lazysrc) ) {
+			// we do not push Components in a static array...
+			Image.lazy_images_waiting.push( { dom: this.dom, src: this.m_lazysrc } );
+			if( Image.lazy_image_timer===undefined ) {
+				Image.lazy_image_timer = setInterval( Image.lazyWatch as TimerHandler, 10 );
+			}
+		}
+	}
+
+	private static lazy_images_waiting = [];
+	private static lazy_image_timer: number = undefined;
+
+	private static lazyWatch( ) {
+
+		let newList = [];
+		let done = 0;
+			
+		Image.lazy_images_waiting.forEach( ( el ) => {
+
+			let dom = el.dom,
+				src = el.src;
+				
+			// skip deleted elements
+			if( !dom || !document.contains(dom) ) {
+				// do not append to newList
+				return;
+			}
+
+			let rc = dom.getBoundingClientRect();
+
+			// if it is visible & inserted inside the document
+			if( !done && dom.offsetParent!==null && 
+				rc.bottom >= 0 && rc.right >= 0 &&  
+				rc.top <= (window.innerHeight || document.documentElement.clientHeight) && 
+				rc.left <= (window.innerWidth || document.documentElement.clientWidth) ) {
+
+				// ok, we load the image
+				let img = <HTMLElement>dom.firstChild;
+				img.setAttribute( 'src', src );
+				done++;
+			}
+			else {
+				// still not visible: may be next time
+				newList.push( el );
+			}
+		} );
+
+		Image.lazy_images_waiting = newList;
+
+		// no more elements to watch...
+		if( newList.length==0 ) {
+			clearInterval( Image.lazy_image_timer );
+			Image.lazy_image_timer = undefined;
+		}
+	}
+}

package/src/input.ts

@@ -0,0 +1,236 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file input.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+import { Component, CProps, CEventMap, EvFocus } from './component'
+//import { EvChange } from './x4_events';
+
+export type EditType = 'text' | 'number' | 'email' | 'date' | 'password' | 'file' | 'checkbox' | 'radio';
+
+export interface ValueHook {
+	get( ) : any;
+	set( v: any ) : void;
+}
+
+export interface InputEventMap extends CEventMap {
+//	change?: EvChange;
+//	focus?: EvFocus;
+}
+
+export interface InputProps<P extends InputEventMap = InputEventMap> extends CProps<P> {
+	value?: string;
+	name?: string;
+	type?: EditType
+	placeHolder?: string;
+	autoFocus?: boolean;
+	readOnly?: boolean;
+	tabIndex?: number | boolean;
+	pattern?: string;
+	uppercase?: boolean;
+	spellcheck?: boolean;
+	value_hook?: ValueHook;
+	min?: number;
+	max?: number;
+}
+
+
+/**
+ * base class for elements implementing an input
+ * CARE derived classes must set this.ui.input
+ */
+
+export class Input extends Component<InputProps,InputEventMap>
+{
+	constructor( props: InputProps ) {
+		super( props );
+	}
+
+	/** @ignore */	
+	render( props: InputProps ) {
+
+		this.setProp( 'tag', 'input' );
+		this._setTabIndex( props.tabIndex );
+
+		this.setAttributes( {
+			value: props.value,
+			type: props.type || 'text',
+			name: props.name,
+			placeholder: props.placeHolder,
+			autofocus: props.autoFocus,
+			readonly: props.readOnly,
+			autocomplete: 'new-password',	// chrome ignore 'off' but not something else than 'on'
+			tabindex: props.tabIndex,
+			spellcheck: props.spellcheck===false ? 'false' : undefined,
+			min: props.min,
+			max: props.max,
+			...props.attrs
+		});
+
+		if( props.uppercase ) {
+			this.setStyleValue( 'textTransform', 'uppercase' );
+		}
+	}
+
+	public getType( ) {
+		return this.m_props.type;
+	}
+
+	/**
+     * return the current editor value
+     */
+
+    public get value( ) : string {
+		
+		if( this.dom ) {
+			this.m_props.value = (<HTMLInputElement>this.dom).value;
+		}
+		
+		if( this.m_props.uppercase ) {
+			let upper = this.m_props.value.toUpperCase( );	// todo: locale ?
+			if( this.dom && upper!=this.m_props.value ) {
+				(<HTMLInputElement>this.dom).value = upper; // update the input
+			}
+
+			this.m_props.value = upper;
+		}
+		
+		return this.m_props.value;
+    }
+
+    /**
+     * Change the editor value
+     * @param value - new value to set
+     */
+	
+	public set value( value: string ) {
+		
+		this.m_props.value = value;
+
+		if( this.dom ) {
+			(<HTMLInputElement>this.dom).value = value;
+		}
+	}
+
+	public getStoreValue( ): any {
+
+		if( this.m_props.value_hook ) {
+			return this.m_props.value_hook.get( );
+		}
+		else {
+			let type = this.getAttribute('type');
+			if( type ) { type = type.toLowerCase( ); }
+
+			let value,
+				dom = (<HTMLInputElement>this.dom);
+
+            if( type === "file") {
+				value = [];
+				
+                let files = dom.files;
+                for( let file = 0; file < files.length; file++ ) {
+                    value.push( files[file].name );
+                }
+            }
+            else if ( type === 'checkbox' ) {
+				if( dom.checked ) {
+					value = 1;
+				}
+				else {
+					value = 0;
+				}
+			}
+			else if( type === 'radio' ) {
+				if( dom.checked ) {
+					value = this.value;
+				}
+			}
+			else if( type === 'date' ) {
+				debugger;
+			}
+			else {
+				value = this.value;
+			}
+
+			return value;
+		}
+	}
+
+	public setStoreValue( v: any ) {
+		
+		if( this.m_props.value_hook ) {
+			return this.m_props.value_hook.set( v );
+		}
+		else {
+			let type = this.getAttribute('type'),
+				dom = (<HTMLInputElement>this.dom);
+
+			if( type ) { type = type.toLowerCase( ); }
+			if( type==='checkbox' ) {
+				let newval = v!==null && v!=='0' && v!==0 && v!==false;
+				if( newval!==dom.checked ) {
+					dom.setAttribute( 'checked', ''+newval );
+					dom.dispatchEvent( new Event( 'change' ) );
+				}
+			}
+			else {
+				this.value = v;
+			}
+		}
+	}
+
+	set readOnly( ro: boolean ) {
+		this.setAttribute('readonly', ro );
+	}
+
+	/**
+	 * select all the text
+	 */
+
+	public selectAll( ) {
+        (<HTMLInputElement>this.dom).select(); 
+	}
+	
+	/**
+	 * select a part of the text
+	 * @param start 
+	 * @param length 
+	 */
+
+	public select( start: number, length: number = 9999 ) : void {
+		(<HTMLInputElement>this.dom).setSelectionRange( start, start+length );
+	}
+	
+	/**
+	 * get the selection as { start, length }
+	 */
+
+	public getSelection( ) {
+		let idom = (<HTMLInputElement>this.dom);
+
+		return {
+			start: idom.selectionStart,
+			length: idom.selectionEnd - idom.selectionStart,
+		};
+	}
+}