x4js 2.3.23 → 2.3.25

package/src/components/popup/popup.ts

@@ -75,6 +75,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 
 	private _isshown = false;
 	protected _ismodal = false;
+	private _prevFocus: HTMLElement;		// modal: the element that had the focus when it opened
 
 	constructor( props: P ) {
 		super( props );
@@ -220,6 +221,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			return;
 		}
 
+		// modal: the focus goes back to the element that had it when it opened, unless the
+		// user put it elsewhere (read before the popup leaves the page and its focus with it)
+		const active = document.activeElement;
+		const giveBack = this._ismodal && this._prevFocus && ( !active || active===document.body || this.dom.contains( active ) );
+
 		this.__hide( );
 		this.__remove( );
 
@@ -255,6 +261,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			}
 		}
 
+		if( giveBack && this._prevFocus.isConnected ) {
+			this._prevFocus.focus( );
+		}
+		this._prevFocus = null;
+
 		this._isshown = false;
 		this.fire( "closed", {} );
 	}
@@ -272,6 +283,10 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this.__append( );
 
 		if( this._ismodal ) {
+			// given back the focus when it closes; <body>: nothing had it
+			const active = document.activeElement as HTMLElement;
+			this._prevFocus = active && active!==document.body ? active : null;
+
 			modal_stack.push( this );
 			this._showModalMask( );
 		}

package/src/components/propgrid/propgrid.ts

@@ -90,6 +90,9 @@ export class PropertyGrid extends VBox {
 	private root: Component;
 	private groups: PropertyGroup[];
 
+	// the editor of each property, by its name: no id, a name is not unique in a page
+	private editors = new Map<string, Component>( );
+
 	constructor(props: PropertyProps) {
 		super(props);
 
@@ -118,6 +121,8 @@ export class PropertyGrid extends VBox {
 
 	setItems( _grps: PropertyGroup[] ) {
 
+		this.editors.clear( );
+
 		if( !_grps || _grps.length==0 ) {
 			this.root.clearContent( );
 			return;
@@ -218,7 +223,6 @@ export class PropertyGrid extends VBox {
 		if (item.type === 'boolean') {
 			editor = new Input({ 
 				type: "checkbox", 
-				id: item.name,
 				//name: item.name, 
 				checked: value as boolean, 
 				dom_events: {
@@ -232,7 +236,6 @@ export class PropertyGrid extends VBox {
 		else if (item.type === 'options') {
 			editor = new Select( {
 				value: value as ListboxID,
-				id: item.name,
 				items: item.options,
 				//name: item.name,
 				change: ( e: EvChange ) => {
@@ -243,20 +246,23 @@ export class PropertyGrid extends VBox {
 		else if (item.type === 'password') {
 			editor = new Input({ 
 				type: 'password',
-				id: item.name,
-				//name: item.name, 
-				value: String(value), 
+				//name: item.name,
+				value: String(value),
 				focus: ( e: EvFocus ) => {
 					if( e.focus_out ) {
 						item.callback?.( item.name, (editor as Input).getValue() );
 					}
+				},
+				change: ( ) => {
+					if( item.live ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
 				}
 			});
 		}
 		else if (item.type === 'number') {
 			editor = new Input({ 
 				type: 'number', 
-				id: item.name,
 				//name: item.name, 
 				value: String(value),
 				step: item.step,
@@ -276,7 +282,6 @@ export class PropertyGrid extends VBox {
 		}
 		else if (item.type === 'color') {
 			editor = new ColorInput({
-				id: item.name,
 				color: value as string,
 				format: "hex",
 				picker: true,
@@ -289,14 +294,12 @@ export class PropertyGrid extends VBox {
 		}
 		else if (item.type === 'label') {
 			editor = new Label({
-				id: item.name,
 				text: value as string,
 			});
 		}
 		else if (item.type === 'button') {
 			use_hdr = false;
 			editor = new Button({ 
-				id: item.name,
                 cls: "button",
 				label: value as string, 
 				click: ( ) => {
@@ -307,7 +310,6 @@ export class PropertyGrid extends VBox {
 		else {
             editor = new Input({ 
                 type: 'text', 
-                id: item.name,
                 //name: item.name, 
                 value: value as string,
                 focus: ( e: EvFocus ) => {
@@ -315,8 +317,17 @@ export class PropertyGrid extends VBox {
                         item.callback?.( item.name, (editor as Input).getValue() );
                     }
                 },
+				change: ( ) => {
+					if( item.live ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
+				}
             })
 		}
+
+		if( item.name ) {
+			this.editors.set( item.name, editor );
+		}
 		
 		let cls = 'row';
 		if( item.cls ) {
@@ -340,7 +351,7 @@ export class PropertyGrid extends VBox {
 			cls,
 			content: [
                 use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
-                new HBox({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content }),
+                new HBox({ cls: 'cell', tag: "label", content }),
             ]
 		});
 	}
@@ -352,45 +363,28 @@ export class PropertyGrid extends VBox {
 	setPropValue( name: string, value: any ) {
 		const all = this.groups.flatMap( x => [ ...x.items ] ) ;
 		const item = all.find( x => x.name==name );
-		if( !item ) {
+		const editor = this.editors.get( name );
+		if( !item || !editor ) {
 			return;
 		}
 
 		if (item.type === 'boolean') {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setCheck( value as boolean );
-			}
+			(editor as Input).setCheck( value as boolean );
 		}
 		else if (item.type === 'options') {
-			const editor = this.root.query<Select>( '#'+item.name );
-			if( editor ) {
-				editor.setValue( value as string );
-			}
+			(editor as Select).setValue( value as string );
 		}
 		else if (item.type === 'number') {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setNumValue( value as number, -2 );
-			}
+			(editor as Input).setNumValue( value as number, -2 );
 		}
 		else if (item.type === 'color') {
-			const editor = this.root.query<ColorInput>( '#'+item.name );
-			if( editor ) {
-				editor.setColor( value as string );
-			}
+			(editor as ColorInput).setColor( value as string );
 		}
 		else if (item.type === 'label') {
-			const label = this.root.query<Label>( '#'+item.name );
-			if( label ) {
-				label.setText( value );
-			}
+			(editor as Label).setText( value );
 		}
 		else {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setValue( value as string );
-			}
+			(editor as Input).setValue( value as string );
 		}
 	}
 

package/src/components/settingsview/settingsview.module.scss

@@ -36,7 +36,6 @@
 			margin: 0;
 			padding: 6px 10px;
 			border: 1px solid var( --border );
-			border-radius: 4px;
 
 			&:focus {
 				border-color: var( --settingsview-marker );
@@ -100,7 +99,6 @@
 		max-width: 900px;
 		padding: 0 8px 10px;
 		border: 1px solid var( --border );
-		border-radius: 8px;
 		background: var( --settingsview-section-background );
 		overflow: hidden;
 		scroll-margin-top: 20px;	// brought to the top: below the padding of the view
@@ -144,7 +142,6 @@
 		gap: 4px;
 		padding: 10px 8px 12px;
 		border-left: 2px solid transparent;
-		border-radius: 4px;
 
 		&:hover {
 			background: var( --settingsview-hover-background );

package/src/components/themes.scss

@@ -100,4 +100,58 @@ $color--interval: 8.4%;
 	--success-background: var(--color-success-a50);
 	--success-background-active: var(--color-success-a60);
 	--success-color: #ffffff;
+}
+
+// :: dark theme :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+// Application.setTheme( "dark" ): the class x4theme-dark on <html>, like the theme Dark
+// Modern of VS Code. Its colours are taken in the sources of VS Code:
+// extensions/theme-defaults/themes/dark_modern.json, and for the lists the defaults of
+// src/vs/platform/theme/common/colors/listColors.ts; the values marked "chosen" are not
+// in VS Code. A theme of an application is written the same way, under html.x4theme-<name>.
+
+html.x4theme-dark {
+	// the scale: a0 the background, a100 the text, the surfaces between them, then the blues
+	--color-primary-a0: #1f1f1f;		// editor.background
+	--color-primary-a5: #252526;		// chosen
+	--color-primary-a10: #2a2d2e;		// list.hoverBackground
+	--color-primary-a20: #37373d;		// list.inactiveSelectionBackground
+	--color-primary-a30: #3c3c3c;		// input.border
+	--color-primary-a40: #04395e;		// list.activeSelectionBackground
+	--color-primary-a50: #0078d4;		// button.background, focusBorder
+	--color-primary-a55: #026ec1;		// button.hoverBackground
+	--color-primary-a60: #0078d4;
+	--color-primary-a70: #026ec1;
+	--color-primary-a80: #04395e;
+	--color-primary-a90: #cccccc;
+	--color-primary-a100: #cccccc;		// foreground
+
+	// what the scale does not give
+	--background-ternary: #181818;		// sideBar.background
+	--background-hover: #2b2b2b;		// button.secondaryHoverBackground
+	--background-active: #37373d;		// list.inactiveSelectionBackground
+	--background-input: #313131;		// input.background
+
+	--text-secondary: #9d9d9d;			// descriptionForeground
+	--text-ternary: #bbbbbb;			// chosen: between the description and the text
+
+	--border: #3c3c3c;					// input.border
+	--border-light: #2b2b2b;			// panel.border
+	--border-hover: #616161;			// chosen (badge.background)
+
+	--disabled-background: #313131;		// chosen
+	--disabled-color: #6e6e6e;			// chosen
+	--disabled-color-dark: #6e6e6e;		// chosen
+	--disabled-color-light: #4f4f4f;	// chosen
+
+	--accent-color: #ffffff;			// button.foreground: the text on the accent
+	--accent-color-hover: #ffffff;
+	--accent-color-focus: #ffffff;
+	--accent-color-active: #ffffff;
+
+	// the title bar of a Dialog: the one of the window of VS Code
+	--color-dialog-caption: #181818;			// titleBar.activeBackground
+	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
+	--color-dialog-background: #202020;			// editorWidget.background
+
+	color-scheme: dark;		// the native parts: select, scroll bars, number spinners
 }

package/src/components/tooltips/tooltips.scss

@@ -18,9 +18,9 @@
 
 :root {
 	--tooltip-caption-background: var( --color-primary-a70 );
-	--tooltip-caption-color: var( --color-primary-a0 );
+	--tooltip-caption-color: var( --accent-color );
 
-	--tooltip-icon-background: var( --color-primary-a0 );
+	--tooltip-icon-background: var( --accent-color );
 	--tooltip-icon-color: var( --color-primary-a70 );
 
 	--tooltip-background: var( --color-primary-a10 );	//white;

package/src/components/tooltips/tooltips.ts

@@ -32,6 +32,15 @@ let mouse_pos: Point = {x:0, y:0 };
 
 const timer = new Timer( );
 
+/**
+ * the tooltips are shown once this is called: the text of the attribute "tooltip" (the prop
+ * tooltip of a component), or the one getTip( ) of a "tip-handler" gives.
+ * This text is shown as html: a text that comes from a user is escaped by the application,
+ * with sanitizeHtml( text ).
+ * @example
+ * new Button( { label: "Open", tooltip: `Open <b>${sanitizeHtml( file.name )}</b>` } );
+ */
+
 export function initTooltips( ) {
 
 	document.addEventListener( "mouseenter", ( ev: MouseEvent ) => {

package/src/core/core_application.ts

@@ -42,6 +42,9 @@ export interface ApplicationEvents extends EventMap {
 // singleton
 let main_app: Application = null;
 
+// the class of a theme on <html>: x4theme-<name> (see Application.setTheme)
+const THEME_PREFIX = "x4theme-";
+
 /**
  * Provides information about the user's device and browser capabilities.
  */
@@ -201,6 +204,50 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		Application.instance().fire( "global", { msg, params } );
 	}
 
+	/**
+	 * Selects the theme of the page: the class `x4theme-<name>` on `<html>`, in place
+	 * of the one of the theme before.
+	 * - `""`: the light theme of x4, the one by default: no class.
+	 * - `"dark"`: the dark theme of x4, like the theme Dark Modern of VS Code
+	 *   (`html.x4theme-dark` in themes.scss).
+	 * - any other name: a theme of the application, defined in its own css under
+	 *   `html.x4theme-<name>`, with the variables of themes.scss it changes.
+	 * @param name - the name of the theme; "" for the light theme.
+	 * @example
+	 * Application.setTheme( "dark" );		// the dark theme of x4
+	 * Application.setTheme( "pink" );		// html.x4theme-pink { --color-primary-a0: ...; } in the css of the application
+	 * Application.setTheme( "" );			// back to the light theme
+	 */
+
+	static setTheme( name: string ) {
+		const classes = document.documentElement.classList;
+
+		const current = Application.getTheme( );
+		if( current ) {
+			classes.remove( THEME_PREFIX + current );
+		}
+
+		if( name ) {
+			classes.add( THEME_PREFIX + name );
+		}
+	}
+
+	/**
+	 * The name of the theme of the page, as setTheme got it: `""` for the light theme
+	 * of x4, `"dark"` for its dark theme, or the name of a theme of the application.
+	 */
+
+	static getTheme( ): string {
+		const classes = document.documentElement.classList;
+		for( let i = 0; i < classes.length; i++ ) {
+			if( classes[i].startsWith( THEME_PREFIX ) ) {
+				return classes[i].replace( THEME_PREFIX, "" );
+			}
+		}
+
+		return "";
+	}
+
 	/**
 	 * 
 	 */
@@ -208,7 +255,11 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 	private _setupKeyboard( ) {
 		
 		document.addEventListener( "keydown", (ev) => {
-			if( ev.key=="Tab" || ev.key=="Enter" ) {
+			// Enter in a text of several lines is a new line, not the next field
+			const target = ev.target as HTMLElement;
+			const multiline = target.tagName==="TEXTAREA" || target.isContentEditable;
+
+			if( ev.key=="Tab" || ( ev.key=="Enter" && !multiline ) ) {
 				if( this.focusNext( !ev.shiftKey ) ) {
 					ev.preventDefault( );
 				}
@@ -216,7 +267,8 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 
 			// The focus is nowhere: the shortcuts of the view the user worked in last.
 			// (when it is in a view, the view has seen the key before us)
-			if( ev.target===document.body && this._active?.owner.dom.isConnected && this._active.shortcuts.handle( ev ) ) {
+			// (a view hidden, in a tab not shown: its shortcuts sleep)
+			if( ev.target===document.body && this._active?.owner.isVisible( ) && this._active.shortcuts.handle( ev ) ) {
 				return;
 			}
 

package/src/core/core_events.ts

@@ -159,6 +159,8 @@ export class EventSource<E extends EventMap = EventMap > {
 
 	/**
 	 * Dispatches an event with a given name and payload to all registered listeners.
+	 * A listener that throws: its error goes to console.error, the next listeners are
+	 * called, and fire returns normally.
 	 * @param name - The name of the event to fire (must be a key in `E`).
 	 * @param evx - The event payload (event object) to pass to the listeners.
 	 */
@@ -192,14 +194,24 @@ export class EventSource<E extends EventMap = EventMap > {
 				ev.stopPropagation = stopPropagation;
 			}
 
+			// a listener that throws stops neither the others nor the one that fires
+			const call = ( listener: EventCallback ) => {
+				try {
+					listener( ev );
+				}
+				catch( e ) {
+					console.error( e );
+				}
+			};
+
 			// small optimisation
 			if (listeners.length == 1) {
-				listeners[0](ev);
+				call( listeners[0] );
 			}
 			else {
 				const temp = listeners.slice();
 				for (let i = 0, n = temp.length; i < n; i++) {
-					temp[i](ev);
+					call( temp[i] );
 					if (ev.propagationStopped) {
 						break;
 					}

package/src/core/core_i18n.ts

@@ -336,6 +336,13 @@ let fr = {
 			search: 'Rechercher un paramètre',
 			nomatch: 'Aucun paramètre trouvé',
 		},
+
+		progression: {
+			error: '{0} erreur',
+			errors: '{0} erreurs',
+			warning: '{0} avertissement',
+			warnings: '{0} avertissements',
+		},
 	}
 };
 
@@ -406,6 +413,13 @@ let en = {
 			search: 'Search settings',
 			nomatch: 'No setting found',
 		},
+
+		progression: {
+			error: '{0} error',
+			errors: '{0} errors',
+			warning: '{0} warning',
+			warnings: '{0} warnings',
+		},
 	}
 };
 
@@ -476,6 +490,13 @@ let es = {
 			search: 'Buscar un ajuste',
 			nomatch: 'Ningún ajuste encontrado',
 		},
+
+		progression: {
+			error: '{0} error',
+			errors: '{0} errores',
+			warning: '{0} advertencia',
+			warnings: '{0} advertencias',
+		},
 	}
 };
 
@@ -546,6 +567,13 @@ let de = {
 			search: 'Einstellungen durchsuchen',
 			nomatch: 'Keine Einstellung gefunden',
 		},
+
+		progression: {
+			error: '{0} Fehler',
+			errors: '{0} Fehler',
+			warning: '{0} Warnung',
+			warnings: '{0} Warnungen',
+		},
 	}
 };