x4js 2.0.12 → 2.0.14

package/lib/src/components/keyboard/eye-slash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="currentColor"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"/></svg>

package/lib/src/components/keyboard/keyboard.module.scss

@@ -0,0 +1,134 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file keyboard.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+:root {
+	--keyboard-key-background: #33302d;
+	--keyboard-hilite-color: #5ba921;
+}
+
+.x4keyboard {
+	z-index: 2000;
+    position: absolute !important;
+    width: 100vw;
+	height: 14rem;
+	bottom: 0;
+
+	background-color: rgba(0,0,0,0.9);
+	
+	box-sizing: border-box;
+	padding: 4px;
+
+	#kb {
+		width: 100vw;
+		max-width: 800px;
+	}
+	
+	.line {
+		flex-grow: 10;
+		position: relative;
+	}
+
+	.mi {
+		font-family: 'Material Icons';
+		font-size: 22px;
+		text-align: center;
+	}
+	
+	.tch {
+		cursor: pointer;
+
+		flex-grow: 10;
+		flex-basis: 44px;
+
+		display: flex;
+		align-items: center;
+		
+		div {
+			width: 100%;
+		}
+		
+		color: white;
+		text-align: center;
+		
+		background-color: var( --keyboard-key-background);
+		border: 1px solid var( --keyboard-key-background);
+
+		border-radius: 4px;
+		margin: 2px 4px;
+		box-sizing: border-box;
+
+		&:hover {
+			border: 1px solid var( --keyboard-hilite-color);
+		}
+
+		&:active {
+			background-color: var( --keyboard-hilite-color);
+			color: var( --keyboard-key-background);
+		}
+	}
+
+
+	.cplace {
+		visibility: hidden;
+	}
+
+	.kbicon {
+		div {
+			width: 0;
+		}
+	}
+
+	.cret {
+		color: var( --keyboard-hilite-color);
+		font-weight: bold;
+	}
+
+	.cdel,
+	.cshift,
+	.chide {
+		.x4icon {
+			margin: auto;
+			color: var( --keyboard-hilite-color);
+		}
+	}
+
+	//		color: rgba(255,255,255,0.3);
+
+	.lower,
+	.upper {
+
+		.cspace { 
+			flex-basis: 689px;
+		}
+
+		.cret {
+			flex-basis: 84px;
+		}
+
+		.cshift {
+			flex-basis: 60px;
+		}
+
+		.chide {
+			flex-basis: 88px;
+		}
+
+		.cnum {
+			flex-basis: 88px;
+		}
+	}
+}
+

package/lib/src/components/keyboard/keyboard.ts

@@ -0,0 +1,525 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file keyboard.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+import { Component, ComponentProps, Flex } from '@core/component.js';
+import { Box, BoxProps, Button, HBox, VBox } from '../components.js';
+import { _tr } from '@core/core_i18n.js';
+
+import "./keyboard.module.scss"
+import { class_ns } from '@core/core_tools.js';
+import { Application } from '@core/core_application.js';
+
+import icon_bksp from "./delete-left.svg";
+import icon_shift from "./arrow-up.svg";
+import icon_hide from "./eye-slash.svg";
+
+
+
+const kb_def: any = {
+    'fr-FR': {
+        lines: {
+            lower: [
+                "1 2 3 4 5 6 7 8 9 0",
+                "a z e r t y u i o p {2}",
+                "q s d f g h j k l m {3}",
+                "{4} w x c v b n , . {4}",
+                "{5} {6} ' {7}"
+            ],
+            upper: [
+                "! @ # $ % ^ & * ( ) _ +",
+                "A Z E R T Y U I O P {2}",
+                "Q S D F G H J K L M {3}",
+                "{4} W X C V B N ? : {4}",
+                "{5} {6} ' {7}",
+            ],
+            number: [
+				"1 2 3 {2}",
+				"4 5 6 {8}",
+				"7 8 9 {9}",
+				"0 . {3} {9}"
+            ],
+            date: [
+				"1 2 3 {2}",
+				"4 5 6 {8}",
+				"7 8 9 {9}",
+				"0 / {3} {9}"
+            ]
+        }
+    },
+    'en-GB': {
+        lines: {
+            lower: [
+                "1 2 3 4 5 6 7 8 9 0",
+                "a z e r t y u i o p {2}",
+                "q s d f g h j k l m {3}",
+                "{4} w x c v b n , . {4}",
+                "{5} {6} ' {7}"
+            ],
+            upper: [
+                "! @ # $ % ^ & * ( ) _ +",
+                "A Z E R T Y U I O P {2}",
+                "Q S D F G H J K L M {3}",
+                "{4} W X C V B N ? : {4}",
+                "{5} {6} ' {7}",
+            ],
+            number: [
+                "1 2 3 {2}",
+				"4 5 6 {8}",
+				"7 8 9 {9}",
+				"0 . {3} {9}"
+            ],
+			date: [
+				"1 2 3 {2}",
+				"4 5 6 {8}",
+				"7 8 9 {9}",
+				"0 / {3} {9}"
+            ]
+        }
+    },
+    'en-US': 'en-GB'
+}
+
+
+const RE_sel = /text|password|search|tel|url/i;
+
+interface KeyboardProps extends BoxProps {
+
+}
+
+@class_ns( "x4" )
+export class Keyboard extends HBox<KeyboardProps>
+{
+	mode: "lower" | "upper" | "number" | "date";
+	locale: string;
+	keyboard: Box;
+	visible: boolean;
+	input: HTMLInputElement;
+	
+    constructor( props: KeyboardProps )  {
+        super( { ...props, id: 'v-keyboard' } );
+
+        this.mode   = 'lower';
+        this.locale = 'fr-FR';
+		this.visible = false;
+        
+        document.addEventListener( 'focusin', (e) => this.handleFocus(e.target as Element,true), false );
+        document.addEventListener( 'focusout', (e) => this.handleFocus(e.target as Element,false), false );
+
+		this.hide( );
+
+		/*
+        touchstart: (e) => {
+			console.log( 'touch start' );
+			//e.preventDefault( );
+			e.stopPropagation( );
+			
+			this.last_ev = e;
+			clearInterval( this.autorepeat );
+			this.autorepeat = setInterval( () => {
+				this.handleKey( this.last_ev );
+			}, 250 );
+		},
+		touchend: ( e ) => {
+			console.log( 'touch end' );
+			clearInterval( this.autorepeat );
+			this.last_ev = null;
+		},
+		*/
+
+		this.addDOMEvent( "mousedown", (e) => {
+			this.handleKey( e ); 	
+			e.preventDefault( );
+			e.stopPropagation( );
+		});
+    }
+
+	/**
+	 * 
+	 */
+
+    handleKey( e: UIEvent ) {
+        let target = e.target as HTMLElement;
+        let key;
+
+        while( target!==this.dom ) {
+            if( target.hasAttribute('data-key') ) {
+                key = parseInt(target.getAttribute('data-key'), 10);
+                break;
+            }
+
+            target = target.parentNode as HTMLElement;
+        }
+
+		if( !key ) {
+			return;
+		}
+
+        switch( key ) {
+            // bk space
+            case 2: {
+                this.fireKey( 0, this._backspace );
+                break;
+            }
+
+            // return
+            case 3: {
+                this._focusNext( );
+                break;
+            }
+
+            // shift
+            case 4: {
+                if( this.mode=='lower' ) {
+                    this.mode = 'upper';
+                }
+                else {
+                    this.mode = 'lower';
+                }
+
+                this._redraw( );
+                break;                
+            }
+
+            // num + sym
+            case 5: {
+                this._switchMode( "number" );
+                break;                
+            }
+
+            // space
+            case 6: {
+                this.fireKey( 32, this._insertChar );
+                break;
+            }
+
+            // hide
+            case 7: {
+                this.hide( );
+                break;
+            }
+
+            case 8: {
+                this._switchMode( "lower" );
+                break;
+            }
+
+            default: {
+                this.fireKey( key, this._insertChar );
+                break;
+            }
+        }
+    }
+
+	/**
+	 * 
+	 */
+
+    private _focusNext( ) {
+        Application.instance().focusNext( true );
+    }
+
+	/**
+	 * 
+	 */
+
+	private _switchMode( m: "lower" | "upper" | "number" | "date" ) {
+		this.mode = m;
+		this._redraw( );
+	}
+
+	/**
+	 * 
+	 */
+
+    _redraw( ) {
+		this.setContent( [
+			new Flex( ),
+			this.keyboard = new VBox( {
+				id: "kb",
+				cls: this.mode,
+				content: this._createContent( ),
+			}),
+			new Flex( ),
+        ] );
+    }
+
+    _scrollIntoView( el: HTMLElement ) {
+        
+        let parent = el.parentElement ;
+
+        while( parent!=document.body ) {
+            
+            if( parent.style.overflowY!=='' ) {
+                let targ  = el.getBoundingClientRect( );
+                let bound = parent.getBoundingClientRect( );
+
+                if( targ.top<bound.top ) {
+                    el.scrollIntoView( true );
+                }
+                else if( targ.bottom>bound.bottom ) {
+                    el.scrollIntoView( false );
+                }
+                break;
+            }
+
+            parent = parent.parentElement;
+        }
+        
+        //el.scrollIntoView( false );
+    }
+
+    _updateVis = ( ) => {
+        
+        if( this.visible ) {
+            if( this.input ) {
+                this.show( );
+                this._scrollIntoView( this.input );
+
+				const type = this.input.type;
+				const dtype = this.input.getAttribute( "data-type" );
+
+                if( type==='number' || dtype==='number' ) {
+                    this._switchMode( "number" )
+                }
+				else if( type==='date' || dtype==='date' ) {
+					this._switchMode( "date");
+				}
+                else {
+                    this._switchMode( "lower" );
+                }
+            }
+        }
+        else {
+            this.hide( );
+            this.input = null;
+        }
+	}
+	
+	/**
+	 * 
+	 */
+
+	showOn( el: Component ) {
+		this.handleFocus( el.dom, true );
+	}
+
+	/**
+	 * 
+	 */
+
+    private handleFocus( target: Element, enter: boolean ) {
+		
+        if( enter ) {
+            if( target.tagName=='INPUT' && !(target as HTMLInputElement).readOnly ) {
+                this.input = target as HTMLInputElement;
+                this.visible = true;
+				this.setTimeout( "vis", 200, this._updateVis );
+				return;
+            }
+		}
+		
+        this.visible = false;
+        this.setTimeout( "vis", 200, this._updateVis );
+    }
+
+	/**
+	 * 
+	 */
+
+    private _insertChar(caret: any, text: string, ch: string ) {
+        text = text.substring(0, caret.start) + ch.toString() + text.substring(caret.end);
+        caret.start += ch.length;
+        caret.end = caret.start;
+        return text;
+    }
+
+    /**
+	 * 
+	 */
+
+    private _backspace(caret: any, text: string ) {
+        text = text.substring(0, caret.start - 1) + text.substring(caret.start);
+        caret.start -= 1;
+        caret.end = caret.start;
+        return text;
+    }
+    
+    /**
+	 * 
+	 */
+
+    private _getCaret( ) {
+        
+        if( this.input && RE_sel.test(this.input.type) ) { 
+            let pos = {
+                start: this.input.selectionStart || 0,
+                end: this.input.selectionEnd || 0
+            };
+
+            if (pos.end < pos.start) {
+				pos.end = pos.start;
+			}
+
+            return pos;
+        }
+        else {
+            let length = this.input.value.length;
+            return  {
+                start: length,
+                end: length
+            };
+        }
+    }
+
+    /**
+	 * 
+	 */
+
+    private _restoreCaretPos( caret: any ) {
+        if( RE_sel.test(this.input.type) ) {
+            this.input.selectionStart = caret.start;
+            this.input.selectionEnd = caret.end;
+        }
+    }
+
+    /**
+	 * 
+	 */
+
+    private fireKey( key: number, cb: Function ) {
+        let caret = this._getCaret( );
+        let text  = this.input.value;
+        text = cb.call( this, caret, text, String.fromCharCode(key) );
+        this.input.value = text;
+        this._restoreCaretPos(caret);
+    }
+
+    /**
+	 * 
+	 */
+
+    private _createContent( ) {
+        let     lines = kb_def[this.locale].lines[this.mode];
+        let     result: Box[] = [];
+        
+		for( let j=0; j<lines.length; j++ ) {
+        
+          	const line = lines[j].split(' ');
+            
+            let tl: Component[] = [];
+
+            for( let i=0; i<line.length; i++ ) {
+
+                let cls = 'tch c'+i;
+                let content = line[i];
+                let key;
+				let icon = null;
+
+                if( content.length>2 && content[0]=='{' && content[content.length-1]=='}') {
+                    
+                    let c = parseInt(content.substring(1, content.length - 1), 10 );
+					
+                    switch( c ) {
+						default:
+						case 0: 
+						{
+							content = '';       
+							cls += ' x4hidden';
+							break;
+						}
+
+						case 1: 
+						{
+							content = '';       
+							break;
+						}
+
+						case 2:
+						{
+							content = undefined;
+							icon = icon_bksp;
+							cls += ' cdel'; 
+							break;
+						}
+
+						case 3:
+						{
+							content = _tr.global.keyboard.next;       
+							cls += ' cret';
+							break;
+						}
+
+						case 4:
+						{
+							content = undefined;
+							icon = icon_shift;
+							cls += ' cshift';
+							break;
+						}
+
+						case 5:
+						{
+							content = _tr.global.keyboard.numeric;    
+							cls += ' cnum';
+							break;
+						}
+
+						case 6: 
+						{
+							content = '\u00a0';       
+							cls += ' cspace';
+							break;
+						}
+
+						case 7:
+						{
+							content = undefined;
+							icon = icon_hide;
+							cls += ' chide'; 
+							break;
+						}
+
+						case 8: 
+						{
+							content = _tr.global.keyboard.alpha;    
+							cls += ' calpha'; 
+							break;
+						}
+
+						case 9: 
+						{
+							content = '';       
+							cls += ' cplace'; 
+							break;
+						}
+                    }
+
+                    key = c;
+                }
+                else {
+                    key = line[i].charCodeAt(0);
+                }
+
+                let el = new Button( { cls, label: content, attrs: {'data-key': key}, icon } );
+                tl.push( el );
+            }
+
+            result.push( new HBox( { cls: 'line', content: tl } ) );
+        }
+
+        return result;
+    }
+}