x4js 1.4.2

package/src/request.ts

@@ -0,0 +1,296 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file request.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/>.
+**/
+
+
+/**
+ * TODO: use fetch api
+ * 
+
+async function xx( resp, cb ) {
+	cb( await resp.json() ); 
+}
+
+async function getToto( cb ) {
+    fetch('home/toto', { method: 'GET' }).then( (resp) => { xx(resp,cb); } );
+}
+
+function dump( resp ) {
+	console.log( resp );
+}
+
+getToto( dump );
+
+*/
+
+
+import { isArray, isLiteralObject, isString, NetworkError } from './tools'
+
+const DEFAULT_TIMEOUT = 10000;
+
+export interface RequestProps
+{
+	url: string;
+	method?: 'GET' | 'POST';
+	headers?: string[];
+	params?: any;
+	timeout?: number;
+	responseType?: 'text' | 'json' | 'arraybuffer';
+	userData?: any;
+
+	success: ( data: any, userData: any ) => void;
+	failure?: ( status: number, statusText: string, userData: any ) => void;
+	progress?: ( length: number, total: number, display: string ) => void;
+}
+
+
+export function ajaxRequest( cfg: RequestProps ) : Function {
+	
+	let params,
+		url = cfg.url,
+		method = cfg.method || 'GET',
+		formdata = false;
+
+	if( cfg.params instanceof FormData ) {
+		params = cfg.params;
+		formdata = true;
+	}
+	else if( method=='POST' ) {
+		params = buildQuery( cfg.params, false );
+	}
+	else {
+		url += buildQuery( cfg.params, true );
+	}
+
+	url = encodeURI( url );
+
+	let xhr = new XMLHttpRequest( );
+	xhr.open( method, url );
+
+	xhr.upload.addEventListener( 'progress', progress, false);
+	xhr.addEventListener( 'timeout', failure );
+	xhr.addEventListener( 'error', failure );
+	xhr.addEventListener( 'load', success );
+	
+	if( !formdata ) {
+		xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded; charset=UTF-8" );
+	}
+	
+	if( method!='POST' ) {
+		xhr.responseType = cfg.responseType || 'json';
+		xhr.timeout = cfg.timeout || DEFAULT_TIMEOUT;
+	}
+
+	if( cfg.headers ) {
+		for( let h in cfg.headers) {
+			this.xhr.setRequestHeader( h, cfg.headers[h] );
+		}
+	}
+
+	function progress( ev: ProgressEvent<EventTarget> ) {
+		console.log( ev );
+		if( cfg.progress ) {
+			try {
+				if( ev.lengthComputable ) {
+					let disp = humanSize( ev.loaded ) + ' / ' + humanSize( ev.total );
+					cfg.progress( ev.loaded, ev.total, disp );
+				}
+			}
+			catch( e ) {
+				console.error( 'unhandled exception:', e );
+			}
+		}
+	}
+
+	function humanSize( bytes: number ) {
+
+		let unit, value: number;
+
+		if( bytes>=1e9 ) {
+			unit = 'Gb';
+			value = bytes/1e9;	
+		}
+		else if( bytes>=1e6 ) {
+			unit = 'Mb';
+			value = bytes/1e6;	
+		}
+		else if( bytes>=1e3 ) {
+			unit = 'Kb';
+			value = bytes/1e3;	
+		}
+		else {
+			unit = 'bytes';
+			value = bytes;	
+		}
+
+		return value.toFixed( 2 ) + unit;
+	}
+
+	function failure(  ) {
+		if( cfg.failure ) {
+			cfg.failure( xhr.status, xhr.statusText, cfg.userData );
+		}
+	}
+
+	function success( ) {
+		if( xhr.status>=200 && xhr.status<300 ) {
+			if( cfg.success ) {
+				try {
+					cfg.success( xhr.response, cfg.userData );
+				}
+				catch( e ) {
+					console.error( 'unhandled exception:', e );
+				}
+			}
+		}
+		else {
+			failure( );
+		}	
+	}
+
+	if( formdata || method=='POST' ) {
+		xhr.send( params );
+	}
+	else {
+		xhr.send( );
+	}
+
+	return function( ) {
+		xhr.abort( );
+	};
+}
+
+function  buildQuery( params: any, getMethod: boolean ) {
+
+	if( !params ) {
+		return '';
+	}
+
+	let query = [];
+	for( let key in params ) {
+
+		let param = params[key];
+
+		// array
+		if( isArray(param) ) {
+			for( let i=0, n=param.length; i<n; i++ ) {
+				query.push( encodeURIComponent(key) + '[]=' + encodeURIComponent( ''+param[i] ) );
+			}
+		}
+		// simple string ...
+		else {
+
+			if( param===undefined ) {
+				param = '';
+			}
+			query.push( encodeURIComponent(key) + '=' + encodeURIComponent(''+param) );
+		}
+	}
+
+	let result = query.join( '&' );
+	if( getMethod ) {
+		return '?' + result;
+	}
+	else {
+		return result;
+	}
+}
+
+
+//type Identity<T> = { [P in keyof T]: T[P] }
+//type Replace<T, K extends keyof T, TReplace> = Identity<Pick<T, Exclude<keyof T, K>> & {
+//    [P in K] : TReplace
+//}>
+//type AjaxRequestInit = Replace< RequestInit, 'body', BodyInit | null | object | undefined >;
+
+
+interface AjaxRequestInit extends Omit<RequestInit,'body'> {
+	body?: BodyInit | null | object;
+	noGenX?: boolean;	// donot generate exception on error
+}
+
+
+export async function ajaxAsJSON( url: string, init?: AjaxRequestInit ) : Promise<any> {
+	let response = await ajax( url, init, 'application/json' );
+	return response.json( );
+}
+
+export async function ajaxAsText( url: string, init?: AjaxRequestInit ) : Promise<any> {
+	let response = await ajax( url, init, 'text/plain' );
+	return response.text( );
+}
+
+/**
+ * use encodeURIComponent for elements in url
+ */
+
+export async function ajax( url: string, init?: AjaxRequestInit, type?: string ) : Promise<Response> {
+
+	let options: AjaxRequestInit = { 
+		method: 'GET',
+		headers: {
+			'X-Requested-With': 'XMLHttpRequest'
+		}
+	}
+
+	if( type ) {
+		options.headers['Content-Type'] = type;
+	}
+
+	if( init ) {
+		options = { ...options, ...init };
+
+		if( init.body && !isString(init.body) ) {
+			let cvt = false;
+			if( isLiteralObject(init.body) ) {
+				cvt = true;
+			}
+			else if( !(init.body instanceof Blob) && !(init.body instanceof ArrayBuffer) && !(init.body instanceof FormData) &&
+				!(init.body instanceof URLSearchParams) && !(init.body instanceof ReadableStream) )
+			{
+				cvt = true;
+			}
+
+			if( cvt ) {
+				options.body = JSON.stringify( init.body );
+			}
+			else {
+				options.body = init.body;
+			}
+		}
+	}
+
+	let response = await fetch( url, options as RequestInit );
+
+	if( init && init.noGenX ) {
+		return response;
+	}
+	else {
+		if( !response.ok ) {
+			throw new NetworkError( response );
+		}
+
+		return response;
+	}
+}

package/src/router.ts

@@ -0,0 +1,43 @@
+
+type Callback = (request: { path: string }) => void;
+
+interface Route {
+	uri: string;
+	callback: Callback;
+}
+
+class Router {
+
+	private routes: Route[];
+
+	constructor() {
+		this.routes = [];
+	}
+
+	get(uri, callback) {
+
+		// throw an error if the route uri already exists to avoid confilicting routes
+		this.routes.forEach(route => {
+			if (route.uri === uri) {
+				throw new Error(`the uri ${route.uri} already exists`);
+			}
+		});
+
+		this.routes.push({
+			uri,
+			callback
+		});
+	}
+
+	init() {
+		this.routes.some(route => {
+
+			let regEx = new RegExp(`^${route.uri}$`);
+			let path = window.location.pathname;
+
+			if (path.match(regEx)) {
+				return route.callback({ path });
+			}
+		})
+	}
+}

package/src/settings.ts

@@ -0,0 +1,75 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file local_storage.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 { host } from './hosts/host';
+
+export class Settings {
+
+	private m_data: any;
+	private m_name: string;
+
+	constructor( name?: string ) {
+		this.m_data = null;
+		this.m_name = name ?? 'settings';
+	}
+
+	set( name: string, value: any ) {
+		this._load( );
+		this.m_data[name] = value;
+		this._save( );
+	}
+
+	get( name: string, defValue? ) : any {
+		this._load( );
+		return this.m_data[name] ?? defValue;
+	}
+
+	private _save( ) {
+		let data = JSON.stringify(this.m_data);
+		host.writeLocalStorage( this.m_name, data );
+	}
+
+	private _load( ) {
+		if( this.m_data ) {
+			return;
+		}
+
+		this.m_data = {};
+
+		let data = host.readLocalStorage( this.m_name );
+		if( data!==null ) {
+			data = JSON.parse( data );
+			if( data ) {
+				this.m_data = data;
+			}
+			else {
+				console.info('There was an error attempting to read your settings.');
+				
+			}
+		}
+		// console.info('There was an error attempting to read your settings.');
+	}
+}
+

package/src/sidebarview.ts

@@ -0,0 +1,97 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file sidebarview.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 { Component, CProps, Flex } from './component'
+import { HLayout, VLayout } from './layout'
+import { Button } from './button'
+import { CardView, CardViewProps, ICardViewItem } from './cardview'
+
+export interface SideBarItem extends ICardViewItem {
+}
+
+export interface SideBarProps extends CardViewProps {
+	bar_sizable?: boolean;
+}
+
+/**
+ * 
+ */
+
+export class SideBarView extends CardView {
+	m_sidebar: VLayout;
+	m_content: Component;
+
+	constructor( props: SideBarProps ) {
+
+		super( props );
+
+		this.addClass( '@hlayout' );
+
+		this.m_sidebar = new VLayout( {
+			cls: '@side-bar',
+			sizable: props.bar_sizable ? 'right' : undefined,
+		});
+
+		this.m_content = new HLayout( { flex: 1, cls: '@tab-container' } );
+	}
+
+	/** @ignore */
+	render() {
+
+		let tabs = [];
+		
+		this.m_cards.forEach( (p) => {
+			tabs.push( p.selector );
+		} );
+
+		this.m_sidebar.setContent( new VLayout( {
+			flex: 1,
+			cls: 'content',
+			content: tabs
+		}) );
+
+		this.setContent( [
+			this.m_sidebar,
+			this.m_content
+		] );
+	}
+
+	protected _prepareSelector( card: ICardViewItem ): Component {
+		return new Button( {
+			text: card.title,
+			icon: card.icon,
+			tooltip: card.title,
+			click: ( ) => { this.switchTo( card.name); }
+		});
+	}
+
+	protected _preparePage( page: Component ) {
+		super._preparePage( page );
+		
+		if( !page.dom ) {
+			this.m_content.appendChild( page );
+		}
+	}
+}