x4js 1.4.18 → 1.4.20

package/src/i18n.ts

@@ -28,6 +28,205 @@
 **/
 
 
+
+
+/**
+ * language definition
+ */
+
+ interface Language {
+    name: string;
+    base: string;
+	src_translations: any;
+    translations: any;
+}
+
+const sym_lang = Symbol( "i18n" );
+
+let languages: Record<string,Language> = {
+};
+
+/**
+ * create a new language
+ * @param name language name (code)
+ * @param base base language (code)
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * ```
+ */
+
+export function createLanguage( name: string, base: string ) {
+    languages[name] = { 
+        name,
+        base,
+		src_translations: {},
+        translations: {}
+    };
+}
+
+/**
+ * check if the given language is known
+ * @param name language name (code)
+ */
+
+export function isLanguage( name: string ): boolean {
+    return languages[name]!==undefined;
+}
+
+/**
+ * build the language with given fragments
+ * @param name language name (code)
+ * @param parts misc elements that make the language
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * const app = {
+ * 	clients: {
+ * 		translation1: "hello",
+ *  }
+ * }
+ * addTranslation( 'en', app );
+ * ```
+  */
+
+export function addTranslation( name, ...parts ) {
+	
+	if( !isLanguage(name) ) {
+		return;
+	}
+
+	const lang = languages[name];
+    
+	parts.forEach( p => {
+		_patch( lang.src_translations, p, lang.base );
+	} );
+
+	lang.translations = _mk_proxy( lang.src_translations, lang.base, true );
+}
+
+/**
+ * 
+ */
+
+function _patch( obj: any, by: any, def: string ) {
+	for( let n in by ) {
+		if( obj[n] instanceof Object ) {
+			_patch( obj[n], by[n], def );
+		}
+		else {
+			obj[n] = by[n];
+			obj[n] = _mk_proxy( obj[n], def, false );
+		}
+	}
+
+	return obj;
+}
+
+/**
+ * when we ask for _tr.xxx
+ * reqpath is set to [xxx]
+ * 
+ * then when we try to get _tr.xxx.yyy
+ * reqpath is [xxx,yyy]
+ * if yyy is not found, we try with base langage for the full reqpath 
+ * until no base found
+ */
+
+let req_path: (string | symbol)[];
+
+/**
+ * 
+ */
+
+function _findBaseTrans( base ) {
+
+	while( base ) {
+		const lang = languages[base];
+		let trans = lang.translations;
+		let value;
+
+		for( const p of req_path ) {
+			value = trans[p];
+			if( value===undefined ) {
+				break;
+			}
+
+			trans = value;
+		}
+
+		if( value!==undefined ) {
+			return trans;
+		}
+
+		base = lang.base;
+	}
+
+	console.error( "I18N error: unable to find", '_tr.'+req_path.join('.') );
+	return undefined;
+}
+
+/**
+ * 
+ */
+
+function _mk_proxy( obj: any, base: string, root: boolean ) : any {
+	return new Proxy( obj, {
+		get: (target, prop) => {
+			if( root ) {
+				req_path = [prop];
+			}
+			else {
+				req_path.push( prop );
+			}
+
+			let value = target[prop];
+			if( value===undefined && base ) {
+				value = _findBaseTrans( base );
+				// keep it for later
+				target[prop] = value;
+			}
+			return value;
+		}
+	});
+}
+
+export let _tr: any = {};
+
+/**
+ * select the given language as current
+ * @param name laguage name (code)
+ */
+
+export function selectLanguage( name: string ) {
+
+	if( !isLanguage(name) ) {
+		return;
+	}
+
+	_tr = languages[name].translations;
+	_tr[sym_lang] = name;
+}
+
+/**
+ * 
+ */
+
+export function getCurrentLanguage( ): string {
+	return _tr[sym_lang];
+}
+
+/**
+ * 
+ */
+
+export function getAvailableLanguages( ): string[] {
+	return Object.keys( languages );
+}
+
+
+
+
 /**
  * language definition
  * x4 specific strings
@@ -55,9 +254,9 @@ let fr = {
 		invalid_email: 'adresse mail invalide',
 		invalid_number: 'valeur numérique invalide',
 
-		diff_date_seconds: '{0} seconds',
+		diff_date_seconds: '{0} secondes',
 		diff_date_minutes: '{0} minutes',
-		diff_date_hours: '{0} hours',
+		diff_date_hours: '{0} heures',
 
 		invalid_date: 'Date non reconnue ({0})',
 		empty_list: 'Liste vide',
@@ -83,6 +282,7 @@ let fr = {
 };
 
 /** @ignore */
+
 let en = {
 	global: {
 		ok: 'OK',
@@ -91,119 +291,56 @@ let en = {
 		yes: 'Yes',
 		no: 'No',
 
-		required_field: "required field",
+		open: 'Open',
+		new: 'New',
+		delete: 'Delete',
+		close: 'Close',
+		save: 'Save',
+
+		search: 'Search',
+		search_tip: 'Type in the text to search. <b>Enter</b> to start the search. <b>Esc</b> to cancel.',
+
+		required_field: "missing information",
 		invalid_format: "invalid format",
+		invalid_email: 'invalid email address',
+		invalid_number: 'bad numeric value',
 
 		diff_date_seconds: '{0} seconds',
 		diff_date_minutes: '{0} minutes',
 		diff_date_hours: '{0} hours',
 
-		invalid_date: 'Bad date format {0}',
+		invalid_date: 'Unrecognized date({0})',
+		empty_list: 'Empty list',
 
-		copy: 'Copy',
-		cut: 'Cut',
-		paste: 'Paste'
-	}
-}
+		date_input_formats: 'm/d/y|m.d.y|m d y|m-d-y|mdy',
+		date_format: 'M/D/Y',
 
-/** @ignore */
-let all_langs = {
-	'fr': fr,
-	'en': _mk_proxy( _patch( {}, en ) )
-};
+		day_short: [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ],
+		day_long: [ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' ],
 
-/**
- * current language
- * FR by default
- * @example ```typescript
- * console.log( _tr.global.ok );
- */
+		month_short: [ 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jui', 'aug', 'sep', 'oct', 'nov', 'dec' ],
+		month_long: [ 'january', 'february', 'march', 'april', 'mau', 'june', 'jully', 'august', 'september', 'october', 'november', 'december' ],
 
-export let _tr: any = all_langs['fr'];
+		property: 'Property',
+		value: 'Value',
 
-/**
- * check if the language is known
- * @param name - language name to test 
- * @example ```typescript
- * if( isLanguage('fr') ) {
- * }
- */
-
-export function isLanguage( name ) {
-	return all_langs[name]!==undefined;
-}
+		err_403: `You do not have sufficient rights to do that action`,
 
-/**
- * select the current language
- * @param name - language name
- * @example ```typescript
- * selectLanguage( 'en' );
- */
-
-export function selectLanguage( name ) {
-
-	if( !isLanguage(name) ) {
-		return;
+		copy: 'Copy',
+		cut: 'Cut',
+		paste: 'Paste'
 	}
+};
 
-	_tr = all_langs[name];
-}
+createLanguage( 'fr', null );
+addTranslation( 'fr', fr );
 
-/**
- * define a translation
- * you can also patch 'global' elements witch are defined by x4
- * @param name - language name
- * @param definition - definition of the language
- * @example ```typescript
- * setTranslation( 'fr', {
- * 	this_is_an_example: 'ceci est un exemple',
- * 	this_is: {
- * 		another_example: 'ceci est un autre exemple'
- *  },
- *  global: {
- *    ok: 'O.K.'
- *  }
- * });
- * console.log( _tr.this_is_an_example ); // defined by the previous line
- * selectLanguage( 'en' );
- * console.log( _tr.this_is_an_example ); // 'en' do not define this, so we get 'fr' one
- * 
- */
+createLanguage( 'en', 'fr' );
+addTranslation( 'en', en );
 
-export function extendTranslation( name, definition ) {
-	
-	if( !isLanguage(name) ) {
-		return;
-	}
+selectLanguage( 'fr' );	// by default
 
-	_patch( all_langs[name], definition );
-}
 
 
-function _patch( obj, by ) {
-	for( let n in by ) {
-		if( obj[n] instanceof Object ) {
-			_patch( obj[n], by[n] );
-		}
-		else {
-			obj[n] = by[n];
-			if( obj[n] instanceof Object ) {
-				obj[n] = _mk_proxy( obj[n] );
-			}
-		}
-	}
 
-	return obj;
-}
 
-function _mk_proxy( obj: any ) : any {
-	return new Proxy( obj, {
-		get: function(target, prop, receiver) {
-			let value = target[prop];
-			if( value===undefined ) {
-				return fr[prop];
-			}
-			return value;
-		}
-	});
-}

package/src/icon.ts

@@ -30,7 +30,7 @@
 import { Component, CProps } from './component'
 import { Stylesheet } from './styles'
 import { HtmlString, isString } from './tools';
-import { BasicEvent, EvChange, EventMap, EventSource } from './x4_events';
+import { BasicEvent, EvChange, EventMap, EventSource } from './x4events';
 
 // ============================================================================
 // [ICON]
@@ -153,6 +153,7 @@ export class Icon extends Component<IconProps>
 		if (typeof (icon) === 'number') {
 			icon = icon.toString(16);
 			name = icon;
+			console.error( "deprecation error: invalid icon name" );	
 		}
 		else {
 			// var( <var-name> )
@@ -160,7 +161,7 @@ export class Icon extends Component<IconProps>
 			//	in the .css
 			//  --------------------------
 			//	:root {
-			//		--chevron-up: svgpath( "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z" );
+			//		--chevron-up: data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z"/></svg>';
 			//	}
 			//
 			//	var( "--chevron-up" )
@@ -193,15 +194,6 @@ export class Icon extends Component<IconProps>
 				return;
 			}
 
-			//	svgpath( <svg-path> )
-			//	svgpath( "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z" )
-			const reSvg3 = /\s*svgpath\s*\(\s*(.+)\s*\)\s*/gi;
-			let match_pth = reSvg3.exec( icon );
-			if( match_pth ) {
-				const pth  = this._setSVGPath( match_pth[1].trim( ) );
-				return;
-			}
-
 			//	data( <direct> )
 			//	data( "data:image/svg+xml;utf8,<svg...></svg>" )
 
@@ -212,6 +204,8 @@ export class Icon extends Component<IconProps>
 				return;
 			}
 			
+			//	cls( "fas fa-angle-up" )
+			//
 			const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
 			let match_cls = reCls.exec( icon );
 			if( match_cls ) {
@@ -220,6 +214,8 @@ export class Icon extends Component<IconProps>
 				return;
 			}
 			
+			//	url( "www.google.com" )
+			//
 			const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
 			let match_url = reUrl.exec( icon );
 			if( match_url ) {
@@ -234,6 +230,8 @@ export class Icon extends Component<IconProps>
 			}
 			else {
 				// todo: deprecated
+				console.error( "deprecation error: invalid icon name" );	
+
 				name = icon;
 				icon = Stylesheet.getVar( 'icon-'+icon ) as string;
 
@@ -241,7 +239,6 @@ export class Icon extends Component<IconProps>
 					// name your icon 'icon-xxx'
 					// ex:
 					// :root { --icon-zoom-p: f00e; }
-					console.assert( false );	
 					icon = '0'; 
 				}
 			}

package/src/image.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Component, CProps, html } from './component'
 
 // ============================================================================
@@ -167,7 +169,7 @@ export class Image extends Component<ImageProps>
 				src = el.src;
 				
 			// skip deleted elements
-			if( !dom || !document.contains(dom) ) {
+			if( !dom || dom.offsetParent === null ) {
 				// do not append to newList
 				return;
 			}
@@ -177,8 +179,8 @@ export class Image extends Component<ImageProps>
 			// 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) ) {
+				rc.top <= (window.innerHeight || x4document.documentElement.clientHeight) && 
+				rc.left <= (window.innerWidth || x4document.documentElement.clientWidth) ) {
 
 				// ok, we load the image
 				let img = <HTMLElement>dom.firstChild;

package/src/index.ts

@@ -81,4 +81,4 @@ export * from "./toaster"
 export * from "./tools"
 export * from "./tooltips"
 export * from "./treeview"
-export * from "./x4_events"
+export * from "./x4events"

package/src/input.ts

@@ -84,7 +84,7 @@ export class Input extends Component<InputProps,InputEventMap>
 			autofocus: props.autoFocus,
 			readonly: props.readOnly,
 			autocomplete: 'new-password',	// chrome ignore 'off' but not something else than 'on'
-			tabindex: props.tabIndex,
+			tabIndex: props.tabIndex,
 			spellcheck: props.spellcheck===false ? 'false' : undefined,
 			min: props.min,
 			max: props.max,

package/src/layout.ts

@@ -28,7 +28,7 @@
 */
 
 import { Component, CProps, ComponentContent, Container, ContainerProps, ContainerEventMap } from './component'
-import { } from './x4_events'
+import { } from './x4events'
 import { isArray } from './tools';
 
 // ============================================================================

package/src/link.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps, CEventMap, isHtmlString, HtmlString, html } from './component'
-import { EvClick, EventCallback } from './x4_events'
+import { EvClick, EventCallback } from './x4events'
 
 // ============================================================================
 // [LINK]

package/src/listview.ts

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Container, Component, ContainerProps, ContainerEventMap, EvDblClick } from './component'
 import { IconID } from './icon';
 import { HLayout, VLayout } from './layout'
@@ -34,7 +36,7 @@ import { Popup, PopupEventMap, PopupProps } from './popup';
 import { HtmlString, isFunction } from './tools';
 import { Menu, MenuItem } from "./menu";
 
-import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent, EvChange } from "./x4_events";
+import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent, EvChange } from "./x4events";
 
 /**
  * item definition
@@ -728,18 +730,18 @@ export class PopupListView extends Popup<PopupListViewProps,PopupListViewEventMa
 
 	// todo: move into popup
 	show(modal?: boolean) {
-		document.addEventListener('mousedown', this._handleClick);
+		x4document.addEventListener('mousedown', this._handleClick);
 		super.show(modal);
 	}
 
 	hide( ) {
-		document.removeEventListener('mousedown', this._handleClick);
+		x4document.removeEventListener('mousedown', this._handleClick);
 		super.hide( );
 	}
 
 	// todo: move into popup
 	close() {
-		document.removeEventListener('mousedown', this._handleClick);
+		x4document.removeEventListener('mousedown', this._handleClick);
 		super.close();
 	}
 

package/src/menu.ts

@@ -27,8 +27,10 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { CEventMap, Component, CProps } from './component'
-import { EvClick, EventCallback } from './x4_events'
+import { EvClick, EventCallback } from './x4events'
 
 import { Popup, PopupProps } from './popup'
 import { Icon, IconID } from './icon'
@@ -155,7 +157,7 @@ export class Menu extends Popup<MenuProps>
 		//console.log( 'addmenu' );
 		if (Menu.watchCount == 0) {
 			Menu.rootMenu = menu;
-			document.addEventListener('mousedown', Menu._mouseWatcher);
+			x4document.addEventListener('mousedown', Menu._mouseWatcher);
 		}
 
 		Menu.watchCount++;
@@ -167,7 +169,7 @@ export class Menu extends Popup<MenuProps>
 		Menu.watchCount--;
 
 		if (Menu.watchCount == 0) {
-			document.removeEventListener('mousedown', Menu._mouseWatcher);
+			x4document.removeEventListener('mousedown', Menu._mouseWatcher);
 		}
 	}
 

package/src/popup.ts

@@ -27,9 +27,11 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Container, CProps, flyWrap, SizerOverlay, EvOverlayResize, Component, ContainerEventMap, EvSize } from './component'
 import { Point, Size, getMousePos, asap } from './tools'
-import { BasicEvent } from './x4_events';
+import { BasicEvent } from './x4events';
 import { Application } from './application';
 
 
@@ -89,11 +91,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 		if (this.m_hasMask) {
 
 			// remove the focus
-			const focus = document.activeElement as HTMLElement;
+			const focus = x4document.activeElement as HTMLElement;
 			if (focus) {
 				focus.blur()
 			}
-			this.m_ui_mask = <HTMLElement>document.body.lastChild;
+			this.m_ui_mask = <HTMLElement>x4document.body.lastChild;
 
 			while (this.m_ui_mask) {
 
@@ -134,13 +136,13 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 			top: 0
 		});
 
-		document.body.appendChild(this._build());
+		x4document.body.appendChild(this._build());
 
 		this.removeClass('@hidden');
 		this.centerOnScreen( );
 
 		if (modal) {
-			let focus = document.activeElement;
+			let focus = x4document.activeElement;
 			if (!this.dom.contains(focus)) {
 				
 				const autofocus = this.queryItem('[autofocus]');
@@ -167,8 +169,8 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 	centerOnScreen( ) {
 		let rc = this.getBoundingRect();
 
-		let x = (document.body.clientWidth - rc.width) / 2,
-			y = (document.body.clientHeight - rc.height) / 2;
+		let x = (x4document.body.clientWidth - rc.width) / 2,
+			y = (x4document.body.clientHeight - rc.height) / 2;
 
 		this.setStyleValue('left', x);
 		this.setStyleValue('top', y);
@@ -196,7 +198,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 		}
 
 		// @TODO: this is a minimal overflow problem solution
-		let rc = document.body.getBoundingClientRect(),
+		let rc = x4document.body.getBoundingClientRect(),
 			rm = this.getBoundingRect();
 
 		if (halign == 'r') {
@@ -418,7 +420,7 @@ function x4handleKeyDown(e: KeyboardEvent) {
 			return;
 		}
 
-		let topStack = document.body;
+		let topStack = x4document.body;
 		if (Popup.modal_stack.length) {
 			topStack = Popup.modal_stack[Popup.modal_stack.length - 1];
 		}
@@ -436,7 +438,7 @@ function x4handleKeyDown(e: KeyboardEvent) {
 function _nextTab(root: HTMLElement, el: HTMLElement, prev: boolean) {
 
 	// first check if the focus is one of our child (disabled...)
-	let focusEl = document.activeElement;
+	let focusEl = x4document.activeElement;
 	if (!root.contains(focusEl)) {
 		return;
 	}
@@ -482,8 +484,8 @@ function _nextTab(root: HTMLElement, el: HTMLElement, prev: boolean) {
 
 function installKBHandler( ) {
 	// set on body to be called after document (where all component domevent go)
-	document.body.addEventListener('keydown', x4handleKeyDown, true);
+	x4document.body.addEventListener('keydown', x4handleKeyDown, true);
 }
 
 // too early ?
-document.body ? installKBHandler( ) : window.addEventListener( 'load', installKBHandler );
+x4document.body ? installKBHandler( ) : window.addEventListener( 'load', installKBHandler );

package/src/property_editor.ts

@@ -28,7 +28,7 @@
 **/
 
 import { CEventMap, Component, CProps } from './component'
-import { EvChange, EventCallback } from './x4_events'
+import { EvChange, EventCallback } from './x4events'
 
 import { InputProps, Input } from './input'
 import { TextEdit } from './textedit'