@panoramax/web-viewer 5.0.0-develop-d26305dd → 5.0.0-develop-be5ba1a7

package/build/components/core/index.js

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-/**
- * 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

@@ -1,6 +0,0 @@
-// 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/build/components/layout/BottomDrawer.js

@@ -1,258 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { onceParentAvailable } from "../../utils/widgets.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`;
-
-		onceParentAvailable(this).then(() => 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/build/components/layout/CorneredGrid.js

@@ -1,143 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-
-/**
- * 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;
-			transition: margin 0.5s ease-in-out, opacity 0.5s ease-in-out;
-		}
-
-		.row.bottom { align-items: flex-end; }
-
-		.toggled { opacity: 0; }
-		.row.top.toggled { margin: -100% 0 200% 0; }
-		.row.bottom.toggled { margin: 200% 0 -100% 0; }
-		@media screen and (min-width: 576px) {
-			.row.top.toggled { margin: -50% 0 100% 0; }
-			.row.bottom.toggled { margin: 100% 0 -50% 0; }
-		}
-
-		.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 */
-	static properties = {
-		_hidden: {state: true},
-	};
-
-	constructor() {
-		super();
-		this._hidden = false;
-	}
-
-	/**
-	 * Make all overlay components go away smoothly (one-click "focus")
-	 * @param {boolean} [newState] True to make widgets visible, false to hide, undefined to invert
-	 * @returns {boolean} True if widgets are hidden
-	 */
-	toggleAway(newState) {
-		this._hidden = newState === null || newState === undefined ? !this._hidden : !newState;
-		return this._hidden;
-	}
-
-	/** @private */
-	render() {
-		this.renderRoot.host.className = this._hidden ? "toggled" : "";
-		return html`
-			<div class="bg">
-				<slot name="bg"></slot>
-			</div>
-			<div class=${classMap({row: true, top: true, toggled: this._hidden})}>
-				<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=${classMap({row: true, bottom: true, toggled: this._hidden})}>
-				<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/build/components/layout/Mini.js

@@ -1,121 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { svgToImg } from "../../utils/utils.js";
-const SwitchBigSVG = await fetch(new URL("../../img/switch_big.svg", import.meta.url).href).then(res => res.text());
-const SwitchMiniSVG = await fetch(new URL("../../img/switch_mini.svg", import.meta.url).href).then(res => res.text());
-
-const SwitchBig = svgToImg(SwitchBigSVG);
-const SwitchMini = svgToImg(SwitchMiniSVG);
-
-/**
- * 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?.isWidthMedium() || 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}
-				>
-					${SwitchBig}
-					${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}
-				>
-					${SwitchMini}
-				</pnx-button>
-			`;
-		}
-	}
-}
-
-customElements.define("pnx-mini", Mini);

package/build/components/layout/Tabs.js

@@ -1,140 +0,0 @@
-import { LitElement, css, html, nothing } 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;
-			position: sticky;
-			top: 0;
-			background: white;
-			z-index: 125;
-		}
-		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
-	 * @property {boolean} [hideNav=false] Hide nav
-	 */
-	static properties = {
-		activeTabIndex: {type: Number, reflect: true},
-		hideNav: {type: Boolean},
-	};
-
-	constructor() {
-		super();
-		this.activeTabIndex = 0;
-		this.hideNav = false;
-	}
-
-	/** @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`
-			${!this.hideNav ? html`<nav @click="${this._handleTabClick}">
-				<slot name="title" @slotchange=${() => this.activeTabIndex = 0}></slot>
-			</nav>` : nothing}
-			<div class="contents">
-				<slot name="content"></slot>
-			</div>
-		`;
-	}
-}
-
-customElements.define("pnx-tabs", Tabs);

package/build/components/layout/index.js

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