x4js 1.4.15 → 1.4.16

package/lib/application.d.ts

@@ -96,5 +96,6 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     setTitle(title: string): void;
     disableZoomWheel(): void;
     enterModal(enter: boolean): void;
+    handleTouchEvents(): void;
 }
 export {};

package/lib/application.js

@@ -30,6 +30,7 @@
 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");
 /**
@@ -145,6 +146,33 @@ class Application extends base_component_1.BaseComponent {
     }
     enterModal(enter) {
     }
+    handleTouchEvents() {
+        document.addEventListener('touchstart', (ev) => {
+            let me = this;
+            let now = new Date().getTime();
+            if (!me.__last_touch || (me.__last_touch - now) > 700) {
+                me.__touch_cnt = 1;
+            }
+            else {
+                me.__touch_cnt++;
+            }
+            me.__last_touch = now;
+            if (me.__touch_cnt == 2) {
+                me.__touch_cnt = 0;
+                let fake = {
+                    type: "dblclick",
+                };
+                const tch = ev.touches[0];
+                for (const n in tch) {
+                    fake[n] = tch[n];
+                }
+                // ts-ignore -> private
+                component_1.Component._dispatchEvent(fake);
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        });
+    }
 }
 exports.Application = Application;
 ;

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.16",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/application.ts

@@ -194,6 +194,42 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 
 	public enterModal( enter: boolean ) {
 	}
+
+	public handleTouchEvents( ) {
+		document.addEventListener( 'touchstart', ( ev: TouchEvent ) => {
+
+			let me = this as any;
+			let now = new Date( ).getTime();
+
+			if( !me.__last_touch || (me.__last_touch-now) > 700 ) {
+				me.__touch_cnt = 1;
+			}
+			else {
+				me.__touch_cnt++;
+			}
+
+			me.__last_touch = now;
+
+			if( me.__touch_cnt==2 ) {
+				me.__touch_cnt = 0;
+				
+				let fake = {
+					type: "dblclick", 
+				};
+
+				const tch = ev.touches[0];
+				for( const n in tch ) {
+					fake[n] = tch[n];
+				}
+
+				// ts-ignore -> private
+				(Component as any)._dispatchEvent( fake );
+
+				ev.preventDefault( );
+				ev.stopPropagation( );
+			}
+		});
+	}
 };
 
 

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