x4js 1.4.14 → 1.4.15

package/lib/component.d.ts

@@ -107,7 +107,6 @@ export declare class Component<P extends CProps<BaseComponentEventMap> = CProps<
     private static __privateEvents;
     private static __sizeObserver;
     private static __createObserver;
-    private static __intersectionObserver;
     private static __capture;
     private static __capture_mask;
     private static __css;

package/lib/component.js

@@ -89,7 +89,7 @@ class Component extends base_component_1.BaseComponent {
     static __privateEvents = {};
     static __sizeObserver; // resize observer
     static __createObserver; // creation observer
-    static __intersectionObserver; // visibility observer
+    //private static __intersectionObserver: IntersectionObserver;	// visibility observer
     static __capture = null;
     static __capture_mask = null;
     static __css = null;
@@ -101,6 +101,10 @@ class Component extends base_component_1.BaseComponent {
             uid: Component.__comp_guid++,
             inrender: false,
         };
+        // prepare iprops
+        if (this.m_props.cls) {
+            this.addClass(this.m_props.cls);
+        }
     }
     /**
      *
@@ -1042,7 +1046,8 @@ class Component extends base_component_1.BaseComponent {
             this.addClass('@' + (0, tools_1.pascalCase)(clsname));
             me = Object.getPrototypeOf(me);
         }
-        this.addClass(this.m_props.cls);
+        //done in ctor now
+        //this.addClass(this.m_props.cls);
     }
     /**
      * prepend the system class name prefix on a name if needed (if class starts with @)

package/lib/layout.js

@@ -278,10 +278,17 @@ exports.ScrollView = ScrollView;
 //	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
 class Masonry extends component_1.Container {
     constructor(props) {
+        const items = props.items;
+        props.items = undefined;
         super(props);
         this.setDomEvent('sizechange', () => {
             this.resizeAllItems();
         });
+        if (items) {
+            items.forEach(i => {
+                this.addItem(i);
+            });
+        }
     }
     resizeItem(item) {
         const style = this.getComputedStyle();

package/lib/listview.d.ts

@@ -83,7 +83,7 @@ export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> ex
 /**
  * Standard listview class
  */
-export declare class ListView<T extends ListViewProps = ListViewProps, E extends ListViewEventMap = ListViewEventMap> extends VLayout<T, E> {
+export declare class ListView extends VLayout<ListViewProps, ListViewEventMap> {
     protected m_selection: {
         item: ListViewItem;
         citem: Component;
@@ -94,7 +94,7 @@ export declare class ListView<T extends ListViewProps = ListViewProps, E extends
     protected m_topIndex: number;
     protected m_itemHeight: number;
     protected m_cache: Map<number, Component>;
-    constructor(props: T);
+    constructor(props: ListViewProps);
     componentCreated(): void;
     render(props: ListViewProps): void;
     /**

package/lib/router.d.ts

@@ -26,9 +26,17 @@
 * 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 class Router {
+import { EventSource, EvError, EventMap } from "./x4_events";
+declare type RouteHandler = (params: any, path: string) => void;
+interface RouterEventMap extends EventMap {
+    error: EvError;
+}
+export declare class Router extends EventSource<RouterEventMap> {
     private routes;
     constructor();
-    get(uri: any, callback: any): void;
+    get(uri: string | RegExp, handler: RouteHandler): void;
     init(): void;
+    navigate(uri: string, notify?: boolean): void;
+    private _find;
 }
+export {};

package/lib/router.js

@@ -29,31 +29,111 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Router = void 0;
-class Router {
+const x4_events_1 = require("./x4_events");
+function parseRoute(str, loose = false) {
+    if (str instanceof RegExp) {
+        return {
+            keys: null,
+            pattern: str
+        };
+    }
+    const arr = str.split('/');
+    let keys = [];
+    let pattern = '';
+    if (arr[0] == '') {
+        arr.shift();
+    }
+    for (const tmp of arr) {
+        const c = tmp[0];
+        if (c === '*') {
+            keys.push('wild');
+            pattern += '/(.*)';
+        }
+        else if (c === ':') {
+            const o = tmp.indexOf('?', 1);
+            const ext = tmp.indexOf('.', 1);
+            keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
+            pattern += o < 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
+            if (ext >= 0) {
+                pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
+            }
+        }
+        else {
+            pattern += '/' + tmp;
+        }
+    }
+    return {
+        keys,
+        pattern: new RegExp(`^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i')
+    };
+}
+class Router extends x4_events_1.EventSource {
     routes;
     constructor() {
+        super();
         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
+        window.addEventListener('popstate', (event) => {
+            const url = document.location.pathname;
+            const found = this._find(url);
+            found.handlers.forEach(h => {
+                h(found.params, url);
+            });
         });
     }
+    get(uri, handler) {
+        let { keys, pattern } = parseRoute(uri);
+        this.routes.push({ keys, pattern, handler });
+    }
     init() {
-        this.routes.some(route => {
-            let regEx = new RegExp(`^${route.uri}$`);
-            let path = window.location.pathname;
-            if (path.match(regEx)) {
-                return route.callback({ path });
+        this.navigate(window.location.pathname);
+    }
+    navigate(uri, notify = true) {
+        const found = this._find(uri);
+        if (!found || found.handlers.length == 0) {
+            //window.history.pushState({}, '', 'error')
+            console.log('route not found: ' + uri);
+            this.signal("error", (0, x4_events_1.EvError)(404, "route not found"));
+            return;
+        }
+        window.history.pushState({}, '', uri);
+        if (notify) {
+            found.handlers.forEach(h => {
+                h(found.params, uri);
+            });
+        }
+    }
+    _find(url) {
+        let matches = [];
+        let params = {};
+        let handlers = [];
+        for (const tmp of this.routes) {
+            if (!tmp.keys) {
+                matches = tmp.pattern.exec(url);
+                if (!matches) {
+                    continue;
+                }
+                if (matches['groups']) {
+                    for (const k in matches['groups']) {
+                        params[k] = matches['groups'][k];
+                    }
+                }
+                handlers = [...handlers, tmp.handler];
             }
-        });
+            else if (tmp.keys.length > 0) {
+                matches = tmp.pattern.exec(url);
+                if (matches === null) {
+                    continue;
+                }
+                for (let j = 0; j < tmp.keys.length;) {
+                    params[tmp.keys[j]] = matches[++j];
+                }
+                handlers = [...handlers, tmp.handler];
+            }
+            else if (tmp.pattern.test(url)) {
+                handlers = [...handlers, tmp.handler];
+            }
+        }
+        return { params, handlers };
     }
 }
 exports.Router = Router;

package/lib/tabbar.d.ts

@@ -48,9 +48,11 @@ export declare class TabBar extends Container<TabBarProps, TabBarEventMap> {
     private m_pages;
     private m_curPage;
     constructor(props: TabBarProps);
+    componentCreated(): void;
     addPage(page: ITabPage): void;
     render(): void;
-    select(id: string): void;
+    select(id: string | null, notify?: boolean): void;
     private _select;
+    get selection(): Component<CProps<import("./base_component").BaseComponentEventMap>, import("./base_component").BaseComponentEventMap>;
 }
 export {};

package/lib/tabbar.js

@@ -47,8 +47,10 @@ class TabBar extends component_1.Container {
             this.addClass('@hlayout');
         }
         this.m_props.pages?.forEach(p => this.addPage(p));
+    }
+    componentCreated() {
         if (this.m_props.default) {
-            this.select(this.m_props.default);
+            this.select(this.m_props.default, true);
         }
     }
     addPage(page) {
@@ -58,28 +60,45 @@ class TabBar extends component_1.Container {
     render() {
         let buttons = [];
         this.m_pages.forEach(p => {
-            p.btn = new button_1.Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p) });
+            p.btn = new button_1.Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p, true) });
             buttons.push(p.btn);
         });
         this.setContent(buttons);
     }
-    select(id) {
-        let page = this.m_pages.find(x => x.id === id);
-        if (page) {
-            this._select(page);
+    select(id, notify = false) {
+        if (!id) {
+            this._select(null, notify);
+        }
+        else {
+            let page = this.m_pages.find(x => x.id === id);
+            if (page) {
+                this._select(page, notify);
+            }
         }
     }
-    _select(p) {
-        if (this.dom && this.m_curPage && this.m_curPage.page) {
+    _select(p, notify) {
+        if (this.m_curPage == p) {
+            return;
+        }
+        if (this.dom && this.m_curPage) {
             this.m_curPage.btn.removeClass('selected');
-            this.m_curPage.page.hide();
+            if (this.m_curPage.page) {
+                this.m_curPage.page.hide();
+            }
         }
         this.m_curPage = p;
-        this.signal('change', (0, x4_events_1.EvChange)(p ? p.id : null));
-        if (this.dom && this.m_curPage && this.m_curPage.page) {
+        if (notify) {
+            this.signal('change', (0, x4_events_1.EvChange)(p ? p.id : null));
+        }
+        if (this.dom && this.m_curPage) {
             this.m_curPage.btn.addClass('selected');
-            this.m_curPage.page.show();
+            if (this.m_curPage.page) {
+                this.m_curPage.page.show();
+            }
         }
     }
+    get selection() {
+        return this.m_curPage?.page;
+    }
 }
 exports.TabBar = TabBar;

package/lib/x4_events.d.ts

@@ -106,6 +106,14 @@ export interface EvDrag extends BasicEvent {
     data: any;
 }
 export declare function EvDrag(element: unknown, data: any, ctx: any): EvDrag;
+/**
+ * Errors
+ */
+export interface EvError extends BasicEvent {
+    code: number;
+    message: string;
+}
+export declare function EvError(code: number, message: string): EvError;
 /**
  * this Base interface is used to describe available events & their types
  *

package/lib/x4_events.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EventSource = exports.EvDrag = exports.EvMessage = exports.EvTimer = exports.EvContextMenu = exports.EvSelectionChange = exports.EvChange = exports.EvClick = exports.BasicEvent = void 0;
+exports.EventSource = exports.EvError = exports.EvDrag = exports.EvMessage = exports.EvTimer = exports.EvContextMenu = exports.EvSelectionChange = exports.EvChange = exports.EvClick = exports.BasicEvent = void 0;
 // default stopPropagation implementation for Events
 const stopPropagation = function () {
     this.propagationStopped = true;
@@ -81,6 +81,10 @@ function EvDrag(element, data, ctx) {
     return BasicEvent({ element, data, context: ctx });
 }
 exports.EvDrag = EvDrag;
+function EvError(code, message) {
+    return BasicEvent({ code, message });
+}
+exports.EvError = EvError;
 /**
  * Event emitter class
  * this class allow you to emit and handle events

package/package.json

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

package/src/component.ts

@@ -188,7 +188,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 	private static __privateEvents: any = {};
 	private static __sizeObserver: ResizeObserver;	// resize observer
 	private static __createObserver: MutationObserver;	// creation observer
-	private static __intersectionObserver: IntersectionObserver;	// visibility observer
+	//private static __intersectionObserver: IntersectionObserver;	// visibility observer
 
 	private static __capture: ICaptureInfo = null;
 	private static __capture_mask = null;
@@ -202,6 +202,11 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			dom_events: {},
 			uid: Component.__comp_guid++,
 			inrender: false,
+		};
+
+		// prepare iprops
+		if( this.m_props.cls ) {
+			this.addClass( this.m_props.cls );
 		}
 	}
 
@@ -1389,7 +1394,8 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			me = Object.getPrototypeOf(me);
 		}
 
-		this.addClass(this.m_props.cls);
+		//done in ctor now
+		//this.addClass(this.m_props.cls);
 	}
 
 	/**

package/src/layout.ts

@@ -378,11 +378,20 @@ export class ScrollView extends Component<ScrollViewProps> {
 export class Masonry extends Container {
 
 	constructor(props) {
+		const items = props.items;
+		props.items = undefined;
+
 		super(props);
 
 		this.setDomEvent('sizechange', () => {
 			this.resizeAllItems( );
 		});
+
+		if( items ) {
+			items.forEach( i => {
+				this.addItem( i );
+			});
+		}
 	}
 
 	resizeItem(item: Component) {

package/src/listview.ts

@@ -100,7 +100,7 @@ export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> ex
  * Standard listview class
  */
 
-export class ListView<T extends ListViewProps = ListViewProps, E extends ListViewEventMap = ListViewEventMap> extends VLayout<T,E> {
+export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 
 	protected m_selection: {
 		item: ListViewItem;
@@ -117,7 +117,7 @@ export class ListView<T extends ListViewProps = ListViewProps, E extends ListVie
 
 	protected m_cache: Map<number, Component>; // recycling elements
 
-	constructor(props: T) {
+	constructor(props: ListViewProps) {
 		super(props);
 
 		this.setDomEvent('keydown', (e) => this._handleKey(e));

package/src/router.ts

@@ -27,45 +27,157 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-type Callback = (request: { path: string }) => void;
+import { EventSource, EvError, EventMap } from "./x4_events"
+
+type RouteHandler = ( params: any, path: string ) => void;
+
+interface Segment {
+	keys: string[],
+	pattern: RegExp;
+}
 
 interface Route {
-	uri: string;
-	callback: Callback;
+	keys: string[],
+	pattern: RegExp;
+	handler: RouteHandler;
 }
 
-export class Router {
+function parseRoute(str: string | RegExp, loose = false): Segment {
 
-	private routes: Route[];
+	if (str instanceof RegExp) {
+		return {
+			keys: null,
+			pattern: str
+		};
+	}
 
-	constructor() {
-		this.routes = [];
+	const arr = str.split('/');
+
+	let keys = [];
+	let pattern = '';
+
+	if( arr[0]=='' ) {
+		arr.shift();
 	}
 
-	get(uri, callback) {
+	for (const tmp of arr) {
+		const c = tmp[0];
 
-		// 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`);
+		if (c === '*') {
+			keys.push('wild');
+			pattern += '/(.*)';
+		}
+		else if (c === ':') {
+			const o = tmp.indexOf('?', 1);
+			const ext = tmp.indexOf('.', 1);
+
+			keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
+			pattern += o < 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
+			if (ext >= 0) {
+				pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
 			}
-		});
+		}
+		else {
+			pattern += '/' + tmp;
+		}
+	}
+
+	return {
+		keys,
+		pattern: new RegExp( `^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i' )
+	};
+}
+
+interface RouterEventMap extends EventMap {
+	error: EvError;
+}
+   
+export class Router extends EventSource< RouterEventMap > {
+
+	private routes: Route[];
 
-		this.routes.push({
-			uri,
-			callback
+	constructor() {
+		super( );
+
+		this.routes = [];
+
+		window.addEventListener('popstate', (event) => {
+			const url = document.location.pathname;
+			const found = this._find(url);
+		
+			found.handlers.forEach(h => {
+				h(found.params,url);
+			});
 		});
 	}
 
+	get(uri: string | RegExp, handler: RouteHandler ) {
+		let { keys, pattern } = parseRoute(uri);
+		this.routes.push({ keys, pattern, handler });
+	}
+
 	init() {
-		this.routes.some(route => {
+		this.navigate( window.location.pathname );
+	}
+
+	navigate( uri: string, notify = true ) {
+
+		const found = this._find( uri );
 
-			let regEx = new RegExp(`^${route.uri}$`);
-			let path = window.location.pathname;
+		if( !found || found.handlers.length==0 ) {
+			//window.history.pushState({}, '', 'error')
+			console.log( 'route not found: '+uri );
+			this.signal( "error", EvError( 404, "route not found" ) );
+			return;
+		}
 
-			if (path.match(regEx)) {
-				return route.callback({ path });
+		window.history.pushState({}, '', uri )
+
+		if( notify ) {
+			found.handlers.forEach( h => {
+				h( found.params, uri );
+			} );
+		}
+	}
+
+	private _find( url: string ): { params: any, handlers: RouteHandler[] } {
+		
+		let matches = [];
+		let params = {};
+		let handlers = [];
+
+		for (const tmp of this.routes ) {
+			if (!tmp.keys ) {
+				matches = tmp.pattern.exec(url);
+				if (!matches) {
+					continue;
+				}
+
+				if (matches['groups']) {
+					for (const k in matches['groups']) {
+						params[k] = matches['groups'][k];
+					}
+				}
+
+				handlers = [...handlers, tmp.handler];
+			} 
+			else if (tmp.keys.length > 0) {
+				matches = tmp.pattern.exec(url);
+				if (matches === null) {
+					continue;
+				}
+
+				for ( let j = 0; j < tmp.keys.length;) {
+					params[tmp.keys[j]] = matches[++j];
+				}
+
+				handlers = [...handlers, tmp.handler];
+			} 
+			else if (tmp.pattern.test(url)) {
+				handlers = [...handlers, tmp.handler];
 			}
-		})
+		}
+
+		return { params, handlers };
 	}
 }

package/src/tabbar.ts

@@ -75,9 +75,12 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 		}
 
 		this.m_props.pages?.forEach( p => this.addPage(p) );
+	}
+
+	componentCreated(): void {
 		if( this.m_props.default ) {
-			this.select( this.m_props.default );
-		}
+			this.select( this.m_props.default, true );
+		}		
 	}
 
 	addPage( page: ITabPage ) {
@@ -88,33 +91,53 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 	render( ) {
 		let buttons = [];
 		this.m_pages.forEach( p => {
-			p.btn = new Button( { cls: p===this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p) } );
+			p.btn = new Button( { cls: p===this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p,true) } );
 			buttons.push( p.btn );
 		});
 
 		this.setContent( buttons );
 	}
 
-	select( id: string ) {
-		let page = this.m_pages.find( x => x.id===id );
-		if( page ) {
-			this._select( page );
+	select( id: string | null, notify = false ) {
+		if( !id ) {
+			this._select( null, notify );
+		}
+		else {
+			let page = this.m_pages.find( x => x.id===id );
+			if( page ) {
+				this._select( page, notify );
+			}
 		}
 	}
 
-	private _select( p: TabPage ) {
+	private _select( p: TabPage, notify: boolean ) {
 
-		if( this.dom && this.m_curPage && this.m_curPage.page ) {
+		if( this.m_curPage==p ) {
+			return;
+		}
+
+		if( this.dom && this.m_curPage ) {
 			this.m_curPage.btn.removeClass( 'selected' );
-			this.m_curPage.page.hide( );
+			if( this.m_curPage.page ) {
+				this.m_curPage.page.hide( );
+			}
 		}
 
 		this.m_curPage = p;
-		this.signal( 'change', EvChange(p ? p.id : null) );
 
-		if( this.dom && this.m_curPage && this.m_curPage.page ) {
+		if( notify ) {
+			this.signal( 'change', EvChange(p ? p.id : null) );
+		}
+
+		if( this.dom && this.m_curPage ) {
 			this.m_curPage.btn.addClass( 'selected' );
-			this.m_curPage.page.show( );
+			if( this.m_curPage.page ) {
+				this.m_curPage.page.show( );
+			}
 		}
 	}
+
+	get selection( ) {
+		return this.m_curPage?.page;
+	}
 }

package/src/x4_events.ts

@@ -168,6 +168,19 @@ export function EvDrag(element: unknown, data: any, ctx: any ) {
 	return BasicEvent<EvDrag>({ element, data, context: ctx });
 }
 
+/**
+ * Errors
+ */
+
+export interface EvError extends BasicEvent {
+	code: number;
+	message: string;
+}
+	
+export function EvError( code: number, message: string ) : EvError {
+	return BasicEvent<EvError>( {code, message} );
+}
+
 
 /**
  * this Base interface is used to describe available events & their types