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

package/build/components/ui/widgets/Legend.js

@@ -0,0 +1,190 @@
+import { LitElement, css, html, nothing } from "lit";
+import { panel } from "../../styles.js";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { classMap } from "lit/directives/class-map.js";
+import { PanoramaxWebsiteURL } from "../../../utils/services.js";
+import { svgToImg } from "../../../utils/utils.js";
+const PanoramaxImg = await fetch(new URL("../../../img/panoramax.svg", import.meta.url).href).then(res => res.text());
+
+/**
+ * Legend widget, handling switch between map and photo components.
+ * Also displays a default "About Panoramax" message.
+ * @class Panoramax.components.ui.widgets.Legend
+ * @element pnx-widget-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
+ * @example
+ * ```html
+ * <!-- Default legend -->
+ * <pnx-widget-legend
+ *   _parent=${viewer}
+ *   focus="map"
+ *   picture="PICTURE-ID-IF-ANY"
+ * ></pnx-widget-legend>
+ *
+ * <!-- With custom editor links -->
+ * <pnx-widget-legend
+ *   _parent=${viewer}
+ *   focus="map"
+ *   picture="PICTURE-ID-IF-ANY"
+ * >
+ *   <div slot="editors"><a href="http://my.own.tool">Edit in my own tool</a></div>
+ * </pnx-widget-legend>
+ *
+ * <!-- Lighter version -->
+ * <pnx-widget-legend
+ *   _parent=${viewer}
+ *   focus="pic"
+ *   picture="PICTURE-ID-IF-ANY"
+ *   light
+ * ></pnx-widget-legend>
+ * ```
+ */
+export default class Legend extends LitElement {
+	/** @private */
+	static styles = [panel, css`
+		:host {
+			pointer-events: none;
+		}
+		.pnx-panel[part="panel"] {
+			border-radius: 10px;
+			position: relative;
+			max-width: 450px;
+			z-index: 121; /* To appear above mini component */
+			min-width: unset;
+			pointer-events: auto;
+		}
+		.pnx-panel[part="panel"].pnx-padded {
+			padding: 10px;
+			width: 250px;
+		}
+		.presentation {
+			font-size: 0.85em;
+			line-height: 1em;
+			display: flex;
+			gap: 5px;
+			align-items: center;
+		}
+		.logo {
+			width: 45px;
+		}
+		pnx-map-legend {
+			display: block;
+			margin-top: 5px;
+		}
+
+		/* Lighter/smaller version */
+		.pnx-panel[part="panel"].pnx-legend-light {
+			display: flex;
+			gap: 3px;
+			padding: 3px 8px 3px 3px;
+			width: unset;
+			min-width: unset;
+			align-items: center;
+			font-size: 10px;
+			margin-right: -10px;
+			margin-bottom: -10px;
+			border-radius: 0;
+			border-top-left-radius: 5px;
+			border-right: none;
+  			border-bottom: none;
+		}
+		.pnx-legend-light a,
+		.pnx-legend-light .presentation {
+			font-size: 10px;
+		}
+		.pnx-legend-light .logo {
+			width: 15px;
+		}
+
+		.pnx-legend-light pnx-map-legend {
+			width: max-content;
+			margin-top: unset;
+			font-size: 10px;
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.Legend#
+	 * @type {Object}
+	 * @property {string} [focus] The focused main component (map, pic)
+	 * @property {string} [picture] The picture ID
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
+	static properties = {
+		focus: {type: String},
+		picture: {type: String},
+		light: {type: Boolean},
+	};
+
+	constructor() {
+		super();
+		this.light = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this.requestUpdate());
+	}
+
+	render() {
+		const classes = {
+			"pnx-panel": true,
+			"pnx-padded": this.focus == "map",
+			"pnx-legend-light": this.light,
+		};
+
+		const logo = svgToImg(PanoramaxImg);
+		logo.classList.add("logo");
+
+		return html`<div class=${classMap(classes)} part="panel">
+			<div
+				class="presentation"
+				style=${!this.light && this.focus != "map" && this.picture ? "display: none": ""}
+			>
+				${logo}
+
+				${this.light ? html`
+					&copy; <a
+						href=${PanoramaxWebsiteURL()}
+						title=${this._parent?._t.map.more_panoramax}
+						target="_blank"
+					>${this._parent?._t.pnx.panoramax}</a> |
+				` : html`
+					<div>
+						${this._parent?._t.pnx.whats_panoramax}
+						<pnx-link-button
+							title=${this._parent?._t.map.more_panoramax}
+							kind="superinline"
+							href=${PanoramaxWebsiteURL()}
+							target="_blank"
+							size="sm"
+						>
+							${fa(faInfoCircle)}
+						</pnx-link-button>
+					</div>
+				`}
+			</div>
+			<pnx-picture-legend
+				._parent=${this._parent}
+				style=${this.focus == "map" ? "display: none": ""}
+				collapsable
+				light=${this.light || nothing}
+			>
+				<slot slot="editors" name="editors">
+					<pnx-widget-osmeditors ._parent=${this._parent} />
+				</slot>
+			</pnx-picture-legend>
+			<pnx-map-legend
+				._parent=${this._parent}
+				style=${this.focus != "map" ? "display: none": ""}
+				light=${this.light || nothing}
+			></pnx-map-legend>
+		</div>`;
+	}
+}
+
+customElements.define("pnx-widget-legend", Legend);

package/build/components/ui/widgets/LevelSelect.css

@@ -0,0 +1,51 @@
+/*
+ * Common rules
+ */
+
+/* Long level numbers */
+pnx-level-select pnx-button.pnx-level-long::part(btn) {
+	font-size: 0.6em;
+}
+
+
+/*
+ * Shrink selector
+ */
+
+pnx-level-select pnx-button {
+	min-height: fit-content;
+	font-family: var(--font-family);
+	font-size: 0.9em;
+}
+
+pnx-level-select pnx-button.pnx-level-minimal::part(btn) {
+	padding: 2px 5px;
+}
+
+
+/*
+ * Expanded selector
+ */
+
+/* Selected level */
+pnx-level-select pnx-button .pnx-level-active {
+	background-color: var(--widget-bg-active);
+	border-radius: 13px;
+	color: var(--widget-font-active);
+	height: 26px;
+	line-height: 26px;
+	width: 26px;
+}
+
+/* Shrink button */
+pnx-level-select pnx-button.pnx-level-shrink::part(btn) {
+	border-top: 1px solid #cfcfcf !important;
+}
+
+/* Long list of levels scrolling */
+pnx-level-select .pnx-level-scroller {
+	overflow-y: auto;
+	overflow-x: hidden;
+	max-height: 150px;
+	scroll-behavior: smooth;
+}

package/build/components/ui/widgets/LevelSelect.js

@@ -0,0 +1,143 @@
+import { LitElement, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { DISABLED_LEVEL } from "../../../utils/indoor.js";
+import {
+	faCaretDown, faCaretUp, faTimes
+} from "@fortawesome/free-solid-svg-icons";
+import LevelSelectStyles from "./LevelSelect.css" with { type: "css" };
+import ButtonGroupStyles from "../ButtonGroup.css" with { type: "css" };
+document.adoptedStyleSheets.push(LevelSelectStyles);
+document.adoptedStyleSheets.push(ButtonGroupStyles);
+
+/**
+ * Widget for indoor level selecting over map.
+ * It relies on indoor= MapLibre plugin to work, so this should be enabled before calling this widget.
+ * @class Panoramax.components.ui.widgets.LevelSelect
+ * @element pnx-level-select
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-level-select _parent=${viewer} />
+ * ```
+ */
+export default class LevelSelect extends LitElement {
+	/** @private */
+	static properties = {
+		_expanded: {state: true},
+	};
+
+	/** @private */
+	createRenderRoot() {
+		return this;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this)
+			.then(this._parent.onceMapReady?.())
+			.then(() => {
+				this._parent.map.indoorEqual.on("levelchange", () => this.requestUpdate());
+				this._parent.map.indoorEqual.on("levelschange", () => this.requestUpdate());
+			});
+	}
+
+	/** @private */
+	updated(changedProps) {
+		super.updated(changedProps);
+
+		// Make level list scroll to see currently selected level
+		if(this._expanded) {
+			if(changedProps?.has("_expanded")) {
+				this._scrollToCurrentLevel(false, "instant");
+			} else {
+				this._scrollToCurrentLevel(true, "smooth");
+			}
+		}
+	}
+
+	/** @private */
+	_scrollToCurrentLevel(immediate, behavior) {
+		const lvlSelected = this.renderRoot.querySelector(".pnx-level-active");
+		setTimeout(
+			() => lvlSelected?.scrollIntoView({behavior, block: "center", container: "nearest"}),
+			immediate ? 0 : 50
+		);
+	}
+
+	/** @private */
+	render() {
+		const ieq = this._parent.map.indoorEqual;
+
+		// Disabled level = hide
+		if(ieq.level === DISABLED_LEVEL || ieq.levels.length === 0) { return nothing; }
+
+		// Find upper/lower level
+		// Note that levels are reverse sorted
+		const lvlId = ieq.levels.findIndex(l => l == ieq.level);
+		const lvlUpId = lvlId > 0 ? lvlId - 1 : null;
+		const lvlUp = lvlUpId !== null ? ieq.levels[lvlUpId] : null;
+		const lvlDownId = lvlId < ieq.levels.length - 1 ? lvlId + 1 : null;
+		const lvlDown = lvlDownId !== null ? ieq.levels[lvlDownId] : null;
+
+		return html`
+			<pnx-button-group
+				dir="column"
+				size="xl"
+				class="pnx-print-hidden"
+			>
+				<pnx-button
+					kind="superflat"
+					@click=${() => ieq.setLevel(lvlUp)}
+					.disabled=${lvlUp === null}
+					class="pnx-level-minimal"
+					title=${this._parent?._t?.pnx.indoor_selector_levelup}
+				>${fa(faCaretUp)}</pnx-button>
+
+				${this._expanded ? html`
+					<pnx-button-group
+						dir="column"
+						size="xl"
+						class="pnx-print-hidden pnx-level-scroller"
+					>
+						${ieq.levels.map(l => html`
+							<pnx-button
+								kind="superflat"
+								@click=${() => ieq.setLevel(l)}
+								class=${l.length > 2 ? "pnx-level-long" : null}
+							>
+								${ieq.level == l ? html`<span class="pnx-level-active">${l}</span>`: l}
+							</pnx-button>
+						`)}
+					</pnx-button-group>
+				` : html`
+					<pnx-button
+						kind="superflat"
+						class="pnx-level-minimal"
+						title=${this._parent?._t?.pnx.indoor_selector_expand}
+						@click=${ieq.levels.length > 1 ? () => this._expanded = true : null}
+					>${ieq.level}</pnx-button>
+				`}
+
+				<pnx-button
+					kind="superflat"
+					@click=${() => ieq.setLevel(lvlDown)}
+					.disabled=${lvlDown === null}
+					class="pnx-level-minimal"
+					title=${this._parent?._t?.pnx.indoor_selector_leveldown}
+				>${fa(faCaretDown)}</pnx-button>
+
+				${this._expanded ? html`
+					<pnx-button
+						kind="flat"
+						class="pnx-level-shrink"
+						@click=${() => this._expanded = false}
+						title=${this._parent?._t?.pnx.indoor_selector_shrink}
+					>${fa(faTimes)}</pnx-button>
+				` : nothing}
+			</pnx-button-group>
+		`;
+	}
+}
+
+customElements.define("pnx-level-select", LevelSelect);

package/build/components/ui/widgets/MapFiltersButton.js

@@ -0,0 +1,114 @@
+import { LitElement, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faChevronDown, faSliders, faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { activeIcon } from "../../styles.js";
+
+/**
+ * Collapsible button showing off map filters menus.
+ * @class Panoramax.components.ui.widgets.MapFiltersButton
+ * @element pnx-widget-mapfilters
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-mapfilters user-search="" _parent=${viewer} />
+ * ```
+ */
+export default class MapFiltersButton extends LitElement {
+	/** @private */
+	static styles = [activeIcon];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.MapFiltersButton#
+	 * @type {Object}
+	 * @property {boolean} [user-search=false] Should user search filter show up ?
+	 * @property {boolean} [quality-score=false] Should quality score filter show up ?
+	 * @property {boolean} [no-date=false] Should date filters be hidden ?
+	 * @property {boolean} [no-picture-type=false] Should picture type filter be hidden ?
+	 * @property {boolean} [no-gps=false] Should GPS precision filter be hidden ?
+	 * @property {boolean} [no-source=false] Should pictures source (world, instance) filter be hidden ?
+	 */
+	static properties = {
+		"quality-score": {type: Boolean},	// Should be available in pnx-map-filters-menu as well
+		"user-search": {type: Boolean},		// Should be available in pnx-map-filters-menu as well
+		"no-date": {type: Boolean},			// Should be available in pnx-map-filters-menu as well
+		"no-picture-type": {type: Boolean},	// Should be available in pnx-map-filters-menu as well
+		"no-gps": {type: Boolean},			// Should be available in pnx-map-filters-menu as well
+		"no-source": {type: Boolean},		// Should be available in pnx-map-filters-menu as well
+		_active: {state: true},
+	};
+
+	constructor() {
+		super();
+
+		// Add them in render below as well
+		this["user-search"] = false;
+		this["quality-score"] = false;
+		this["no-date"] = false;
+		this["no-picture-type"] = false;
+		this["no-gps"] = false;
+		this["no-source"] = false;
+		this._active = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// Listen to user visibility changes to switch the filter active icon
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
+			this._active = this._isActive();
+			this._parent.mapStyleComposer.addEventListener("filters-changed", () => this._active = this._isActive());
+			this._parent.mapStyleComposer.addEventListener("panoramax-changed", () => this._active = this._isActive());
+		}));
+	}
+
+	/** @private */
+	_isActive() {
+		return Object
+			.entries(this._parent.mapStyleComposer.panoramaxFilters)
+			.filter(([k,v]) => k && v && !["featuresRestrictions", "theme"].includes(k)).length > 0
+			|| this._parent.mapStyleComposer.isPanoramaxEndpointSingleUser();
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall() || this._parent?.isWidthMedium();
+		const resetIcon = fa(faXmark, {styles: {"pointer-events": "auto"}});
+		resetIcon.addEventListener("click", e => {
+			e.stopPropagation();
+			this.shadowRoot.querySelector("pnx-map-filters-menu")._onReset();
+			this.shadowRoot.querySelector("#pnx-widget-filter")._opened = false;
+		});
+
+		return html`
+			<pnx-togglable-group
+				id="pnx-widget-filter"
+				padded="false"
+				class="pnx-only-map pnx-print-hidden"
+				._parent=${this._parent}
+			>
+				<pnx-button kind="flat" size="xl" slot="button">
+					${fa(faSliders)}
+					${this._active ? html`<span class="pnx-active-icon"></span>` : nothing}
+					${isSmall ? nothing : this._parent?._t.pnx.filters}
+					${isSmall ? nothing : (this._active ? resetIcon : fa(faChevronDown))}
+				</pnx-button>
+				<pnx-map-filters-menu
+					id="pnx-map-filters-menu"
+					._parent=${this._parent}
+					user-search=${this["user-search"]}
+					quality-score=${this["quality-score"]}
+					.no-date=${this["no-date"]}
+					.no-picture-type=${this["no-picture-type"]}
+					.no-gps=${this["no-gps"]}
+					.no-source=${this["no-source"]}
+				></pnx-map-filters-menu>
+			</pnx-togglable-group>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-mapfilters", MapFiltersButton);

package/build/components/ui/widgets/MapLayersButton.js

@@ -0,0 +1,79 @@
+import { LitElement, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faChevronDown, faLayerGroup, faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { activeIcon } from "../../styles.js";
+
+/**
+ * Collapsible button showing off map filters menus.
+ * @class Panoramax.components.ui.widgets.MapLayersButton
+ * @element pnx-widget-maplayers
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-maplayers _parent=${viewer} />
+ * ```
+ */
+export default class MapLayersButton extends LitElement {
+	/** @private */
+	static styles = [activeIcon];
+
+	/** @private */
+	static properties = {
+		_active: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._active = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const nullThemes = [undefined, null, "", "default"];
+
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
+			this._active = !nullThemes.includes(this._parent.mapStyleComposer.panoramaxTheme);
+			this._parent.mapStyleComposer.addEventListener("theme-changed", e => {
+				this._active = !nullThemes.includes(e.detail.theme);
+			});
+		}));
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall() || this._parent?.isWidthMedium();
+		const resetIcon = fa(faXmark, {styles: {"pointer-events": "auto"}});
+		resetIcon.addEventListener("click", e => {
+			e.stopPropagation();
+			const menu = this.shadowRoot.querySelector("pnx-map-layers-menu");
+			menu.shadowRoot.querySelector("#pnx-map-theme").value = "default";
+			menu._onThemeSelect({target: {value: "default"}});
+			this.shadowRoot.querySelector("#pnx-widget-map-layers")._opened = false;
+		});
+
+		return html`
+			<pnx-togglable-group
+				id="pnx-widget-map-layers"
+				class="pnx-print-hidden"
+				._parent=${this._parent}
+			>
+				<pnx-button kind="flat" size="xl" slot="button">
+					${fa(faLayerGroup)}
+					${this._active ? html`<span class="pnx-active-icon"></span>` : nothing}
+					${isSmall ? nothing : this._parent?._t.pnx.layers}
+					${isSmall ? nothing : (this._active ? resetIcon : fa(faChevronDown))}
+				</pnx-button>
+				<pnx-map-layers-menu
+					id="pnx-map-layers-menu"
+					._parent=${this._parent}
+				></pnx-map-layers-menu>
+			</pnx-togglable-group>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-maplayers", MapLayersButton);