x4js 1.5.16 → 1.5.18

package/lib/src/i18n.ts

@@ -1,346 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @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 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
- */
-
-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

@@ -1,335 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @file icon.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 { Stylesheet } from './styles'
-import { HtmlString, isString } from './tools';
-import { BasicEvent, EvChange, EventMap, EventSource } from './x4events';
-
-// ============================================================================
-// [ICON]
-// ============================================================================
-
-export type IconID = string | number;
-
-export interface IconProps extends CProps {
-	icon: IconID;
-	size?: number;
-}
-
-export interface EvLoaded extends BasicEvent {
-	url: string;
-	svg: string;
-}
-
-export function EvLoaded( url: string, svg: string, context = null ) {
-	return BasicEvent<EvLoaded>({ url, svg, context });
-}
-
-interface LoadingEventMap extends EventMap {
-	loaded: EvLoaded;
-}
-
-function trimQuotes( str:string ): string {
-	const l = str.length;
-	if( str[0]=='"' && str[l-1]=='"' ) {
-		str = str.substring( 1, l-1 )
-		str = str.replaceAll( '\\"', "'" );
-		return str;
-	}
-
-	return str;
-}
-
-class Loader extends EventSource<LoadingEventMap> {
-	svgs: Map<string,string>;
-
-	constructor( ) {
-		super( );
-		this.svgs = new Map( );
-	}
-
-	load( url: string ) {
-		if( this.svgs.has(url) ) {
-			const svg = this.svgs.get( url );
-			if( svg ) {
-				//console.log( 'cached=', url );
-				this.signal( 'loaded', EvLoaded(url,svg) );
-			}
-		}
-		else {
-			// mark it as loading
-			this.svgs.set( url, null );
-
-			// then start loading
-			const _load = async ( url ) => {
-					
-				// shortcut
-				if( url.substring(0,24)=="data:image/svg+xml;utf8,") {
-					const svg = url.substring(24);
-					this.svgs.set( url, svg );
-					this.signal( 'loaded', EvLoaded(url,svg) );
-				}
-				else {
-					const r = await fetch( url );
-					if( r.ok ) {
-						const svg = await r.text();
-						// check response, must be svg
-						//TODO: find better
-						if (!svg.startsWith("<svg") && !svg.startsWith('<?xml') ) {
-							console.error( "svg loading error: ", svg );
-							this.signal( 'loaded', EvLoaded(url,"") );
-						}
-						else {
-							this.svgs.set( url, svg );
-							this.signal( 'loaded', EvLoaded(url,svg) );
-						}
-					}
-				}
-			}
-
-			_load( url );			
-		}
-	}
-}
-
-const svgLoader = new Loader( );
-
-
-/**
- * standard icon
- */
-export class Icon extends Component<IconProps>
-{
-	private m_icon: string;
-	private m_iconName: IconID;
-
-	constructor( props: IconProps | string ) {
-
-		if( isString(props) ) {
-			super( { icon: props } );
-		}
-		else {
-			super( props );
-		}
-
-		this._setIcon( this.m_props.icon, false );
-		if( this.m_props.size ) {
-			this.setStyleValue( 'fontSize', this.m_props.size );
-		}
-	}
-
-	private _setIcon(icon: IconID, remove_old: boolean) {
-
-		if( !icon ) {
-			this.m_iconName = '';
-			return;
-		}
-
-		this.removeClass( '@svg' );
-
-		//	todo: deprecated
-		let name, url: string;
-		if (typeof (icon) === 'number') {
-			icon = icon.toString(16);
-			name = icon;
-			console.error( "deprecation error: invalid icon name" );	
-		}
-		else {
-			// var( <var-name> )
-			//	
-			//	in the .css
-			//  --------------------------
-			//	:root {
-			//		--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" )
-			const reVar = /\s*var\s*\(\s*(.+)\s*\)\s*/gi;
-			let match_var = reVar.exec( icon );
-			while( match_var ) {
-				const varname = match_var[1].trim( );
-				icon = (Stylesheet.getVar(varname) as string).trim( );
-                if (icon == '' || icon === undefined) {
-					console.error( `icon: unable to find variable named '${varname}'` );
-					return;
-				}
-				else {
-					icon = trimQuotes( icon );
-				}
-
-				match_var = reVar.exec( icon );
-			}
-
-			// <svg ...>
-			if( icon.startsWith('<svg') ) {
-				this._setSVG( 'data:image/svg+xml;utf8,'+icon);
-				return;
-			}
-			
-			//	svg( <svg-filename> )	-> 	svg( "mysvgfile.svg" )	
-			//	<svg-filename>.svg 		->  "mysvgfile.svg"
-
-			const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
-			const reSvg2 = /(.*\.svg)$/gi;
-			
-			let match_svg = reSvg.exec( icon ) || reSvg2.exec(icon);
-			if( match_svg ) {
-				const url  = match_svg[1].trim( );
-				this._setSVG( url );
-				return;
-			}
-
-			//	data( <direct> )
-			//	data( "data:image/svg+xml;utf8,<svg...></svg>" )
-
-			const reSvg4 = /^\s*(data\:image\/.+)\s*$/gi;
-			let match_dta = reSvg4.exec( icon );
-			if( match_dta ) {
-				this._setSVG( match_dta[1] );
-				return;
-			}
-			
-			//	cls( "fas fa-angle-up" )
-			//
-			const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
-			let match_cls = reCls.exec( icon );
-			if( match_cls ) {
-				const classes  = match_cls[1].trim( );
-				this.addClass( classes );
-				return;
-			}
-			
-			//	url( "www.google.com" )
-			//
-			const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
-			let match_url = reUrl.exec( icon );
-			if( match_url ) {
-				url  = trimQuotes( match_url[1].trim( ) );
-				// this value is escaped				
-				url = url.replaceAll( "\\", "" );
-				this._setSVG( url );
-				return;
-			}
-			else {
-				// todo: deprecated
-				console.error( "deprecation error: invalid icon name" );	
-
-				name = icon;
-				icon = Stylesheet.getVar( 'icon-'+icon ) as string;
-
-				if( icon=='' || icon===undefined ) { 
-					// name your icon 'icon-xxx'
-					// ex:
-					// :root { --icon-zoom-p: f00e; }
-					icon = '0'; 
-				}
-			}
-		}
-
-		this.m_iconName = name;
-		if( this.m_icon===icon ) {
-			return;
-		}
-
-		let css = Component.getCss(),
-			rulename: string;
-
-		if (remove_old && this.m_icon) {
-			rulename = 'icon-' + name;
-			this.removeClass(rulename);
-		}
-				
-		// generate dynamic css icon rule
-		rulename = 'icon-' + name;
-		
-		if( Icon.icon_cache[rulename]===undefined ) {
-			Icon.icon_cache[rulename] = true;
-
-			let rule: string;
-
-			if( url ) {
-				rule =  `display: block; content: ' '; background-image: url(${url}); background-size: contain; width: 100%; height: 100%; background-repeat: no-repeat; color: white;`;
-			}
-			else {
-				rule = `content: "\\${icon}";`;
-			}
-
-			css.setRule(rulename, `.${rulename}::before {${rule}}`);
-		}
-
-		this.addClass(rulename);
-		this.m_icon = icon;
-	}
-
-	/**
-	 * change the icon
-	 * @param icon - new icon
-	 */
-	
-	public set icon( icon: IconID ) {
-		this._setIcon( icon, true );
-	}
-
-	public get icon( ) : IconID {
-		return this.m_iconName;
-	}
-
-	private _setSVG( url: string ) {
-
-		const set = ( ev: EvLoaded ) => {
-			//console.log( 'set=', ev.url, 'url=', url );
-			
-			if( ev.url==url ) {
-				this.addClass( '@svg-icon' );
-				this.setContent( HtmlString.from(ev.svg), false );
-				svgLoader.off( 'loaded', set );
-			}
-		}
-
-		svgLoader.on( 'loaded', set );
-		svgLoader.load( url );
-	}
-
-	/**
-	 * todo: try to extract viewbox
-	 */
-
-	private _setSVGPath( pth: string ) {
-		this.addClass( '@svg-icon' );
-		this.setContent( HtmlString.from(`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="${pth}/></svg>`), false );
-	}
-
-	/**
-	 * 
-	 */
-	
-	private static icon_cache = [];
-}
-