@panoramax/web-viewer 3.2.3-develop-6e69906d → 3.2.3-develop-8b82a4e5

package/src/components/core/PhotoViewer.js

@@ -7,6 +7,7 @@ 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 } from "../../utils/utils";
 import { default as InitParameters, alterPSVState, alterMapState, alterPhotoViewerState } from "../../utils/InitParameters";
 
 
@@ -40,6 +41,7 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * @slot `bottom-left` The bottom-left corner
  * @slot `bottom` The bottom middle corner
  * @slot `bottom-right` The bottom-right corner
+ * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
  * @example
  * ```html
  * <!-- Basic example -->
@@ -54,6 +56,7 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  *   style="width: 300px; height: 250px"
  * >
  *   <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 -->
@@ -124,29 +127,41 @@ export default class PhotoViewer extends Basic {
 	/** @private */
 	_initWidgets() {
 		if(this._initParams.getParentPostInit().widgets !== "false") {
+			this.grid.appendChild(createWebComp("pnx-widget-player", {
+				slot: "top",
+				_parent: this,
+				class: "pnx-only-psv pnx-print-hidden",
+				size: this.isHeightSmall() ? "md": "xl",
+			}));
+
 			if(!this.isWidthSmall()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: !this.isWidthSmall() ? "top-left" : undefined,
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
 				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
 					slot: "bottom-right",
 					class: "pnx-print-hidden",
 					_parent: this
 				}));
+				this.grid.appendChild(this.legend);
+			}
+			else {
+				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
+				this.bottomDrawer = createWebComp("pnx-bottom-drawer", {
+					slot: "bottom",
+					_parent: this,
+					class: this._initParams.getParentPostInit().picture ? undefined: "pnx-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"); }
+				});
 			}
-			
-			this.grid.appendChild(createWebComp("pnx-widget-share", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
-			
-			this.legend = createWebComp("pnx-widget-legend", {
-				slot: this.isWidthSmall() ? "top" : "top-left",
-				_parent: this,
-				focus: this._initParams.getParentPostInit().focus,
-				picture: this._initParams.getParentPostInit().picture,
-			});
-			this.grid.appendChild(this.legend);
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: this.isHeightSmall() ? "md": "xl",
-			}));
 		}
 	}
 
@@ -323,7 +338,14 @@ export default class PhotoViewer extends Basic {
 					n._parent = this;
 					n._t = this._t;
 				}
-				this.grid.appendChild(n);
+				// 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);
+				}
 			}
 		}
 	}
@@ -357,14 +379,11 @@ export default class PhotoViewer extends Basic {
 	_showReportForm() {
 		if(!this.psv.getPictureMetadata()) { throw new Error("No picture currently selected"); }
 		this.setPopup(true, [createWebComp("pnx-report-form", {_parent: this})]);
-		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
 	}
 
 	/** @private */
-	_showPictureMetadata() {
-		if(!this.psv.getPictureMetadata()) { throw new Error("No picture currently selected"); }
-		this.setPopup(true, [createWebComp("pnx-picture-metadata", {_parent: this})]);
-		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
+	_showShareOptions() {
+		this.setPopup(true, [createWebComp("pnx-share-menu", {_parent: this})]);
 	}
 
 	/**

package/src/components/core/Viewer.css

@@ -39,17 +39,18 @@ pnx-viewer pnx-cornered-grid::part(corner-bottom-right) {
 pnx-viewer pnx-mini {
 	box-sizing: border-box;
 	aspect-ratio: 1/1;
-	width: 250px;
-	height: 250px;
+	min-width: 250px;
+	min-height: 250px;
 	position: relative;
 	display: block;
 	z-index: 120;
 }
 
-@media screen and (max-width: 576px) {
+@media screen and ((max-height: 400px) or (max-width: 576px)) {
 	pnx-viewer pnx-mini {
-		width: unset;
-		height: unset;
+		min-width: unset;
+		min-height: unset;
+		margin-bottom: 40px;
 	}
 }
 
@@ -65,32 +66,6 @@ pnx-viewer:not(pnx-viewer[focus="pic"]) .pnx-only-psv {
 }
 
 /* Override legend positioning */
-@media screen and (max-width: 576px) {
-	pnx-viewer[focus="map"] pnx-widget-legend {
-		display: none;
-	}
-
-	pnx-viewer[focus="pic"] pnx-widget-legend {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-	}
-
-	pnx-viewer[focus="pic"] pnx-widget-legend::part(panel) {
-		border-radius: 0;
-		border-top: none;
-		border-left: none;
-		border-right: none;
-		width: unset;
-		max-width: unset;
-	}
-
-	pnx-viewer[focus="pic"] pnx-widget-player {
-		margin-top: 60px;
-	}
-}
-
 @media screen and (min-width: 576px) {
 	pnx-viewer pnx-widget-legend {
 		position: absolute;

package/src/components/core/Viewer.js

@@ -49,6 +49,7 @@ const MAP_MOVE_DELTA = 100;
  * @slot `bottom-left` The bottom-left corner
  * @slot `bottom` The bottom middle corner
  * @slot `bottom-right` The bottom-right corner
+ * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
  * @example
  * ```html
  * <!-- Basic example -->
@@ -63,6 +64,7 @@ const MAP_MOVE_DELTA = 100;
  *   style="width: 300px; height: 250px"
  * >
  *   <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-viewer>
  * 
  * <!-- With only your custom widgets -->
@@ -145,15 +147,31 @@ export default class Viewer extends PhotoViewer {
 				class: this.isWidthSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",
 				_parent: this
 			}));
-			this.grid.appendChild(createWebComp("pnx-widget-share", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
 			
-			this.legend = createWebComp("pnx-widget-legend", {
-				slot: this.isWidthSmall() ? "top" : "top-left",
-				_parent: this,
-				focus: this._initParams.getParentPostInit().focus,
-				picture: this._initParams.getParentPostInit().picture,
-			});
-			this.grid.appendChild(this.legend);
+			if(!this.isWidthSmall()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: this.isWidthSmall() ? "top" : "top-left",
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this.grid.appendChild(this.legend);
+			}
+			else {
+				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
+				this.bottomDrawer = createWebComp("pnx-bottom-drawer", {
+					slot: "bottom",
+					_parent: this,
+					class: this._initParams.getParentPostInit().picture ? undefined: "pnx-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"); }
+				});
+			}
+
 			this.grid.appendChild(createWebComp("pnx-widget-player", {
 				slot: "top",
 				_parent: this,
@@ -196,7 +214,10 @@ export default class Viewer extends PhotoViewer {
 			this._handleKeyboardManagement();
 			
 			if(myPostInitParams.picture) {
-				this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
+				this.psv.addEventListener("picture-loaded", () => {
+					alterViewerState(this, myPostInitParams); // Do it again for forcing focus
+					this.loader.dismiss();
+				}, {once: true});
 			}
 			else {
 				this.loader.dismiss();
@@ -236,8 +257,16 @@ export default class Viewer extends PhotoViewer {
 			if(isNullId(old) && !isNullId(value)) {
 				this.mini.removeAttribute("collapsed");
 			}
-			if(isNullId(value) && this.map && this.isMapWide()) {
-				this.mini.classList.add("pnx-hidden");
+
+			// Unselect -> show map wide instead
+			if(isNullId(value)) {
+				if(this.map && this.isMapWide()) { this.mini.classList.add("pnx-hidden"); }
+				else if(this.map && !this.isMapWide()) { this._setFocus("map"); }
+			}
+			// Select after none selected -> show pic wide
+			else {
+				this.mini.classList.remove("pnx-hidden");
+				if(isNullId(old)) { this._setFocus("pic"); }
 			}
 		}
 		

package/src/components/layout/BottomDrawer.js

@@ -0,0 +1,204 @@
+import { LitElement, html, css } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+
+const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1 };
+const OPENNESS_Y_PCT_RANGE = { "opened": [0, 0.4], "half-opened": [0.4, 0.8], "closed": [0.8, 1] };
+
+/**
+ * BottomDrawer layout offers a mobile-like drawer menu, coming from bottom of the screen.
+ * @class Panoramax.components.layout.BottomDrawer
+ * @element pnx-bottom-drawer
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `default` The drawer content
+ * @example
+ * ```html
+ * <pnx-bottom-drawer openness="opened">
+ *   <p>My drawer content</p>
+ * </pnx-bottom-drawer>
+ * ```
+ */
+export default class BottomDrawer extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			z-index: 130;
+			pointer-events: none;
+		}
+
+		.drawer {
+			background: var(--widget-bg);
+			border-top-left-radius: 16px;
+			border-top-right-radius: 16px;
+			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
+			display: flex;
+			flex-direction: column;
+			transition: transform 0.3s ease;
+			will-change: transform;
+			touch-action: none;
+			pointer-events: auto;
+		}
+
+		.drawer.dragging { transition: none; }
+		.drawer.closed { transform: translateY(calc(100% - 30px)); }
+		.drawer.half-opened { transform: translateY(70%); }
+		.drawer.half-opened .content { overflow-y: hidden; }
+		.drawer.opened { transform: translateY(0%); }
+
+		.handle {
+			height: 30px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: grab;
+			touch-action: none;
+			pointer-events: auto;
+		}
+
+		.handle-bar {
+			width: 40px;
+			height: 5px;
+			background: var(--grey-pale);
+			border-radius: 3px;
+		}
+
+		.content {
+			overflow: auto;
+			flex: 1;
+		}
+	`;
+
+	/**
+	 * 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)
+	 */
+	static properties = {
+		_fingerY: {state: true},
+		_deltaFingerY: {state: true},
+		_drawerY: {state: true},
+		_isDragging: {state: true},
+		_drawerHeight: {state: true},
+		openness: {type: String, reflect: true},
+	};
+
+	constructor() {
+		super();
+		this._isDragging = false;
+		this.openness = "half-opened";
+	}
+
+	/** @private */
+	firstUpdated() {
+		super.firstUpdated();
+		this._boundTouchMove = this._onTouchMove.bind(this);
+		this._boundTouchEnd = this._onTouchEnd.bind(this);
+
+		this._drawerHeight = window.innerHeight - 30;
+		const drawer = this.shadowRoot?.querySelector(".drawer");
+		if (!drawer) { return; }
+		drawer.style.height = `${this._drawerHeight}px`;
+		drawer.style.maxHeight = `${this._drawerHeight}px`;
+	}
+
+	/** @private */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._cleanupTouchListeners();
+	}
+
+	/** @private */
+	_onHandleClick() {
+		if(this.openness === "opened" || this.openness === "closed") { this.openness = "half-opened"; }
+		else if(this.openness === "half-opened") { this.openness = "opened"; }
+	}
+
+	/** @private */
+	_onTouchStart(e) {
+		this._isDragging = true;
+		this._startFingerY = e.touches[0].clientY;
+		this._deltaFingerY = 0;
+		this._drawerY = this._drawerHeight * OPENNESS_Y_PCT[this.openness];
+		window.addEventListener("touchmove", this._boundTouchMove, { passive: true });
+		window.addEventListener("touchend", this._boundTouchEnd);
+		window.addEventListener("touchcancel", this._boundTouchEnd);
+	}
+
+	/** @private */
+	_onTouchMove(e) {
+		if (!this._isDragging) return;
+		this._deltaFingerY = e.touches[0].clientY - this._startFingerY;
+		this._updateDrawerTransform(this._drawerY + this._deltaFingerY);
+	}
+
+	/** @private */
+	_onTouchEnd() {
+		if (!this._isDragging) return;
+		this._isDragging = false;
+		this._updateDrawerTransform(this._drawerY + this._deltaFingerY, true);
+
+		this._cleanupTouchListeners();
+		this._startFingerY = null;
+		this._deltaFingerY = null;
+	}
+
+	/** @private */
+	_cleanupTouchListeners() {
+		window.removeEventListener("touchmove", this._boundTouchMove);
+		window.removeEventListener("touchend", this._boundTouchEnd);
+		window.removeEventListener("touchcancel", this._boundTouchCancel);
+	}
+
+	/** @private */
+	_updateDrawerTransform(y, snap = false) {
+		const drawer = this.shadowRoot?.querySelector(".drawer");
+		if (!drawer) { return; }
+
+		y = Math.max(0, Math.min(y, this._drawerHeight - 30));
+
+		// Snap to nearest static position
+		if(snap) {
+			const pct = y / (this._drawerHeight - 30);
+			if(pct > OPENNESS_Y_PCT_RANGE.opened[0] && pct <= OPENNESS_Y_PCT_RANGE.opened[1]) { this.openness = "opened"; }
+			if(pct > OPENNESS_Y_PCT_RANGE["half-opened"][0] && pct <= OPENNESS_Y_PCT_RANGE["half-opened"][1]) { this.openness = "half-opened"; }
+			if(pct > OPENNESS_Y_PCT_RANGE.closed[0] && pct <= OPENNESS_Y_PCT_RANGE.closed[1]) { this.openness = "closed"; }
+			this._drawerY = null;
+			drawer.style.transform = null;
+		}
+		// Live drag
+		else {
+			drawer.style.transform = `translateY(${y}px)`;
+		}
+	}
+
+	/** @private */
+	render() {
+		const classes = {
+			"drawer": true,
+			[this.openness]: true,
+			"dragging": this._isDragging,
+		};
+
+		return html`
+			<div
+				class=${classMap(classes)}
+				@touchstart="${this._onTouchStart}"
+				@touchmove="${this._onTouchMove}"
+				@touchend="${this._onTouchEnd}"
+			>
+				<div class="handle" @click=${this._onHandleClick}>
+					<div class="handle-bar"></div>
+				</div>
+				<div class="content">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-bottom-drawer", BottomDrawer);

package/src/components/layout/CorneredGrid.js

@@ -50,11 +50,14 @@ export default class CorneredGrid extends LitElement {
 			pointer-events: none;
 		}
 
+		.row.bottom { align-items: flex-end; }
+
 		.corner {
 			position: relative;
 			flex: 1 1 33%;
 			display: flex;
 			gap: 10px;
+			height: min-content;
 		}
 
 		.corner slot {

package/src/components/layout/Tabs.js

@@ -0,0 +1,133 @@
+import { LitElement, html, css } from "lit";
+
+/**
+ * Tabs offers a nice paged content rendering based on tabs buttons.
+ * The list of tab names are passed through `title` slots, and content using `content` slots.
+ * Note that tab names and contents should respect a coherent order.
+ * @class Panoramax.components.layout.Tabs
+ * @element pnx-tabs
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `title` A single tab name
+ * @slot `content` A single tab content
+ * @example
+ * ```html
+ * <pnx-tabs>
+ *   <h4 slot="title">Tab 1</h4>
+ *   <div slot="content">Tab 1 content</div>
+ * 
+ *   <h4 slot="title">Tab 2</h4>
+ *   <div slot="content">Tab 2 content</div>
+ * 
+ *   <h4 slot="title">Tab 3</h4>
+ *   <div slot="content">Tab 3 content</div>
+ * </pnx-tabs>
+ * ```
+ */
+export default class Tabs extends LitElement {
+	/** @private */
+	static styles = css`
+		/* Tabs */
+		nav {
+			display: flex;
+			gap: 5px;
+			align-items: stretch;
+			overflow-x: auto;
+			touch-action: pan-x;
+		}
+		nav ::slotted(*) {
+			color: var(--grey-dark);
+			border-bottom: 2px solid rgba(0,0,0,0);
+			cursor: pointer;
+			transition: all 0.1s;
+			flex: 1;
+		}
+		nav ::slotted(*:hover:not(.active)) { background-color: var(--blue-pale); }
+		nav ::slotted(*.active) {
+			color: var(--blue-dark);
+			border-bottom: 2px solid var(--blue-dark);
+		}
+
+		/* Content */
+		.contents ::slotted(div) { display: none !important; }
+		.contents ::slotted(.active) { display: block !important; }
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.layout.Tabs#
+	 * @type {Object}
+	 * @property {string} [activeTabIndex=0] The selected tab index
+	 */
+	static properties = {
+		activeTabIndex: {type: Number},
+	};
+
+	constructor() {
+		super();
+		this.activeTabIndex = 0;
+	}
+
+	/** @private */
+	_getTabs() {
+		return this.shadowRoot.querySelector("slot[name='title']").assignedNodes();
+	}
+
+	/** @private */
+	_getContents() {
+		return this.shadowRoot.querySelector("slot[name='content']").assignedNodes();
+	}
+
+	/** @private */
+	_changeTab(tabTarget, tabIndex) {
+		const tabs = this._getTabs();
+		const contents = this._getContents();
+
+		// Check if tab change is possible
+		if(tabTarget !== undefined || tabIndex !== undefined) {
+			// For tab target, check if a nav tab has really been clicked
+			if(tabTarget) { tabIndex = tabs.findIndex(tab => (
+				tab === tabTarget || tab === tabTarget.parentNode
+			)); }
+
+			if(!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < tabs.length) {
+				tabs.forEach((tab, index) => {
+					if (index == tabIndex) {
+						this.activeTabIndex = index;
+						contents[index].classList.add("active");
+						tab.classList.add("active");
+					} else {
+						contents[index].classList.remove("active");
+						tab.classList.remove("active");
+					}
+				});
+			}
+		}
+		
+	}
+
+	/** @private */
+	_handleTabClick(event) {
+		this._changeTab(event.target);
+	}
+
+	/** @private */
+	updated(changedProperties) {
+		if(changedProperties.has("activeTabIndex")) {
+			this._changeTab(undefined, this.activeTabIndex);
+		}
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<nav @click="${this._handleTabClick}">
+				<slot name="title"></slot>
+			</nav>
+			<div class="contents">
+				<slot name="content"></slot>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-tabs", Tabs);

package/src/components/layout/index.js

@@ -3,5 +3,7 @@
  * @module Panoramax:components:layout
  */
 
+export {default as BottomDrawer} from "./BottomDrawer";
 export {default as CorneredGrid} from "./CorneredGrid";
 export {default as Mini} from "./Mini";
+export {default as Tabs} from "./Tabs";