@yuneta/gobj-ui 7.23.110 → 7.23.112

package/dist/gobj-ui.cjs.js

@@ -942,7 +942,7 @@ function mt_create$21(gobj) {
 /***************************************************************
 *          Framework Method: Start
 ***************************************************************/
-function mt_start$18(gobj) {
+function mt_start$19(gobj) {
 	let config = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "config") || {};
 	let priv = gobj.priv;
 	if (!validate_config(config)) {
@@ -1011,7 +1011,7 @@ function mt_start$18(gobj) {
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$18(gobj) {
+function mt_stop$19(gobj) {
 	let priv = gobj.priv;
 	if (!priv) return 0;
 	close_toolbar_dropdown(gobj);
@@ -2556,8 +2556,8 @@ function ac_nav_item_close(gobj, event, kw, src) {
 ***************************************************************/
 var gmt$21 = {
 	mt_create: mt_create$21,
-	mt_start: mt_start$18,
-	mt_stop: mt_stop$18,
+	mt_start: mt_start$19,
+	mt_stop: mt_stop$19,
 	mt_destroy: mt_destroy$21
 };
 function create_gclass$21(gclass_name) {
@@ -4897,11 +4897,11 @@ function mt_create$18(gobj) {
 /***************************************************************
 *          Framework Method: Start
 ***************************************************************/
-function mt_start$17(gobj) {}
+function mt_start$18(gobj) {}
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$17(gobj) {
+function mt_stop$18(gobj) {
 	(0, _yuneta_gobj_js.gobj_stop_children)(gobj);
 }
 /***************************************************************
@@ -5188,8 +5188,8 @@ function ac_resize$5(gobj, event, kw, src) {
 ***************************/
 var gmt$18 = {
 	mt_create: mt_create$18,
-	mt_start: mt_start$17,
-	mt_stop: mt_stop$17,
+	mt_start: mt_start$18,
+	mt_stop: mt_stop$18,
 	mt_destroy: mt_destroy$18
 };
 /***************************************************************
@@ -5431,11 +5431,11 @@ function mt_create$17(gobj) {
 /***************************************************************
 *          Framework Method: Start
 ***************************************************************/
-function mt_start$16(gobj) {}
+function mt_start$17(gobj) {}
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$16(gobj) {
+function mt_stop$17(gobj) {
 	(0, _yuneta_gobj_js.gobj_stop_children)(gobj);
 }
 /***************************************************************
@@ -5795,8 +5795,8 @@ function ac_resize$4(gobj, event, kw, src) {
 ***************************/
 var gmt$17 = {
 	mt_create: mt_create$17,
-	mt_start: mt_start$16,
-	mt_stop: mt_stop$16,
+	mt_start: mt_start$17,
+	mt_stop: mt_stop$17,
 	mt_destroy: mt_destroy$17
 };
 /***************************************************************
@@ -6922,14 +6922,14 @@ function mt_destroy$16(gobj) {
 /************************************************************
 *      Framework Method start
 ************************************************************/
-function mt_start$15(gobj) {
+function mt_start$16(gobj) {
 	let record = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "record");
 	if (record) (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_LOAD_RECORD", record, gobj);
 }
 /************************************************************
 *      Framework Method stop
 ************************************************************/
-function mt_stop$15(gobj) {}
+function mt_stop$16(gobj) {}
 /***************************
 *      Local Methods
 ***************************/
@@ -7012,8 +7012,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-save",
-				title: "save",
-				"aria-label": "save",
+				title: (0, i18next.t)("save"),
+				"data-i18n-title": "save",
+				"aria-label": (0, i18next.t)("save"),
+				"data-i18n-aria-label": "save",
 				disabled: true
 			},
 			[[
@@ -7037,8 +7039,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-undo",
-				title: "undo",
-				"aria-label": "undo",
+				title: (0, i18next.t)("undo"),
+				"data-i18n-title": "undo",
+				"aria-label": (0, i18next.t)("undo"),
+				"data-i18n-aria-label": "undo",
 				disabled: true
 			},
 			[[
@@ -7062,8 +7066,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-clear",
-				title: "clear",
-				"aria-label": "clear"
+				title: (0, i18next.t)("clear"),
+				"data-i18n-title": "clear",
+				"aria-label": (0, i18next.t)("clear"),
+				"data-i18n-aria-label": "clear"
 			},
 			[[
 				"span",
@@ -7086,8 +7092,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-copy",
-				title: "copy",
-				"aria-label": "copy"
+				title: (0, i18next.t)("copy"),
+				"data-i18n-title": "copy",
+				"aria-label": (0, i18next.t)("copy"),
+				"data-i18n-aria-label": "copy"
 			},
 			[[
 				"span",
@@ -7110,8 +7118,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-paste",
-				title: "paste",
-				"aria-label": "paste"
+				title: (0, i18next.t)("paste"),
+				"data-i18n-title": "paste",
+				"aria-label": (0, i18next.t)("paste"),
+				"data-i18n-aria-label": "paste"
 			},
 			[[
 				"span",
@@ -8372,7 +8382,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 				column.editorParams = {
 					format: "dd/MM/yyyy hh:mm",
 					verticalNavigation: "table",
-					elementAttributes: { title: "slide bar to choose option" }
+					elementAttributes: { title: (0, i18next.t)("slide bar to choose option") }
 				};
 				field_desc.real_type;
 				break;
@@ -9154,8 +9164,8 @@ function cmd_get_picked_files(gobj, cmd, kw, src) {
 }
 var gmt$16 = {
 	mt_create: mt_create$16,
-	mt_start: mt_start$15,
-	mt_stop: mt_stop$15,
+	mt_start: mt_start$16,
+	mt_stop: mt_stop$16,
 	mt_destroy: mt_destroy$16,
 	mt_command_parser: mt_command_parser$2
 };
@@ -9314,7 +9324,9 @@ var EditControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: (0, i18next.t)("maplibre.drag_mark"),
-					"aria-label": (0, i18next.t)("maplibre.drag_mark")
+					"data-i18n-title": "maplibre.drag_mark",
+					"aria-label": (0, i18next.t)("maplibre.drag_mark"),
+					"data-i18n-aria-label": "maplibre.drag_mark"
 				},
 				(0, _yuneta_gobj_js.parseSVG)(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M273 7c-9.4-9.4-24.6-9.4-33.9 0L167 79c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l31-31L232 232 81.9 232l31-31c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-9.4 9.4-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31L232 280l0 150.1-31-31c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-31 31L280 280l150.1 0-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9l-72-72c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31L280 232l0-150.1 31 31c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L273 7z"/></svg>
@@ -9373,7 +9385,9 @@ var MarkerControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: (0, i18next.t)("maplibre.center_map"),
-					"aria-label": (0, i18next.t)("maplibre.center_map")
+					"data-i18n-title": "maplibre.center_map",
+					"aria-label": (0, i18next.t)("maplibre.center_map"),
+					"data-i18n-aria-label": "maplibre.center_map"
 				},
 				(0, _yuneta_gobj_js.parseSVG)(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="22" height="22"><path d="M15 15C24.4 5.7 39.6 5.7 49 15l63 63L112 40c0-13.3 10.7-24 24-24s24 10.7 24 24l0 96c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l38.1 0L15 49C5.7 39.6 5.7 24.4 15 15zM133.5 243.9C158.6 193.6 222.7 112 320 112s161.4 81.6 186.5 131.9c3.8 7.6 3.8 16.5 0 24.2C481.4 318.4 417.3 400 320 400s-161.4-81.6-186.5-131.9c-3.8-7.6-3.8-16.5 0-24.2zM320 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128zM591 15c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-63 63 38.1 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24s24 10.7 24 24l0 38.1 63-63zM15 497c-9.4-9.4-9.4-24.6 0-33.9l63-63L40 400c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 96c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-38.1L49 497c-9.4 9.4-24.6 9.4-33.9 0zm576 0l-63-63 0 38.1c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-38.1 0 63 63c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0z"/></svg>
@@ -9390,7 +9404,9 @@ var MarkerControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: (0, i18next.t)("maplibre.user_location"),
-					"aria-label": (0, i18next.t)("maplibre.user_location")
+					"data-i18n-title": "maplibre.user_location",
+					"aria-label": (0, i18next.t)("maplibre.user_location"),
+					"data-i18n-aria-label": "maplibre.user_location"
 				},
 				(0, _yuneta_gobj_js.parseSVG)(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M256 0c17.7 0 32 14.3 32 32l0 34.7C368.4 80.1 431.9 143.6 445.3 224l34.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-34.7 0C431.9 368.4 368.4 431.9 288 445.3l0 34.7c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-34.7C143.6 431.9 80.1 368.4 66.7 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l34.7 0C80.1 143.6 143.6 80.1 224 66.7L224 32c0-17.7 14.3-32 32-32zM128 256a128 128 0 1 0 256 0 128 128 0 1 0 -256 0zm128-80a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/></svg>
@@ -9417,6 +9433,78 @@ var MarkerControl = class {
 		(0, _yuneta_gobj_js.gobj_send_event)(this.gobj, "EV_CONTROL_MAP", { user_location: this._enable_user_location }, this.gobj);
 	}
 };
+/***********************************************************************
+*      MAPLIBRE'S OWN CHROME, IN THE APP'S LANGUAGE
+*
+*  Everything maplibre draws with words -- the zoom tooltips, the
+*  geolocate button, the attribution toggle, a popup's close, and the
+*  notice that teaches the Ctrl + wheel gesture -- comes from its
+*  `locale`, an option merged over its own English defaults at
+*  construction. So a map in a Spanish app was saying *"Zoom in"* and
+*  *"Use Ctrl + scroll to zoom the map"*, which is the same rule this
+*  GUI applies to every other string.
+*
+*  Two halves, because maplibre reads its strings ONCE, when each
+*  control builds its DOM:
+*
+*      `yui_maplibre_locale(t)`      the `locale` option, for the map's
+*                                    first paint;
+*      `yui_maplibre_relocalize()`   after a language change, which is
+*                                    the half a `locale` alone cannot
+*                                    do -- it writes the strings into
+*                                    the DOM already drawn, and updates
+*                                    the map's locale so anything built
+*                                    later is right too.
+*
+*  The scale units (`km`, `mi`, `nm`) are symbols and are left alone;
+*  the MapLibre logo keeps its name, which is a brand.
+***********************************************************************/
+function yui_maplibre_locale(t) {
+	return {
+		"NavigationControl.ZoomIn": t("zoom in"),
+		"NavigationControl.ZoomOut": t("zoom out"),
+		"NavigationControl.ResetBearing": t("drag to rotate the map, click to reset north"),
+		"GeolocateControl.FindMyLocation": t("find my location"),
+		"GeolocateControl.LocationNotAvailable": t("location not available"),
+		"AttributionControl.ToggleAttribution": t("toggle attribution"),
+		"AttributionControl.MapFeedback": t("map feedback"),
+		"FullscreenControl.Enter": t("enter fullscreen"),
+		"FullscreenControl.Exit": t("exit fullscreen"),
+		"Popup.Close": t("close popup"),
+		"Map.Title": t("map"),
+		"Marker.Title": t("map marker"),
+		"CooperativeGesturesHandler.WindowsHelpText": t("use ctrl + scroll to zoom the map"),
+		"CooperativeGesturesHandler.MacHelpText": t("use cmd + scroll to zoom the map"),
+		"CooperativeGesturesHandler.MobileHelpText": t("use two fingers to move the map")
+	};
+}
+function label_ctrl($root, selector, text) {
+	if (!$root || !text) return;
+	for (const $el of $root.querySelectorAll(selector)) {
+		$el.setAttribute("title", text);
+		$el.setAttribute("aria-label", text);
+	}
+}
+function yui_maplibre_relocalize(map, t) {
+	if (!map || typeof map.getContainer !== "function") return;
+	const strings = yui_maplibre_locale(t);
+	try {
+		map._locale = Object.assign({}, map._locale, strings);
+	} catch (e) {}
+	const $c = map.getContainer();
+	label_ctrl($c, ".maplibregl-ctrl-zoom-in", strings["NavigationControl.ZoomIn"]);
+	label_ctrl($c, ".maplibregl-ctrl-zoom-out", strings["NavigationControl.ZoomOut"]);
+	label_ctrl($c, ".maplibregl-ctrl-compass", strings["NavigationControl.ResetBearing"]);
+	label_ctrl($c, ".maplibregl-ctrl-geolocate", strings["GeolocateControl.FindMyLocation"]);
+	label_ctrl($c, ".maplibregl-ctrl-attrib-button", strings["AttributionControl.ToggleAttribution"]);
+	label_ctrl($c, ".maplibregl-ctrl-fullscreen", strings["FullscreenControl.Enter"]);
+	label_ctrl($c, ".maplibregl-popup-close-button", strings["Popup.Close"]);
+	const mac = typeof navigator !== "undefined" && (navigator.userAgent || "").includes("Mac");
+	const $desktop = $c.querySelector(".maplibregl-desktop-message");
+	if ($desktop) $desktop.textContent = mac ? strings["CooperativeGesturesHandler.MacHelpText"] : strings["CooperativeGesturesHandler.WindowsHelpText"];
+	const $mobile = $c.querySelector(".maplibregl-mobile-message");
+	if ($mobile) $mobile.textContent = strings["CooperativeGesturesHandler.MobileHelpText"];
+}
 //#endregion
 //#region src/c_yui_map.js
 /***********************************************************************
@@ -9431,6 +9519,7 @@ var MarkerControl = class {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$15 = "C_YUI_MAP";
+var GESTURE_HINT_MS = 2e3;
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9457,6 +9546,7 @@ var attrs_table$15 = [
 ];
 var PRIVATE_DATA$15 = {
 	xmap: null,
+	gesture_hint_timer: null,
 	geojson: null,
 	resizeObserver: null,
 	width: 0,
@@ -9481,7 +9571,8 @@ function mt_create$15(gobj) {
 	if ($map) $map.classList.add(GCLASS_NAME$15);
 	Object.assign(map_settings, {
 		container: $map,
-		cooperativeGestures: true
+		cooperativeGestures: true,
+		locale: yui_maplibre_locale(i18next.t)
 	});
 	priv.onClick = (ev) => {
 		onClick(gobj, ev);
@@ -9499,6 +9590,16 @@ function mt_create$15(gobj) {
 		xtouchStart(gobj, ev);
 	};
 	const map = priv.xmap = new maplibre_gl.Map(map_settings);
+	map.on("cooperativegestureprevented", () => {
+		const $s = map.getCanvasContainer().querySelector(".maplibregl-cooperative-gesture-screen");
+		if (!$s) return;
+		$s.classList.add("MAP_GESTURE_SHOWN");
+		if (priv.gesture_hint_timer) clearTimeout(priv.gesture_hint_timer);
+		priv.gesture_hint_timer = setTimeout(() => {
+			priv.gesture_hint_timer = null;
+			$s.classList.remove("MAP_GESTURE_SHOWN");
+		}, GESTURE_HINT_MS);
+	});
 	map.addControl(new maplibre_gl.NavigationControl());
 	map.addControl(new MarkerControl(gobj, {}), "top-right");
 	map.addControl(new EditControl(gobj, { showMarkerDrag: true }), "top-right");
@@ -9528,10 +9629,46 @@ function mt_create$15(gobj) {
 	}
 }
 /***************************************************************
+*  The application changed language: maplibre's own words are
+*  rewritten in place, and the map's locale with them so a
+*  control or a popup built later is right too.
+***************************************************************/
+function ac_language_changed$9(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.xmap) yui_maplibre_relocalize(priv.xmap, i18next.t);
+	return 0;
+}
+/***************************************************************
+*          Framework Method: Start
+*
+*  The application's LANGUAGE: what maplibre draws with words is
+*  built from its `locale` when each control builds its DOM, so
+*  `refresh_language()` -- which reaches what carries an i18n key
+*  in OUR dom -- cannot touch any of it. The shell says when the
+*  language changed and this view rewrites those strings.
+***************************************************************/
+function mt_start$15(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) (0, _yuneta_gobj_js.gobj_subscribe_event)(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	return 0;
+}
+/***************************************************************
+*          Framework Method: Stop
+***************************************************************/
+function mt_stop$15(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) (0, _yuneta_gobj_js.gobj_unsubscribe_event)(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	return 0;
+}
+/***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$15(gobj) {
 	let priv = gobj.priv;
+	if (priv.gesture_hint_timer) {
+		clearTimeout(priv.gesture_hint_timer);
+		priv.gesture_hint_timer = null;
+	}
 	if (priv.resizeObserver) {
 		priv.resizeObserver.disconnect();
 		priv.resizeObserver = null;
@@ -9992,6 +10129,8 @@ function ac_hide$10(gobj, event, kw, src) {
 ***************************/
 var gmt$15 = {
 	mt_create: mt_create$15,
+	mt_start: mt_start$15,
+	mt_stop: mt_stop$15,
 	mt_destroy: mt_destroy$15
 };
 /***************************************************************
@@ -10003,6 +10142,7 @@ function create_gclass$15(gclass_name) {
 		return -1;
 	}
 	__gclass__$15 = (0, _yuneta_gobj_js.gclass_create)(gclass_name, [
+		["EV_LANGUAGE_CHANGED", 0],
 		["EV_EDIT_MAP", 0],
 		["EV_CONTROL_MAP", 0],
 		["EV_MAP_ON_LOAD", 0],
@@ -10011,6 +10151,11 @@ function create_gclass$15(gclass_name) {
 		["EV_SHOW", 0],
 		["EV_HIDE", 0]
 	], [["ST_IDLE", [
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$9,
+			null
+		],
 		[
 			"EV_EDIT_MAP",
 			ac_edit_map,
@@ -20409,8 +20554,10 @@ function render_tabs(gobj, items) {
 				class: "icon is-small yui-nav-close ml-2",
 				"data-close-item": it.id,
 				role: "button",
-				"aria-label": "close",
-				title: "close"
+				"aria-label": (0, i18next.t)("close"),
+				"data-i18n-aria-label": "close",
+				title: (0, i18next.t)("close"),
+				"data-i18n-title": "close"
 			},
 			["i", {
 				class: "yi-xmark",
@@ -24858,7 +25005,8 @@ function create_tabulator(gobj) {
 	}
 	if (write_plan(gobj).in_row_icons) columns.push({
 		field: "_operation",
-		title: "Op",
+		title: "",
+		titleFormatter: () => (0, i18next.t)("operations"),
 		hozAlign: "center",
 		frozen: "right",
 		visible: false,

package/dist/gobj-ui.es.js

@@ -937,7 +937,7 @@ function mt_create$21(gobj) {
 /***************************************************************
 *          Framework Method: Start
 ***************************************************************/
-function mt_start$18(gobj) {
+function mt_start$19(gobj) {
 	let config = gobj_read_attr(gobj, "config") || {};
 	let priv = gobj.priv;
 	if (!validate_config(config)) {
@@ -1006,7 +1006,7 @@ function mt_start$18(gobj) {
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$18(gobj) {
+function mt_stop$19(gobj) {
 	let priv = gobj.priv;
 	if (!priv) return 0;
 	close_toolbar_dropdown(gobj);
@@ -2551,8 +2551,8 @@ function ac_nav_item_close(gobj, event, kw, src) {
 ***************************************************************/
 var gmt$21 = {
 	mt_create: mt_create$21,
-	mt_start: mt_start$18,
-	mt_stop: mt_stop$18,
+	mt_start: mt_start$19,
+	mt_stop: mt_stop$19,
 	mt_destroy: mt_destroy$21
 };
 function create_gclass$21(gclass_name) {
@@ -4892,11 +4892,11 @@ function mt_create$18(gobj) {
 /***************************************************************
 *          Framework Method: Start
 ***************************************************************/
-function mt_start$17(gobj) {}
+function mt_start$18(gobj) {}
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$17(gobj) {
+function mt_stop$18(gobj) {
 	gobj_stop_children(gobj);
 }
 /***************************************************************
@@ -5183,8 +5183,8 @@ function ac_resize$5(gobj, event, kw, src) {
 ***************************/
 var gmt$18 = {
 	mt_create: mt_create$18,
-	mt_start: mt_start$17,
-	mt_stop: mt_stop$17,
+	mt_start: mt_start$18,
+	mt_stop: mt_stop$18,
 	mt_destroy: mt_destroy$18
 };
 /***************************************************************
@@ -5426,11 +5426,11 @@ function mt_create$17(gobj) {
 /***************************************************************
 *          Framework Method: Start
 ***************************************************************/
-function mt_start$16(gobj) {}
+function mt_start$17(gobj) {}
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$16(gobj) {
+function mt_stop$17(gobj) {
 	gobj_stop_children(gobj);
 }
 /***************************************************************
@@ -5790,8 +5790,8 @@ function ac_resize$4(gobj, event, kw, src) {
 ***************************/
 var gmt$17 = {
 	mt_create: mt_create$17,
-	mt_start: mt_start$16,
-	mt_stop: mt_stop$16,
+	mt_start: mt_start$17,
+	mt_stop: mt_stop$17,
 	mt_destroy: mt_destroy$17
 };
 /***************************************************************
@@ -6917,14 +6917,14 @@ function mt_destroy$16(gobj) {
 /************************************************************
 *      Framework Method start
 ************************************************************/
-function mt_start$15(gobj) {
+function mt_start$16(gobj) {
 	let record = gobj_read_attr(gobj, "record");
 	if (record) gobj_send_event(gobj, "EV_LOAD_RECORD", record, gobj);
 }
 /************************************************************
 *      Framework Method stop
 ************************************************************/
-function mt_stop$15(gobj) {}
+function mt_stop$16(gobj) {}
 /***************************
 *      Local Methods
 ***************************/
@@ -7007,8 +7007,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-save",
-				title: "save",
-				"aria-label": "save",
+				title: t("save"),
+				"data-i18n-title": "save",
+				"aria-label": t("save"),
+				"data-i18n-aria-label": "save",
 				disabled: true
 			},
 			[[
@@ -7032,8 +7034,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-undo",
-				title: "undo",
-				"aria-label": "undo",
+				title: t("undo"),
+				"data-i18n-title": "undo",
+				"aria-label": t("undo"),
+				"data-i18n-aria-label": "undo",
 				disabled: true
 			},
 			[[
@@ -7057,8 +7061,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-clear",
-				title: "clear",
-				"aria-label": "clear"
+				title: t("clear"),
+				"data-i18n-title": "clear",
+				"aria-label": t("clear"),
+				"data-i18n-aria-label": "clear"
 			},
 			[[
 				"span",
@@ -7081,8 +7087,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-copy",
-				title: "copy",
-				"aria-label": "copy"
+				title: t("copy"),
+				"data-i18n-title": "copy",
+				"aria-label": t("copy"),
+				"data-i18n-aria-label": "copy"
 			},
 			[[
 				"span",
@@ -7105,8 +7113,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-paste",
-				title: "paste",
-				"aria-label": "paste"
+				title: t("paste"),
+				"data-i18n-title": "paste",
+				"aria-label": t("paste"),
+				"data-i18n-aria-label": "paste"
 			},
 			[[
 				"span",
@@ -8367,7 +8377,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 				column.editorParams = {
 					format: "dd/MM/yyyy hh:mm",
 					verticalNavigation: "table",
-					elementAttributes: { title: "slide bar to choose option" }
+					elementAttributes: { title: t("slide bar to choose option") }
 				};
 				field_desc.real_type;
 				break;
@@ -9149,8 +9159,8 @@ function cmd_get_picked_files(gobj, cmd, kw, src) {
 }
 var gmt$16 = {
 	mt_create: mt_create$16,
-	mt_start: mt_start$15,
-	mt_stop: mt_stop$15,
+	mt_start: mt_start$16,
+	mt_stop: mt_stop$16,
 	mt_destroy: mt_destroy$16,
 	mt_command_parser: mt_command_parser$2
 };
@@ -9309,7 +9319,9 @@ var EditControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: t("maplibre.drag_mark"),
-					"aria-label": t("maplibre.drag_mark")
+					"data-i18n-title": "maplibre.drag_mark",
+					"aria-label": t("maplibre.drag_mark"),
+					"data-i18n-aria-label": "maplibre.drag_mark"
 				},
 				parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M273 7c-9.4-9.4-24.6-9.4-33.9 0L167 79c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l31-31L232 232 81.9 232l31-31c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-9.4 9.4-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31L232 280l0 150.1-31-31c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-31 31L280 280l150.1 0-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9l-72-72c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31L280 232l0-150.1 31 31c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L273 7z"/></svg>
@@ -9368,7 +9380,9 @@ var MarkerControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: t("maplibre.center_map"),
-					"aria-label": t("maplibre.center_map")
+					"data-i18n-title": "maplibre.center_map",
+					"aria-label": t("maplibre.center_map"),
+					"data-i18n-aria-label": "maplibre.center_map"
 				},
 				parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="22" height="22"><path d="M15 15C24.4 5.7 39.6 5.7 49 15l63 63L112 40c0-13.3 10.7-24 24-24s24 10.7 24 24l0 96c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l38.1 0L15 49C5.7 39.6 5.7 24.4 15 15zM133.5 243.9C158.6 193.6 222.7 112 320 112s161.4 81.6 186.5 131.9c3.8 7.6 3.8 16.5 0 24.2C481.4 318.4 417.3 400 320 400s-161.4-81.6-186.5-131.9c-3.8-7.6-3.8-16.5 0-24.2zM320 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128zM591 15c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-63 63 38.1 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24s24 10.7 24 24l0 38.1 63-63zM15 497c-9.4-9.4-9.4-24.6 0-33.9l63-63L40 400c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 96c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-38.1L49 497c-9.4 9.4-24.6 9.4-33.9 0zm576 0l-63-63 0 38.1c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-38.1 0 63 63c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0z"/></svg>
@@ -9385,7 +9399,9 @@ var MarkerControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: t("maplibre.user_location"),
-					"aria-label": t("maplibre.user_location")
+					"data-i18n-title": "maplibre.user_location",
+					"aria-label": t("maplibre.user_location"),
+					"data-i18n-aria-label": "maplibre.user_location"
 				},
 				parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M256 0c17.7 0 32 14.3 32 32l0 34.7C368.4 80.1 431.9 143.6 445.3 224l34.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-34.7 0C431.9 368.4 368.4 431.9 288 445.3l0 34.7c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-34.7C143.6 431.9 80.1 368.4 66.7 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l34.7 0C80.1 143.6 143.6 80.1 224 66.7L224 32c0-17.7 14.3-32 32-32zM128 256a128 128 0 1 0 256 0 128 128 0 1 0 -256 0zm128-80a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/></svg>
@@ -9412,6 +9428,78 @@ var MarkerControl = class {
 		gobj_send_event(this.gobj, "EV_CONTROL_MAP", { user_location: this._enable_user_location }, this.gobj);
 	}
 };
+/***********************************************************************
+*      MAPLIBRE'S OWN CHROME, IN THE APP'S LANGUAGE
+*
+*  Everything maplibre draws with words -- the zoom tooltips, the
+*  geolocate button, the attribution toggle, a popup's close, and the
+*  notice that teaches the Ctrl + wheel gesture -- comes from its
+*  `locale`, an option merged over its own English defaults at
+*  construction. So a map in a Spanish app was saying *"Zoom in"* and
+*  *"Use Ctrl + scroll to zoom the map"*, which is the same rule this
+*  GUI applies to every other string.
+*
+*  Two halves, because maplibre reads its strings ONCE, when each
+*  control builds its DOM:
+*
+*      `yui_maplibre_locale(t)`      the `locale` option, for the map's
+*                                    first paint;
+*      `yui_maplibre_relocalize()`   after a language change, which is
+*                                    the half a `locale` alone cannot
+*                                    do -- it writes the strings into
+*                                    the DOM already drawn, and updates
+*                                    the map's locale so anything built
+*                                    later is right too.
+*
+*  The scale units (`km`, `mi`, `nm`) are symbols and are left alone;
+*  the MapLibre logo keeps its name, which is a brand.
+***********************************************************************/
+function yui_maplibre_locale(t) {
+	return {
+		"NavigationControl.ZoomIn": t("zoom in"),
+		"NavigationControl.ZoomOut": t("zoom out"),
+		"NavigationControl.ResetBearing": t("drag to rotate the map, click to reset north"),
+		"GeolocateControl.FindMyLocation": t("find my location"),
+		"GeolocateControl.LocationNotAvailable": t("location not available"),
+		"AttributionControl.ToggleAttribution": t("toggle attribution"),
+		"AttributionControl.MapFeedback": t("map feedback"),
+		"FullscreenControl.Enter": t("enter fullscreen"),
+		"FullscreenControl.Exit": t("exit fullscreen"),
+		"Popup.Close": t("close popup"),
+		"Map.Title": t("map"),
+		"Marker.Title": t("map marker"),
+		"CooperativeGesturesHandler.WindowsHelpText": t("use ctrl + scroll to zoom the map"),
+		"CooperativeGesturesHandler.MacHelpText": t("use cmd + scroll to zoom the map"),
+		"CooperativeGesturesHandler.MobileHelpText": t("use two fingers to move the map")
+	};
+}
+function label_ctrl($root, selector, text) {
+	if (!$root || !text) return;
+	for (const $el of $root.querySelectorAll(selector)) {
+		$el.setAttribute("title", text);
+		$el.setAttribute("aria-label", text);
+	}
+}
+function yui_maplibre_relocalize(map, t) {
+	if (!map || typeof map.getContainer !== "function") return;
+	const strings = yui_maplibre_locale(t);
+	try {
+		map._locale = Object.assign({}, map._locale, strings);
+	} catch (e) {}
+	const $c = map.getContainer();
+	label_ctrl($c, ".maplibregl-ctrl-zoom-in", strings["NavigationControl.ZoomIn"]);
+	label_ctrl($c, ".maplibregl-ctrl-zoom-out", strings["NavigationControl.ZoomOut"]);
+	label_ctrl($c, ".maplibregl-ctrl-compass", strings["NavigationControl.ResetBearing"]);
+	label_ctrl($c, ".maplibregl-ctrl-geolocate", strings["GeolocateControl.FindMyLocation"]);
+	label_ctrl($c, ".maplibregl-ctrl-attrib-button", strings["AttributionControl.ToggleAttribution"]);
+	label_ctrl($c, ".maplibregl-ctrl-fullscreen", strings["FullscreenControl.Enter"]);
+	label_ctrl($c, ".maplibregl-popup-close-button", strings["Popup.Close"]);
+	const mac = typeof navigator !== "undefined" && (navigator.userAgent || "").includes("Mac");
+	const $desktop = $c.querySelector(".maplibregl-desktop-message");
+	if ($desktop) $desktop.textContent = mac ? strings["CooperativeGesturesHandler.MacHelpText"] : strings["CooperativeGesturesHandler.WindowsHelpText"];
+	const $mobile = $c.querySelector(".maplibregl-mobile-message");
+	if ($mobile) $mobile.textContent = strings["CooperativeGesturesHandler.MobileHelpText"];
+}
 //#endregion
 //#region src/c_yui_map.js
 /***********************************************************************
@@ -9426,6 +9514,7 @@ var MarkerControl = class {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$15 = "C_YUI_MAP";
+var GESTURE_HINT_MS = 2e3;
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9452,6 +9541,7 @@ var attrs_table$15 = [
 ];
 var PRIVATE_DATA$15 = {
 	xmap: null,
+	gesture_hint_timer: null,
 	geojson: null,
 	resizeObserver: null,
 	width: 0,
@@ -9476,7 +9566,8 @@ function mt_create$15(gobj) {
 	if ($map) $map.classList.add(GCLASS_NAME$15);
 	Object.assign(map_settings, {
 		container: $map,
-		cooperativeGestures: true
+		cooperativeGestures: true,
+		locale: yui_maplibre_locale(t)
 	});
 	priv.onClick = (ev) => {
 		onClick(gobj, ev);
@@ -9494,6 +9585,16 @@ function mt_create$15(gobj) {
 		xtouchStart(gobj, ev);
 	};
 	const map = priv.xmap = new maplibregl.Map(map_settings);
+	map.on("cooperativegestureprevented", () => {
+		const $s = map.getCanvasContainer().querySelector(".maplibregl-cooperative-gesture-screen");
+		if (!$s) return;
+		$s.classList.add("MAP_GESTURE_SHOWN");
+		if (priv.gesture_hint_timer) clearTimeout(priv.gesture_hint_timer);
+		priv.gesture_hint_timer = setTimeout(() => {
+			priv.gesture_hint_timer = null;
+			$s.classList.remove("MAP_GESTURE_SHOWN");
+		}, GESTURE_HINT_MS);
+	});
 	map.addControl(new maplibregl.NavigationControl());
 	map.addControl(new MarkerControl(gobj, {}), "top-right");
 	map.addControl(new EditControl(gobj, { showMarkerDrag: true }), "top-right");
@@ -9523,10 +9624,46 @@ function mt_create$15(gobj) {
 	}
 }
 /***************************************************************
+*  The application changed language: maplibre's own words are
+*  rewritten in place, and the map's locale with them so a
+*  control or a popup built later is right too.
+***************************************************************/
+function ac_language_changed$9(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.xmap) yui_maplibre_relocalize(priv.xmap, t);
+	return 0;
+}
+/***************************************************************
+*          Framework Method: Start
+*
+*  The application's LANGUAGE: what maplibre draws with words is
+*  built from its `locale` when each control builds its DOM, so
+*  `refresh_language()` -- which reaches what carries an i18n key
+*  in OUR dom -- cannot touch any of it. The shell says when the
+*  language changed and this view rewrites those strings.
+***************************************************************/
+function mt_start$15(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	return 0;
+}
+/***************************************************************
+*          Framework Method: Stop
+***************************************************************/
+function mt_stop$15(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	return 0;
+}
+/***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$15(gobj) {
 	let priv = gobj.priv;
+	if (priv.gesture_hint_timer) {
+		clearTimeout(priv.gesture_hint_timer);
+		priv.gesture_hint_timer = null;
+	}
 	if (priv.resizeObserver) {
 		priv.resizeObserver.disconnect();
 		priv.resizeObserver = null;
@@ -9987,6 +10124,8 @@ function ac_hide$10(gobj, event, kw, src) {
 ***************************/
 var gmt$15 = {
 	mt_create: mt_create$15,
+	mt_start: mt_start$15,
+	mt_stop: mt_stop$15,
 	mt_destroy: mt_destroy$15
 };
 /***************************************************************
@@ -9998,6 +10137,7 @@ function create_gclass$15(gclass_name) {
 		return -1;
 	}
 	__gclass__$15 = gclass_create(gclass_name, [
+		["EV_LANGUAGE_CHANGED", 0],
 		["EV_EDIT_MAP", 0],
 		["EV_CONTROL_MAP", 0],
 		["EV_MAP_ON_LOAD", 0],
@@ -10006,6 +10146,11 @@ function create_gclass$15(gclass_name) {
 		["EV_SHOW", 0],
 		["EV_HIDE", 0]
 	], [["ST_IDLE", [
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$9,
+			null
+		],
 		[
 			"EV_EDIT_MAP",
 			ac_edit_map,
@@ -20404,8 +20549,10 @@ function render_tabs(gobj, items) {
 				class: "icon is-small yui-nav-close ml-2",
 				"data-close-item": it.id,
 				role: "button",
-				"aria-label": "close",
-				title: "close"
+				"aria-label": t("close"),
+				"data-i18n-aria-label": "close",
+				title: t("close"),
+				"data-i18n-title": "close"
 			},
 			["i", {
 				class: "yi-xmark",
@@ -24853,7 +25000,8 @@ function create_tabulator(gobj) {
 	}
 	if (write_plan(gobj).in_row_icons) columns.push({
 		field: "_operation",
-		title: "Op",
+		title: "",
+		titleFormatter: () => t("operations"),
 		hozAlign: "center",
 		frozen: "right",
 		visible: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.110",
+  "version": "7.23.112",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_form.js

@@ -347,7 +347,7 @@ function toolbar_button(gobj, name)
 {
     switch(name) {
         case "save":
-            return ['button', {class: 'button p-1 button-save', title: 'save', 'aria-label': 'save', disabled: true}, [
+            return ['button', {class: 'button p-1 button-save', title: t('save'), 'data-i18n-title': 'save', 'aria-label': t('save'), 'data-i18n-aria-label': 'save', disabled: true}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-floppy-disk"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'save'}, 'save']
             ], {
@@ -357,7 +357,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "undo":
-            return ['button', {class: 'button p-1 button-undo', title: 'undo', 'aria-label': 'undo', disabled: true}, [
+            return ['button', {class: 'button p-1 button-undo', title: t('undo'), 'data-i18n-title': 'undo', 'aria-label': t('undo'), 'data-i18n-aria-label': 'undo', disabled: true}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-arrow-rotate-left"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'undo'}, 'undo']
             ], {
@@ -367,7 +367,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "clear":
-            return ['button', {class: 'button p-1 button-clear', title: 'clear', 'aria-label': 'clear'}, [
+            return ['button', {class: 'button p-1 button-clear', title: t('clear'), 'data-i18n-title': 'clear', 'aria-label': t('clear'), 'data-i18n-aria-label': 'clear'}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-broom-wide"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'clear'}, 'clear']
             ], {
@@ -377,7 +377,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "copy":
-            return ['button', {class: 'button p-1 button-copy', title: 'copy', 'aria-label': 'copy'}, [
+            return ['button', {class: 'button p-1 button-copy', title: t('copy'), 'data-i18n-title': 'copy', 'aria-label': t('copy'), 'data-i18n-aria-label': 'copy'}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-copy"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'copy'}, 'copy']
             ], {click: function(evt) {
@@ -386,7 +386,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "paste":
-            return ['button', {class: 'button p-1 button-paste', title: 'paste', 'aria-label': 'paste'}, [
+            return ['button', {class: 'button p-1 button-paste', title: t('paste'), 'data-i18n-title': 'paste', 'aria-label': t('paste'), 'data-i18n-aria-label': 'paste'}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-paste"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'paste'}, 'paste']
             ], {click: async function(evt) {
@@ -2011,7 +2011,10 @@ function template2columns(gobj, columns, template, sub_elements)
                     format: "dd/MM/yyyy hh:mm", // the format of the date value stored in the cell
                     verticalNavigation: "table", //navigate cursor around table without changing the value
                     elementAttributes: {
-                        title:"slide bar to choose option" // custom tooltip
+                        /*  Tabulator writes this attribute once, when the
+                         *  editor opens, so it is translated then -- which
+                         *  is also when it is read.  */
+                        title: t("slide bar to choose option")
                     }
                 };
                 switch(field_desc.real_type) {

package/src/c_yui_map.css

@@ -33,3 +33,29 @@
 .xmap .column {
     padding: 0 !important;
 }
+
+/*
+ *  The cooperative-gesture notice: "Use Ctrl + scroll to zoom the map".
+ *
+ *  maplibre's own sheet shows it for 100ms and lets it FADE for a second
+ *  more (`transition: opacity 1s ease 1s`). Nothing here has transitions,
+ *  so that fade is cut -- and with it the only thing that made the notice
+ *  readable, since 100ms is not reading time. `c_yui_map.js` holds it by
+ *  the clock instead: it appears and disappears at once, and stands still
+ *  in between.
+ */
+.maplibregl-cooperative-gesture-screen,
+.maplibregl-cooperative-gesture-screen.maplibregl-show {
+    transition: none !important;
+}
+
+.maplibregl-cooperative-gesture-screen.MAP_GESTURE_SHOWN {
+    opacity: 1;
+}
+
+/*  1.4em leaves the notice in four lines on the small map of a card. It
+ *  is an instruction, not a headline.  */
+.maplibregl-cooperative-gesture-screen {
+    font-size: 1rem;
+    text-align: center;
+}

package/src/c_yui_map.js

@@ -29,6 +29,7 @@ import {
     gobj_create_service,
     gobj_start,
     gobj_name,
+    gobj_unsubscribe_event,
 } from "@yuneta/gobj-js";
 
 import "maplibre-gl/dist/maplibre-gl.css"; // Import MapLibre styles
@@ -36,9 +37,15 @@ import * as maplibregl from "maplibre-gl"; // MapLibre GL JS 6 is ESM-only, no d
 
 import {
     EditControl,
-    MarkerControl
+    MarkerControl,
+    yui_maplibre_locale,
+    yui_maplibre_relocalize
 } from "./lib_maplibre.js";
 
+import {t} from "i18next";
+
+import {yui_shell_of} from "./c_yui_shell.js";
+
 import "./c_yui_map.css"; // Must be in index.js ?
 
 /***************************************************************
@@ -46,6 +53,9 @@ import "./c_yui_map.css"; // Must be in index.js ?
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_MAP";
 
+/*  How long the cooperative-gesture notice stays up, in ms.  */
+const GESTURE_HINT_MS = 2000;
+
 /***************************************************************
  *              Data
  ***************************************************************/
@@ -74,6 +84,7 @@ SDATA_END()
 
 let PRIVATE_DATA = {
     xmap: null,
+    gesture_hint_timer: null,   /*  keeps the gesture notice up long enough  */
     geojson: null,
     resizeObserver: null,
     width: 0,      // map size, data got from resize observer
@@ -132,6 +143,13 @@ function mt_create(gobj)
          *  default is a suggestion -- the demo passes `map_settings` and
          *  never saw it. This is the house gesture, not a suggestion.  */
         cooperativeGestures: true,
+        /*  maplibre draws words of its own -- the zoom tooltips, the
+         *  geolocate button, the attribution toggle and the notice that
+         *  teaches the gesture above -- and they came out in ITS
+         *  English inside a Spanish app. `locale` is read once, when
+         *  each control builds its DOM, so the language CHANGE is the
+         *  other half, in ac_language_changed.  */
+        locale: yui_maplibre_locale(t),
     });
 
     /*-----------------------------*
@@ -158,6 +176,35 @@ function mt_create(gobj)
      *-----------------------------*/
     const map = priv.xmap = new maplibregl.Map(map_settings);
 
+    /*  HOW LONG THE NOTICE STAYS UP.
+     *
+     *  maplibre shows it for 100ms and lets it FADE for a second more
+     *  (`transition: opacity 1s ease 1s`). Nothing in this GUI has
+     *  transitions, so that fade is cut -- and with it the only thing
+     *  that made the notice readable, because 100ms is not reading
+     *  time. It is held by the clock instead: on and off at once, and
+     *  still in between for as long as it takes to read it.
+     *
+     *  In maplibre's callback and not through the machine, for the same
+     *  reason as the zoom readout: it is not an action, it is the map
+     *  acknowledging a gesture it refused, and one wheel fires it
+     *  dozens of times.  */
+    map.on("cooperativegestureprevented", () => {
+        const $s = map.getCanvasContainer()
+            .querySelector(".maplibregl-cooperative-gesture-screen");
+        if(!$s) {
+            return;
+        }
+        $s.classList.add("MAP_GESTURE_SHOWN");
+        if(priv.gesture_hint_timer) {
+            clearTimeout(priv.gesture_hint_timer);
+        }
+        priv.gesture_hint_timer = setTimeout(() => {
+            priv.gesture_hint_timer = null;
+            $s.classList.remove("MAP_GESTURE_SHOWN");
+        }, GESTURE_HINT_MS);
+    });
+
     /*-----------------------------*
      *      Controls
      *-----------------------------*/
@@ -219,6 +266,51 @@ function mt_create(gobj)
     }
 }
 
+/***************************************************************
+ *  The application changed language: maplibre's own words are
+ *  rewritten in place, and the map's locale with them so a
+ *  control or a popup built later is right too.
+ ***************************************************************/
+function ac_language_changed(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    if(priv.xmap) {
+        yui_maplibre_relocalize(priv.xmap, t);
+    }
+    return 0;
+}
+
+/***************************************************************
+ *          Framework Method: Start
+ *
+ *  The application's LANGUAGE: what maplibre draws with words is
+ *  built from its `locale` when each control builds its DOM, so
+ *  `refresh_language()` -- which reaches what carries an i18n key
+ *  in OUR dom -- cannot touch any of it. The shell says when the
+ *  language changed and this view rewrites those strings.
+ ***************************************************************/
+function mt_start(gobj)
+{
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+    }
+    return 0;
+}
+
+/***************************************************************
+ *          Framework Method: Stop
+ ***************************************************************/
+function mt_stop(gobj)
+{
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+    }
+    return 0;
+}
+
 /***************************************************************
  *          Framework Method: Destroy
  ***************************************************************/
@@ -226,6 +318,10 @@ function mt_destroy(gobj)
 {
     let priv = gobj.priv;
 
+    if(priv.gesture_hint_timer) {
+        clearTimeout(priv.gesture_hint_timer);
+        priv.gesture_hint_timer = null;
+    }
     if(priv.resizeObserver) {
         priv.resizeObserver.disconnect();
         priv.resizeObserver = null;
@@ -934,6 +1030,8 @@ function ac_hide(gobj, event, kw, src)
  *---------------------------------------------*/
 const gmt = {
     mt_create:  mt_create,
+    mt_start:   mt_start,
+    mt_stop:    mt_stop,
     mt_destroy: mt_destroy
 };
 
@@ -952,6 +1050,7 @@ function create_gclass(gclass_name)
      *---------------------------------------------*/
     const states = [
         ["ST_IDLE", [
+            ["EV_LANGUAGE_CHANGED",         ac_language_changed,    null],
             ["EV_EDIT_MAP",                 ac_edit_map,            null],
             ["EV_CONTROL_MAP",              ac_control_map,         null],
             ["EV_MAP_ON_LOAD",              ac_map_on_load,         null],
@@ -966,6 +1065,7 @@ function create_gclass(gclass_name)
      *          Events
      *---------------------------------------------*/
     const event_types = [
+        ["EV_LANGUAGE_CHANGED",         0],
         ["EV_EDIT_MAP",                 0],
         ["EV_CONTROL_MAP",              0],
         ["EV_MAP_ON_LOAD",              0],

package/src/c_yui_nav.js

@@ -74,6 +74,8 @@ import {
     createElement2, empty_string, is_array, is_object, is_string,
 } from "@yuneta/gobj-js";
 
+import {t} from "i18next";
+
 import { cards_grid_descriptor } from "./nav_cards_helpers.js";
 import {
     BULMA_BP_ORDER,
@@ -407,7 +409,8 @@ function render_tabs(gobj, items)
         if(it.closable) {
             children.push(["span", {class: "icon is-small yui-nav-close ml-2",
                     "data-close-item": it.id, role: "button",
-                    "aria-label": "close", title: "close"},
+                    "aria-label": t("close"), "data-i18n-aria-label": "close",
+                    title: t("close"), "data-i18n-title": "close"},
                 ["i", {class: "yi-xmark", "aria-hidden":"true"}]]);
         }
         let a_attrs = {

package/src/c_yui_treedb_topic_with_form.js

@@ -1384,7 +1384,13 @@ function create_tabulator(gobj)
     if(with_in_row_edit_icons) {
         columns.push({
             field: '_operation',
-            title: 'Op',
+            /*  A FORMATTER and not a `title`, like every other column of
+             *  this table: a language change re-runs `setColumns()` over
+             *  the SAME definitions, so a title decided when they were
+             *  built -- `'Op'`, in English and abbreviated -- is frozen
+             *  there for the life of the view.  */
+            title: '',
+            titleFormatter: () => t('operations'),
             hozAlign: 'center',
             frozen: "right",
             visible: false,

package/src/lib_maplibre.js

@@ -61,7 +61,9 @@ class EditControl {
                     {
                         class: 'button is-small is-flex is-align-items-center is-justify-content-center',
                         title: t('maplibre.drag_mark'),
+                        "data-i18n-title": 'maplibre.drag_mark',
                         "aria-label": t('maplibre.drag_mark'),
+                        "data-i18n-aria-label": 'maplibre.drag_mark',
                     },
                     parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M273 7c-9.4-9.4-24.6-9.4-33.9 0L167 79c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l31-31L232 232 81.9 232l31-31c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-9.4 9.4-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31L232 280l0 150.1-31-31c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-31 31L280 280l150.1 0-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9l-72-72c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31L280 232l0-150.1 31 31c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L273 7z"/></svg>
@@ -144,7 +146,9 @@ class MarkerControl {
                     {
                         class: 'button is-small is-flex is-align-items-center is-justify-content-center',
                         title: t('maplibre.center_map'),
+                        "data-i18n-title": 'maplibre.center_map',
                         "aria-label": t('maplibre.center_map'),
+                        "data-i18n-aria-label": 'maplibre.center_map',
                     },
                     parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="22" height="22"><path d="M15 15C24.4 5.7 39.6 5.7 49 15l63 63L112 40c0-13.3 10.7-24 24-24s24 10.7 24 24l0 96c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l38.1 0L15 49C5.7 39.6 5.7 24.4 15 15zM133.5 243.9C158.6 193.6 222.7 112 320 112s161.4 81.6 186.5 131.9c3.8 7.6 3.8 16.5 0 24.2C481.4 318.4 417.3 400 320 400s-161.4-81.6-186.5-131.9c-3.8-7.6-3.8-16.5 0-24.2zM320 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128zM591 15c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-63 63 38.1 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24s24 10.7 24 24l0 38.1 63-63zM15 497c-9.4-9.4-9.4-24.6 0-33.9l63-63L40 400c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 96c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-38.1L49 497c-9.4 9.4-24.6 9.4-33.9 0zm576 0l-63-63 0 38.1c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-38.1 0 63 63c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0z"/></svg>
@@ -166,7 +170,9 @@ class MarkerControl {
                     {
                         class: 'button is-small is-flex is-align-items-center is-justify-content-center',
                         title: t('maplibre.user_location'),
+                        "data-i18n-title": 'maplibre.user_location',
                         "aria-label": t('maplibre.user_location'),
+                        "data-i18n-aria-label": 'maplibre.user_location',
                     },
                     parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M256 0c17.7 0 32 14.3 32 32l0 34.7C368.4 80.1 431.9 143.6 445.3 224l34.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-34.7 0C431.9 368.4 368.4 431.9 288 445.3l0 34.7c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-34.7C143.6 431.9 80.1 368.4 66.7 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l34.7 0C80.1 143.6 143.6 80.1 224 66.7L224 32c0-17.7 14.3-32 32-32zM128 256a128 128 0 1 0 256 0 128 128 0 1 0 -256 0zm128-80a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/></svg>
@@ -215,10 +221,116 @@ class MarkerControl {
     }
 }
 
+
+/***********************************************************************
+ *      MAPLIBRE'S OWN CHROME, IN THE APP'S LANGUAGE
+ *
+ *  Everything maplibre draws with words -- the zoom tooltips, the
+ *  geolocate button, the attribution toggle, a popup's close, and the
+ *  notice that teaches the Ctrl + wheel gesture -- comes from its
+ *  `locale`, an option merged over its own English defaults at
+ *  construction. So a map in a Spanish app was saying *"Zoom in"* and
+ *  *"Use Ctrl + scroll to zoom the map"*, which is the same rule this
+ *  GUI applies to every other string.
+ *
+ *  Two halves, because maplibre reads its strings ONCE, when each
+ *  control builds its DOM:
+ *
+ *      `yui_maplibre_locale(t)`      the `locale` option, for the map's
+ *                                    first paint;
+ *      `yui_maplibre_relocalize()`   after a language change, which is
+ *                                    the half a `locale` alone cannot
+ *                                    do -- it writes the strings into
+ *                                    the DOM already drawn, and updates
+ *                                    the map's locale so anything built
+ *                                    later is right too.
+ *
+ *  The scale units (`km`, `mi`, `nm`) are symbols and are left alone;
+ *  the MapLibre logo keeps its name, which is a brand.
+ ***********************************************************************/
+function yui_maplibre_locale(t)
+{
+    return {
+        "NavigationControl.ZoomIn": t("zoom in"),
+        "NavigationControl.ZoomOut": t("zoom out"),
+        "NavigationControl.ResetBearing": t("drag to rotate the map, click to reset north"),
+        "GeolocateControl.FindMyLocation": t("find my location"),
+        "GeolocateControl.LocationNotAvailable": t("location not available"),
+        "AttributionControl.ToggleAttribution": t("toggle attribution"),
+        "AttributionControl.MapFeedback": t("map feedback"),
+        "FullscreenControl.Enter": t("enter fullscreen"),
+        "FullscreenControl.Exit": t("exit fullscreen"),
+        "Popup.Close": t("close popup"),
+        "Map.Title": t("map"),
+        "Marker.Title": t("map marker"),
+        "CooperativeGesturesHandler.WindowsHelpText": t("use ctrl + scroll to zoom the map"),
+        "CooperativeGesturesHandler.MacHelpText": t("use cmd + scroll to zoom the map"),
+        "CooperativeGesturesHandler.MobileHelpText": t("use two fingers to move the map"),
+    };
+}
+
+/*  One drawn control: its tooltip and its aria-label say the same
+ *  thing, and a screen reader needs the second even when the first is
+ *  what a pointer finds.  */
+function label_ctrl($root, selector, text)
+{
+    if(!$root || !text) {
+        return;
+    }
+    for(const $el of $root.querySelectorAll(selector)) {
+        $el.setAttribute("title", text);
+        $el.setAttribute("aria-label", text);
+    }
+}
+
+function yui_maplibre_relocalize(map, t)
+{
+    if(!map || typeof map.getContainer !== "function") {
+        return;
+    }
+    const strings = yui_maplibre_locale(t);
+
+    /*  The map's own table first: a control added later (or a popup
+     *  opened later) reads it when it builds itself.  */
+    try {
+        map._locale = Object.assign({}, map._locale, strings);
+    } catch(e) {
+        /*  a maplibre that keeps its locale elsewhere: the DOM below
+         *  still gets translated, which is what is on screen  */
+    }
+
+    const $c = map.getContainer();
+    label_ctrl($c, ".maplibregl-ctrl-zoom-in", strings["NavigationControl.ZoomIn"]);
+    label_ctrl($c, ".maplibregl-ctrl-zoom-out", strings["NavigationControl.ZoomOut"]);
+    label_ctrl($c, ".maplibregl-ctrl-compass", strings["NavigationControl.ResetBearing"]);
+    label_ctrl($c, ".maplibregl-ctrl-geolocate", strings["GeolocateControl.FindMyLocation"]);
+    label_ctrl($c, ".maplibregl-ctrl-attrib-button", strings["AttributionControl.ToggleAttribution"]);
+    label_ctrl($c, ".maplibregl-ctrl-fullscreen", strings["FullscreenControl.Enter"]);
+    label_ctrl($c, ".maplibregl-popup-close-button", strings["Popup.Close"]);
+
+    /*  The notice of the cooperative gesture: two lines, one for a
+     *  pointer and one for a finger, built by `_setupUI()` as
+     *  `.maplibregl-desktop-message` / `.maplibregl-mobile-message`.  */
+    const mac = (typeof navigator !== "undefined" &&
+                 (navigator.userAgent || "").includes("Mac"));
+    const $desktop = $c.querySelector(".maplibregl-desktop-message");
+    if($desktop) {
+        $desktop.textContent = mac
+            ? strings["CooperativeGesturesHandler.MacHelpText"]
+            : strings["CooperativeGesturesHandler.WindowsHelpText"];
+    }
+    const $mobile = $c.querySelector(".maplibregl-mobile-message");
+    if($mobile) {
+        $mobile.textContent = strings["CooperativeGesturesHandler.MobileHelpText"];
+    }
+}
+
 //=======================================================================
 //      Expose the class via the global object
 //=======================================================================
 export {
     EditControl,
-    MarkerControl
+    MarkerControl,
+    yui_maplibre_locale,
+    yui_maplibre_relocalize
 };