x4js 1.4.53 → 1.5.0

package/lib/ts_src/image.ts

@@ -0,0 +1,204 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file image.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy 
+* of this software and associated documentation files (the "Software"), to deal 
+* in the Software without restriction, including without limitation the rights 
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
+* of the Software, and to permit persons to whom the Software is furnished to do so, 
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+
+import { x4document } from './x4dom'
+
+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 || dom.offsetParent === null ) {
+				// 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 || x4document.documentElement.clientHeight) && 
+				rc.left <= (window.innerWidth || x4document.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/lib/ts_src/index.ts

@@ -0,0 +1,88 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file index.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy 
+* of this software and associated documentation files (the "Software"), to deal 
+* in the Software without restriction, including without limitation the rights 
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
+* of the Software, and to permit persons to whom the Software is furnished to do so, 
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+
+export * from "./application"
+export * from "./autocomplete"
+export * from "./base_component"
+//export * from "./base64"
+export * from "./button"
+export * from "./calendar"
+export * from "./canvas"
+export * from "./cardview"
+export * from "./checkbox"
+export * from "./color"
+export * from "./colorpicker"
+export * from "./combobox"
+export * from "./component"
+export * from "./datastore"
+export * from "./dialog"
+export * from "./dom_events"
+export * from "./drag_manager"
+export * from "./drawtext"
+export * from "./fileupload"
+export * from "./form"
+export * from "./formatters"
+export * from "./gridview"
+export * from "./i18n"
+export * from "./icon"
+export * from "./image"
+export * from "./input"
+export * from "./label"
+export * from "./layout"
+export * from "./link"
+export * from "./listview"
+export * from "./md5"
+export * from "./menu"
+export * from "./messagebox"
+export * from "./panel"
+export * from "./popup"
+export * from "./property_editor"
+export * from "./radiobtn"
+export * from "./rating"
+export * from "./request"
+export * from "./router"
+export * from "./settings"
+export * from "./sidebarview"
+//export * from "./smartedit"
+export * from "./spreadsheet"
+export * from "./styles"
+export * from "./svgcomponent"
+export * from "./tabbar"
+export * from "./tabview"
+export * from "./textarea"
+export * from "./textedit"
+//export * from "./texthiliter"
+export * from "./toaster"
+export * from "./tools"
+export * from "./tooltips"
+export * from "./treeview"
+export * from "./x4events"
+export * from "./x4react"
+
+export * from "./version"

package/lib/ts_src/input.ts

@@ -0,0 +1,249 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file input.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy 
+* of this software and associated documentation files (the "Software"), to deal 
+* in the Software without restriction, including without limitation the rights 
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
+* of the Software, and to permit persons to whom the Software is furnished to do so, 
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+
+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;
+	autosel?: boolean;
+}
+
+
+/**
+ * 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.setTag( '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
+		});
+
+		this.m_props.autosel = props.autosel ?? true;
+		
+		if( props.uppercase ) {
+			this.setStyleValue( 'textTransform', 'uppercase' );
+		}
+
+		if( this.m_props.autosel ) {
+			this.setDomEvent( "focus", ( ) => {
+				this.selectAll( );
+			});
+		}
+	}
+
+	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,
+		};
+	}
+}

package/lib/ts_src/label.ts

@@ -0,0 +1,128 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file label.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy 
+* of this software and associated documentation files (the "Software"), to deal 
+* in the Software without restriction, including without limitation the rights 
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
+* of the Software, and to permit persons to whom the Software is furnished to do so, 
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+
+import { Component, CProps } from './component'
+import { HtmlString } from './tools'
+import { Icon, IconID } from './icon'
+
+// ============================================================================
+// [LABEL]
+// ============================================================================
+
+export interface LabelProps extends CProps {
+	text: string | HtmlString;
+	icon?: IconID;
+	align?: 'left' | 'right' | 'center';
+	multiline?: boolean;	// understand \n as newlines
+}
+
+/**
+ * Standard label 
+ */
+
+export class Label extends Component<LabelProps>
+{
+	/**
+	 * double constructor, from string/html or as usual
+	 */
+
+	constructor( props: LabelProps );
+	constructor( text: string | HtmlString );
+	constructor( param: any ) {
+
+		if( typeof(param)==='string' || param instanceof HtmlString ) {
+			super( { text: param } );
+		}
+		else {
+			super( param );
+		}
+	}
+
+	/** @ignore */
+	render( props: LabelProps ) {
+
+		let text: any = this.m_props.text;
+		if( this.m_props.multiline && !(text instanceof HtmlString) ) {
+			text = new HtmlString( (text as string).replace( /\n/g, '<br/>' ) );
+		}
+
+		if( !props.icon ) {
+			this.setContent( text );
+		}
+		else {
+			this.setTag( 'span' );
+			this.addClass( '@hlayout' );
+
+			this.setContent( [
+				new Icon( { icon: props.icon } ),
+				new Component( { content: text, ref: 'text' } )
+			] );
+		}
+
+		this.addClass( props.align ?? 'left' );
+	}
+
+	/**
+	 * change the displayed text
+	 * @param text - new text
+	 */
+
+	public set text( txt: string | HtmlString ) {
+
+		let props = this.m_props;	
+
+		if( props.text!==txt ) {
+			props.text = txt;
+
+			let text: any = this.m_props.text;
+			if( this.m_props.multiline && !(text instanceof HtmlString) ) {
+				text = new HtmlString( (text as string).replace( '/\n/g', '<br/>' ) );
+			}
+
+			if( this.dom ) {
+
+				let comp: Component = this;
+				if( this.m_props.icon ) {
+					comp = this.itemWithRef<Component>( 'text' );
+				}
+
+				comp.setContent( text );
+			}
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	public get text( ) : string | HtmlString {
+		return this.m_props.text;
+	}
+}
+