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

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

@@ -1,190 +0,0 @@
-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

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

@@ -1,143 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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);