x4js 1.4.17 → 1.4.21

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]
@@ -100,10 +100,15 @@ class Loader extends EventSource<LoadingEventMap> {
 					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) );
+						// check response, must be svg
+						if( !svg.startsWith("<svg") ) {
+							console.error( "svg loading error: ", svg );
+							this.signal( 'loaded', EvLoaded(url,"") );
+						}
+						else {
+							this.svgs.set( url, svg );
+							this.signal( 'loaded', EvLoaded(url,svg) );
+						}
 					}
 				}
 			}
@@ -153,6 +158,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 +166,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 +199,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 +209,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 +219,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 +235,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 +244,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

@@ -29,7 +29,7 @@
 
 export * from "./application"
 export * from "./base_component"
-export * from "./base64"
+//export * from "./base64"
 export * from "./button"
 export * from "./calendar"
 export * from "./canvas"
@@ -68,7 +68,7 @@ export * from "./request"
 export * from "./router"
 export * from "./settings"
 export * from "./sidebarview"
-export * from "./smartedit"
+//export * from "./smartedit"
 export * from "./spreadsheet"
 export * from "./styles"
 export * from "./svgcomponent"
@@ -76,9 +76,9 @@ export * from "./tabbar"
 export * from "./tabview"
 export * from "./textarea"
 export * from "./textedit"
-export * from "./texthiliter"
+//export * from "./texthiliter"
 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);
 		}
 	}