@yuneta/gobj-ui 7.23.109 → 7.23.111

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
 ***************************/
@@ -9154,8 +9154,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
 };
@@ -9417,6 +9417,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 +9503,7 @@ var MarkerControl = class {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$15 = "C_YUI_MAP";
+var GESTURE_HINT_MS = 2e3;
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9457,6 +9530,7 @@ var attrs_table$15 = [
 ];
 var PRIVATE_DATA$15 = {
 	xmap: null,
+	gesture_hint_timer: null,
 	geojson: null,
 	resizeObserver: null,
 	width: 0,
@@ -9479,7 +9553,11 @@ function mt_create$15(gobj) {
 	let map_settings = (0, _yuneta_gobj_js.json_deep_copy)((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "map_settings"));
 	let $map = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$map");
 	if ($map) $map.classList.add(GCLASS_NAME$15);
-	Object.assign(map_settings, { container: $map });
+	Object.assign(map_settings, {
+		container: $map,
+		cooperativeGestures: true,
+		locale: yui_maplibre_locale(i18next.t)
+	});
 	priv.onClick = (ev) => {
 		onClick(gobj, ev);
 	};
@@ -9496,6 +9574,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");
@@ -9525,10 +9613,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;
@@ -9989,6 +10113,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
 };
 /***************************************************************
@@ -10000,6 +10126,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],
@@ -10008,6 +10135,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,

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
 ***************************/
@@ -9149,8 +9149,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
 };
@@ -9412,6 +9412,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 +9498,7 @@ var MarkerControl = class {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$15 = "C_YUI_MAP";
+var GESTURE_HINT_MS = 2e3;
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9452,6 +9525,7 @@ var attrs_table$15 = [
 ];
 var PRIVATE_DATA$15 = {
 	xmap: null,
+	gesture_hint_timer: null,
 	geojson: null,
 	resizeObserver: null,
 	width: 0,
@@ -9474,7 +9548,11 @@ function mt_create$15(gobj) {
 	let map_settings = json_deep_copy(gobj_read_attr(gobj, "map_settings"));
 	let $map = gobj_read_attr(gobj, "$map");
 	if ($map) $map.classList.add(GCLASS_NAME$15);
-	Object.assign(map_settings, { container: $map });
+	Object.assign(map_settings, {
+		container: $map,
+		cooperativeGestures: true,
+		locale: yui_maplibre_locale(t)
+	});
 	priv.onClick = (ev) => {
 		onClick(gobj, ev);
 	};
@@ -9491,6 +9569,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");
@@ -9520,10 +9608,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;
@@ -9984,6 +10108,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
 };
 /***************************************************************
@@ -9995,6 +10121,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],
@@ -10003,6 +10130,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,

package/package.json

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

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
@@ -119,6 +130,26 @@ function mt_create(gobj)
     }
     Object.assign(map_settings, {
         container: $map,
+        /*  THE WHEEL DOES NOT ZOOM; Ctrl + wheel does -- the same
+         *  vocabulary as the three graphs (`yui_graph_camera.js`), so a
+         *  reader with a map and a graph open does not have to remember
+         *  which is which. maplibre calls it `cooperativeGestures`, and
+         *  it never blocks a wheel carrying ctrlKey, so a trackpad PINCH
+         *  keeps zooming on every platform (a Mac gets Cmd as well, its
+         *  own convention, which costs nothing).
+         *
+         *  HERE and not in the attr's default value: a JSON attr is
+         *  replaced WHOLESALE by a host that passes its own, so a
+         *  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),
     });
 
     /*-----------------------------*
@@ -145,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
      *-----------------------------*/
@@ -206,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
  ***************************************************************/
@@ -213,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;
@@ -921,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
 };
 
@@ -939,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],
@@ -953,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/lib_maplibre.js

@@ -215,10 +215,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
 };