@panoramax/web-viewer 3.2.3-develop-3ea5b063 → 3.2.3-develop-83778bdd

package/config/jest/mocks.js

@@ -15,8 +15,8 @@ jest.mock("lit", () => {
 			this.requestUpdate = jest.fn();
 			this.updateComplete = Promise.resolve();
 			this.style = {};
-			this.addEventListener = jest.fn();
-			this.dispatchEvent = jest.fn();
+			this._handlers = {};
+			this._handlesOnce = {};
 			this.renderRoot = {
 				querySelectorAll: jest.fn(),
 			};
@@ -32,6 +32,24 @@ jest.mock("lit", () => {
 			return "";
 		}
 		getAttribute() {}
+		addEventListener(type, handler, options) {
+			if(options?.once) {
+				if(!this._handlersOnce) { this._handlersOnce = {}; }
+				if(!this._handlersOnce?.[type]) { this._handlersOnce[type] = []; }
+				this._handlersOnce[type].push(handler);
+			}
+			else {
+				if(!this._handlers[type]) { this._handlers[type] = []; }
+				this._handlers[type].push(handler);
+			}
+		}
+		dispatchEvent(event, opts) {
+			this._handlers[event.type]?.forEach(f => f(opts));
+			this._handlersOnce?.[event.type]?.forEach(f => f(opts));
+			if(this._handlersOnce?.[event.type]) {
+				this._handlersOnce[event.type] = [];
+			}
+		}
 	}
 
 	return {
@@ -57,6 +75,7 @@ jest.mock("lit/directives/map.js", () => ({
 jest.mock("maplibre-gl", () => ({
 	addProtocol: jest.fn(),
 	AttributionControl: jest.fn(),
+	NavigationControl: jest.fn(),
 	GeolocateControl: class {
 		onAdd() {;}
 	},

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

@@ -21,6 +21,8 @@
     * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
     * [.isWidthSmall()](#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
     * [.isHeightSmall()](#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener)
     * ["menu-opened"](#Panoramax.components.core.Basic+event_menu-opened)
     * ["select"](#Panoramax.components.core.Basic+event_select)
     * ["ready"](#Panoramax.components.core.Basic+event_ready)
@@ -106,6 +108,32 @@ Is the view running in a small-height container (small embed or smartphone)
 
 **Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
 **Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### basic.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
+<a name="Panoramax.components.core.Basic+addEventListener"></a>
+
+### basic.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `map` events using prefix `map:`.
+
+```js
+me.addEventListener("map:move", doSomething);
+```
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
 <a name="Panoramax.components.core.Basic+event_menu-opened"></a>
 
 ### "menu-opened"

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

@@ -23,6 +23,8 @@
     * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
     * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
     * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener)
     * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
     * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
     * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
@@ -117,6 +119,32 @@ Is the view running in a small-height container (small embed or smartphone)
 
 **Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
 **Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### coverageMap.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
+<a name="Panoramax.components.core.Basic+addEventListener"></a>
+
+### coverageMap.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `map` events using prefix `map:`.
+
+```js
+me.addEventListener("map:move", doSomething);
+```
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
 <a name="Panoramax.components.core.Basic+event_menu-opened"></a>
 
 ### "menu-opened"

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

@@ -25,6 +25,8 @@
     * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
     * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
     * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener)
     * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
     * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
     * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
@@ -132,6 +134,32 @@ Is the view running in a small-height container (small embed or smartphone)
 
 **Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
 **Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### editor.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
+<a name="Panoramax.components.core.Basic+addEventListener"></a>
+
+### editor.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `map` events using prefix `map:`.
+
+```js
+me.addEventListener("map:move", doSomething);
+```
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
 <a name="Panoramax.components.core.Basic+event_menu-opened"></a>
 
 ### "menu-opened"

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

@@ -35,11 +35,13 @@
     * [.moveRight()](#Panoramax.components.core.PhotoViewer+moveRight)
     * [.moveUp()](#Panoramax.components.core.PhotoViewer+moveUp)
     * [.moveDown()](#Panoramax.components.core.PhotoViewer+moveDown)
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.PhotoViewer+addEventListener)
     * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
     * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
     * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
     * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
     * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
     * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
     * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
     * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
@@ -163,6 +165,26 @@ Moves the view of main component slightly to the top.
 Moves the view of main component slightly to the bottom.
 
 **Kind**: instance method of [<code>PhotoViewer</code>](#Panoramax.components.core.PhotoViewer)  
+<a name="Panoramax.components.core.PhotoViewer+addEventListener"></a>
+
+### photoViewer.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `psv` events using prefix `psv:`.
+
+```js
+me.addEventListener("psv:picture-loading", doSomething);
+```
+
+**Kind**: instance method of [<code>PhotoViewer</code>](#Panoramax.components.core.PhotoViewer)  
+**Overrides**: [<code>addEventListener</code>](Basic.md/#Panoramax.components.core.Basic+addEventListener)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
 <a name="Panoramax.components.core.Basic+onceAPIReady"></a>
 
 ### photoViewer.onceAPIReady() ⇒ <code>Promise</code>
@@ -209,6 +231,13 @@ Is the view running in a small-height container (small embed or smartphone)
 
 **Kind**: instance method of [<code>PhotoViewer</code>](#Panoramax.components.core.PhotoViewer)  
 **Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### photoViewer.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>PhotoViewer</code>](#Panoramax.components.core.PhotoViewer)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
 <a name="Panoramax.components.core.Basic+event_menu-opened"></a>
 
 ### "menu-opened"

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

@@ -39,11 +39,13 @@
     * [.moveRight()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveRight)
     * [.moveUp()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveUp)
     * [.moveDown()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveDown)
+    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.PhotoViewer+addEventListener)
     * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
     * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
     * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
     * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
     * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
     * ["focus-changed"](#Panoramax.components.core.Viewer+event_focus-changed)
     * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
     * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
@@ -194,6 +196,25 @@ Moves the view of main component slightly to the top.
 Moves the view of main component slightly to the bottom.
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+<a name="Panoramax.components.core.PhotoViewer+addEventListener"></a>
+
+### viewer.addEventListener(type, listener, [options])
+Listen to events from this components or one of its sub-components.
+
+For example, you can listen to `psv` events using prefix `psv:`.
+
+```js
+me.addEventListener("psv:picture-loading", doSomething);
+```
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event type to listen for |
+| listener | <code>function</code> | The event handler |
+| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
+
 <a name="Panoramax.components.core.Basic+onceAPIReady"></a>
 
 ### viewer.onceAPIReady() ⇒ <code>Promise</code>
@@ -240,6 +261,13 @@ Is the view running in a small-height container (small embed or smartphone)
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
 **Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
+
+### viewer.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
+List names of sub-components (like loader, api, map, psv) available in this component.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
 <a name="Panoramax.components.core.Viewer+event_focus-changed"></a>
 
 ### "focus-changed"

package/docs/tutorials/migrate_v4.md

@@ -104,7 +104,7 @@ Many events names were changed, and some of them moved to sub-components.
 | Viewer   | `sequence-playing`                | components.ui.Photo     | `sequence-playing` |
 | Viewer   | `sequence-stopped`                | components.ui.Photo     | `sequence-stopped` |
 
-To listen to these events, you have to use `map` and `psv` properties of your component.
+To listen to these events, you can use `map` and `psv` properties of your component.
 
 ```js
 myviewer.addEventListener("focus-changed", e => console.log(e));
@@ -114,6 +114,19 @@ myviewer.psv.addEventListener("sequence-playing", e => console.log(e));
 myviewer.map.on("picture-click", e => console.log(e));
 ```
 
+To make use of these sub-components events easier, note that you can also call them from parent component using the property name as a prefix. For example:
+
+```js
+// Transfers listener to map sub-component
+myviewer.addEventListener("map:moveend", e => console.log(e));
+
+// Works for any sub-component, like URL Handler or PSV
+myviewer.addEventListener("urlHandler:url-changed", e => console.log(e));
+myviewer.addEventListener("psv:picture-loaded", e => console.log(e));
+```
+
+To know more about available events per component, please refer [to their individual API page](../reference.md).
+
 ## ⚙️ Functions
 
 Many functions were changed as well, in order to reduce source files size and make things more logical. You can find [all API reference in this doc](../reference.md), here's a summary:

package/docs/tutorials/synced_coverage.md

@@ -22,6 +22,7 @@ coverage.addEventListener("ready", () => {
 	coverage.map.fitBounds([0, 0, 180, 90]);
 
 	// Listen to sequence hovered on map
+	// You can alternatively use: coverage.addEventListener("map:sequence-hover", ...)
 	coverage.map.on("sequence-hover", e => {
 		console.log("Hovered sequence", e.seqId);
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-3ea5b063",
+  "version": "3.2.3-develop-83778bdd",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/scripts/doc.js

@@ -47,7 +47,9 @@ async function writeDocs(templateData) {
 		const template = `{{#class name="${cl.name}"}}{{>docs}}{{/class}}`;
 		let output = await jsdoc2md.render({ data: templateData, template: template });
 		output = cleanupMdLinks(cl.id, output);
-		await fs.writeFile(path.resolve(docPath, `${cl.name}.md`), output);
+		if(!output.startsWith("ERROR")) {
+			await fs.writeFile(path.resolve(docPath, `${cl.name}.md`), output);
+		}
 	}
 }
 

package/src/components/core/Basic.js

@@ -264,4 +264,59 @@ export default class Basic extends LitElement {
 	render() {
 		return html`<p>Should not be used directly, use Viewer/CoverageMap/Editor instead</p>`;
 	}
+
+	/**
+	 * List names of sub-components (like loader, api, map, psv) available in this component.
+	 * @returns {string[]} Sub-components names.
+	 * @memberof Panoramax.components.core.Basic#
+	 */
+	getSubComponentsNames() {
+		return ["loader", "api"];
+	}
+
+	/**
+	 * Listen to events from this components or one of its sub-components.
+	 * 
+	 * For example, you can listen to `map` events using prefix `map:`.
+	 * 
+	 * ```js
+	 * me.addEventListener("map:move", doSomething);
+	 * ```
+	 * @param {string} type The event type to listen for
+	 * @param {function} listener The event handler
+	 * @param {object} [options] [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options)
+	 * @memberof Panoramax.components.core.Basic#
+	 */
+	addEventListener(type, listener, options) {
+		// Check if listener is for sub-component
+		let prefix = type.split(":").shift();
+		if(prefix && this.getSubComponentsNames().includes(prefix)) {
+			const subType = type.substring(prefix.length+1);
+
+			// Special handling for map: not eventtarget
+			if(prefix === "map") {
+				if(this.map?.on) {
+					if(options?.once) { this.map.once(subType, listener); }
+					else { this.map.on(subType, listener); }
+				}
+				else {
+					setTimeout(() => {
+						this.addEventListener(type, listener, options);
+					}, 50);
+				}
+			}
+			// Add directly if available
+			else if(this[prefix]?.addEventListener) {
+				this[prefix].addEventListener(subType, listener, options);
+			}
+			// Wait for addEventListener to be available
+			else {
+				setTimeout(() => this.addEventListener(type, listener, options), 50);
+			}
+		}
+		// Otherwise, reuse classic function
+		else {
+			super.addEventListener(type, listener, options);
+		}
+	}
 }

package/src/components/core/CoverageMap.js

@@ -77,6 +77,12 @@ export default class CoverageMap extends Basic {
 		return [this.loader, this._mapContainer];
 	}
 
+	getSubComponentsNames() {
+		const scn = super.getSubComponentsNames();
+		scn.push("map");
+		return scn;
+	}
+
 	/**
 	 * Creates map object
 	 * @private

package/src/components/core/Editor.js

@@ -99,6 +99,10 @@ export default class Editor extends Basic {
 		return [this.loader, this._psvContainer, this._mapContainer];
 	}
 
+	getSubComponentsNames() {
+		return super.getSubComponentsNames().concat(["map", "psv"]);
+	}
+
 	/** @private */
 	_initPSV() {
 		try {

package/src/components/core/PhotoViewer.js

@@ -186,6 +186,10 @@ export default class PhotoViewer extends Basic {
 		return [this.loader, this.grid, this.popup, this.slot];
 	}
 
+	getSubComponentsNames() {
+		return super.getSubComponentsNames().concat(["psv", "grid", "popup", "urlHandler"]);
+	}
+
 	/**
 	 * Waiting for Photo Sphere Viewer to be available.
 	 * @returns {Promise} When PSV is ready to use
@@ -436,6 +440,23 @@ export default class PhotoViewer extends Basic {
 		if(this._lastPsvAnim) { this._lastPsvAnim.cancel(); }
 		this._lastPsvAnim = this.psv.animate(options);
 	}
+
+	/**
+	 * Listen to events from this components or one of its sub-components.
+	 * 
+	 * For example, you can listen to `psv` events using prefix `psv:`.
+	 * 
+	 * ```js
+	 * me.addEventListener("psv:picture-loading", doSomething);
+	 * ```
+	 * @param {string} type The event type to listen for
+	 * @param {function} listener The event handler
+	 * @param {object} [options] [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options)
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	addEventListener(type, listener, options) {
+		super.addEventListener(type, listener, options);
+	}
 }
 
 customElements.define("pnx-photo-viewer", PhotoViewer);

package/src/components/core/Viewer.js

@@ -197,6 +197,10 @@ export default class Viewer extends PhotoViewer {
 		return "Viewer";
 	}
 
+	getSubComponentsNames() {
+		return super.getSubComponentsNames().concat(["mini", "map"]);
+	}
+
 	/**
 	 * Waits for Viewer to be completely ready (map & PSV loaded, first picture also if one is wanted)
 	 * @returns {Promise} When viewer is ready

package/src/utils/PhotoAdapter.js

@@ -2,6 +2,7 @@ import { EquirectangularTilesAdapter } from "@photo-sphere-viewer/equirectangula
 
 /**
  * Override of PSV EquirectangularTilesAdapter for fine-tweaking.
+ * @class Panoramax.utils.PhotoAdapter
  * @private
  */
 export default class PhotoAdapter extends EquirectangularTilesAdapter {

package/src/utils/URLHandler.js

@@ -1,7 +1,6 @@
 import {
 	alterPSVState, MAP_FILTERS_JS2URL, alterMapState, alterViewerState, alterPhotoViewerState
 } from "./InitParameters";
-import Viewer from "../components/core/Viewer";
 
 // List of supported parameters
 const MANAGED_PARAMETERS = [
@@ -96,9 +95,6 @@ export default class URLHandler extends EventTarget {
 				}
 			}
 		}
-		else if(this._parent instanceof Viewer) {
-			hashParts.map = "none";
-		}
 		return hashParts;
 	}
 
@@ -260,7 +256,7 @@ export default class URLHandler extends EventTarget {
 	_onURLChange() {
 		let vals = this.currentURLParams();
 
-		if(this._parent instanceof Viewer) { alterViewerState(this._parent, vals); }
+		if(this._parent.getClassName() === "Viewer") { alterViewerState(this._parent, vals); }
 		else { alterPhotoViewerState(this._parent, vals); }
 		
 		alterPSVState(this._parent.psv, vals);

package/tests/components/core/Basic.test.js

@@ -0,0 +1,130 @@
+import Basic from "../../../src/components/core/Basic";
+import API from "../../../src/utils/API";
+
+jest.mock("../../../src/utils/API");
+jest.mock("../../../src/utils/i18n");
+jest.mock("../../../src/utils/widgets");
+jest.mock("../../../src/utils/utils");
+jest.mock("../../../package.json", () => ({ version: "1.0.0", repository: { url: "https://example.com" } }));
+
+let basic;
+global.console = { info: jest.fn(), error: jest.fn(), warn: jest.fn(), log: global.console.log };
+
+beforeEach(() => {
+	basic = new Basic(true);
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+describe("constructor", () => {
+	it("should initialize with default values", () => {
+		expect(basic.users).toEqual(["geovisio"]);
+		expect(basic.mapstyle).toBeDefined();
+		expect(basic.lang).toBeNull();
+		expect(basic.endpoint).toBeNull();
+		expect(basic.picture).toBeNull();
+		expect(basic.sequence).toBeNull();
+	});
+
+	it("should log version info on initialization", () => {
+		new Basic(true);
+		expect(console.info).toHaveBeenCalledWith(expect.stringContaining("Panoramax Basic - Version 1.0.0"));
+	});
+
+	it("should set up API when endpoint is provided", async () => {
+		basic.endpoint = "https://api.example.com";
+		basic.connectedCallback();
+		expect(API).toHaveBeenCalledWith("https://api.example.com", expect.any(Object));
+	});
+});
+
+describe("attributeChangedCallback", () => {
+	it("should dispatch select event when picture or sequence changes", () => {
+		const eventSpy = jest.spyOn(basic, "dispatchEvent");
+		basic.attributeChangedCallback("picture", null, "new-pic-id");
+		expect(eventSpy).toHaveBeenCalledWith(expect.any(CustomEvent));
+		eventSpy.mockRestore();
+	});
+});
+
+describe("getClassName", () => {
+	it("works", () => {
+		expect(basic.getClassName()).toBe("Basic");
+	});
+});
+
+describe("select", () => {
+	it("works", () => {
+		basic.select("new-seq-id", "new-pic-id");
+		expect(basic.picture).toBe("new-pic-id");
+		expect(basic.sequence).toBe("new-seq-id");
+	});
+});
+
+describe("offsetWidth", () => {
+	it("works", () => {
+		basic.offsetWidth = 500;
+		expect(basic.isWidthSmall()).toBe(true);
+		basic.offsetWidth = 600;
+		expect(basic.isWidthSmall()).toBe(false);
+	});
+});
+
+describe("offsetHeight", () => {
+	it("works", () => {
+		basic.offsetHeight = 300;
+		expect(basic.isHeightSmall()).toBe(true);
+		basic.offsetHeight = 500;
+		expect(basic.isHeightSmall()).toBe(false);
+	});
+});
+
+describe("getSubComponentsNames", () => {
+	it("works", () => {
+		expect(basic.getSubComponentsNames()).toEqual(["loader", "api"]);
+	});
+});
+
+describe("addEventListener", () => {
+	it("should add event listener for standard events", () => {
+		const listener = jest.fn();
+		basic.addEventListener("ready", listener);
+		basic.dispatchEvent(new CustomEvent("ready"));
+		expect(listener).toHaveBeenCalled();
+	});
+
+	it("should add event listener with options", () => {
+		const listener = jest.fn();
+		basic.addEventListener("once-event", listener, { once: true });
+		basic.dispatchEvent(new CustomEvent("once-event"));
+		basic.dispatchEvent(new CustomEvent("once-event"));
+		expect(listener).toHaveBeenCalledTimes(1);
+	});
+
+	it("should wait for map to be available", () => {
+		const listener = jest.fn();
+		global.setTimeout = jest.fn();
+		basic.getSubComponentsNames = () => ["loader", "api", "map"];
+		basic.map = null;
+		basic.addEventListener("map:move", listener);
+		expect(global.setTimeout).toHaveBeenCalled();
+	});
+
+	it("should add event listener with once option for map", () => {
+		const listener = jest.fn();
+		basic.getSubComponentsNames = () => ["loader", "api", "map"];
+		basic.map = { on: jest.fn(), once: jest.fn() };
+		basic.addEventListener("map:move", listener, { once: true });
+		expect(basic.map.on).toHaveBeenCalledTimes(0);
+		expect(basic.map.once).toHaveBeenCalledWith("move", listener);
+	});
+
+	it("adds listener to basic if no sub-component matches prefix", () => {
+		const listener = jest.fn();
+		basic.addEventListener("unknown:event", listener);
+		basic.dispatchEvent(new CustomEvent("unknown:event"));
+		expect(listener).toHaveBeenCalled();
+	});
+});

package/tests/components/core/BasicMock.js

@@ -0,0 +1,20 @@
+jest.mock("../../../src/components/core/Basic", () => (
+	class Basic extends EventTarget {
+		constructor() {
+			super();
+			this.loader = { setAttribute: jest.fn() };
+			this.api = {
+				getMapStyle: () => ({}),
+				_getMapRequestTransform: () => ({}),
+			};
+			this._t = { maplibre: {}, psv: {} };
+		}
+		isWidthSmall() { return false; }
+		getSubComponentsNames() {
+			return ["loader", "api"];
+		}
+		onceAPIReady() {
+			return Promise.resolve();
+		}
+	}
+));