x4js 1.4.18 → 1.4.22

package/src/component.ts

@@ -34,9 +34,11 @@
  */
 
 import { pascalCase, Rect, isString, isArray, Size, Point, isNumber, asap, HtmlString, isHtmlString, Constructor, getMousePos } from './tools';
+import { x4document } from './x4dom';
+
 import { Stylesheet, ComputedStyle } from './styles';
 import { _tr } from './i18n';
-import { BasicEvent, EventCallback } from './x4_events';
+import { BasicEvent, EventCallback } from './x4events';
 import { BaseComponent, BaseComponentProps, BaseComponentEventMap } from './base_component';
 import { IDOMEvents, X4ElementEventMap } from './dom_events';
 
@@ -725,21 +727,12 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		}
 	}
 
-	///@deprecated
-	//private build(): void  {}
-	/**
-	 * @deprecated
-	 */
-	
-	private Build(): void { }
-
 	public _build(): HTMLElement {
 		if (this.m_dom) {
 			return this.m_dom;
 		}
 
 		this._createDOM();
-
 		return this.m_dom;
 	}
 
@@ -800,10 +793,10 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		let vdom = this.m_iprops;
 
 		if (props.ns) {
-			this.m_dom = <HTMLElement>document.createElementNS(props.ns, props.tag ?? 'div');
+			this.m_dom = <HTMLElement>x4document.createElementNS(props.ns, props.tag ?? 'div');
 		}
 		else {
-			this.m_dom = document.createElement(props.tag ?? 'div');
+			this.m_dom = x4document.createElement( (props.tag ?? 'div') as any );
 		}
 
 		this.m_dom[_x4_el_sym] = this;
@@ -880,7 +873,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		// wait for dom insertion inside document.body
 		if (!Component.__createObserver) {
 			Component.__createObserver = new MutationObserver(Component._observeCreation);
-			Component.__createObserver.observe(document.body, { childList: true, subtree: true });
+			Component.__createObserver.observe(x4document.body, { childList: true, subtree: true });
 		}
 
 		return this.m_dom;
@@ -1190,10 +1183,10 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			Component.__privateEvents[name] = true; // todo count it
 
 			if (passiveEvents[name]) {
-				document.addEventListener(name, Component._dispatchEvent, { passive: false, capture: true });
+				x4document.addEventListener(name as any, Component._dispatchEvent, { passive: false, capture: true });
 			}
 			else {
-				document.addEventListener(name, Component._dispatchEvent, true);
+				x4document.addEventListener(name as any, Component._dispatchEvent, true);
 			}
 		}
 
@@ -1415,8 +1408,8 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 	 * 
 	 */
 
-	private static dispatchCaptures(event: UIEvent) {
-		Component.__capture.handler(event);
+	private static dispatchCaptures(event: Event) {
+		Component.__capture.handler(event as UIEvent);
 	}
 
 	/**
@@ -1447,12 +1440,12 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 
 		//	todo: review that
 
-		let iframes = document.querySelectorAll("iframe");
+		let iframes = x4document.querySelectorAll<HTMLIFrameElement>("iframe");
 		iframes.forEach( f => {
 			flyWrap(f).setStyleValue( 'pointer-events', 'none' );
 		});
 
-		let overs = document.querySelectorAll(":hover");
+		let overs = x4document.querySelectorAll(":hover");
 
 		let cursor = null;
 		if (overs.length) {
@@ -1461,7 +1454,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			cursor = style.cursor;
 		}
 
-		Component.__capture_mask = document.createElement('div');
+		Component.__capture_mask = x4document.createElement('div');
 		let mask = flyWrap(Component.__capture_mask);
 		mask.addClass('@capture-mask');
 
@@ -1469,15 +1462,15 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			mask.setStyleValue('cursor', cursor);
 		}
 
-		document.body.appendChild(mask.dom);
+		x4document.body.appendChild(mask.dom);
 
-		document.addEventListener('mousedown', Component.dispatchCaptures);
-		document.addEventListener('mousemove', Component.dispatchCaptures);
-		document.addEventListener('mouseup', Component.dispatchCaptures);
+		x4document.addEventListener('mousedown', Component.dispatchCaptures);
+		x4document.addEventListener('mousemove', Component.dispatchCaptures);
+		x4document.addEventListener('mouseup', Component.dispatchCaptures);
 
-		document.addEventListener('touchstart', Component.dispatchCaptures);
-		document.addEventListener('touchmove', Component.dispatchCaptures);
-		document.addEventListener('touchend', Component.dispatchCaptures);
+		x4document.addEventListener('touchstart', Component.dispatchCaptures);
+		x4document.addEventListener('touchmove', Component.dispatchCaptures);
+		x4document.addEventListener('touchend', Component.dispatchCaptures);
 
 		Component.__capture = {
 			initiator,
@@ -1490,13 +1483,13 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 
 		console.assert(!!Component.__capture);
 
-		document.removeEventListener('touchstart', Component.dispatchCaptures);
-		document.removeEventListener('touchmove', Component.dispatchCaptures);
-		document.removeEventListener('touchend', Component.dispatchCaptures);
+		x4document.removeEventListener('touchstart', Component.dispatchCaptures);
+		x4document.removeEventListener('touchmove', Component.dispatchCaptures);
+		x4document.removeEventListener('touchend', Component.dispatchCaptures);
 
-		document.removeEventListener('mousedown', Component.dispatchCaptures);
-		document.removeEventListener('mousemove', Component.dispatchCaptures);
-		document.removeEventListener('mouseup', Component.dispatchCaptures);
+		x4document.removeEventListener('mousedown', Component.dispatchCaptures);
+		x4document.removeEventListener('mousemove', Component.dispatchCaptures);
+		x4document.removeEventListener('mouseup', Component.dispatchCaptures);
 		
 		Component.__capture.iframes.forEach( f => {
 			flyWrap(f).setStyleValue( 'pointer-events', null );
@@ -1504,7 +1497,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 
 		Component.__capture = null;
 		if (Component.__capture_mask) {
-			document.body.removeChild(Component.__capture_mask);
+			x4document.body.removeChild(Component.__capture_mask);
 			Component.__capture_mask = null;
 		}
 	}
@@ -1525,7 +1518,9 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			let right = undefined;
 
 			let pn = this.dom.parentElement;
-			while( pn && pn!=document.body ) {
+			const bdy = x4document.body;
+
+			while( pn && pn!=bdy ) {
 
 				const pr = pn.getBoundingClientRect( );
 
@@ -1696,18 +1691,18 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 	static getScrollbarSize() {
 
 		if (Component.__sb_width === undefined) {
-			let outerDiv = document.createElement('div');
+			let outerDiv = x4document.createElement('div');
 			outerDiv.style.cssText = 'overflow:auto;position:absolute;top:0;width:100px;height:100px';
 
-			let innerDiv = document.createElement('div');
+			let innerDiv = x4document.createElement('div');
 			innerDiv.style.width = '200px';
 			innerDiv.style.height = '200px';
 
 			outerDiv.appendChild(innerDiv);
-			document.body.appendChild(outerDiv);
+			x4document.body.appendChild(outerDiv);
 
 			Component.__sb_width = outerDiv.offsetWidth - outerDiv.clientWidth;
-			document.body.removeChild(outerDiv);
+			x4document.body.removeChild(outerDiv);
 		}
 
 		return Component.__sb_width;

package/src/datastore.ts

@@ -29,7 +29,7 @@
 
 import { ajaxRequest } from './request';
 import { isArray, isString } from './tools';
-import { BasicEvent, EvChange, EventSource, EventMap, MapEvents } from './x4_events';
+import { BasicEvent, EvChange, EventSource, EventMap, MapEvents } from './x4events';
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
 
 export type ChangeCallback = (type: string, id?: any) => void;

package/src/dialog.ts

@@ -27,13 +27,15 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+
 import { Popup, PopupProps, PopupEventMap, EvMove } from './popup'
 import { Icon, IconID } from './icon'
 import { HLayout } from './layout'
 import { Label } from './label'
 import { Form, FormButtons } from './form'
 import { Component, ComponentContent, EvSize, flyWrap } from './component'
-import { BasicEvent, EventCallback } from './x4_events'
+import { BasicEvent, EventCallback } from './x4events'
 import { Rect, getMousePos, isFunction, isTouchDevice, isString, Size } from './tools'
 
 interface Geometry {
@@ -458,7 +460,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 
 		let { x, y } = getMousePos(event, true);
 
-		let wrc = flyWrap(document.body).getBoundingRect();
+		let wrc = flyWrap(x4document.body).getBoundingRect();
 		let rc = this.getBoundingRect(true);
 		let trc = this.m_el_title.getBoundingRect();
 

package/src/drag_manager.ts

@@ -26,6 +26,9 @@
 * 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 } from './component';
 import { Point } from './tools';
 
@@ -61,7 +64,7 @@ class DragManager {
 			this.dragGhost = el.dom.cloneNode(true) as HTMLElement;
 			
 			this.dragGhost.classList.add('dragged');
-			document.body.appendChild(this.dragGhost);
+			x4document.body.appendChild(this.dragGhost);
 
 			el.addClass( 'dragging' );
 

package/src/fileupload.ts

@@ -27,6 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
 import { Component, CProps } from './component'
 
 import { HLayout } from './layout'
@@ -157,7 +158,7 @@ function _createFileInput() {
 		});
 
 		// ajoute un input type:file caché pour pouvoir choir un fichier a ouvrir
-		document.body.appendChild(g_file_input._build());
+		x4document.body.appendChild(g_file_input._build());
 	}
 
 	g_file_input.clearDomEvent('change');

package/src/form.ts

@@ -33,7 +33,7 @@ import { Button } from './button'
 import { Input } from './input'
 import { TextEdit } from './textedit'
 import { ajaxRequest, RequestProps } from './request'
-import { EventCallback } from './x4_events'
+import { EventCallback } from './x4events'
 import { EvBtnClick } from './dialog'
 
 import { _tr } from './i18n'

package/src/gridview.ts

@@ -34,6 +34,7 @@ const T_UPDATE = Symbol('update');
  * todo: button in a column
  */
 
+import { x4document } from './x4dom'
 
 import { HLayout, VLayout } from './layout'
 import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html, HtmlString, SizerOverlay, Flex } from './component'
@@ -43,7 +44,7 @@ import * as Formatters from './formatters'
 import { downloadData } from './tools'
 import { DataView, DataStore, Record } from './datastore'
 
-import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4_events";
+import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4events";
 import { Icon } from './icon.js';
 
 export interface EvGridCheck extends BasicEvent {
@@ -618,10 +619,10 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 	 */
 
 	private _computeItemHeight() {
-		let gr = document.createElement('div');
+		let gr = x4document.createElement('div');
 		gr.classList.add('x-row');
 
-		let gv = document.createElement('div');
+		let gv = x4document.createElement('div');
 		gv.classList.add('x-grid-view');
 		gv.style.position = 'absolute';
 		gv.style.top = '-1000px';

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;
-		}
-	});
-}