@panoramax/web-viewer 4.0.3-develop-39c77140 → 4.0.3-develop-e6a52885

package/docs/reference/components/core/PhotoViewer.md

@@ -106,6 +106,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [fetchOptions] | <code>object</code> |  | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) |
 | [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
+| [keyboard-shortcuts] | <code>string</code> | <code>true</code> | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. |
 
 <a name="Panoramax.components.core.PhotoViewer+onceReady"></a>
 

package/docs/reference/components/core/Viewer.md

@@ -114,6 +114,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [map] | <code>object</code> |  | An object with [any map option available in Map or MapMore class](../ui/MapMore.md/#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"` |
 | [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
+| [keyboard-shortcuts] | <code>string</code> | <code>true</code> | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. |
 | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
 | [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) |
 | [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-39c77140",
+  "version": "4.0.3-develop-e6a52885",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/PhotoViewer.js

@@ -85,11 +85,13 @@ export default class PhotoViewer extends Basic {
 	 * @property {object} [fetchOptions] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
 	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
 	 */
 	static properties = {
 		psv: {converter: Basic.GetJSONConverter()},
 		widgets: {type: String},
 		"url-parameters": {type: String},
+		"keyboard-shortcuts": {type: String},
 		...Basic.properties
 	};
 
@@ -99,6 +101,7 @@ export default class PhotoViewer extends Basic {
 		// Defaults
 		this.psv = {};
 		this["url-parameters"] = this.getAttribute("url-parameters") || true;
+		this["keyboard-shortcuts"] = this.getAttribute("keyboard-shortcuts") || true;
 		this.widgets = this.getAttribute("widgets") || "true";
 
 		// Init DOM containers
@@ -266,7 +269,10 @@ export default class PhotoViewer extends Basic {
 		this._initPSV();
 		this._initWidgets();
 		alterPhotoViewerState(this, myPostInitParams);
-		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
 		
 		if(myPostInitParams.picture) {
 			this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});

package/src/components/core/Viewer.js

@@ -95,6 +95,7 @@ export default class Viewer extends PhotoViewer {
 	 * @property {object} [map] An object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"`
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
 	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
@@ -321,7 +322,10 @@ export default class Viewer extends PhotoViewer {
 		this._moveChildToGrid();
 
 		alterViewerState(this, myPostInitParams);
-		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
 		
 		if(myPostInitParams.picture) {
 			this.psv.addEventListener("picture-loaded", () => {

package/src/utils/InitParameters.js

@@ -15,7 +15,7 @@ const MAPLIBRE_OPTIONS = [
 	"boxZoom", "clickTolerance", "collectResourceTiming",
 	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
 	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
-	"hash", "interactive", "keyboard", "localIdeographFontFamily", "locale", "logoPosition",
+	"hash", "interactive", "localIdeographFontFamily", "locale", "logoPosition",
 	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
 	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
 	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
@@ -80,6 +80,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let map_raster = componentMap.raster;
 		let map_attribution = componentMap.attributionControl;
 		let map_others = filterMapLibreOptions(componentMap);
+		let keyboardShortcuts = componentAttrs["keyboard-shortcuts"];
 
 		//  - URL only
 		let psv_xyz = urlParams.xyz;
@@ -108,13 +109,14 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 
 		// Put all attributes in appropriate container
 		this._parentInit = { map, users, fetchOptions, style, lang, endpoint };
-		this._parentPostInit = { focus, picture, sequence, geocoder, widgets, forceFocus: true };
+		this._parentPostInit = { focus, picture, sequence, geocoder, widgets, forceFocus: true, keyboardShortcuts: true };
 
 		this._psvInit = Object.fromEntries(
 			Object.entries(componentPsv).filter(
 				([k,]) => !["transitionDuration", "picturesNavigation"].includes(k)
 			)
 		);
+
 		this._psvAny = {
 			transitionDuration: psv_speed,
 			picturesNavigation: psv_nav,
@@ -126,6 +128,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 			attributionControl: map_attribution,
 			...map_others
 		};
+
 		this._mapAny = {
 			theme: map_theme,
 			background: map_background,
@@ -142,6 +145,13 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 			camera: map_camera,
 			pic_score: map_pic_score,
 		};
+
+		if(keyboardShortcuts === "false") {
+			this._psvInit.keyboard = false;
+			this._psvInit.keyboardActions = {};
+			this._mapInit.keyboard = false;
+			this._parentPostInit.keyboardShortcuts = false;
+		}
 	}
 
 	/**

package/tests/utils/InitParameters.test.js

@@ -66,6 +66,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 		expect(initParams._psvInit).toEqual({});
 		expect(initParams._psvAny).toEqual({
@@ -111,6 +112,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 	});
 
@@ -161,6 +163,7 @@ describe("InitParameters", () => {
 			geocoder: true,
 			widgets: true,
 			forceFocus: true,
+			keyboardShortcuts: true,
 		});
 	});
 
@@ -243,6 +246,15 @@ describe("InitParameters", () => {
 		expect(initParams._mapAny.background).toBe("streets");
 		expect(console.warn).toHaveBeenCalledWith("Parameter background can't be 'aerial' as no aerial imagery is available");
 	});
+
+	it("should handle keyboardShortcuts=false", () => {
+		componentAttrs["keyboard-shortcuts"] = "false";
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		expect(initParams._mapInit.keyboard).toBe(false);
+		expect(initParams._parentPostInit.keyboardShortcuts).toBe(false);
+		expect(initParams._psvInit.keyboard).toBe(false);
+		expect(initParams._psvInit.keyboardActions).toEqual({});
+	});
 });
 
 describe("getMapPositionFromString", () => {