x4js 2.3.17 → 2.3.19

package/src/components/keyboard/keyboard.ts

@@ -28,75 +28,226 @@ 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'
+/**
+ * A layout is the place of the 26 letters (its base) and the letters that
+ * a language adds to them (its extra), shown on a page of their own,
+ * called by a key. The upper case is computed, the digits and the signs
+ * are the same for all.
+ *
+ * base: the countries where it is not QWERTY are those that
+ *   https://en.wikipedia.org/wiki/QWERTZ and /AZERTY list.
+ * extra: the main letters of the language in the CLDR of Unicode
+ *   (cldr-json, cldr-misc-full/main/<lang>/characters.json), without a..z.
+ */
+
+type KbBase = "azerty" | "qwerty" | "qwertz";
+type KbMode = "alpha" | "accents" | "symbols" | "number" | "date";
+
+interface KbLayout {
+	base: KbBase;
+	extra: string;
+}
+
+const kb_bases: Record<KbBase,string[]> = {
+	azerty: [ "a z e r t y u i o p", "q s d f g h j k l m", "w x c v b n" ],
+	qwerty: [ "q w e r t y u i o p", "a s d f g h j k l", "z x c v b n m" ],
+	qwertz: [ "q w e r t z u i o p", "a s d f g h j k l", "y x c v b n m" ],
+};
+
+// by language
+const kb_langs: Record<string,KbLayout> = {
+	cs: { base: "qwertz", extra: "á č ď é ě í ň ó ř š ť ú ů ý ž" },
+	da: { base: "qwerty", extra: "æ ø å" },
+	de: { base: "qwertz", extra: "ä ö ü ß" },
+	en: { base: "qwerty", extra: "" },
+	es: { base: "qwerty", extra: "á é í ñ ó ú ü" },
+	et: { base: "qwerty", extra: "õ ä ö ü š ž" },
+	fi: { base: "qwerty", extra: "å ä ö š ž" },
+	fr: { base: "azerty", extra: "é è ê ë à â æ ç î ï ô œ ù û ü ÿ" },
+	ga: { base: "qwerty", extra: "á é í ó ú" },
+	hr: { base: "qwertz", extra: "č ć đ š ž" },
+	hu: { base: "qwertz", extra: "á é í ó ö ő ú ü ű" },
+	it: { base: "qwerty", extra: "à è é ì ò ù" },
+	lt: { base: "qwerty", extra: "ą č ę ė į š ų ū ž" },
+	lv: { base: "qwerty", extra: "ā č ē ģ ī ķ ļ ņ š ū ž" },
+	mt: { base: "qwerty", extra: "à ċ è ġ ħ ì ò ù ż" },
+	nl: { base: "qwerty", extra: "á ä é ë í ï ó ö ú ü" },
+	pl: { base: "qwerty", extra: "ą ć ę ł ń ó ś ź ż" },
+	pt: { base: "qwerty", extra: "á à â ã ç é ê í ó ò ô õ ú" },
+	ro: { base: "qwerty", extra: "ă â î ș ț" },
+	sk: { base: "qwertz", extra: "á ä č ď é í ĺ ľ ň ó ô ŕ š ť ú ý ž" },
+	sl: { base: "qwertz", extra: "č š ž" },
+	sv: { base: "qwerty", extra: "å ä ö é à" },
+};
+
+// the countries that do not have the keyboard of their language
+const kb_countries: Record<string,Partial<KbLayout>> = {
+	"de-CH": { extra: "ä ö ü" },		// no ß in Switzerland
+	"fr-CH": { base: "qwertz" },
+	"it-CH": { base: "qwertz" },
+	"fr-LU": { base: "qwertz" },		// the Swiss French keyboard
+	"nl-BE": { base: "azerty" },
+};
+
+const kb_digits = "1 2 3 4 5 6 7 8 9 0";
+const kb_signs = "! @ # $ % ^ & * ( ) _ +";
+
+// the page of the signs, that the letters do not have
+const kb_symbols = [
+	"- / : ; ( ) € & @ \"",
+	"\\ | ~ _ ` § £ $ ^ %",
+	"[ ] { } < > = + * #",
+];
+
+const kb_pads = {
+	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}"
+	]
+};
+
+const KB_MAX_EXTRA = 12;		// keys on a row of extra letters, as many as there are signs
+
+/**
+ * "de-CH", "de_ch", "de": the layout of the country, or else the one of
+ * its language. A language that is not known gets a QWERTY.
+ */
+
+function findLayout( locale: string ): KbLayout {
+	const [lang, country] = locale.replace( "_", "-" ).split( "-" );
+
+	let layout = kb_langs[lang.toLowerCase( )];
+	if( !layout ) {
+		layout = kb_langs.en;
+	}
+
+	if( country ) {
+		const own = kb_countries[lang.toLowerCase( ) + "-" + country.toUpperCase( )];
+		if( own ) {
+			layout = { ...layout, ...own };
+		}
+	}
+
+	return layout;
+}
+
+function upperKeys( line: string ): string {
+	return line.split( " " ).map( key => {
+		const up = key.toUpperCase( );
+		return up.length===1 ? up : key;		// ß has no upper case of one letter
+	} ).join( " " );
+}
+
+/**
+ * the extra letters, on rows of the same length
+ */
+
+function extraLines( extra: string ): string[] {
+	if( !extra ) {
+		return [];
+	}
+
+	const keys = extra.split( " " );
+	const count = Math.ceil( keys.length / KB_MAX_EXTRA );
+	const size = Math.ceil( keys.length / count );
+
+	const lines: string[] = [];
+	for( let i=0; i<keys.length; i+=size ) {
+		lines.push( keys.slice( i, i+size ).join( " " ) );
+	}
+
+	return lines;
+}
+
+function letterLines( layout: KbLayout, upper: boolean ): string[] {
+	let [l1, l2, l3] = kb_bases[layout.base];
+
+	if( upper ) {
+		l1 = upperKeys( l1 );
+		l2 = upperKeys( l2 );
+		l3 = upperKeys( l3 );
+	}
+
+	return [
+		upper ? kb_signs : kb_digits,
+		l1 + " {2}",
+		l2 + " {3}",
+		"{4} " + l3 + ( upper ? " ? : {4}" : " , . {4}" ),
+		bottomLine( layout, "alpha" ),
+	];
+}
+
+/**
+ * the page called by {10}: the extra letters
+ */
+
+function accentLines( layout: KbLayout, upper: boolean ): string[] {
+	let extra = extraLines( layout.extra );
+	if( upper ) {
+		extra = extra.map( upperKeys );
+	}
+
+	return [
+		...extra,
+		"{4} {2} {3}",
+		bottomLine( layout, "accents" ),
+	];
+}
+
+/**
+ * the page called by {11}: the signs
+ */
+
+function symbolLines( layout: KbLayout ): string[] {
+	const [s1, s2, s3] = kb_symbols;
+
+	return [
+		s1 + " {2}",
+		s2 + " {3}",
+		s3,
+		bottomLine( layout, "symbols" ),
+	];
+}
+
+/**
+ * the last row of the pages of letters: the key of the page that is shown
+ * is replaced by {8} at its place, to come back to the letters.
+ * no key of the extra letters when the language has none
+ */
+
+function bottomLine( layout: KbLayout, page: "alpha" | "accents" | "symbols" ): string {
+	const accents = !layout.extra ? "" : page=="accents" ? "{8} " : "{10} ";
+	const symbols = page=="symbols" ? "{8} " : "{11} ";
+
+	return "{5} " + accents + symbols + "{6} ' {7}";
+}
+
+/**
+ * the text of the key that calls the extra letters: the first two of them
+ */
+
+function accentLabel( layout: KbLayout, upper: boolean ): string {
+	const label = layout.extra.split( " " ).slice( 0, 2 ).join( " " );
+	return ( upper ? upperKeys( label ) : label ).replace( " ", "" );
 }
 
 
 const RE_sel = /text|password|search|tel|url/i;
 
 interface KeyboardProps extends BoxProps {
-
+	/**
+	 * the language of the keys, with or without its country: "fr-FR",
+	 * "de-CH", "pl"... "fr-FR" when it is not given
+	 */
+	locale?: string;
 }
 
 /**
@@ -104,13 +255,17 @@ interface KeyboardProps extends BoxProps {
  * ```
  * --keyboard-key-background
  * --keyboard-hilite-color
+ * --keyboard-key-color
+ * --keyboard-accents-color
+ * --keyboard-symbols-color
  * --keyboard-zoom
  * ```
  */
 @class_ns( "x4" )
 export class Keyboard extends HBox<KeyboardProps>
 {
-	mode: "lower" | "upper" | "number" | "date";
+	mode: KbMode;
+	upper: boolean;
 	locale: string;
 	keyboard: Box;
 	visible: boolean;
@@ -119,8 +274,9 @@ export class Keyboard extends HBox<KeyboardProps>
     constructor( props: KeyboardProps )  {
         super( { ...props, id: 'v-keyboard' } );
 
-        this.mode   = 'lower';
-        this.locale = 'fr-FR';
+        this.mode   = 'alpha';
+        this.upper  = false;
+        this.locale = props.locale ?? 'fr-FR';
 		this.visible = false;
         
         document.addEventListener( 'focusin', (e) => this.handleFocus(e.target as Element,true), false );
@@ -152,6 +308,29 @@ export class Keyboard extends HBox<KeyboardProps>
 		this.setStyleVariable( '--keyboard-zoom', perc+'%' );
 	}
 
+	/**
+	 * Change the language of the keys.
+	 * @param locale - "fr-FR", "de-CH", "pl"... A country that has no keyboard
+	 * of its own gets the one of its language, a language that is not known a QWERTY.
+	 *
+	 * @example
+	 * keyboard.setLocale( "de-CH" );
+	 */
+
+	setLocale( locale: string ) {
+		this.locale = locale;
+
+		// a language without extra letters has no page for them
+		if( this.mode=="accents" && !findLayout( locale ).extra ) {
+			this.mode = "alpha";
+		}
+
+		// drawn at least once
+		if( this.keyboard ) {
+			this._redraw( );
+		}
+	}
+
 	/**
 	 * 
 	 */
@@ -192,15 +371,9 @@ export class Keyboard extends HBox<KeyboardProps>
 
             // shift
             case 4: {
-                if( this.mode=='lower' ) {
-                    this.mode = 'upper';
-                }
-                else {
-                    this.mode = 'lower';
-                }
-
+                this.upper = !this.upper;
                 this._redraw( );
-                break;                
+                break;
             }
 
             // num + sym
@@ -222,7 +395,19 @@ export class Keyboard extends HBox<KeyboardProps>
             }
 
             case 8: {
-                this._switchMode( "lower" );
+                this._switchMode( "alpha" );
+                break;
+            }
+
+            // extra letters
+            case 10: {
+                this._switchMode( "accents" );
+                break;
+            }
+
+            // signs
+            case 11: {
+                this._switchMode( "symbols" );
                 break;
             }
 
@@ -245,7 +430,7 @@ export class Keyboard extends HBox<KeyboardProps>
 	 * 
 	 */
 
-	private _switchMode( m: "lower" | "upper" | "number" | "date" ) {
+	private _switchMode( m: KbMode ) {
 		this.mode = m;
 		this._redraw( );
 	}
@@ -312,7 +497,8 @@ export class Keyboard extends HBox<KeyboardProps>
                         this._switchMode( "date");
                     }
                     else {
-                        this._switchMode( "lower" );
+                        this.upper = false;
+                        this._switchMode( "alpha" );
                     }
                 }
             }
@@ -436,7 +622,22 @@ export class Keyboard extends HBox<KeyboardProps>
 	 */
 
     private _createContent( ) {
-        let     lines = kb_def[this.locale].lines[this.mode];
+        let     lines: string[];
+		const layout = findLayout( this.locale );
+
+		if( this.mode=="number" || this.mode=="date" ) {
+			lines = kb_pads[this.mode];
+		}
+		else if( this.mode=="accents" ) {
+			lines = accentLines( layout, this.upper );
+		}
+		else if( this.mode=="symbols" ) {
+			lines = symbolLines( layout );
+		}
+		else {
+			lines = letterLines( layout, this.upper );
+		}
+
         let     result: Box[] = [];
         
 		for( let j=0; j<lines.length; j++ ) {
@@ -527,8 +728,22 @@ export class Keyboard extends HBox<KeyboardProps>
 
 						case 9: 
 						{
-							content = '';       
-							cls += ' cplace'; 
+							content = '';
+							cls += ' cplace';
+							break;
+						}
+
+						case 10:
+						{
+							content = accentLabel( layout, this.upper );
+							cls += ' caccents';
+							break;
+						}
+
+						case 11:
+						{
+							content = '#+=';
+							cls += ' csymbols';
 							break;
 						}
                     }

package/src/components/listbox/listbox.ts

@@ -181,7 +181,8 @@ private _view: Viewport;
 
 	navigate( sens: kbNav ) {
 		
-		if( !this._lastsel ) {
+		// an item of id 0 is one
+		if( this._lastsel===undefined ) {
 			if( sens==kbNav.next )  sens = kbNav.first;
 			else sens = kbNav.last;
 		}
@@ -395,6 +396,7 @@ private _view: Viewport;
 				if( itm ) {
 					this._multisel.add( id );
 					itm.addClass( "selected" );
+					this._lastsel = id;		// the arrows go on from it
 				}
 			});
 
@@ -434,6 +436,9 @@ private _view: Viewport;
 	}
 
 	clearSelection( fireEvent = true ) {
+		// nothing selected: the arrows start from the first item
+		this._lastsel = undefined;
+
 		if( this._multisel.size ) {
 			this._clearSelection( );
 			if( fireEvent ) {

package/src/components/messages/messages.ts

@@ -106,10 +106,13 @@ export class MessageBox extends Dialog<DialogProps>
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button );
-					box.close() 
+					box.close()
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			box.on( "closed", ( ) => resolve( null ) );
+
 			box.show();
 		} );
 
@@ -175,10 +178,13 @@ export class InputBox extends Dialog<DialogProps>
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button=="ok" ? box.getValue( ) : null );
-					box.close() 
+					box.close()
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			box.on( "closed", ( ) => resolve( null ) );
+
 			box.show();
 		} );
 
@@ -233,10 +239,13 @@ export class PromptBox extends Dialog<DialogProps>
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button );
-					box.close() 
+					box.close()
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			box.on( "closed", ( ) => resolve( null ) );
+
 			box.show();
 		} );
 	}

package/src/components/popup/popup.ts

@@ -46,6 +46,22 @@ function getRoot( ) {
 	return document.body;
 }
 
+/**
+ * on the document while the event goes down (capture): a press outside
+ * every popup closes the group opened last, the others at the next presses.
+ * The event is left as it is, what is pressed handles it as usual.
+ * One function for all the popups: it is removed by the one that empties the list.
+ */
+
+function dismissLast( e: UIEvent ) {
+	if( autoclose_list.some( x => x.dom.contains( e.target as Node ) ) ) {
+		return;
+	}
+
+	// the newest popup: dismiss( ) closes its whole group (a menu and its sub-menus)
+	autoclose_list[autoclose_list.length-1].dismiss( );
+}
+
 /**
  * @cssvar
  * ```
@@ -233,7 +249,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			if( idx>=0 ) {
 				autoclose_list.splice( idx, 1 );
 				if( autoclose_list.length==0 ) {
-					document.removeEventListener( "pointerdown", this._dismiss, true );
+					document.removeEventListener( "pointerdown", dismissLast, true );
 				}
 			}
 		}
@@ -263,7 +279,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 				
 		if( this.props.autoClose ) {
 			if( autoclose_list.length==0 ) {
-				document.addEventListener( "pointerdown", this._dismiss, true );
+				document.addEventListener( "pointerdown", dismissLast, true );
 			}
 
 			autoclose_list.push( this );
@@ -320,23 +336,6 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this._do_hide( );
 	}
 
-	/**
-	 * binded
-	 *
-	 * listened on the document while the event goes down (capture): a press
-	 * closes the popups even when what is pressed stops its propagation.
-	 * the event is left as it is, what is pressed handles it as usual.
-	 */
-
-	private _dismiss = ( e: UIEvent ) => {
-		const onac = autoclose_list.some( x=> x.dom.contains(e.target as Node) )
-		if( onac ) {
-			return;
-		}
-
-		this.dismiss( );
-	}
-	
 	/**
 	 * dismiss all popup belonging to the same group as 'this'
 	 */
@@ -369,7 +368,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		const list = inc_group.reverse( );
 		autoclose_list = excl_group;
 		if( autoclose_list.length==0 ) {
-			document.removeEventListener( "pointerdown", this._dismiss, true );
+			document.removeEventListener( "pointerdown", dismissLast, true );
 		}
 		
 		list.forEach( x => x.close() );

package/src/components/radio/radio.ts

@@ -19,7 +19,7 @@ import { class_ns } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Label } from '../label/label';
-import { Input } from '../input/input'
+import { Input, getRadioOwner } from '../input/input'
 import { HBox } from '../boxes/boxes';
 
 import icons from "../assets/icons"
@@ -152,10 +152,14 @@ export class Radio extends Component<RadioProps,RadioEvents> {
 	 */
 
 	checkValue( vname: string ) {
-		const grp = this.props.name;
-		const el = this.parentElement().query<Radio>( `input[name="${grp}"][value="${vname}"]` );
+		// the radios of the group: in the form that holds this one, else in
+		// its dialog, else in the document (as a Form reads them)
+		const owner = getRadioOwner( this.dom );
+		const selector = `input[name="${this.props.name}"][value="${vname}"]`;
+
+		const el = owner.querySelector( selector ) as HTMLInputElement;
 		if( el ) {
-			el.setCheck( true );
+			el.checked = true;
 		}
 	}
 }