@panoramax/web-viewer 5.2.0-develop-6a40c2ee → 5.2.0-develop-434137e7

package/build/esm/components/core/Basic.css

@@ -7,6 +7,7 @@
 	--red-transparent: rgba(247, 0, 0, 0.3);
 	--red-pale: #ff726f;
 	--grey: #f5f5f5;
+	--grey-very-pale: #e6e6e6;
 	--grey-pale: #cfd2cf;
 	--grey-semi-dark: #808080;
 	--grey-dark: #3e3e3e;

package/build/esm/components/core/Basic.js

@@ -9,7 +9,7 @@ import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(AtkinsonStyles);
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "6a40c2e";
+const __COMMIT_HASH__ = "434137e";
 const __PACKAGE_VERSION__ = "5.2.0";
 const __PACKAGE_ISSUES_URL__ = "https://gitlab.com/panoramax/clients/web-viewer/-/work_items";
 

package/build/esm/components/core/PhotoViewer.js

@@ -3,7 +3,7 @@ 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 { DISABLE_ANNOTATIONS_PARAM, isInIframe } from "../../utils/utils.js";
 import { default as InitParameters, alterPSVState, alterPhotoViewerState } from "../../utils/InitParameters.js";
 import PresetManager from "../../utils/PresetsManager.js";
 import PhotoViewerStyles from "./PhotoViewer.css" with { type: "css" };
@@ -193,14 +193,12 @@ export default class PhotoViewer extends Basic {
 				this.bottomDrawer = createWebComp("pnx-bottom-drawer", {
 					slot: "bottom",
 					_parent: this,
-					class: this._initParams.getParentPostInit().willLoadPicture ? undefined: "pnx-hidden",
+					openness: this._initParams.getParentPostInit().willLoadPicture ? undefined: "hidden",
 				});
-				this.bottomDrawer.appendChild(this.legend);
+				if(this._initParams.getParentPostInit().willLoadPicture) {
+					this.bottomDrawer.appendChild(this.legend);
+				}
 				this.grid.appendChild(this.bottomDrawer);
-				this.addEventListener("select", e => {
-					if(isNullId(e.detail.picId)) { this.bottomDrawer.classList.add("pnx-hidden"); }
-					else { this.bottomDrawer.classList.remove("pnx-hidden"); }
-				});
 			}
 		}
 	}
@@ -534,6 +532,44 @@ export default class PhotoViewer extends Basic {
 		});
 	}
 
+	/**
+	 * Check bottom drawer visibility
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 * @returns {boolean} True if visible (even partially)
+	 */
+	isBottomDrawerVisible() {
+		return this.bottomDrawer.getAttribute("openness") !== "hidden";
+	}
+
+	/**
+	 * Change bottom drawer visibility and content
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 * @param {boolean} visible True to make it appear
+	 * @param {string|Element[]} [content] The new bottom drawer content
+	 * @param {object} [options] [Options to pass to Bottom Drawer](#Panoramax.components.layout.BottomDrawer)
+	 * @param {boolean} [options.autoclose=false] Should the drawer be closed automatically when dragged down?
+	 * @param {boolean} [options.autoadjust=false] Should the drawer adjust to content size?
+	 */
+	setBottomDrawer(visible, content = null, options = null) {
+		if(!this.bottomDrawer) { return; }
+		if(!visible) { this.bottomDrawer.setAttribute("openness", "hidden"); }
+
+		if(options?.autoclose) { this.bottomDrawer.setAttribute("autoclose", ""); }
+		else { this.bottomDrawer.removeAttribute("autoclose", ""); }
+		if(options?.autoadjust) { this.bottomDrawer.setAttribute("autoadjust", ""); }
+		else { this.bottomDrawer.removeAttribute("autoadjust", ""); }
+
+		this.bottomDrawer.clearContent();
+
+		if(content) {
+			if(typeof content === "string") { this.bottomDrawer.setContent(content); }
+			else if(Array.isArray(content)) { content.forEach(c => this.bottomDrawer.appendChild(c)); }
+			else if(typeof content === "object") { this.bottomDrawer.appendChild(content); }
+		}
+
+		if(visible) { this.bottomDrawer.setAttribute("openness", options?.autoadjust ? "opened" : "half-opened"); }
+	}
+
 	/**
 	 * Change full-page popup visibility and content
 	 * @memberof Panoramax.components.core.PhotoViewer#

package/build/esm/components/core/Viewer.js

@@ -209,14 +209,9 @@ export default class Viewer extends PhotoViewer {
 				this.bottomDrawer = createWebComp("pnx-bottom-drawer", {
 					slot: "bottom",
 					_parent: this,
-					class: this._initParams.getParentPostInit().willLoadPicture ? undefined: "pnx-hidden",
+					openness: "hidden",
 				});
-				this.bottomDrawer.appendChild(this.legend);
 				this.grid.appendChild(this.bottomDrawer);
-				this.addEventListener("select", e => {
-					if(isNullId(e.detail.picId)) { this.bottomDrawer.classList.add("pnx-hidden"); }
-					else { this.bottomDrawer.classList.remove("pnx-hidden"); }
-				});
 			}
 
 			if(!isInIframe()) {
@@ -347,6 +342,13 @@ export default class Viewer extends PhotoViewer {
 				this.mini.removeAttribute("collapsed");
 			}
 
+			// Switch bottom drawer based on next picture
+			if(!isNullId(value)) {
+				this.setBottomDrawer(true, this.legend);
+			} else if(this.legend.parentNode === this.bottomDrawer) {
+				this.setBottomDrawer(false);
+			}
+
 			// Unselect -> show map wide instead
 			if(isNullId(value)) {
 				if(this.map && this.isMapWide()) { this.mini.classList.add("pnx-hidden"); }
@@ -362,19 +364,11 @@ export default class Viewer extends PhotoViewer {
 			) {
 				this.mini.classList.remove("pnx-hidden");
 				this.mini.removeAttribute("collapsed");
-				if(this.bottomDrawer?.getAttribute?.("openness") === "closed") {
-					this.bottomDrawer.setAttribute("openness", "half-opened");
-				}
 			}
 			// Select after none selected -> show pic wide
 			else {
 				const postLoad = () => {
 					this.mini.classList.remove("pnx-hidden");
-					if(isNullId(old)) {
-						if(this.bottomDrawer?.getAttribute?.("openness") === "closed") {
-							this.bottomDrawer.setAttribute("openness", "half-opened");
-						}
-					}
 				};
 				this.psv.addEventListener("picture-loaded", postLoad, {once: true});
 				this.psv.addEventListener("picture-failed", () => {
@@ -727,6 +721,9 @@ export default class Viewer extends PhotoViewer {
 		this.psv.autoSize();
 		this.psv.forceRefresh();
 		this.legend?.setAttribute?.("focus", this.focus);
+		if(!isNullId(this.picture) && !this.legend.parentNode === this.bottomDrawer) {
+			this.setBottomDrawer(true, this.legend);
+		}
 
 		if(!skipEvent) {
 			/**

package/build/esm/components/layout/BottomDrawer.js

@@ -1,8 +1,9 @@
 import { LitElement, css, html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { onceParentAvailable } from "../../utils/widgets.js";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
-const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1 };
+const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1, "hidden": 1 };
 
 /**
  * BottomDrawer layout offers a mobile-like drawer menu, coming from bottom of the screen.
@@ -48,6 +49,12 @@ export default class BottomDrawer extends LitElement {
 		.drawer.half-opened { transform: translateY(70%); }
 		.drawer.half-opened .content { overflow-y: hidden; }
 		.drawer.opened { transform: translateY(0%); }
+		.drawer.hidden { display: none; }
+
+		.drawer.autoadjust.opened {
+			transform: unset;
+			height: max-content !important;
+		}
 
 		.handle {
 			height: 30px;
@@ -57,6 +64,12 @@ export default class BottomDrawer extends LitElement {
 			cursor: pointer;
 		}
 
+		.handle.autoclose {
+			align-items: end;
+			justify-content: end;
+			padding: 0 15px;
+		}
+
 		.handle-bar {
 			width: 40px;
 			height: 5px;
@@ -74,7 +87,9 @@ export default class BottomDrawer extends LitElement {
 	 * Component properties.
 	 * @memberof Panoramax.components.layout.BottomDrawer#
 	 * @type {Object}
-	 * @property {string} [openness=half-opened] How much the drawer should be opened (closed, half-opened, opened)
+	 * @property {string} [openness=half-opened] How much the drawer should be opened (hidden, closed, half-opened, opened)
+	 * @property {boolean} [autoclose=false] Set true if the drawer should close when dragged down.
+	 * @property {boolean} [autoadjust=false] Automatically adjust to defined content. If not, size is based on fixed value (fully opened, 30% opened).
 	 */
 	static properties = {
 		_fingerY: {state: true},
@@ -83,12 +98,16 @@ export default class BottomDrawer extends LitElement {
 		_isDragging: {state: true},
 		_drawerHeight: {state: true},
 		openness: {type: String, reflect: true},
+		autoclose: {type: Boolean},
+		autoadjust: {type: Boolean},
 	};
 
 	constructor() {
 		super();
 		this._isDragging = false;
 		this.openness = "half-opened";
+		this.autoclose = false;
+		this.autoadjust = false;
 	}
 
 	/** @private */
@@ -106,8 +125,13 @@ export default class BottomDrawer extends LitElement {
 		drawer.style.maxHeight = `${this._drawerHeight}px`;
 
 		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
-			this._parent.map?.addEventListener("click", () => this.openness = "closed");
-			this._parent.psv?.addEventListener("click", () => this.openness = "closed");
+			const onParentClick = () => {
+				if(!["hidden", "closed", null].includes(this.openness)) {
+					this.openness = this.autoclose ? "hidden" : "closed";
+				}
+			};
+			this._parent.map?.addEventListener("click", onParentClick);
+			this._parent.psv?.addEventListener("click", onParentClick);
 		});
 	}
 
@@ -116,9 +140,17 @@ export default class BottomDrawer extends LitElement {
 		super.attributeChangedCallback(name, old, value);
 
 		if(name === "openness") {
+			// Send menu open/close event
+			if(["hidden", "closed", null].includes(old) && value?.includes("open")) {
+				this._parent?.dispatchEvent(new CustomEvent("menu-opened", { detail: { menu: this }}));
+			}
+			else if(old?.includes("open") && ["hidden", "closed", null].includes(value)) {
+				this._parent?.dispatchEvent(new CustomEvent("menu-closed", { detail: { menu: this }}));
+			}
+
 			// If not fully opened, force content scroll back to top
 			if(value !== "opened") {
-				const content = this.shadowRoot.querySelector(".content");
+				const content = this.shadowRoot?.querySelector(".content");
 				if(content) { content.scrollTop = 0; }
 			}
 
@@ -134,6 +166,27 @@ export default class BottomDrawer extends LitElement {
 		this._cleanupTouchListeners();
 	}
 
+	/**
+	 * Set child content from string.
+	 * @param {string} newContent The new HTML string content
+	 * @memberof Panoramax.components.layout.BottomDrawer#
+	 */
+	setContent(newContent) {
+		const content = this.shadowRoot?.querySelector(".content slot");
+		if(content) { content.innerHTML = newContent; }
+	}
+
+	/**
+	 * Removes all slotted child elements.
+	 * @memberof Panoramax.components.layout.BottomDrawer#
+	 */
+	clearContent() {
+		const content = this.shadowRoot?.querySelector(".content slot")?.assignedElements();
+		if(content && content.length > 0) {
+			content.forEach(c => c.parentNode.removeChild(c));
+		}
+	}
+
 	/** @private */
 	_getDrawer() {
 		return this.shadowRoot?.querySelector(".drawer");
@@ -141,8 +194,8 @@ export default class BottomDrawer extends LitElement {
 
 	/** @private */
 	_onHandleClick() {
-		if(this.openness === "opened") { this.openness = "closed"; }
-		else if(this.openness === "half-opened") { this.openness = "opened"; }
+		if(this.openness === "opened") { this.openness = this.autoclose ? "hidden" : "closed"; }
+		else if(this.openness === "half-opened") { this.openness = this.autoclose ? "hidden" : "opened"; }
 		else if(this.openness === "closed") { this.openness = "half-opened"; }
 	}
 
@@ -220,7 +273,7 @@ export default class BottomDrawer extends LitElement {
 				else { this.openness = "opened"; }
 			}
 			// Gesture goes down
-			else { this.openness = "closed"; }
+			else { this.openness = this.autoclose ? "hidden" : "closed"; }
 
 			this._drawerY = null;
 			y = Math.max(0, Math.min(OPENNESS_Y_PCT[this.openness] * this._drawerHeight, this._drawerHeight - 30));
@@ -235,6 +288,7 @@ export default class BottomDrawer extends LitElement {
 			"drawer": true,
 			[this.openness]: true,
 			"dragging": this._isDragging,
+			"autoadjust": this.autoadjust,
 		};
 
 		return html`
@@ -244,8 +298,15 @@ export default class BottomDrawer extends LitElement {
 				@touchmove="${this._onTouchMove}"
 				@touchend="${this._onTouchEnd}"
 			>
-				<div class="handle" @click=${this._onHandleClick}>
-					<div class="handle-bar"></div>
+				<div
+					class=${classMap({"handle": true, "autoclose": this.autoclose})}
+					@click=${this._onHandleClick}
+				>
+					${this.autoclose ? html`
+						${fa(faTimes, { styles: { "height": "20px" }})}
+					` : html`
+						<div class="handle-bar"></div>
+					`}
 				</div>
 				<div class="content">
 					<slot></slot>

package/build/esm/components/menus/MapBackground.js

@@ -2,6 +2,8 @@ import { LitElement, css, html } from "lit";
 import { onceParentAvailable } from "../../utils/widgets.js";
 const BgStreets = new URL("../../img/bg_streets.jpg", import.meta.url).href;
 const BgAerial = new URL("../../img/bg_aerial.jpg", import.meta.url).href;
+const BgMore = new URL("../../img/bg_more.png", import.meta.url).href;
+import { BASEMAPS_DEFAULT_IDS } from "../../utils/MapStyleComposer.js";
 
 /**
  * Map Background menu allows user to select background.
@@ -23,23 +25,48 @@ export default class MapBackground extends LitElement {
 			gap: 10px;
 		}
 		input { display: none; }
-		label { cursor: pointer; }
+		label {
+			cursor: pointer;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 3px;
+			font-size: 0.8rem;
+			color: var(--grey-dark);
+		}
 
 		img {
 			width: 40px;
 			border-radius: 5px;
 			vertical-align: middle;
-			margin-right: 5px;
 			border: 2px solid var(--widget-bg);
 		}
 
-		img.sm {
-			width: 32px;
+		img.sm { width: 32px; }
+
+		@media screen and (max-width: 576px) {
+			label { font-size: 0.6rem; }
+			img { width: 32px; }
 		}
 
 		input:checked + label img {
 			outline: 3px solid var(--widget-border-btn);
 		}
+
+		input:disabled + label {
+			opacity: 0.4;
+			cursor: not-allowed;
+		}
+
+		.select-as-radio {
+			position: relative;
+		}
+
+		.select-as-radio select {
+			opacity: 0;
+			position: absolute;
+			inset: 0;
+		}
 	` ];
 
 	/**
@@ -73,12 +100,13 @@ export default class MapBackground extends LitElement {
 	/** @private */
 	_onBgSelect(e) {
 		this.bg = e.target.value;
+		this.shadowRoot.querySelector("#pnx-map-bg-more").value = null;
 		this._parent?.mapStyleComposer?.switchBasemap(this.bg);
 	}
 
 	/** @private */
 	render() {
-		return html`
+		const parts = [html`
 			<input
 				type="radio"
 				id="bg-streets"
@@ -91,19 +119,57 @@ export default class MapBackground extends LitElement {
 				<img src=${BgStreets} class=${this.size} alt="" />
 				${this._parent?._t.pnx.map_background_streets}
 			</label>
-			<input
-				type="radio"
-				id="bg-aerial"
-				name="bg"
-				value="aerial"
-				@change=${this._onBgSelect}
-				.checked=${this.bg === "aerial"}
-			/>
-			<label for="bg-aerial">
-				<img src=${BgAerial} class=${this.size} alt="" />
-				${this._parent?._t.pnx.map_background_aerial}
-			</label>
-		`;
+		`];
+
+		if(this._parent.mapStyleComposer.hasStreetsAerialBasemaps()) {
+			parts.push(html`
+				<input
+					type="radio"
+					id="bg-aerial"
+					name="bg"
+					value="aerial"
+					@change=${this._onBgSelect}
+					.checked=${this.bg === "aerial"}
+				/>
+				<label for="bg-aerial">
+					<img src=${BgAerial} class=${this.size} alt="" />
+					${this._parent?._t.pnx.map_background_aerial}
+				</label>
+			`);
+		}
+
+		if(this._parent.mapStyleComposer.hasComplementaryBasemaps()) {
+			const layers = Object
+				.entries(this._parent.mapStyleComposer.layerRanges.basemaps)
+				.filter(([bid,]) => !BASEMAPS_DEFAULT_IDS.includes(bid))
+				.map(([bid, b]) => html`
+					<option value="${bid}" .selected=${this._parent.mapStyleComposer.basemap === bid}>
+						${b.layers[0]?.metadata?.name || bid}
+					</option>
+				`);
+			
+			parts.push(html`
+				<div class="select-as-radio">
+					<input
+						type="radio"
+						id="bg-more"
+						name="bg"
+						value="more"
+						@change=${this._onBgSelect}
+						.checked=${!["aerial", "streets"].includes(this.bg)}
+					/>
+					<label for="bg-more">
+						<img src=${BgMore} class=${this.size} alt="" />
+						${this._parent?._t.pnx.map_background_more}
+					</label>
+					<select id="pnx-map-bg-more" @change=${this._onBgSelect}>
+						${layers}
+					</select>
+				</div>
+			`);
+		}
+
+		return parts;
 	}
 }