x4js 1.5.16 → 1.5.18

package/lib/src/image.ts

@@ -1,204 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @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/src/index.ts

@@ -1,88 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @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/src/input.ts

@@ -1,249 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @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/src/label.ts

@@ -1,128 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @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 { escapeHtml, 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( escapeHtml(text,true) );
-		}
-
-		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(escapeHtml(text,true) );
-			}
-
-			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;
-	}
-}
-