@panoramax/web-viewer 4.4.0-develop-3839b5a4 → 4.4.0-develop-f91f6758

package/{src → build}/components/core/Basic.js

@@ -1,12 +1,14 @@
 import { LitElement, html } from "lit";
-import API from "../../utils/API";
-import { getTranslations } from "../../utils/i18n";
-import { createWebComp } from "../../utils/widgets";
-import { isInIframe, isInternetFast } from "../../utils/utils";
+import API from "../../utils/API.js";
+import { getTranslations } from "../../utils/i18n.js";
+import { createWebComp } from "../../utils/widgets.js";
+import { isInIframe, isInternetFast } from "../../utils/utils.js";
 import JSON5 from "json5";
-import PACKAGE_JSON from "../../../package.json";
-import "@fontsource/atkinson-hyperlegible-next";
-import "./Basic.css";
+import PACKAGE_JSON from "../../../package.json" with { type: "json" };
+import BasicStyles from "./Basic.css" with { type: "css" };
+document.adoptedStyleSheets.push(BasicStyles);
+
+const __COMMIT_HASH__ = "f91f675";
 
 /**
  * Event for overlaying menu opening
@@ -97,7 +99,7 @@ export default class Basic extends LitElement {
 					console.error(`Component attribute "${k}" has been renamed into "${v}". Old attribute "${k}" is ignored.`);
 				}
 			});
-		
+
 		if(isInIframe()) { this.classList.add("pnx-iframed"); }
 	}
 
@@ -124,7 +126,7 @@ export default class Basic extends LitElement {
 			});
 			this.api.onceReady()
 				.then(() => {
-					if(myLoadAPI != this._loadsAPI || !this.api) { return; }
+					if(myLoadAPI !== this._loadsAPI || !this.api) { return; }
 
 					let unavailable = this.api.getUnavailableFeatures();
 					let available = this.api.getAvailableFeatures();
@@ -136,7 +138,7 @@ export default class Basic extends LitElement {
    ${unavailable}
 `.trim());
 				})
-				.catch(e => this.loader.dismiss(e, this._t.pnx.error_api))
+				.catch(e => this.loader?.dismiss?.(e, this._t?.pnx.error_api))
 				.finally(() => delete this._loadsAPI);
 		}
 		catch(e) {
@@ -149,16 +151,17 @@ export default class Basic extends LitElement {
 			}
 		}
 	}
-	
+
 	/**
 	 * Waits for component to have its first loading done.
-	 * 
+	 *
 	 * Each inheriting class must override this method.
 	 * @memberof Panoramax.components.core.Basic#
 	 * @returns {Promise}
 	 * @fulfil {null} When initialization is complete.
 	 * @reject {string} Error message
 	 */
+	// eslint-disable-next-line class-methods-use-this
 	onceReady() {
 		throw new Error("You must override this method on sub-class");
 	}
@@ -187,7 +190,7 @@ export default class Basic extends LitElement {
 	/** @private */
 	attributeChangedCallback(name, _old, value) {
 		super.attributeChangedCallback(name, _old, value);
-		
+
 		if(name === "endpoint") {
 			if(
 				!(this._loadsAPI && value && this._loadsAPI === value)
@@ -242,11 +245,12 @@ export default class Basic extends LitElement {
 	/**
 	 * This allows to retrieve an always correct class name.
 	 * This is crap, but avoids issues with Webpack & so on.
-	 * 
+	 *
 	 * Each inheriting class must override this method.
 	 * @returns {string} The class name (for example "Basic")
 	 * @memberof Panoramax.components.core.Basic#
 	 */
+	// eslint-disable-next-line class-methods-use-this
 	getClassName() {
 		return "Basic";
 	}
@@ -296,6 +300,7 @@ export default class Basic extends LitElement {
 	}
 
 	/** @private */
+	// eslint-disable-next-line class-methods-use-this
 	render() {
 		return html`<p>Should not be used directly, use Viewer/CoverageMap/Editor instead</p>`;
 	}
@@ -305,6 +310,7 @@ export default class Basic extends LitElement {
 	 * @returns {string[]} Sub-components names.
 	 * @memberof Panoramax.components.core.Basic#
 	 */
+	// eslint-disable-next-line class-methods-use-this
 	getSubComponentsNames() {
 		return ["loader", "api"];
 	}
@@ -320,9 +326,9 @@ export default class Basic extends LitElement {
 
 	/**
 	 * 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);
 	 * ```

package/{src → build}/components/core/CoverageMap.js

@@ -1,15 +1,15 @@
-import Basic from "./Basic";
-import Map from "../ui/Map";
-import { NavigationControl } from "!maplibre-gl"; // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
-import "./CoverageMap.css";
-import { default as InitParameters, alterMapState } from "../../utils/InitParameters";
-import { MapTiles } from "../../utils/services";
-import MapStyleComposer from "../../utils/MapStyleComposer";
-
+import Basic from "./Basic.js";
+import Map from "../ui/Map.js";
+import "maplibre-gl";
+import { default as InitParameters, alterMapState } from "../../utils/InitParameters.js";
+import { MapTiles } from "../../utils/services.js";
+import MapStyleComposer from "../../utils/MapStyleComposer.js";
+import CoverageMapStyles from "./CoverageMap.css" with { type: "css" };
+document.adoptedStyleSheets.push(CoverageMapStyles);
 
 /**
  * Coverage Map is a basic map showing Panoramax coverage.
- * 
+ *
  * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.CoverageMap
  * @element pnx-coverage-map
@@ -56,11 +56,11 @@ export default class CoverageMap extends Basic {
 		super();
 
 		this["map-style"] = this.getAttribute("map-style") || MapTiles();
-		
+
 		// Check if mapstyle is not a unparsed JSON
 		try {
 			this["map-style"] = JSON.parse(this["map-style"]);
-		} catch(e) { /* empty */ }
+		} catch(e) { /* Empty */ }
 
 		// Setup map styles and sources
 		this.mapStyleComposer = new MapStyleComposer(this);
@@ -70,6 +70,7 @@ export default class CoverageMap extends Basic {
 		this.onceAPIReady().then(() => {
 			this.loader.setAttribute("value", 30);
 			this._initParams = new InitParameters(InitParameters.GetComponentProperties(CoverageMap, this));
+			// eslint-disable-next-line eqeqeq
 			const singleUser = this.user && this.user != "";
 			this.mapStyleComposer._createPanoramaxEndpointFromAPI("default", this.api, !singleUser);
 			if(singleUser) {
@@ -84,6 +85,7 @@ export default class CoverageMap extends Basic {
 		super.attributeChangedCallback(name, _old, value);
 
 		if(name === "user" && this.api?._isReady === 1) {
+			// eslint-disable-next-line eqeqeq
 			if(value && value != "") {
 				this.mapStyleComposer._createPanoramaxEndpointForUser(value);
 			}
@@ -99,6 +101,7 @@ export default class CoverageMap extends Basic {
 		this.map?.destroy();
 	}
 
+	// eslint-disable-next-line class-methods-use-this
 	getClassName() {
 		return "CoverageMap";
 	}
@@ -127,15 +130,16 @@ export default class CoverageMap extends Basic {
 	 */
 	_initMap() {
 		this.map = new Map(this, this._mapContainer, Object.assign({}, this._initParams.getMapInit(), { hash: true }));
-		this.map.addControl(new NavigationControl({ showCompass: false }));
+		// eslint-disable-next-line no-undef
+		this.map.addControl(new maplibregl.NavigationControl({ showCompass: false }));
 		this.loader.setAttribute("value", 70);
 
 		this.addEventListener("select", this._onSelect.bind(this));
 		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
 		this.map.on("sequence-click", e => this.select(e.seqId));
 
-		this.map.waitForEnoughMapLoaded().then(async () => {
-			await alterMapState(this.map, this._initParams.getMapPostInit());
+		this.map.waitForEnoughMapLoaded().then(() => {
+			alterMapState(this.map, this._initParams.getMapPostInit());
 			this.loader.dismiss();
 		});
 	}
@@ -154,6 +158,7 @@ export default class CoverageMap extends Basic {
 				filter: ["==", ["get", "id"], e.detail.picId || e.detail.seqId]
 			});
 
+			// eslint-disable-next-line eqeqeq
 			if(features.length >= 0 && features[0] != null) {
 				this.map._attachPreviewToPictures({ features }, layer);
 			}

package/{src → build}/components/core/Editor.js

@@ -1,24 +1,23 @@
-/* eslint-disable no-unused-vars */
-import "./Editor.css";
-import Basic from "./Basic";
-import Map from "../ui/Map";
-import Photo from "../ui/Photo";
-import { apiFeatureToPSVNode } from "../../utils/picture";
-import { linkMapAndPhoto } from "../../utils/map";
-import { VECTOR_STYLES_NOCROWD as VECTOR_STYLES } from "../../utils/map";
+import Basic from "./Basic.js";
+import Map from "../ui/Map.js";
+import Photo from "../ui/Photo.js";
+import { apiFeatureToPSVNode } from "../../utils/picture.js";
+import { linkMapAndPhoto } from "../../utils/map.js";
 import { SYSTEM as PSSystem } from "@photo-sphere-viewer/core";
-import { createWebComp } from "../../utils/widgets";
-import MapStyleComposer from "../../utils/MapStyleComposer";
-import { MapTiles } from "../../utils/services";
+import { createWebComp } from "../../utils/widgets.js";
+import MapStyleComposer from "../../utils/MapStyleComposer.js";
+import { MapTiles } from "../../utils/services.js";
+import EditorStyles from "./Editor.css" with { type: "css" };
+document.adoptedStyleSheets.push(EditorStyles);
 
 const LAYER_HEADING_ID = "sequence-headings";
 
 /**
  * Editor allows to focus on a single sequence, and preview what you edits would look like.
  * It shows both picture and map.
- * 
+ *
  * Make sure to set width/height through CSS for proper display.
- * 
+ *
  * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
  * @class Panoramax.components.core.Editor
  * @element pnx-editor
@@ -45,7 +44,7 @@ const LAYER_HEADING_ID = "sequence-headings";
  *   endpoint="https://panoramax.openstreetmap.fr/"
  *   style="width: 300px; height: 250px"
  * />
- * 
+ *
  * <!-- With slotted widgets -->
  * <pnx-editor
  *   endpoint="https://panoramax.openstreetmap.fr/"
@@ -87,7 +86,7 @@ export default class Editor extends Basic {
 		// Check if mapstyle is not a unparsed JSON
 		try {
 			this["map-style"] = JSON.parse(this["map-style"]);
-		} catch(e) { /* empty */ }
+		} catch(e) { /* Empty */ }
 
 		// Setup map styles and sources
 		this.mapStyleComposer = new MapStyleComposer(this);
@@ -124,6 +123,7 @@ export default class Editor extends Basic {
 		this.psv?.destroy();
 	}
 
+	// eslint-disable-next-line class-methods-use-this
 	getClassName() {
 		return "Editor";
 	}
@@ -283,7 +283,7 @@ export default class Editor extends Basic {
 
 	/**
 	 * Get the PSV node for wanted picture.
-	 * 
+	 *
 	 * @param {string} picId The picture ID
 	 * @returns The PSV node
 	 * @private

package/{src → build}/components/core/PhotoViewer.js

@@ -1,16 +1,14 @@
-/* eslint-disable import/no-unused-modules */
-/* eslint-disable no-unused-vars */
-
-import "./PhotoViewer.css";
-import { SYSTEM as PSSystem, DEFAULTS as PSDefaults } from "@photo-sphere-viewer/core";
-import URLHandler from "../../utils/URLHandler";
-import Basic from "./Basic";
-import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
-import { createWebComp } from "../../utils/widgets";
-import { isNullId, isInIframe, DISABLE_ANNOTATIONS_PARAM } from "../../utils/utils";
-import { default as InitParameters, alterPSVState, alterPhotoViewerState } from "../../utils/InitParameters";
-import PresetManager from "../../utils/PresetsManager";
-import { querySelectorDeep } from "query-selector-shadow-dom";
+import { DEFAULTS as PSDefaults, SYSTEM as PSSystem } from "@photo-sphere-viewer/core";
+import URLHandler from "../../utils/URLHandler.js";
+import Basic from "./Basic.js";
+import Photo, { PSV_ANIM_DURATION, PSV_DEFAULT_ZOOM } from "../ui/Photo.js";
+import { createWebComp } from "../../utils/widgets.js";
+import { DISABLE_ANNOTATIONS_PARAM, isInIframe, isNullId } from "../../utils/utils.js";
+import { default as InitParameters, alterPSVState, alterPhotoViewerState } from "../../utils/InitParameters.js";
+import PresetManager from "../../utils/PresetsManager.js";
+import "query-selector-shadow-dom";
+import PhotoViewerStyles from "./PhotoViewer.css" with { type: "css" };
+document.adoptedStyleSheets.push(PhotoViewerStyles);
 
 
 export const PSV_ZOOM_DELTA = 20;
@@ -20,11 +18,11 @@ export const KEYBOARD_SKIP_FOCUS_WIDGETS = ["pnx-mini", "pnx-widget-player", "pn
 
 /**
  * Photo Viewer is a component showing pictures (without any map).
- * 
+ *
  * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
- * 
+ *
  * If you need a viewer with map, checkout [Viewer component](#Panoramax.components.core.Viewer).
- * 
+ *
  * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.PhotoViewer
  * @element pnx-photo-viewer
@@ -53,7 +51,7 @@ export const KEYBOARD_SKIP_FOCUS_WIDGETS = ["pnx-mini", "pnx-widget-player", "pn
  *   endpoint="https://panoramax.openstreetmap.fr/"
  *   style="width: 300px; height: 250px"
  * />
- * 
+ *
  * <!-- With slotted widgets -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
@@ -62,7 +60,7 @@ export const KEYBOARD_SKIP_FOCUS_WIDGETS = ["pnx-mini", "pnx-widget-player", "pn
  *   <p slot="top-right">My custom text</p>
  *   <p slot="editors"><a href="https://my.own.tool/">Edit in my own tool</a></p>
  * </pnx-photo-viewer>
- * 
+ *
  * <!-- With only your custom widgets -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
@@ -171,7 +169,7 @@ export default class PhotoViewer extends Basic {
 					focus: this._initParams.getParentPostInit().focus,
 					picture: this._initParams.getParentPostInit().picture,
 				});
-				
+
 				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
 					slot: "bottom-right",
 					class: "pnx-print-hidden",
@@ -227,6 +225,7 @@ export default class PhotoViewer extends Basic {
 		window.removeEventListener("keypress", this._toggleKeyboardBasedOnFocus);
 	}
 
+	// eslint-disable-next-line class-methods-use-this
 	getClassName() {
 		return "PhotoViewer";
 	}
@@ -236,8 +235,8 @@ export default class PhotoViewer extends Basic {
 	 * @returns {Promise} When viewer is ready
 	 * @memberof Panoramax.components.core.PhotoViewer#
 	 */
-	onceReady() {
-		return this.oncePSVReady().then(() => {
+	async onceReady() {
+		return await this.oncePSVReady().then(() => {
 			if(this._initParams.getParentPostInit().willLoadPicture && !this.psv.getPictureMetadata()) { return this.onceFirstPicLoaded(); }
 			else { return Promise.resolve(); }
 		});
@@ -295,7 +294,7 @@ export default class PhotoViewer extends Basic {
 	}
 
 	/** @private */
-	async _postAPIInit() {
+	_postAPIInit() {
 		this.loader.setAttribute("value", 30);
 		this._createInitParamsHandler();
 
@@ -304,11 +303,11 @@ export default class PhotoViewer extends Basic {
 		this._initPSV();
 		this._initWidgets();
 		alterPhotoViewerState(this, myPostInitParams);
-		
+
 		if(myPostInitParams.keyboardShortcuts) {
 			this._handleKeyboardManagement();
 		}
-		
+
 		if(myPostInitParams.willLoadPicture) {
 			if(this.psv.getPictureMetadata()) {
 				this.loader.dismiss();
@@ -368,7 +367,7 @@ export default class PhotoViewer extends Basic {
 			this.psv.addEventListener("dblclick", () => clearTimeout(this._gridFocus));
 			this.psv.addEventListener("click", e => {
 				clearTimeout(this._gridFocus);
-				
+
 				if(e.data.target.tagName === "CANVAS") {
 					if(!this._hasMenuOpened() && (!this.isMapWide || (this.isMapWide && !this.isMapWide()))) {
 						this._gridFocus = setTimeout(() => {
@@ -397,8 +396,10 @@ export default class PhotoViewer extends Basic {
 	}
 
 	/** @private */
+	// eslint-disable-next-line class-methods-use-this
 	_hasMenuOpened() {
-		return querySelectorDeep("pnx-togglable-group > div > .pnx-panel:not(.pnx-hidden)") != null;
+		// eslint-disable-next-line eqeqeq, no-undef
+		return querySelectorShadowDom("pnx-togglable-group > div > .pnx-panel:not(.pnx-hidden)") != null;
 	}
 
 	/** @private */
@@ -507,7 +508,7 @@ export default class PhotoViewer extends Basic {
 	setPopup(visible, content = null) {
 		if(visible) { this.popup.setAttribute("visible", ""); }
 		else { this.popup.removeAttribute("visible"); }
-		
+
 		this.popup.innerHTML = "";
 		if(typeof content === "string") { this.popup.innerHTML = content; }
 		else if(Array.isArray(content)) { content.forEach(c => this.popup.appendChild(c)); }
@@ -630,9 +631,9 @@ export default class PhotoViewer extends Basic {
 
 	/**
 	 * 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);
 	 * ```

package/{src → build}/components/core/Viewer.js

@@ -1,17 +1,15 @@
-import "./Viewer.css";
-import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
-import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer";
-import MapMore from "../ui/MapMore";
-import { initMapKeyboardHandler } from "../../utils/map";
-import { isNullId, isInIframe, DISABLE_ANNOTATIONS_PARAM } from "../../utils/utils";
-import { fa, createWebComp } from "../../utils/widgets";
-import { PanoramaxMetaCatalogURL } from "../../utils/services";
-import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
-import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
-import { default as InitParameters, alterMapState, alterViewerState } from "../../utils/InitParameters";
-import MapStyleComposer from "../../utils/MapStyleComposer";
-import { MapTiles } from "../../utils/services";
-import API from "../../utils/API";
+import { getMapParamsFromLocalStorage, linkMapAndPhoto, saveMapParamsToLocalStorage, initMapKeyboardHandler } from "../../utils/map.js";
+import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer.js";
+import MapMore from "../ui/MapMore.js";
+import { DISABLE_ANNOTATIONS_PARAM, isInIframe, isNullId } from "../../utils/utils.js";
+import { createWebComp, fa } from "../../utils/widgets.js";
+import { PanoramaxMetaCatalogURL, MapTiles } from "../../utils/services.js";
+import { faMap, faPanorama } from "@fortawesome/free-solid-svg-icons";
+import { default as InitParameters, alterMapState, alterViewerState } from "../../utils/InitParameters.js";
+import MapStyleComposer from "../../utils/MapStyleComposer.js";
+import API from "../../utils/API.js";
+import ViewerStyles from "./Viewer.css" with { type: "css" };
+document.adoptedStyleSheets.push(ViewerStyles);
 
 
 const MAP_MOVE_DELTA = 100;
@@ -137,7 +135,7 @@ export default class Viewer extends PhotoViewer {
 		// Check if mapstyle is not a unparsed JSON
 		try {
 			this["map-style"] = JSON.parse(this["map-style"]);
-		} catch(e) { /* empty */ }
+		} catch(e) { /* Empty */ }
 
 		// Init DOM containers
 		this.mini = createWebComp("pnx-mini", {
@@ -269,6 +267,7 @@ export default class Viewer extends PhotoViewer {
 		this.map?.destroy();
 	}
 
+	// eslint-disable-next-line class-methods-use-this
 	getClassName() {
 		return "Viewer";
 	}
@@ -343,6 +342,7 @@ export default class Viewer extends PhotoViewer {
 			// Check if it's not first load from seq=* URL parameter
 			else if(
 				isNullId(old)
+				// eslint-disable-next-line eqeqeq
 				&& this.sequence == this._initParams.getParentPostInit().sequence
 				&& !this._initParams.getParentPostInit().picture
 			) {
@@ -425,6 +425,7 @@ export default class Viewer extends PhotoViewer {
 	 * @memberof Panoramax.components.core.Viewer#
 	 */
 	hasTwoAPIs() {
+		// eslint-disable-next-line eqeqeq
 		return (this.apiMC != undefined && this.api != undefined) || this.metacatalog !== "false";
 	}
 
@@ -595,7 +596,7 @@ export default class Viewer extends PhotoViewer {
 	 * @returns {boolean} True if map is wider than viewer
 	 */
 	isMapWide() {
-		return this.mapContainer.parentNode == this.grid;
+		return this.mapContainer.parentNode === this.grid;
 	}
 
 	/**
@@ -619,13 +620,13 @@ export default class Viewer extends PhotoViewer {
 
 		if(focus === "map") {
 			// Remove PSV from grid
-			if(this.psvContainer.parentNode == this.grid) {
+			if(this.psvContainer.parentNode === this.grid) {
 				this.grid.removeChild(this.psvContainer);
 				this.psvContainer.removeAttribute("slot");
 			}
 
 			// Remove map from mini
-			if(this.mapContainer.parentNode == this.mini) {
+			if(this.mapContainer.parentNode === this.mini) {
 				this.mini.removeChild(this.mapContainer);
 			}
 
@@ -646,13 +647,13 @@ export default class Viewer extends PhotoViewer {
 		}
 		else {
 			// Remove map from grid
-			if(this.mapContainer.parentNode == this.grid) {
+			if(this.mapContainer.parentNode === this.grid) {
 				this.grid.removeChild(this.mapContainer);
 				this.mapContainer.removeAttribute("slot");
 			}
 
 			// Remove PSV from mini
-			if(this.psvContainer.parentNode == this.mini) {
+			if(this.psvContainer.parentNode === this.mini) {
 				this.mini.removeChild(this.psvContainer);
 				if(this._miniPicLegend) { this.mini.removeChild(this._miniPicLegend); }
 			}

package/build/components/core/index.js

@@ -0,0 +1,10 @@
+/**
+ * Core graphical components
+ * @module Panoramax:components:core
+ */
+
+export {default as Basic} from "./Basic.js";
+export {default as CoverageMap} from "./CoverageMap.js";
+export {default as Editor} from "./Editor.js";
+export {default as Viewer} from "./Viewer.js";
+export {default as PhotoViewer} from "./PhotoViewer.js";

package/build/components/index.js

@@ -0,0 +1,11 @@
+/**
+ * Graphical components
+ * @module Panoramax:components
+ */
+
+import * as core from "./core/index.js";
+import * as layout from "./layout/index.js";
+import * as menus from "./menus/index.js";
+import * as ui from "./ui/index.js";
+
+export {core, layout, menus, ui};

package/build/components/index_photoviewer.js

@@ -0,0 +1,6 @@
+// Lightweight export for PhotoViewer
+import * as layout from "./layout/index.js";
+import * as menus from "./menus/index_photoviewer.js";
+import * as ui from "./ui/index_photoviewer.js";
+
+export {layout, menus, ui};

package/{src → build}/components/layout/BottomDrawer.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { onceParentAvailable } from "../../utils/widgets";
+import { onceParentAvailable } from "../../utils/widgets.js";
 
 const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1 };
 
@@ -159,12 +159,12 @@ export default class BottomDrawer extends LitElement {
 
 	/** @private */
 	_onTouchMove(e) {
-		if (!this._isDragging) return;
+		if (!this._isDragging) {return;}
 
 		// Check if content has scroll bar, then only move if top scrolled
 		const content = this.shadowRoot.querySelector(".content");
 		if(content.scrollHeight > content.offsetHeight && content.scrollTop > 0) {
-			this._updateDrawerTransform(0);	
+			this._updateDrawerTransform(0);
 			return;
 		}
 

package/{src → build}/components/layout/CorneredGrid.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 
 /**

package/{src → build}/components/layout/Mini.js

@@ -1,6 +1,7 @@
-import { LitElement, html, css } from "lit";
-import SwitchBig from "../../img/switch_big.svg";
-import SwitchMini from "../../img/switch_mini.svg";
+import { LitElement, css, html } from "lit";
+
+const SwitchBig = new URL("../../img/switch_big.svg", import.meta.url).href;
+const SwitchMini = new URL("../../img/switch_mini.svg", import.meta.url).href;
 
 /**
  * Mini layout allows to show a reduced or collapsed component in a corner of a main component.
@@ -77,7 +78,7 @@ export default class Mini extends LitElement {
 		 * @type {Event}
 		 */
 		const onExpand = () => this.dispatchEvent(new Event("expand", {bubbles: true, composed: true}));
-		
+
 		if(this.collapsed || isSmall) {
 			const click = isSmall ? onExpand : () => this.collapsed = false;
 			return html`<pnx-button

package/{src → build}/components/layout/Tabs.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css, nothing } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 
 /**
  * Tabs offers a nice paged content rendering based on tabs buttons.

package/build/components/layout/index.js

@@ -0,0 +1,9 @@
+/**
+ * General layout components
+ * @module Panoramax:components:layout
+ */
+
+export {default as BottomDrawer} from "./BottomDrawer.js";
+export {default as CorneredGrid} from "./CorneredGrid.js";
+export {default as Mini} from "./Mini.js";
+export {default as Tabs} from "./Tabs.js";

package/{src → build}/components/menus/LocationPrecisionDoc.js

@@ -1,9 +1,8 @@
 import { LitElement, html } from "lit";
-import { faSvg, titles, docPopup } from "../styles";
-import { fa } from "../../utils/widgets";
-import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons/faMapMarkerAlt";
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
-import { QUALITYSCORE_GPS_VALUES } from "../../utils/utils";
+import { docPopup, faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faExternalLinkAlt, faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
+import { QUALITYSCORE_GPS_VALUES } from "../../utils/utils.js";
 
 /**
  * Location Precision Doc displays a synthetic summary of how Location Precision filter and map theme works.
@@ -19,7 +18,6 @@ export default class LocationPrecisionDoc extends LitElement {
 	static styles = [ titles, faSvg, docPopup ];
 
 	render() {
-		/* eslint-disable indent */
 		return html`
 			<h4>${fa(faMapMarkerAlt)} ${this._t?.pnx.filter_gps_precision}</h4>
 			<p>${this._t?.pnx.filter_gps_precision_help_1}</p>