x4js 1.4.15 → 1.4.18

package/lib/application.d.ts

@@ -75,6 +75,8 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     private m_app_uid;
     private m_local_storage;
     private m_user_data;
+    private m_touch_time;
+    private m_touch_count;
     constructor(props: P);
     ApplicationCreated(): void;
     get app_name(): string;
@@ -96,5 +98,6 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     setTitle(title: string): void;
     disableZoomWheel(): void;
     enterModal(enter: boolean): void;
+    enableTouchDblClick(): void;
 }
 export {};

package/lib/application.js

@@ -30,8 +30,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Application = void 0;
 const base_component_1 = require("./base_component");
+const component_1 = require("./component");
 const settings_1 = require("./settings");
 const tools_1 = require("./tools");
+const _x4_touch_time = Symbol();
 /**
  * Represents an x4 application, which is typically a single page app.
  * You should inherit Application to define yours.
@@ -65,6 +67,8 @@ class Application extends base_component_1.BaseComponent {
     m_app_uid;
     m_local_storage;
     m_user_data;
+    m_touch_time;
+    m_touch_count;
     constructor(props) {
         console.assert(Application.self === null, 'application is a singleton');
         super(props);
@@ -74,6 +78,8 @@ class Application extends base_component_1.BaseComponent {
         let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
         this.m_local_storage = new settings_1.Settings(settings_name);
         this.m_user_data = {};
+        this.m_touch_time = 0;
+        this.m_touch_count = 0;
         Application.self = this;
         if ('onload' in globalThis) {
             globalThis.addEventListener('load', () => {
@@ -145,6 +151,30 @@ class Application extends base_component_1.BaseComponent {
     }
     enterModal(enter) {
     }
+    enableTouchDblClick() {
+        document.addEventListener('touchstart', (ev) => {
+            let now = Date.now();
+            if ((now - this.m_touch_time) > 700) {
+                this.m_touch_count = 1;
+            }
+            else {
+                this.m_touch_count++;
+            }
+            this.m_touch_time = now;
+            if (this.m_touch_count == 2) {
+                this.m_touch_count = 0;
+                // dirty fake dblclick event
+                const tch = ev.touches[0];
+                let fake = { type: "dblclick" };
+                for (const n in tch) {
+                    fake[n] = tch[n];
+                }
+                // ignore -> private: dirty x2
+                component_1.Component._dispatchEvent(fake);
+                ev.stopPropagation();
+            }
+        });
+    }
 }
 exports.Application = Application;
 ;

package/lib/index.d.ts

@@ -28,7 +28,6 @@
 **/
 export * from "./application";
 export * from "./base_component";
-export * from "./base64";
 export * from "./button";
 export * from "./calendar";
 export * from "./canvas";
@@ -67,7 +66,6 @@ export * from "./request";
 export * from "./router";
 export * from "./settings";
 export * from "./sidebarview";
-export * from "./smartedit";
 export * from "./spreadsheet";
 export * from "./styles";
 export * from "./svgcomponent";
@@ -75,7 +73,6 @@ export * from "./tabbar";
 export * from "./tabview";
 export * from "./textarea";
 export * from "./textedit";
-export * from "./texthiliter";
 export * from "./toaster";
 export * from "./tools";
 export * from "./tooltips";

package/lib/index.js

@@ -44,7 +44,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./application"), exports);
 __exportStar(require("./base_component"), exports);
-__exportStar(require("./base64"), exports);
+//export * from "./base64"
 __exportStar(require("./button"), exports);
 __exportStar(require("./calendar"), exports);
 __exportStar(require("./canvas"), exports);
@@ -83,7 +83,7 @@ __exportStar(require("./request"), exports);
 __exportStar(require("./router"), exports);
 __exportStar(require("./settings"), exports);
 __exportStar(require("./sidebarview"), exports);
-__exportStar(require("./smartedit"), exports);
+//export * from "./smartedit"
 __exportStar(require("./spreadsheet"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./svgcomponent"), exports);
@@ -91,7 +91,7 @@ __exportStar(require("./tabbar"), exports);
 __exportStar(require("./tabview"), exports);
 __exportStar(require("./textarea"), exports);
 __exportStar(require("./textedit"), exports);
-__exportStar(require("./texthiliter"), exports);
+//export * from "./texthiliter"
 __exportStar(require("./toaster"), exports);
 __exportStar(require("./tools"), exports);
 __exportStar(require("./tooltips"), exports);

package/lib/router.js

@@ -53,7 +53,7 @@ function parseRoute(str, loose = false) {
             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 ? '(?:/([^/]+?))?' : '/([^/]+?)';
+            pattern += o >= 0 && ext < 0 ? '(?:/([^\/]+?))?' : '/([^\/]+?)';
             if (ext >= 0) {
                 pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
             }

package/lib/tabbar.d.ts

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

package/lib/tabbar.js

@@ -68,19 +68,26 @@ class TabBar extends component_1.Container {
     select(id, notify = false) {
         if (!id) {
             this._select(null, notify);
+            return true;
         }
         else {
             let page = this.m_pages.find(x => x.id === id);
             if (page) {
                 this._select(page, notify);
+                return true;
             }
+            return false;
         }
     }
     _select(p, notify) {
         if (this.m_curPage == p) {
             return;
         }
-        if (this.dom && this.m_curPage) {
+        if (!this.dom) {
+            this.m_props.default = p.id;
+            return;
+        }
+        if (this.m_curPage) {
             this.m_curPage.btn.removeClass('selected');
             if (this.m_curPage.page) {
                 this.m_curPage.page.hide();
@@ -90,7 +97,7 @@ class TabBar extends component_1.Container {
         if (notify) {
             this.signal('change', (0, x4_events_1.EvChange)(p ? p.id : null));
         }
-        if (this.dom && this.m_curPage) {
+        if (this.m_curPage) {
             this.m_curPage.btn.addClass('selected');
             if (this.m_curPage.page) {
                 this.m_curPage.page.show();

package/lib/x4.css

@@ -306,6 +306,8 @@ textarea::selection {
   align-items: center;
   outline: none;
   cursor: pointer;
+  font-family: var(--x4-font);
+  font-size: var(--x4-font-size);
   height: 2rem;
   padding: 8px;
   overflow: hidden;
@@ -1691,3 +1693,21 @@ textarea::selection {
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   grid-auto-rows: 10px;
 }
+.x-tab-bar {
+  border-bottom: 1px solid var(--gray-600);
+  background-color: var(--gray-100);
+}
+.x-tab-bar > .x-button {
+  border: none;
+  color: var(--gray-600);
+}
+.x-tab-bar > .x-button.selected {
+  font-weight: bold;
+  border-bottom: none;
+  color: var(--x4-selection-color);
+  background-color: transparent;
+}
+.x-tab-bar > .x-button:focus:not(.selected) {
+  text-decoration: underline;
+  color: black;
+}

package/package.json

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

package/src/application.ts

@@ -34,6 +34,8 @@ import { Settings } from './settings'
 import { deferCall } from './tools'
 import { _tr } from './i18n'
 
+const _x4_touch_time = Symbol( );
+
 
 interface ApplicationEventMap extends BaseComponentEventMap {
 	message: EvMessage;
@@ -92,6 +94,9 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	
 	private m_local_storage: Settings;
 	private m_user_data: any;
+
+	private m_touch_time: number;
+	private m_touch_count: number;
 	
 	constructor( props : P ) {
 		console.assert( Application.self===null, 'application is a singleton' );
@@ -104,6 +109,9 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 		let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
 		this.m_local_storage = new Settings( settings_name );
 		this.m_user_data = {};
+
+		this.m_touch_time = 0;
+		this.m_touch_count = 0;
 	
 		(Application.self as any) = this;
 
@@ -194,6 +202,36 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 
 	public enterModal( enter: boolean ) {
 	}
+
+	public enableTouchDblClick( ) {
+		document.addEventListener( 'touchstart', ( ev: TouchEvent ) => {
+
+			let now = Date.now( );
+			if( (now-this.m_touch_time) > 700 ) {
+				this.m_touch_count = 1;
+			}
+			else {
+				this.m_touch_count++;
+			}
+
+			this.m_touch_time = now;
+
+			if( this.m_touch_count==2 ) {
+				this.m_touch_count = 0;
+
+				// dirty fake dblclick event
+				const tch = ev.touches[0];
+				let fake: any = {type: "dblclick" };
+				for( const n in tch ) {
+					fake[n] = tch[n];
+				}
+
+				// ignore -> private: dirty x2
+				(Component as any)._dispatchEvent( fake );
+				ev.stopPropagation( );
+			}
+		});
+	}
 };
 
 

package/src/index.ts

@@ -29,7 +29,7 @@
 
 export * from "./application"
 export * from "./base_component"
-export * from "./base64"
+//export * from "./base64"
 export * from "./button"
 export * from "./calendar"
 export * from "./canvas"
@@ -68,7 +68,7 @@ export * from "./request"
 export * from "./router"
 export * from "./settings"
 export * from "./sidebarview"
-export * from "./smartedit"
+//export * from "./smartedit"
 export * from "./spreadsheet"
 export * from "./styles"
 export * from "./svgcomponent"
@@ -76,7 +76,7 @@ export * from "./tabbar"
 export * from "./tabview"
 export * from "./textarea"
 export * from "./textedit"
-export * from "./texthiliter"
+//export * from "./texthiliter"
 export * from "./toaster"
 export * from "./tools"
 export * from "./tooltips"

package/src/router.ts

@@ -72,7 +72,7 @@ function parseRoute(str: string | RegExp, loose = false): Segment {
 			const ext = tmp.indexOf('.', 1);
 
 			keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
-			pattern += o < 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
+			pattern += o >= 0 && ext < 0 ? '(?:/([^\/]+?))?' : '/([^\/]+?)';
 			if (ext >= 0) {
 				pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
 			}

package/src/tabbar.ts

@@ -98,15 +98,18 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 		this.setContent( buttons );
 	}
 
-	select( id: string | null, notify = false ) {
+	select( id: string | null, notify = false ): boolean {
 		if( !id ) {
 			this._select( null, notify );
+			return true;
 		}
 		else {
 			let page = this.m_pages.find( x => x.id===id );
 			if( page ) {
 				this._select( page, notify );
+				return true;
 			}
+			return false;
 		}
 	}
 
@@ -116,7 +119,12 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 			return;
 		}
 
-		if( this.dom && this.m_curPage ) {
+		if( !this.dom ) {
+			this.m_props.default = p.id;
+			return;
+		}
+
+		if( this.m_curPage ) {
 			this.m_curPage.btn.removeClass( 'selected' );
 			if( this.m_curPage.page ) {
 				this.m_curPage.page.hide( );
@@ -129,7 +137,7 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 			this.signal( 'change', EvChange(p ? p.id : null) );
 		}
 
-		if( this.dom && this.m_curPage ) {
+		if( this.m_curPage ) {
 			this.m_curPage.btn.addClass( 'selected' );
 			if( this.m_curPage.page ) {
 				this.m_curPage.page.show( );

package/src/x4.less

@@ -386,6 +386,8 @@ textarea {
 	align-items: center;
 	outline: none;
 	cursor: pointer;
+	font-family: var( --x4-font );
+	font-size: var( --x4-font-size );
 
 	height: 2rem;
 	padding: 8px;
@@ -2134,4 +2136,27 @@ textarea {
 	grid-gap: 10px;
 	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
 	grid-auto-rows: 10px;
+}
+
+.x-tab-bar {
+	border-bottom: 1px solid var(--gray-600);
+    background-color: var(--gray-100);
+
+	&> .x-button {
+		border: none;
+		color: var( --gray-600 );
+
+		&.selected {
+			font-weight: bold;
+			//border: 1px solid var( --x4-selection-color );
+			border-bottom: none;
+			color: var( --x4-selection-color );
+			background-color: transparent;
+		}
+
+		&:focus:not(.selected) {
+			text-decoration: underline;
+			color: black;;
+		}
+	}
 }

package/tsconfig.json

@@ -11,5 +11,11 @@
   	},
 	"include": [
 		"./src/*",
+	],
+	"exclude": [
+		"src/hosts/nwjs_types.ts",
+		"src/hosts/nwjs.ts",
+		"src/texthiliter.ts",
+		"src/smartedit.ts"
 	]
 }