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

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

@@ -1,7 +1,5 @@
-import { LitElement, html, css } from "lit";
-import BackgroundAerial from "../../img/bg_aerial.jpg";
-import BackgroundStreets from "../../img/bg_streets.jpg";
-import { onceParentAvailable } from "../../utils/widgets";
+import { LitElement, css, html } from "lit";
+import { onceParentAvailable } from "../../utils/widgets.js";
 
 
 /**
@@ -89,7 +87,7 @@ export default class MapBackground extends LitElement {
 				.checked=${this.bg == "streets"}
 			/>
 			<label for="bg-streets">
-				<img src=${BackgroundStreets} class=${this.size} alt="" />
+				<img src="${new URL("../../img/bg_streets.jpg", import.meta.url).href}" class=${this.size} alt="" />
 				${this._parent?._t.pnx.map_background_streets}
 			</label>
 			<input
@@ -101,7 +99,7 @@ export default class MapBackground extends LitElement {
 				.checked=${this.bg == "aerial"}
 			/>
 			<label for="bg-aerial">
-				<img src=${BackgroundAerial} class=${this.size} alt="" />
+				<img src="${new URL("../../img/bg_aerial.jpg", import.meta.url).href}" class=${this.size} alt="" />
 				${this._parent?._t.pnx.map_background_aerial}
 			</label>
 		`;

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

@@ -1,19 +1,13 @@
-import { LitElement, html, css, nothing } from "lit";
-import { fa } from "../../utils/widgets";
-import { getUserAccount } from "../../utils/utils";
-import { faSvg, titles } from "../styles";
-import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
-import { faCalendar } from "@fortawesome/free-solid-svg-icons/faCalendar";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
-import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
-import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons/faMapMarkerAlt";
-import { faGlobeEurope } from "@fortawesome/free-solid-svg-icons/faGlobeEurope";
-import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
-import { onceParentAvailable } from "../../utils/widgets";
-import { QUALITYSCORE_GPS_VALUES } from "../../utils/utils";
-import { isPanoramaxEndpointSingleUser } from "../../utils/map";
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { QUALITYSCORE_GPS_VALUES, getUserAccount } from "../../utils/utils.js";
+import { isPanoramaxEndpointSingleUser } from "../../utils/map.js";
+import { faSvg, titles } from "../styles.js";
+import {
+	faArrowRight, faCalendar, faGlobeEurope, faImage, faInfoCircle,
+	faMapMarkerAlt, faMedal, faStar, faUser,
+} from "@fortawesome/free-solid-svg-icons";
+
 
 /**
  * Map Filters menu allows user to select map data they want displayed.
@@ -208,7 +202,7 @@ export default class MapFilters extends LitElement {
 		}
 
 		// Map zoom
-		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(async () => {
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(() => {
 			this._parent.map.on("zoomend", this._onMapZoom.bind(this));
 			this._parent.mapStyleComposer.addEventListener("filters-changed", e => this._onParentFilterChange(e.detail));
 			this._parent.mapStyleComposer.addEventListener("panoramax-changed", () => this._onParentFilterChange(this._parent.mapStyleComposer.panoramaxFilters));
@@ -245,8 +239,8 @@ export default class MapFilters extends LitElement {
 		this.gps = e?.gps && Array.isArray(e.gps) ? e.gps.join(",") : (e?.gps?.length > 0 ? e.gps : "");
 
 		this.type = "";
-		if(e?.pic_type && e.pic_type != "") {
-			this.type = e.pic_type == "flat" ? "flat" : "equirectangular";
+		if(e?.pic_type && e.pic_type !== "") {
+			this.type = e.pic_type === "flat" ? "flat" : "equirectangular";
 		}
 
 		if(!isPanoramaxEndpointSingleUser(this._parent.mapStyleComposer.panoramax)) {
@@ -257,6 +251,7 @@ export default class MapFilters extends LitElement {
 			this.source = this._parent.mapStyleComposer.panoramax.startsWith("metacatalog_") ? "metacatalog" : "default";
 
 			// Find username if first load
+			// eslint-disable-next-line eqeqeq
 			if(this.user == null) {
 				let userId = this._parent.mapStyleComposer.panoramax.replace("metacatalog_", "");
 				this._parent.getAPI().getUserName(userId).then(username => {
@@ -498,14 +493,14 @@ export default class MapFilters extends LitElement {
 						type="date"
 						id="pnx-filter-date-from"
 						.value=${this.minDate}
-						class=${this.minDate && this.minDate != "" ? "pnx-filter-active" : ""}
+						class=${this.minDate && this.minDate !== "" ? "pnx-filter-active" : ""}
 					/>
 					${fa(faArrowRight)}
 					<input
 						type="date"
 						id="pnx-filter-date-end"
 						.value=${this.maxDate}
-						class=${this.maxDate && this.maxDate != "" ? "pnx-filter-active" : ""}
+						class=${this.maxDate && this.maxDate !== "" ? "pnx-filter-active" : ""}
 					/>
 				</div>
 			</div>`}

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

@@ -1,14 +1,11 @@
-import { LitElement, html, css, nothing } from "lit";
-import { fa } from "../../utils/widgets";
-import { faSvg, titles, select } from "../styles";
-import { COLORS, GPS_VALUES } from "../../utils/utils";
-import { faEarthEurope } from "@fortawesome/free-solid-svg-icons/faEarthEurope";
-import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { onceParentAvailable } from "../../utils/widgets";
-import { MAP_THEMES_STYLES } from "../../utils/map";
-import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor";
-import { BASEMAPS_DEFAULT_IDS } from "../../utils/MapStyleComposer";
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faSvg, select, titles } from "../styles.js";
+import { COLORS, GPS_VALUES } from "../../utils/utils.js";
+import { faEarthEurope, faInfoCircle, faPalette } from "@fortawesome/free-solid-svg-icons";
+import { MAP_THEMES_STYLES } from "../../utils/map.js";
+import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
+import { BASEMAPS_DEFAULT_IDS } from "../../utils/MapStyleComposer.js";
 
 /**
  * Map Layers menu allows user to select background and map theme.
@@ -108,7 +105,6 @@ export default class MapLayers extends LitElement {
 				`);
 			}
 			if(this._parent.mapStyleComposer.hasComplementaryBasemaps()) {
-				/* eslint-disable indent */
 				const defaultOpt = html`
 					<option value="" .selected=${BASEMAPS_DEFAULT_IDS.includes(this._parent.mapStyleComposer.basemap)}>
 						${this._parent.mapStyleComposer.hasStreetsAerialBasemaps()
@@ -154,19 +150,19 @@ export default class MapLayers extends LitElement {
 		parts.push(html`
 			<h4>${fa(faPalette)} ${this._parent?._t.pnx.map_theme}</h4>
 			<select id="pnx-map-theme" style="width: 100%;" @change=${this._onThemeSelect}>
-				<option value=${MAP_THEMES_STYLES.default.id} .selected=${this.theme == MAP_THEMES_STYLES.default.id}>${this._parent?._t.pnx.map_theme_default}</option>
-				<option value=${MAP_THEMES_STYLES.age.id} .selected=${this.theme == MAP_THEMES_STYLES.age.id}>${this._parent?._t.pnx.map_theme_age}</option>
-				<option value=${MAP_THEMES_STYLES.type.id} .selected=${this.theme == MAP_THEMES_STYLES.type.id}>${this._parent?._t.pnx.map_theme_type}</option>
+				<option value=${MAP_THEMES_STYLES.default.id} .selected=${this.theme === MAP_THEMES_STYLES.default.id}>${this._parent?._t.pnx.map_theme_default}</option>
+				<option value=${MAP_THEMES_STYLES.age.id} .selected=${this.theme === MAP_THEMES_STYLES.age.id}>${this._parent?._t.pnx.map_theme_age}</option>
+				<option value=${MAP_THEMES_STYLES.type.id} .selected=${this.theme === MAP_THEMES_STYLES.type.id}>${this._parent?._t.pnx.map_theme_type}</option>
 				${this._parent?.map?._hasQualityScore?.() && html`
-					<option value=${MAP_THEMES_STYLES.score.id} .selected=${this.theme == MAP_THEMES_STYLES.score.id}>${this._parent?._t.pnx.map_theme_score}</option>
-					<option value=${MAP_THEMES_STYLES.gps.id} .selected=${this.theme == MAP_THEMES_STYLES.gps.id}>${this._parent?._t.pnx.map_theme_gps}</option>
+					<option value=${MAP_THEMES_STYLES.score.id} .selected=${this.theme === MAP_THEMES_STYLES.score.id}>${this._parent?._t.pnx.map_theme_score}</option>
+					<option value=${MAP_THEMES_STYLES.gps.id} .selected=${this.theme === MAP_THEMES_STYLES.gps.id}>${this._parent?._t.pnx.map_theme_gps}</option>
 				`}
 			</select>
 		`);
 
 		// Map legend
 		parts.push(html`<div class="legend">
-			${this.theme == MAP_THEMES_STYLES.age.id ? html`
+			${this.theme === MAP_THEMES_STYLES.age.id ? html`
 				<div>
 					<div class="legend-entry">
 						<span class="legend-color" style="background-color: ${COLORS["PALETTE_4"]}"></span>
@@ -187,8 +183,8 @@ export default class MapLayers extends LitElement {
 						${this._parent?._t.pnx["map_theme_age_1"]}
 					</div>
 				</div>` : nothing}
-			
-			${this.theme == MAP_THEMES_STYLES.type.id ? html`
+
+			${this.theme === MAP_THEMES_STYLES.type.id ? html`
 			 	<div class="legend-entry">
 			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_1}"></span>
 			 		${this._parent?._t.pnx.picture_360}
@@ -197,8 +193,8 @@ export default class MapLayers extends LitElement {
 			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_2}"></span>
 			 		${this._parent?._t.pnx.picture_flat}
 			 	</div>` : nothing}
-			
-			${this.theme == MAP_THEMES_STYLES.score.id ? html`<div>
+
+			${this.theme === MAP_THEMES_STYLES.score.id ? html`<div>
 				<pnx-quality-score></pnx-quality-score>
 				<pnx-button
 					title="${this._parent?._t.pnx.metadata_quality_help}"
@@ -207,8 +203,8 @@ export default class MapLayers extends LitElement {
 				>
 					${fa(faInfoCircle)}
 				</pnx-button></div>` : nothing}
-			
-			${this.theme == MAP_THEMES_STYLES.gps.id ? html`
+
+			${this.theme === MAP_THEMES_STYLES.gps.id ? html`
 				<div>
 					<div class="legend-entry">
 						<span class="legend-color" style="background-color: ${GPS_VALUES[0].color}"></span>

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

@@ -1,5 +1,5 @@
-import {LitElement, html, nothing, css} from "lit";
-import {onceParentAvailable} from "../../utils/widgets";
+import {LitElement, css, html, nothing} from "lit";
+import {onceParentAvailable} from "../../utils/widgets.js";
 
 /**
  * Map legend displays information about map sources.
@@ -44,7 +44,7 @@ export default class MapLegend extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 		onceParentAvailable(this).then(() => this.requestUpdate());
-		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(async () => {
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(() => {
 			this._parent.map.on("styledata", () => this.requestUpdate());
 			this.requestUpdate();
 		}));
@@ -52,7 +52,6 @@ export default class MapLegend extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
 		const mapLabelParts = this._parent?._t.map.map_data.split("{m}");
 

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

@@ -1,6 +1,6 @@
-import { LitElement, nothing, css, html } from "lit";
-import { onceParentAvailable } from "../../utils/widgets";
-import { panel } from "../styles";
+import { LitElement, css, html, nothing } from "lit";
+import { onceParentAvailable } from "../../utils/widgets.js";
+import { panel } from "../styles.js";
 
 /**
  * Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
@@ -59,7 +59,6 @@ export default class MiniPictureLegend extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		return this._caption?.date ?
 			html`<div class="pnx-panel">${
 				this._caption.date.toLocaleDateString(

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

@@ -1,18 +1,14 @@
-import { LitElement, nothing, css } from "lit";
+import { LitElement, css, nothing } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
 import { classMap } from "lit/directives/class-map.js";
-import { fa, onceParentAvailable } from "../../utils/widgets";
-import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
-import { faUserLock } from "@fortawesome/free-solid-svg-icons/faUserLock";
-import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons/faCalendarAlt";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
-import { faShareNodes } from "@fortawesome/free-solid-svg-icons/faShareNodes";
-import { placeholder, panel, hidden } from "../styles";
-import { reverseGeocodingNominatim } from "../../utils/geocoder";
-import { PanoramaxMetaCatalogURL } from "../../utils/services";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import {
+	faArrowLeft, faCalendarAlt, faChevronDown, faChevronUp, faShareNodes,
+	faTriangleExclamation, faUser, faUserLock,
+} from "@fortawesome/free-solid-svg-icons";
+import { hidden, panel, placeholder } from "../styles.js";
+import { reverseGeocodingNominatim } from "../../utils/geocoder.js";
+import { PanoramaxMetaCatalogURL } from "../../utils/services.js";
 
 /**
  * Picture legend shows info about picture author, capture date, address, and access to metadata popup.
@@ -217,7 +213,7 @@ export default class PictureLegend extends LitElement {
 	_onPicChange(picMeta) {
 		clearTimeout(this._addrTimer1);
 		this._caption = picMeta?.caption;
-		
+
 		if(picMeta) {
 			this._visibility = picMeta.properties?.["geovisio:visibility"] || null;
 			if(this._visibility === "anyone") { this._visibility = null; }
@@ -265,7 +261,6 @@ export default class PictureLegend extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		if(!this._caption) { return nothing; }
 
 		const lang = this._parent?.lang || window.navigator.language;

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

@@ -1,23 +1,17 @@
-import { LitElement, nothing, css } from "lit";
+import { LitElement, css, nothing } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
-import { fa, onceParentAvailable } from "../../utils/widgets";
-import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
-import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
-import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
-import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
-import { faImages } from "@fortawesome/free-solid-svg-icons/faImages";
-import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
-import { faSvg, titles, textarea, hidden, dataBlocks } from "../styles";
-import { createWebComp } from "../../utils/widgets";
-import { getGPSPrecision } from "../../utils/picture";
-import { PanoramaxMetaCatalogURL } from "../../utils/services";
+import { fa, onceParentAvailable, createWebComp } from "../../utils/widgets.js";
 import {
-	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
-	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES
-} from "../../utils/utils";
+	faCamera, faImage, faImages, faInfoCircle, faLocationDot,
+	faMedal, faQuestion, faScroll, faTags,
+} from "@fortawesome/free-solid-svg-icons";
+import { dataBlocks, faSvg, hidden, textarea, titles } from "../styles.js";
+import { getGPSPrecision } from "../../utils/picture.js";
+import { PanoramaxMetaCatalogURL } from "../../utils/services.js";
+import {
+	QUALITYSCORE_GPS_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES,
+	QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_RES_FLAT_VALUES, getGrade
+} from "../../utils/utils.js";
 
 const missing = () => fa(faQuestion, {styles: {height: "16px"}});
 
@@ -125,7 +119,6 @@ export default class PictureMetadata extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		if(!this._meta) { return nothing; }
 
 		const lang = this._parent?.lang || window.navigator.language;

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

@@ -1,10 +1,8 @@
-import { LitElement, html, css } from "lit";
-import { faSvg } from "../styles";
-import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
-import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb";
-import { faPersonBiking } from "@fortawesome/free-solid-svg-icons/faPersonBiking";
-import { PIC_MAX_STAY_DURATION } from "../ui/Photo";
-import { fa, onceParentAvailable } from "../../utils/widgets";
+import { LitElement, css, html } from "lit";
+import { faSvg } from "../styles.js";
+import { faLightbulb, faPersonBiking, faRocket } from "@fortawesome/free-solid-svg-icons";
+import { PIC_MAX_STAY_DURATION } from "../ui/Photo.js";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
 
 /**
  * Player Options menu displays player speed and contrast settings.

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

@@ -1,8 +1,7 @@
 import { LitElement, html } from "lit";
-import { faSvg, titles, docPopup } from "../styles";
-import { fa } from "../../utils/widgets";
-import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
+import { docPopup, faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faExternalLinkAlt, faMedal } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Quality Score Doc displays a synthetic summary of how Quality Score is computed.

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

@@ -1,12 +1,11 @@
-import { LitElement, html, css, nothing } from "lit";
-import { faSvg, titles, select, textarea, input } from "../styles";
-import { fa } from "../../utils/widgets";
-import { faAt } from "@fortawesome/free-solid-svg-icons/faAt";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
-import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
-import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
-import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane";
-import { getUserAccount } from "../../utils/utils";
+import { LitElement, css, html, nothing } from "lit";
+import { faSvg, input, select, textarea, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import {
+	faAt, faCircleInfo, faCommentDots,
+	faPaperPlane, faTriangleExclamation,
+} from "@fortawesome/free-solid-svg-icons";
+import { getUserAccount } from "../../utils/utils.js";
 
 const REPORT_NATURE = [
 	"", "blur_missing", "blur_excess", "inappropriate", "privacy",

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

@@ -1,8 +1,7 @@
 import { LitElement, html } from "lit";
-import { faSvg, titles, docPopup } from "../styles";
-import { fa } from "../../utils/widgets";
-import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
+import { docPopup, faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faExternalLinkAlt, faTags } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Semantics Doc displays a synthetic summary of what are semantics and how to use it.

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

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
-import { faSvg, titles } from "../styles";
-import { fa } from "../../utils/widgets";
-import { faDownload } from "@fortawesome/free-solid-svg-icons/faDownload";
+import { faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Semantics Download docs displays a synthetic summary of you can download semantics metadata.

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

@@ -1,9 +1,7 @@
-import { LitElement, html, css } from "lit";
-import { fa } from "../../utils/widgets";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { faDownload } from "@fortawesome/free-solid-svg-icons/faDownload";
-import { SEMANTICS_OVERLAY_MINZOOM } from "../../utils/SemanticsMapProtocol";
-import { onceParentAvailable } from "../../utils/widgets";
+import { LitElement, css, html } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faDownload, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { SEMANTICS_OVERLAY_MINZOOM } from "../../utils/SemanticsMapProtocol.js";
 
 /**
  * Semantics Filters menu allows user to show/hide specific semantic tags over the map.
@@ -60,7 +58,7 @@ export default class SemanticsFilters extends LitElement {
 		this._layers = [];
 
 		// Map zoom
-		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(async () => {
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(() => {
 			const postUpdate = () => {
 				this._onLayersChange();
 				this.requestUpdate();
@@ -87,6 +85,7 @@ export default class SemanticsFilters extends LitElement {
 		this._debouncedChange = setTimeout(
 			() => {
 				const newlayers = this._parent?.map?.getSemanticOverlays();
+				// eslint-disable-next-line eqeqeq
 				if(this._layersToSet(newlayers) != this._layersToSet(this._layers)) {
 					this._layers = newlayers;
 
@@ -114,7 +113,7 @@ export default class SemanticsFilters extends LitElement {
 	_onMapZoom() {
 		this._showZoomIn = this._parent.map.getZoom() < SEMANTICS_OVERLAY_MINZOOM;
 	}
-	
+
 	/** @private */
 	render() {
 		if(!this._layers || this._layers.length === 0) { return; }

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

@@ -1,23 +1,17 @@
-import { LitElement, html, css, nothing } from "lit";
-import { faSvg, iconify, badgeCount } from "../styles";
-import { fa, moreIcons } from "../../utils/widgets";
-import { semanticsToString } from "../../utils/semantics";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
-import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
-import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
-import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
-import { faImages } from "@fortawesome/free-solid-svg-icons/faImages";
-import { faVectorSquare } from "@fortawesome/free-solid-svg-icons/faVectorSquare";
-import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
-import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
-import { onceParentAvailable } from "../../utils/widgets";
-import { groupByPrefix } from "../../utils/semantics";
+import { LitElement, css, html, nothing } from "lit";
+import { badgeCount, faSvg, iconify } from "../styles.js";
+import { fa, moreIcons, onceParentAvailable } from "../../utils/widgets.js";
+import { groupByPrefix, semanticsToString } from "../../utils/semantics.js";
+import {
+	faArrowLeft, faCheck, faChevronRight, faCopy,
+	faImages, faPen, faTrash, faVectorSquare
+} from "@fortawesome/free-solid-svg-icons";
 import "iconify-icon";
 
 /**
  * Semantics list shows listing of both picture tags and annotations.
  * It uses the parent component currently selected picture.
- * 
+ *
  * @class Panoramax.components.menus.SemanticsList
  * @element pnx-semantics-list
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
@@ -74,7 +68,7 @@ export default class SemanticsList extends LitElement {
 		super.connectedCallback();
 
 		this._onPicChange();
-		
+
 		onceParentAvailable(this).then(() => {
 			this._parent.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
 			this._parent.psv?.addEventListener("annotation-focused", e => this.showAnnotation(e.detail.annotationId));
@@ -329,7 +323,6 @@ export default class SemanticsList extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		if(!this._meta) { return nothing; }
 
 		// Selected entry
@@ -356,7 +349,7 @@ export default class SemanticsList extends LitElement {
 						${fa(faCopy, {transform: {size: 18}})}
 						${fa(faCheck, {attributes: {slot: "oncopy"}, transform: {size: 18}})}
 					</pnx-copy-button>
-					
+
 					${this.editable && this._selectedEntry.type !== "seqtags" ? html`
 						<pnx-button
 							kind="superinline"

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

@@ -1,12 +1,10 @@
-import { LitElement, html, nothing, css } from "lit";
-import { fa, onceParentAvailable } from "../../utils/widgets";
-import { faFloppyDisk } from "@fortawesome/free-solid-svg-icons/faFloppyDisk";
-import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
-import { faPlusSquare } from "@fortawesome/free-solid-svg-icons/faPlusSquare";
-import { faEraser } from "@fortawesome/free-solid-svg-icons/faEraser";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { hidden, dataBlocks } from "../styles";
-import { getUserAccount } from "../../utils/utils";
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import {
+	faEraser, faFloppyDisk, faInfoCircle, faPlusSquare, faTimes
+} from "@fortawesome/free-solid-svg-icons";
+import { dataBlocks, hidden } from "../styles.js";
+import { getUserAccount } from "../../utils/utils.js";
 
 /**
  * Semantics metadata displays detailed info about semantic attributes of a single picture.
@@ -287,7 +285,6 @@ export default class SemanticsMetadata extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		if(!this._meta?.properties) { return; }
 
 		const canEdit = !this._meta.origInstance && (this._authUrl || getUserAccount() !== null);
@@ -354,7 +351,7 @@ export default class SemanticsMetadata extends LitElement {
 						>${fa(faInfoCircle)} ${this._parent?._t.pnx.semantics_doc}</pnx-button>
 					</div>
 				` : nothing}
-				
+
 				<pnx-semantics-list
 					id="pnx-sem-list"
 					.editable=${canEdit}

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

@@ -1,10 +1,9 @@
 import { LitElement, css, html } from "lit";
-import { fa, onceParentAvailable } from "../../utils/widgets";
-import { faSvg, textarea, titles, input } from "../styles";
-import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
-import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
-import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
-import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faSvg, input, textarea, titles } from "../styles.js";
+import {
+	faCircleInfo, faLink, faMap, faShareAlt
+} from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Share Menu displays links for quick picture sharing.
@@ -79,7 +78,7 @@ export default class ShareMenu extends LitElement {
 						<pnx-copy-button ._t=${this._parent?._t} text=${this._url}></pnx-copy-button>
 					</div>
 				</div>
-					
+
 				<h4 slot="title">${fa(faMap)} ${this._parent?._t.pnx.share_embed}</h4>
 				<div slot="content">
 					<div class="embed">

package/build/components/menus/index.js

@@ -0,0 +1,22 @@
+/**
+ * Complex menus components
+ * @module Panoramax:components:menus
+ */
+
+export {default as LocationPrecisionDoc} from "./LocationPrecisionDoc.js";
+export {default as MapBackground} from "./MapBackground.js";
+export {default as MapFilters} from "./MapFilters.js";
+export {default as MapLayers} from "./MapLayers.js";
+export {default as MapLegend} from "./MapLegend.js";
+export {default as MiniPictureLegend} from "./MiniPictureLegend.js";
+export {default as PictureLegend} from "./PictureLegend.js";
+export {default as PictureMetadata} from "./PictureMetadata.js";
+export {default as PlayerOptions} from "./PlayerOptions.js";
+export {default as QualityScoreDoc} from "./QualityScoreDoc.js";
+export {default as ReportForm} from "./ReportForm.js";
+export {default as SemanticsDoc} from "./SemanticsDoc.js";
+export {default as SemanticsDownload} from "./SemanticsDownload.js";
+export {default as SemanticsFilters} from "./SemanticsFilters.js";
+export {default as SemanticsList} from "./SemanticsList.js";
+export {default as SemanticsMetadata} from "./SemanticsMetadata.js";
+export {default as Share} from "./Share.js";

package/build/components/menus/index_photoviewer.js

@@ -0,0 +1,11 @@
+// Lightweight export for PhotoViewer
+export {default as PictureLegend} from "./PictureLegend.js";
+export {default as PictureMetadata} from "./PictureMetadata.js";
+export {default as PlayerOptions} from "./PlayerOptions.js";
+export {default as QualityScoreDoc} from "./QualityScoreDoc.js";
+export {default as ReportForm} from "./ReportForm.js";
+export {default as SemanticsDoc} from "./SemanticsDoc.js";
+export {default as SemanticsDownload} from "./SemanticsDownload.js";
+export {default as SemanticsList} from "./SemanticsList.js";
+export {default as SemanticsMetadata} from "./SemanticsMetadata.js";
+export {default as Share} from "./Share.js";

package/{src → build}/components/styles.js

@@ -1,7 +1,5 @@
 import { css } from "lit";
 
-/* eslint-disable import/no-unused-modules */
-
 // Classic panel
 export const panel = css`
 	.pnx-panel {