@panoramax/web-viewer 3.2.3 → 4.0.0-develop-9f9cf858

package/src/components/layout/BottomDrawer.js

@@ -0,0 +1,257 @@
+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 };
+
+/**
+ * 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;
+			touch-action: 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: auto;
+			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: pointer;
+		}
+
+		.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._getDrawer();
+		if (!drawer) { return; }
+		drawer.style.height = `${this._drawerHeight}px`;
+		drawer.style.maxHeight = `${this._drawerHeight}px`;
+
+		this._parent?.onceReady().then(() => {
+			this._parent.map?.addEventListener("click", () => this.openness = "closed");
+			this._parent.psv?.addEventListener("click", () => this.openness = "closed");
+		});
+	}
+
+	/** @private */
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+
+		if(name === "openness") {
+			// If not fully opened, force content scroll back to top
+			if(value !== "opened") {
+				const content = this.shadowRoot.querySelector(".content");
+				if(content) { content.scrollTop = 0; }
+			}
+
+			// Remove hand-defined transform
+			const drawer = this._getDrawer();
+			if (drawer) { drawer.style.transform = null; }
+		}
+	}
+
+	/** @private */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._cleanupTouchListeners();
+	}
+
+	/** @private */
+	_getDrawer() {
+		return this.shadowRoot?.querySelector(".drawer");
+	}
+
+	/** @private */
+	_onHandleClick() {
+		if(this.openness === "opened") { this.openness = "closed"; }
+		else if(this.openness === "half-opened") { this.openness = "opened"; }
+		else if(this.openness === "closed") { this.openness = "half-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;
+
+		// 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);	
+			return;
+		}
+
+		this._deltaFingerY = e.touches[0].clientY - this._startFingerY;
+		this._updateDrawerTransform(this._drawerY + this._deltaFingerY);
+	}
+
+	/** @private */
+	_onTouchEnd(e) {
+		// Touchend is also called when "clicking" on mobile
+		if ((!this._isDragging || Math.abs(this._deltaFingerY) < 30) && !e.target.closest(".handle")) { return; }
+		e.preventDefault();
+
+		this._isDragging = false;
+
+		if(this._deltaFingerY === 0 && this.openness === "closed") {
+			this.openness = "half-opened";
+		}
+		else {
+			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._getDrawer();
+		if (!drawer) { return; }
+
+		y = Math.max(0, Math.min(y, this._drawerHeight - 30));
+
+		// Snap to nearest static position
+		if(snap) {
+			// Gesture goes up
+			if(this._deltaFingerY < 0) {
+				if(this.openness === "closed") {
+					// How much it goes up ?
+					if(Math.abs(this._deltaFingerY) > this._drawerHeight * (1-OPENNESS_Y_PCT["half-opened"])) {
+						this.openness = "opened";
+					}
+					else { this.openness = "half-opened"; }
+				}
+				else { this.openness = "opened"; }
+			}
+			// Gesture goes down
+			else { this.openness = "closed"; }
+
+			this._drawerY = null;
+			y = Math.max(0, Math.min(OPENNESS_Y_PCT[this.openness] * this._drawerHeight, this._drawerHeight - 30));
+		}
+
+		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

@@ -0,0 +1,112 @@
+import { LitElement, html, css } from "lit";
+
+/**
+ * CorneredGrid layout offers a convenient way to display overlay widgets on top of a background component.
+ * This is useful for showing buttons in corners over a map or picture display.
+ * Grid layout is organised through many slots (background and corners) : two rows (top, bottom) and three columns (right, middle, left).
+ * @class Panoramax.components.layout.CorneredGrid
+ * @element pnx-cornered-grid
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `bg` The full size background component
+ * @slot `top-left` The top-left corner
+ * @slot `top` The top middle corner
+ * @slot `top-right` The top-right corner
+ * @slot `bottom-left` The bottom-left corner
+ * @slot `bottom` The bottom middle corner
+ * @slot `bottom-right` The bottom-right corner
+ * @example
+ * ```html
+ * <pnx-cornered-grid>
+ *   <pnx-map slot="bg" />
+ *   <pnx-button slot="top-left" />
+ *   <pnx-button slot="top-left" />
+ *   <pnx-legend slot="bottom" />
+ * </pnx-cornered-grid>
+ * ```
+ */
+export default class CorneredGrid extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			gap: 5px;
+			flex-wrap: no-wrap;
+		}
+
+		.bg {
+			position: absolute;
+			inset: 0;
+			z-index: 0;
+		}
+
+		.row {
+			display: flex;
+			flex-direction: row;
+			flex: 1 1 50%;
+			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 {
+			pointer-events: auto;
+			position: relative;
+			z-index: 120;
+		}
+
+		.row.bottom .corner:not(.middle) { flex-direction: column; }
+		.row.bottom .corner.left { flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; }
+		.row.bottom .corner.middle { justify-content: center; align-items: flex-end; }
+		.row.bottom .corner.right { justify-content: flex-end; align-items: flex-end; }
+
+		.row.top .corner { flex-direction: row; }
+		.row.top .corner.left { justify-content: flex-start; align-items: flex-start; }
+		.row.top .corner.middle { justify-content: center; }
+		.row.top .corner.right { justify-content: flex-end; align-items: flex-start; }
+	`;
+
+	/** @private */
+	render() {
+		return html`
+			<div class="bg">
+				<slot name="bg"></slot>
+			</div>
+			<div class="row top">
+				<div class="corner left" part="corner-top-left">
+					<slot name="top-left"></slot>
+				</div>
+				<div class="corner middle" part="corner-top">
+					<slot name="top"></slot>
+				</div>
+				<div class="corner right" part="corner-top-right">
+					<slot name="top-right"></slot>
+				</div>
+			</div>
+			<div class="row bottom">
+				<div class="corner left" part="corner-bottom-left">
+					<slot name="bottom-left"></slot>
+				</div>
+				<div class="corner middle" part="corner-bottom">
+					<slot name="bottom"></slot>
+				</div>
+				<div class="corner right" part="corner-bottom-right">
+					<slot name="bottom-right"></slot>
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-cornered-grid", CorneredGrid);

package/src/components/layout/Mini.js

@@ -0,0 +1,117 @@
+import { LitElement, html, css } from "lit";
+import SwitchBig from "../../img/switch_big.svg";
+import SwitchMini from "../../img/switch_mini.svg";
+
+/**
+ * Mini layout allows to show a reduced or collapsed component in a corner of a main component.
+ * For example, show a reduced map on top of a photo display.
+ * @class Panoramax.components.layout.Mini
+ * @element pnx-mini
+ * @slot `default` The component to display.
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.layout.Mini#expand
+ * @example
+ * ```html
+ * <pnx-mini icon=${fa(faMap)} ._parent=${viewer}>
+ *   <pnx-map />
+ * </pnx-mini>
+ * ```
+ */
+export default class Mini extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			display: block;
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+		}
+
+		slot {
+			z-index: 120;
+			pointer-events: auto;
+		}
+
+		pnx-button {
+			z-index: 121;
+			position: absolute;
+			pointer-events: auto;
+		}
+
+		pnx-button img {
+			height: 20px;
+		}
+
+		pnx-button:not([size="xxl"])::part(btn) {
+			border-top-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.layout.Mini#
+	 * @type {Object}
+	 * @property {string} [icon] The icon to use in collapsed button.
+	 * @property {boolean} [collapsed=false] Collapsed displays only a simple button.
+	 */
+	static properties = {
+		icon: {type: String},
+		collapsed: {type: Boolean, reflect: true},
+	};
+
+	constructor() {
+		super();
+
+		this.collapsed = false;
+		this.icon = null;
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall() || this._parent?.isHeightSmall();
+
+		/**
+		 * Event when user ask for component expand
+		 * @event Panoramax.components.layout.Mini#expand
+		 * @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
+				kind="flat"
+				size="xxl"
+				style="bottom: 0"
+				@click=${click}
+			>${this.icon}</pnx-button>`;
+		}
+		else {
+			return html`
+				<slot></slot>
+
+				<pnx-button
+					kind="superflat"
+					title=${this._parent?._t.pnx.expand_info}
+					style="top: 0; right: 0"
+					@click=${onExpand}
+				>
+					<img src=${SwitchBig} alt="" />
+					${this._parent?._t.pnx.expand}
+				</pnx-button>
+
+				<pnx-button
+					kind="flat"
+					title=${this._parent?._t.pnx.minimize}
+					style="bottom: 0; left: 0"
+					@click=${() => this.collapsed = true}
+				>
+					<img src=${SwitchMini} alt="" />
+				</pnx-button>
+			`;
+		}
+	}
+}
+
+customElements.define("pnx-mini", Mini);

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, reflect: true},
+	};
+
+	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

@@ -0,0 +1,9 @@
+/**
+ * General layout components
+ * @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";