x4js 1.5.32 → 1.5.34

package/lib/src/i18n.ts

@@ -99,30 +99,84 @@ export function addTranslation( name, ...parts ) {
 	const lang = languages[name];
     
 	parts.forEach( p => {
-		_patch( lang.src_translations, p, lang.base );
+		_patch( lang.src_translations, p );
 	} );
 
-	lang.translations = _mk_proxy( lang.src_translations, lang.base, true );
+	lang.translations = _proxyfy( lang.src_translations, lang.base, true );
 }
 
 /**
- * 
+ * patch the base object with the given object
+ * (real patch)
  */
 
-function _patch( obj: any, by: any, def: string ) {
+function _patch( obj: any, by: any ) {
+
 	for( let n in by ) {
-		if( obj[n] instanceof Object ) {
-			_patch( obj[n], by[n], def );
+		const src = by[n];
+		if( typeof src === "string" ) {
+			obj[n] = src;
+		}
+		else {
+			if( Array.isArray(src) && (!obj[n] || !Array.isArray(obj[n])) ) {
+				obj[n] = [...src];
+			}
+			else if( !obj[n] || (typeof obj[n] !== "object") ) {
+				obj[n] = { ...src };
+			}
+			else {
+				_patch( obj[n], by[n] );
+			}
+		}
+	}
+}
+
+/**
+ * create a proxy for all sub objects
+ * (deep traverse)
+ */
+
+function _proxyfy( obj: any, base: any, root ) {
+
+	const result = {}
+
+	for( const n in obj ) {
+		if( typeof obj[n]!=="string" && !Array.isArray(obj[n])) {
+			result[n] = _proxyfy( obj[n], base, false );
 		}
 		else {
-			obj[n] = by[n];
-			obj[n] = _mk_proxy( obj[n], def, false );
+			result[n] = obj[n];
+		}
+	}
+
+	return _mk_proxy( result, base, root );
+}
+
+
+/**
+ * create a proxy for the given object
+ */
+
+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 );
 	}
 
-	return obj;
+			let value = target[prop];
+			if( value===undefined && base ) {
+				value = _findBaseTrans( base );
+			}
+			return value;
+		}
+	});
 }
 
+
 /**
  * when we ask for _tr.xxx
  * reqpath is set to [xxx]
@@ -166,31 +220,6 @@ function _findBaseTrans( base ) {
 	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 = {};
 
 /**

package/lib/src/i18n.ts.bak

@@ -0,0 +1,347 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file i18n.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.
+**/
+
+
+
+
+/**
+ * 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 language name (code)
+ */
+
+export function selectLanguage( name: string ) {
+
+	if( !isLanguage(name) ) {
+		return;
+	}
+
+	_tr = languages[name].translations;
+	_tr[sym_lang] = name;
+	return _tr;
+}
+
+/**
+ * 
+ */
+
+export function getCurrentLanguage( ): string {
+	return _tr[sym_lang];
+}
+
+/**
+ * 
+ */
+
+export function getAvailableLanguages( ): string[] {
+	return Object.keys( languages );
+}
+
+
+
+
+/**
+ * language definition
+ * x4 specific strings
+ */
+
+let fr = {
+	global: {
+		ok: 'OK',
+		cancel: 'Annuler',
+		ignore: 'Ignorer',
+		yes: 'Oui',
+		no: 'Non',
+
+		open: 'Ouvrir',
+		new: 'Nouveau',
+		delete: 'Supprimer',
+		close: 'Fermer',
+		save: 'Enregistrer',
+
+		search: 'Rechercher',
+		search_tip: 'Saisissez le texte à rechercher. <b>Enter</b> pour lancer la recherche. <b>Esc</b> pour annuler.',
+
+		required_field: "information requise",
+		invalid_format: "format invalide",
+		invalid_email: 'adresse mail invalide',
+		invalid_number: 'valeur numérique invalide',
+
+		diff_date_seconds: '{0} secondes',
+		diff_date_minutes: '{0} minutes',
+		diff_date_hours: '{0} heures',
+
+		invalid_date: 'Date non reconnue ({0})',
+		empty_list: 'Liste vide',
+
+		date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
+		date_format: 'D/M/Y',
+
+		day_short: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],
+		day_long: [ 'dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi' ],
+
+		month_short: [ 'jan', 'fév', 'mar', 'avr', 'mai', 'jun', 'jui', 'aoû', 'sep', 'oct', 'nov', 'déc' ],
+		month_long: [ 'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre' ],
+
+		property: 'Propriété',
+		value: 'Valeur',
+
+		err_403: `Vous n'avez pas les droits suffisants pour effectuer cette action`,
+
+		copy: 'Copier',
+		cut: 'Couper',
+		paste: 'Coller'
+	}
+};
+
+/** @ignore */
+
+let en = {
+	global: {
+		ok: 'OK',
+		cancel: 'Cancel',
+		ignore: 'Ignore',
+		yes: 'Yes',
+		no: 'No',
+
+		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: 'Unrecognized date({0})',
+		empty_list: 'Empty list',
+
+		date_input_formats: 'm/d/y|m.d.y|m d y|m-d-y|mdy',
+		date_format: 'M/D/Y',
+
+		day_short: [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ],
+		day_long: [ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' ],
+
+		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' ],
+
+		property: 'Property',
+		value: 'Value',
+
+		err_403: `You do not have sufficient rights to do that action`,
+
+		copy: 'Copy',
+		cut: 'Cut',
+		paste: 'Paste'
+	}
+};
+
+createLanguage( 'fr', null );
+addTranslation( 'fr', fr );
+
+createLanguage( 'en', 'fr' );
+addTranslation( 'en', en );
+
+selectLanguage( 'fr' );	// by default
+
+
+
+
+

package/lib/src/icon.ts

@@ -36,6 +36,14 @@ import { BasicEvent, EvChange, EventMap, EventSource } from './x4events';
 // [ICON]
 // ============================================================================
 
+/**
+ * iconID can be:
+ * - "url( <path to image> )" ex: "url(my/path/to/my/image.svg)"
+ * - "var( <css variable> )"
+ * - "cls( <font class> )"
+ * - "char( <character> )" ex: "font-char( \uf00d )"
+ */
+
 export type IconID = string | number;
 
 export interface IconProps extends CProps {
@@ -245,6 +253,17 @@ export class Icon extends Component<IconProps>
 				this._setSVG( url );
 				return;
 			}
+
+			//	url( "www.google.com" )
+			//
+			const reChar = /\s*font-char\s*\(\s*(.+)\s*\)\s*/gi;
+			let match_char = reChar.exec( icon );
+			if( match_char ) {
+				this.removeClass( '@svg-icon' );
+				this.setContent( match_char[1], false );
+				return;
+			}
+			
 			else {
 				// todo: deprecated
 				console.error( "deprecation error: invalid icon name" );	

package/lib/src/svgcomponent.ts

@@ -68,7 +68,7 @@ function clean( a, ...b ) {
  * 
  */
 
-abstract class SVGItem {
+export abstract class SVGItem {
 	private m_tag: string
 	private m_attrs: Map<string,string>;
 	private m_style: Map<string,string>;
@@ -242,7 +242,7 @@ abstract class SVGItem {
  * 
  */
 
-class SVGPath extends SVGItem {
+export class SVGPath extends SVGItem {
 	private m_path: string;
 
 	constructor( ) {
@@ -314,7 +314,7 @@ class SVGPath extends SVGItem {
  * 
  */
 
-class SVGText extends SVGItem {
+export class SVGText extends SVGItem {
 
 	private m_text;
 
@@ -377,7 +377,7 @@ class SVGText extends SVGItem {
  * 
  */
 
-class SVGShape extends SVGItem {
+export class SVGShape extends SVGItem {
 	constructor( tag: string ) {
 		super( tag );
 	}
@@ -389,7 +389,7 @@ class SVGShape extends SVGItem {
 
 type number_or_perc = number | `${string}%`
 
-class SVGGradient extends SVGItem {
+export class SVGGradient extends SVGItem {
 
 	private static g_id = 1;
 
@@ -434,7 +434,7 @@ class SVGGradient extends SVGItem {
  * 
  */
 
-class SVGGroup extends SVGItem {
+export class SVGGroup extends SVGItem {
 	protected m_items: SVGItem[];
 
 	constructor( tag = "g" ) {

package/lib/src/version.ts

@@ -27,4 +27,4 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-export const x4js_version = "1.5.32";
+export const x4js_version = "1.5.34";

package/lib/types/icon.d.ts

@@ -28,6 +28,13 @@
 **/
 import { Component, CProps } from './component';
 import { BasicEvent } from './x4events';
+/**
+ * iconID can be:
+ * - "url( <path to image> )" ex: "url(my/path/to/my/image.svg)"
+ * - "var( <css variable> )"
+ * - "cls( <font class> )"
+ * - "char( <character> )" ex: "font-char( \uf00d )"
+ */
 export type IconID = string | number;
 export interface IconProps extends CProps {
     icon: IconID;

package/lib/types/svgcomponent.d.ts

@@ -30,7 +30,7 @@ import { Component, CProps } from './component';
 /**
  *
  */
-declare abstract class SVGItem {
+export declare abstract class SVGItem {
     private m_tag;
     private m_attrs;
     private m_style;
@@ -98,7 +98,7 @@ declare abstract class SVGItem {
 /**
  *
  */
-declare class SVGPath extends SVGItem {
+export declare class SVGPath extends SVGItem {
     private m_path;
     constructor();
     renderAttrs(): string;
@@ -134,7 +134,7 @@ declare class SVGPath extends SVGItem {
 /**
  *
  */
-declare class SVGText extends SVGItem {
+export declare class SVGText extends SVGItem {
     private m_text;
     constructor(x: number, y: number, txt: string);
     font(font: string): this;
@@ -147,14 +147,14 @@ declare class SVGText extends SVGItem {
 /**
  *
  */
-declare class SVGShape extends SVGItem {
+export declare class SVGShape extends SVGItem {
     constructor(tag: string);
 }
 /**
  *
  */
 type number_or_perc = number | `${string}%`;
-declare class SVGGradient extends SVGItem {
+export declare class SVGGradient extends SVGItem {
     private static g_id;
     private m_id;
     private m_stops;
@@ -166,7 +166,7 @@ declare class SVGGradient extends SVGItem {
 /**
  *
  */
-declare class SVGGroup extends SVGItem {
+export declare class SVGGroup extends SVGItem {
     protected m_items: SVGItem[];
     constructor(tag?: string);
     path(): SVGPath;

package/lib/types/version.d.ts

@@ -26,4 +26,4 @@
 * 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 declare const x4js_version = "1.5.32";
+export declare const x4js_version = "1.5.34";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.5.32",
+	"version": "1.5.34",
 	"description": "X4js core files",
 	"main": "lib/cjs/index.js",
 	"types": "lib/types/index.d.ts",