x4js 1.4.2

package/src/application.ts

@@ -0,0 +1,191 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file application.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+import { EvMessage } from './x4_events'
+import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component'
+import { Component } from './component'
+import { Settings } from './settings'
+import { deferCall } from './tools'
+import { _tr } from './i18n'
+
+
+interface ApplicationEventMap extends BaseComponentEventMap {
+	message: EvMessage;
+	global: EvMessage;
+}
+
+/**
+ * 
+ */
+
+export interface ApplicationProps extends BaseComponentProps<ApplicationEventMap> {
+	app_name: string;		// 
+	app_version: string;	//
+	app_uid: string;
+	locale: string;			// fr-FR
+}
+
+/**
+ * Represents an x4 application, which is typically a single page app.
+ * You should inherit Application to define yours.
+ * Application derives from BaseComponent so you can use that to implement a global messaging system.
+ * @example ```ts
+ * 
+ * // in yout main caode
+ * let app = new Application( );
+ * 
+ * app.events.close.on( ( ev ) => {
+ * 	... do something
+ * });
+ * 
+ * // somewhere else in the source
+ * function xxx( ) {
+ * 	let app = Application.instance( );
+ * 	app.events.close.emit( new Events.close() );
+ * }
+ */
+
+export class Application<P extends ApplicationProps = ApplicationProps, E extends ApplicationEventMap = ApplicationEventMap> extends BaseComponent<P,E> {
+	
+	private static self: Application = null;
+
+	/**
+	 * the application singleton
+	 */
+
+	static 	instance( ) : Application {
+		return Application.self;
+	}
+
+	private m_mainView: Component;
+
+	private m_app_name: string;
+	private m_app_version: string;
+	private m_app_uid: string;
+	
+	private m_local_storage: Settings;
+	private m_user_data: any;
+	
+	constructor( props : P ) {
+		console.assert( Application.self===null, 'application is a singleton' );
+		super( props );
+
+		this.m_app_name = props.app_name ?? 'application';
+		this.m_app_version = props.app_version ?? '1.0';
+		this.m_app_uid = props.app_uid ?? 'application';
+
+		let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
+		this.m_local_storage = new Settings( settings_name );
+		this.m_user_data = {};
+	
+		(Application.self as any) = this;
+
+		if( 'onload' in globalThis ) {
+			globalThis.addEventListener( 'load', ( ) => {
+				this.ApplicationCreated( );
+			})
+		}
+		else {
+			this.ApplicationCreated( );
+		}
+	}
+
+	ApplicationCreated( ) {
+
+	}
+
+	public get app_name( ) {
+		return this.m_app_name;
+	}
+
+	public get app_uid( ) {
+		return this.m_app_uid;
+	}
+
+	public get app_version( ) {
+		return this.m_app_version;
+	}
+
+	public get local_storage( ) {
+		return this.m_local_storage;
+	}
+
+	public get user_data( ) {
+		return this.m_user_data;
+	}
+
+	public get history( ) {
+		//if( !this.m_history ) {
+		//	this.m_history = new NavigationHistory( );
+		//}
+		//
+		//return this.m_history;
+		debugger;
+		return null;
+	}
+
+	/**
+	 * define the application root object (MainView)
+	 * @example ```ts
+	 * 
+	 * let myApp = new Application( ... );
+	 * let mainView = new VLayout( ... );
+	 * myApp.setMainView( mainView  );
+	 */
+
+	 public set mainView( root: Component ) {
+
+		this.m_mainView = root;
+
+		deferCall( ( ) => {
+			document.body.appendChild(root._build());
+		} );
+	}
+
+	public get mainView( ) : Component {
+		return this.m_mainView;
+	}
+
+	public setTitle( title: string ) {
+		document.title = this.m_app_name + ' > ' + title;
+	}
+
+	public disableZoomWheel( ) {
+
+		window.addEventListener('wheel', function( ev: WheelEvent ) {
+			if( ev.ctrlKey ) {
+				ev.preventDefault( );
+				//ev.stopPropagation( );
+			}
+		
+		}, { passive: false, capture: true } );
+	}
+
+	public enterModal( enter: boolean ) {
+	}
+};
+
+
+

package/src/base64.ts

@@ -0,0 +1,162 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file base64.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+const _alphabet: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+let _lookup: any = null;
+
+
+export class Base64 {
+	lookup: any = null;
+
+	static encode(s: string | Uint8Array ) {
+		let buffer;
+
+		if( s instanceof Uint8Array ) {
+			buffer = []
+			s.forEach( (v) => {
+				buffer.push( v );
+			});
+		}
+		else {
+			buffer = Base64._toUtf8(s);
+		}
+
+		let position = -1;
+		let len = buffer.length;
+		let nan1, nan2;
+		let enc = [, , ,];
+
+		let result = '';
+		while (++position < len) {
+			nan1 = buffer[position + 1], nan2 = buffer[position + 2];
+			enc[0] = buffer[position] >> 2;
+			enc[1] = ((buffer[position] & 3) << 4) | (buffer[++position] >> 4);
+
+			if (isNaN(nan1)) {
+				enc[2] = enc[3] = 64;
+			}
+			else {
+				enc[2] = ((buffer[position] & 15) << 2) | (buffer[++position] >> 6);
+				enc[3] = (isNaN(nan2)) ? 64 : buffer[position] & 63;
+			}
+
+			result += _alphabet[enc[0]] + _alphabet[enc[1]] + _alphabet[enc[2]] + _alphabet[enc[3]];
+		}
+
+		return result;
+	}
+
+	static decode(s: string) {
+		let buffer = Base64._fromUtf8(s);
+
+		let position = 0;
+		let len = buffer.length;
+
+		let result = '';
+		while (position < len) {
+			if (buffer[position] < 128) {
+				result += String.fromCharCode(buffer[position++]);
+			}
+			else if (buffer[position] > 191 && buffer[position] < 224) {
+				result += String.fromCharCode(((buffer[position++] & 31) << 6) | (buffer[position++] & 63));
+			}
+			else {
+				result += String.fromCharCode(((buffer[position++] & 15) << 12) | ((buffer[position++] & 63) << 6) | (buffer[position++] & 63));
+			}
+		}
+
+		return result;
+	}
+
+	private static _toUtf8(s) {
+		let position = -1;
+		let len = s.length;
+
+		let chr;
+		let buffer = [];
+
+		if (/^[\x00-\x7f]*$/.test(s)) {
+			while (++position < len) {
+				buffer.push(s.charCodeAt(position));
+			}
+		}
+		else {
+			while (++position < len) {
+				chr = s.charCodeAt(position);
+				if (chr < 128) {
+					buffer.push(chr);
+				}
+				else if (chr < 2048) {
+					buffer.push((chr >> 6) | 192, (chr & 63) | 128);
+				}
+				else {
+					buffer.push((chr >> 12) | 224, ((chr >> 6) & 63) | 128, (chr & 63) | 128);
+				}
+			}
+		}
+
+		return buffer;
+	}
+
+	private static _fromUtf8(s) {
+		let position = -1;
+		let len;
+		let buffer = [];
+		let enc = [, , ,];
+
+		if (!_lookup) {
+			len = _alphabet.length;
+			_lookup = {};
+			while (++position < len) {
+				_lookup[_alphabet[position]] = position;
+			}
+
+			position = -1;
+		}
+
+		len = s.length;
+		while (position < len) {
+			enc[0] = _lookup[s.charAt(++position)];
+			enc[1] = _lookup[s.charAt(++position)];
+			buffer.push((enc[0] << 2) | (enc[1] >> 4));
+
+			enc[2] = _lookup[s.charAt(++position)];
+			if (enc[2] == 64) {
+				break;
+			}
+
+			buffer.push(((enc[1] & 15) << 4) | (enc[2] >> 2));
+			enc[3] = _lookup[s.charAt(++position)];
+
+			if (enc[3] == 64) {
+				break;
+			}
+
+			buffer.push(((enc[2] & 3) << 6) | enc[3]);
+		}
+
+		return buffer;
+	}
+}

package/src/base_component.ts

@@ -0,0 +1,118 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file base_component.ts
+* @author Etienne Cochard 
+* @copyright (c) 2022 R-libre ingenierie, all rights reserved.
+*
+**/
+
+import { EventMap, MapEvents, EventSource, EvTimer } from './x4_events';
+
+/**
+ * Timer Callback
+ * @see EvTimer, startTimer, stopTimer
+ */
+
+ interface TimerCallback {
+	(name: string, time: number): void;
+}
+
+/**
+ * BaseComponent EventMap
+ */
+
+export interface BaseComponentEventMap extends EventMap {
+	timer: EvTimer,
+}
+
+/**
+ * BaseCompoment Properties
+ */
+
+export interface BaseComponentProps<T = BaseComponentEventMap> {
+	events?: MapEvents<T>;	// basic component event map in base interface, should specialised in derived interfaces
+}
+
+/**
+ * BaseComponent class
+ */
+
+export class BaseComponent< P extends BaseComponentProps<BaseComponentEventMap>, E extends BaseComponentEventMap >
+	extends EventSource< E > {
+
+	protected m_props: P;
+	#m_timers: Map<string, Function>;
+
+	constructor(props: P) {
+		super();
+
+		//this.m_props = { ...props };
+		this.m_props = props;
+
+		if (props.events) {
+			this.listen(props.events as EventMap);
+		}
+	}
+
+	/**
+	 * start a new timer
+	 * @param name timer name 
+	 * @param timeout time out in ms
+	 * @param repeat if true this is an auto repeat timer
+	 * @param callback if !null, the callback to call else a EvTimer is fired
+	 */
+
+	startTimer(name: string, timeout: number, repeat = true, callback: TimerCallback = null) {
+		if (!this.#m_timers) {
+			this.#m_timers = new Map();
+		}
+		else {
+			this.stopTimer(name);
+		}
+
+		const id = (repeat ? setInterval : setTimeout)((tm: number) => {
+			if (callback) {
+				callback(name, tm);
+			}
+			else {
+				this.emit('timer', EvTimer( name, tm ));
+			}
+		}, timeout);
+
+		this.#m_timers.set(name, () => { (repeat ? clearInterval : clearTimeout)(id) });
+	}
+
+	/**
+	 * stop the given timer
+	 * @param name 
+	 */
+
+	stopTimer(name: string) {
+		const clear = this.#m_timers.get(name);
+		if (clear) { clear(); }
+	}
+
+	/**
+	 * stop all timers
+	 */
+
+	disposeTimers( ) {
+		this.#m_timers?.forEach( v => v() );
+		this.#m_timers = undefined;
+	}
+
+	/**
+	 * 
+	 * @param callback 
+	 * @param timeout 
+	 */
+
+	singleShot( callback: TimerCallback, timeout = 0 ) {
+		setTimeout( callback, timeout );
+	}
+}