@panoramax/web-viewer 3.2.3-develop-b76f2545 → 3.2.3-develop-1369d03e

package/package.json

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

package/src/components/core/PhotoViewer.js

@@ -105,14 +105,6 @@ export default class PhotoViewer extends Basic {
 		this.psvContainer.setAttribute("slot", "bg");
 		this.grid.appendChild(this.psvContainer);
 		this.popup = createWebComp("pnx-popup", {_parent: this, onclose: this._onPopupClose.bind(this)});
-
-		if(this["url-parameters"] && this["url-parameters"] !== "false") {
-			this.urlHandler = new URLHandler(this);
-			this.onceReady().then(() => {
-				this.urlHandler.listenToChanges();
-				this.urlHandler._onParentChange();
-			});
-		}
 	}
 
 	/** @private */
@@ -168,7 +160,14 @@ export default class PhotoViewer extends Basic {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._moveChildToGrid();
+
+		if(this["url-parameters"] && this["url-parameters"] !== "false") {
+			this.urlHandler = new URLHandler(this);
+			this.onceReady().then(() => {
+				this.urlHandler.listenToChanges();
+				this.urlHandler._onParentChange();
+			});
+		}
 
 		this.onceAPIReady().then(async () => {
 			this.loader.setAttribute("value", 30);
@@ -190,6 +189,12 @@ export default class PhotoViewer extends Basic {
 		});
 	}
 
+	/** @private */
+	firstUpdated() {
+		super.firstUpdated();
+		this._moveChildToGrid();		
+	}
+
 	getClassName() {
 		return "PhotoViewer";
 	}
@@ -208,7 +213,7 @@ export default class PhotoViewer extends Basic {
 
 	/** @private */
 	render() {
-		return [this.loader, this.grid, this.popup, this.slot];
+		return [this.loader, this.grid, this.popup];
 	}
 
 	getSubComponentsNames() {
@@ -330,26 +335,24 @@ export default class PhotoViewer extends Basic {
 
 	/** @private */
 	_moveChildToGrid() {
-		let i = 0;
-		while(i < this.childNodes.length) {
-			let n = this.childNodes[i];
-			if(n.getAttribute?.("slot")) {
-				// Add parent + translation for our components
-				if(n.tagName?.toLowerCase().startsWith("pnx-")) {
-					n._parent = this;
-					n._t = this._t;
-				}
-				// Editors slot -> legend
-				if(n.getAttribute("slot") === "editors") {
-					this.onceReady().then(() => this.legend.appendChild(n));
-				}
-				// Add to grid for other cases
-				else {
-					this.grid.appendChild(n);
-				}
+		const slotContent = Array.from(this.querySelectorAll("[slot]"));
+
+		slotContent.forEach(n => {
+			// Add parent + translation for our components
+			if(n.tagName?.toLowerCase().startsWith("pnx-")) {
+				n._parent = this;
+				n._t = this._t;
 			}
-			else { i++; }
-		}
+
+			// Editors slot -> legend
+			if(n.getAttribute("slot") === "editors") {
+				this.onceReady().then(() => this.legend?.appendChild(n));
+			}
+			// Add to grid else
+			else {
+				this.grid.appendChild(n);
+			}
+		});
 	}
 
 	/**

package/src/components/core/Viewer.js

@@ -199,7 +199,6 @@ export default class Viewer extends PhotoViewer {
 	/** @private */
 	connectedCallback() {
 		Basic.prototype.connectedCallback.call(this);
-		this._moveChildToGrid();
 
 		this.onceAPIReady().then(async () => {
 			this.loader.setAttribute("value", 30);
@@ -210,6 +209,10 @@ export default class Viewer extends PhotoViewer {
 			this._initPSV();
 			await this._initMap();
 			this._initWidgets();
+
+			// Re-launch slot move (for those depending on widgets)
+			this._moveChildToGrid();
+
 			alterViewerState(this, myPostInitParams);
 			this._handleKeyboardManagement();