x4js 2.3.21 → 2.3.23

package/src/core/core_colors.ts

@@ -26,6 +26,34 @@ function round(v: number) {
 	return Math.round(v);
 }
 
+let ctx2d: CanvasRenderingContext2D = null;
+
+/**
+ * a colour of css as the browser paints it: [red, green, blue, alpha 0-1];
+ * null when the browser does not know it
+ */
+
+function browserColor( value: string ) {
+	if( !ctx2d ) {
+		const canvas = document.createElement( "canvas" );
+		canvas.width = canvas.height = 1;
+		ctx2d = canvas.getContext( "2d", { willReadFrequently: true } );
+	}
+
+	// a value the canvas refuses leaves fillStyle as it was
+	ctx2d.fillStyle = "#010203";
+	ctx2d.fillStyle = value;
+	if( ctx2d.fillStyle=="#010203" ) {
+		return null;
+	}
+
+	// fillStyle keeps the colour as it was written (oklch, color(srgb ...)): the pixel is in rgb
+	ctx2d.clearRect( 0, 0, 1, 1 );
+	ctx2d.fillRect( 0, 0, 1, 1 );
+	const px = ctx2d.getImageData( 0, 0, 1, 1 ).data;
+	return [ px[0], px[1], px[2], px[3] / 255 ];
+}
+
 
 export interface Rgb {
 	red: number;
@@ -79,6 +107,7 @@ export class Color {
 	 *  var( --color-5 )
 	 *  cyan
 	 *  transparent
+	 *  any other colour of css the browser knows: hsl( ), oklch( ), color-mix( )...
 	 */
 
 	setValue(value: string): this {
@@ -137,6 +166,12 @@ export class Color {
 			}
 		}
 
+		// another colour the browser knows (color-mix, hsl, oklch...)
+		const known = browserColor( value );
+		if( known ) {
+			return this.setRgb( known[0], known[1], known[2], known[3] );
+		}
+
 		// red, to be seen, and marked as invalid
 		this.setRgb(255, 0, 0, 1);
 		this.invalid = true;
@@ -343,32 +378,92 @@ export class Color {
 	 * @param percent - The percentage to lighten (0-100).
 	 * @returns The current Color instance.
 	 */
-	lighten(percent: number) : this {
+	lighten(percent: number): this {
+		const factor = clamp(percent, 0, 100) / 100;
 
-		if (percent < 0) {
-			percent = 0;
-		}
-		else if (percent > 100) {
-			percent = 100;
-		}
+		const [r, g, b, a] = this.rgb;
+		this.rgb = [round(r + (255 - r) * factor), round(g + (255 - g) * factor), round(b + (255 - b) * factor), a];
 
-		const factor = percent / 100;
+		return this;
+	}
 
-		const adj = (value: number): number => {
-			value = (value + (255 - value) * factor) | 0;
-			if (value > 255) {
-				value = 255;
-			}
-			return value;
-		};
+	/**
+	 * Darkens the color by a given percentage.
+	 *
+	 * @param percent - The percentage to darken (0-100).
+	 * @returns The current Color instance.
+	 */
+	darken(percent: number): this {
+		const factor = 1 - clamp(percent, 0, 100) / 100;
 
-		const _ = this.rgb;
-		this.rgb = [adj(_[0]), adj(_[1]), adj(_[2]), _[3]];
+		const [r, g, b, a] = this.rgb;
+		this.rgb = [round(r * factor), round(g * factor), round(b * factor), a];
 
 		return this;
 	}
+
+	/**
+	 * Mixes the color with another one, alpha included.
+	 *
+	 * @param other - The other color.
+	 * @param amount - The part of the other color (0-1): 0 keeps this color, 1 gives the other one.
+	 * @returns The current Color instance.
+	 */
+	mix(other: Color, amount: number): this {
+		const t = clamp(amount, 0, 1);
+
+		const [r, g, b, a] = this.rgb;
+		const [r2, g2, b2, a2] = other.rgb;
+		this.rgb = [round(r + (r2 - r) * t), round(g + (g2 - g) * t), round(b + (b2 - b) * t), a + (a2 - a) * t];
+
+		return this;
+	}
+
+	/**
+	 * Gets the relative luminance of the color, as WCAG defines it. The alpha is not used.
+	 *
+	 * @returns The luminance (0 for black, 1 for white).
+	 */
+	luminance(): number {
+		// the components in linear light
+		const lin = (v: number) => {
+			v /= 255;
+			return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+		};
+
+		const [r, g, b] = this.rgb;
+		return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+	}
+
+	/**
+	 * Gets the contrast ratio between the color and another one, as WCAG defines it.
+	 *
+	 * @param other - The other color.
+	 * @returns The ratio (1 for the same luminance, 21 for black and white).
+	 */
+	contrast(other: Color): number {
+		const l1 = this.luminance();
+		const l2 = other.luminance();
+		return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+	}
+
+	/**
+	 * Gets, of two colors of text, the one that contrasts most with the color.
+	 *
+	 * @param light - The light text color (white by default).
+	 * @param dark - The dark text color (black by default).
+	 * @returns A copy of light or dark.
+	 */
+	textColor(light = WHITE, dark = BLACK): Color {
+		const best = this.contrast(light) >= this.contrast(dark) ? light : dark;
+
+		const [r, g, b, a] = best.rgb;
+		return new Color(r, g, b, a);
+	}
 }
 
+const WHITE = new Color(255, 255, 255);
+const BLACK = new Color(0, 0, 0);
 
 
 

package/src/core/core_i18n.ts

@@ -331,6 +331,11 @@ let fr = {
 			numeric: '123',
 			alpha: 'Abc'
 		},
+
+		settings: {
+			search: 'Rechercher un paramètre',
+			nomatch: 'Aucun paramètre trouvé',
+		},
 	}
 };
 
@@ -396,6 +401,151 @@ let en = {
 			numeric: '123',
 			alpha: 'Abc'
 		},
+
+		settings: {
+			search: 'Search settings',
+			nomatch: 'No setting found',
+		},
+	}
+};
+
+/** @ignore */
+
+let es = {
+	global: {
+		ok: 'Aceptar',
+		cancel: 'Cancelar',
+		ignore: 'Ignorar',
+		yes: 'Sí',
+		no: 'No',
+		abort: "Anular",
+		retry: "Reintentar",
+
+		error: "Error",
+		today: "Hoy",
+
+		open: 'Abrir',
+		new: 'Nuevo',
+		delete: 'Eliminar',
+		close: 'Cerrar',
+		save: 'Guardar',
+
+		search: 'Buscar',
+		search_tip: 'Escriba el texto que desea buscar. <b>Intro</b> para iniciar la búsqueda. <b>Esc</b> para cancelar.',
+
+		required_field: "dato obligatorio",
+		invalid_format: "formato no válido",
+		invalid_email: 'dirección de correo no válida',
+		invalid_number: 'valor numérico no válido',
+
+		diff_date_seconds: '{0} segundos',
+		diff_date_minutes: '{0} minutos',
+		diff_date_hours: '{0} horas {1} minutos',
+
+		invalid_date: 'Fecha no reconocida ({0})',
+		empty_list: 'Lista vacía',
+
+		date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
+		date_format: 'D/M/Y',
+        date_time_format: 'D/M/Y H:I:S',
+
+		day_short: [ 'dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb' ],
+		day_long: [ 'domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado' ],
+
+		month_short: [ 'ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic' ],
+		month_long: [ 'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre' ],
+
+		property: 'Propiedad',
+		value: 'Valor',
+
+		err_403: `No tiene permisos suficientes para realizar esta acción`,
+
+		copy: 'Copiar',
+		cut: 'Cortar',
+		paste: 'Pegar',
+
+		filedrop: 'Suelte un archivo',
+
+		keyboard: {
+			next: 'Siguiente',
+			numeric: '123',
+			alpha: 'Abc'
+		},
+
+		settings: {
+			search: 'Buscar un ajuste',
+			nomatch: 'Ningún ajuste encontrado',
+		},
+	}
+};
+
+/** @ignore */
+
+let de = {
+	global: {
+		ok: 'OK',
+		cancel: 'Abbrechen',
+		ignore: 'Ignorieren',
+		yes: 'Ja',
+		no: 'Nein',
+		abort: "Abbrechen",
+		retry: "Wiederholen",
+
+		error: "Fehler",
+		today: "Heute",
+
+		open: 'Öffnen',
+		new: 'Neu',
+		delete: 'Löschen',
+		close: 'Schließen',
+		save: 'Speichern',
+
+		search: 'Suchen',
+		search_tip: 'Geben Sie den zu suchenden Text ein. <b>Enter</b> startet die Suche. <b>Esc</b> bricht ab.',
+
+		required_field: "Pflichtangabe",
+		invalid_format: "ungültiges Format",
+		invalid_email: 'ungültige E-Mail-Adresse',
+		invalid_number: 'ungültiger Zahlenwert',
+
+		diff_date_seconds: '{0} Sekunden',
+		diff_date_minutes: '{0} Minuten',
+		diff_date_hours: '{0} Stunden {1} Minuten',
+
+		invalid_date: 'Datum nicht erkannt ({0})',
+		empty_list: 'Leere Liste',
+
+		date_input_formats: 'd.m.y|d/m/y|d m y|d-m-y|dmy',
+		date_format: 'D.M.Y',
+        date_time_format: 'D.M.Y H:I:S',
+
+		day_short: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
+		day_long: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
+
+		month_short: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
+		month_long: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
+
+		property: 'Eigenschaft',
+		value: 'Wert',
+
+		err_403: `Sie haben nicht die erforderlichen Rechte für diese Aktion`,
+
+		copy: 'Kopieren',
+		cut: 'Ausschneiden',
+		paste: 'Einfügen',
+
+		filedrop: 'Datei hier ablegen',
+
+		keyboard: {
+			next: 'Weiter',
+			numeric: '123',
+			alpha: 'Abc'
+		},
+
+		settings: {
+			search: 'Einstellungen durchsuchen',
+			nomatch: 'Keine Einstellung gefunden',
+		},
 	}
 };
 
@@ -405,6 +555,13 @@ addTranslation( 'fr', fr );
 createLanguage( 'en', 'fr' );
 addTranslation( 'en', en );
 
+// a key they lack is taken in english
+createLanguage( 'es', 'en' );
+addTranslation( 'es', es );
+
+createLanguage( 'de', 'en' );
+addTranslation( 'de', de );
+
 selectLanguage( 'fr' );	// by default