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

package/build/components/ui/Switch.js

@@ -1,139 +0,0 @@
-import { LitElement, css, html } from "lit";
-
-/**
- * Switch button, based on a native checkbox.
- * @class Panoramax.components.ui.Switch
- * @element pnx-switch
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @fires Panoramax.components.ui.Switch#change
- * @example
- * ```html
- * <pnx-switch
- *   checked="true"
- *   name="my-switch"
- *   @change=${doSomething}
- * >
- *   Label text
- * </pnx-switch>
- * ```
- */
-export default class Switch extends LitElement {
-	static styles = css`
-		.toggle {
-			cursor: pointer;
-			display: inline-block;
-		}
-
-		.toggle-switch {
-			display: inline-block;
-			background: #ccc;
-			border-radius: 11px;
-			width: 42px;
-			height: 22px;
-			position: relative;
-			vertical-align: middle;
-			transition: background 0.25s;
-		}
-		.toggle-switch:before, .toggle-switch:after {
-			content: "";
-		}
-		.toggle-switch:before {
-			display: block;
-			background: linear-gradient(to bottom, #fff 0%, #eee 100%);
-			border-radius: 50%;
-			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-			width: 16px;
-			height: 16px;
-			position: absolute;
-			top: 3px;
-			left: 3px;
-			transition: left 0.25s;
-		}
-		.toggle:hover .toggle-switch:before {
-			background: linear-gradient(to bottom, #fff 0%, #fff 100%);
-			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
-		}
-		.toggle-checkbox:checked + .toggle-switch {
-			background: var(--widget-bg-active);
-		}
-		.toggle-checkbox:disabled + .toggle-switch:before,
-		.toggle-checkbox:disabled:hover + .toggle-switch:before {
-			background: var(--grey-pale);
-			box-shadow: none;
-		}
-		.toggle-checkbox:disabled + .toggle-switch {
-			background: var(--grey);
-			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-		}
-		.toggle-checkbox:checked + .toggle-switch:before {
-			left: 23px;
-		}
-
-		.toggle-checkbox {
-			position: absolute;
-			visibility: hidden;
-		}
-
-		.toggle-label {
-			margin-left: 5px;
-			position: relative;
-			top: 2px;
-		}
-	`;
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.Switch#
-	 * @type {Object}
-	 * @property {boolean} checked True if checked
-	 * @property {boolean} disabled Inactive if true
-	 * @property {boolean} value The current switch value
-	 * @property {string} name The switch name (also serves as ID)
-	 */
-	static properties = {
-		checked: {type: Boolean, reflect: true},
-		disabled: {type: Boolean, reflect: true},
-		name: {type: String},
-	};
-
-	constructor() {
-		super();
-		this.checked = false;
-		this.disabled = false;
-		this.name = "pnx-switch-1"; // Default name+ID to avoid issues
-	}
-
-	/** @private */
-	_onChange(e) {
-		this.checked = e.target.checked;
-		/**
-		 * Event for switch status change
-		 * @event Panoramax.components.ui.Switch#change
-		 * @type {Event}
-		 */
-		this.dispatchEvent(new Event("change"));
-	}
-
-	/** @private */
-	render() {
-		return html`
-			<label class="toggle" for=${this.name}>
-				<input
-					class="toggle-checkbox"
-					type="checkbox"
-					id=${this.name}
-					name=${this.name}
-					.checked=${this.checked}
-					.disabled=${this.disabled}
-					@change=${this._onChange}
-				/>
-				<div class="toggle-switch"></div>
-				<span class="toggle-label">
-					<slot></slot>
-				</span>
-			</label>
-		`;
-	}
-}
-
-customElements.define("pnx-switch", Switch);

package/build/components/ui/TogglableGroup.js

@@ -1,157 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { panel } from "../styles.js";
-import { listenForMenuClosure } from "../../utils/widgets.js";
-import { classMap } from "lit/directives/class-map.js";
-
-/**
- * Togglable Group element allows to make a menu appear/disappear based on button click.
- * @class Panoramax.components.ui.TogglableGroup
- * @element pnx-togglable-group
- * @slot `button` The button on which click leads to open/close menu
- * @slot `default` The menu to make shown/hidden on button click
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <pnx-togglable-group padded="false" ._parent=${viewer}>
- *   <pnx-button slot="button">
- *     Open menu
- *   </pnx-button>
- *   <div>Menu content</div>
- * </pnx-togglable-group>
- * ```
- */
-export default class TogglableGroup extends LitElement {
-	/** @private */
-	static styles = [ panel, css`
-		div.container {
-			position: relative;
-			height: 100%;
-		}
-
-		.pnx-panel { z-index: 130; }
-		.pnx-panel-fixed { position: fixed; }
-	` ];
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.TogglableGroup#
-	 * @type {Object}
-	 * @property {string} [padded] If set, adds a 15px padding to the menu panel.
-	 */
-	static properties = {
-		_opened: {state: true},
-		padded: {type: String},
-	};
-
-	constructor() {
-		super();
-		this._opened = false;
-	}
-
-	/** @private */
-	open() {
-		this._opened = true;
-		this._parent?.dispatchEvent(new CustomEvent("menu-opened", { detail: { menu: this }}));
-		this.adjustMenuPosition(this._btn);
-		if(this._chevron) { this._chevron.style.rotate = "180deg"; }
-	}
-
-	/** @private */
-	close() {
-		this._opened = false;
-		if(this._chevron) { this._chevron.style.rotate = ""; }
-	}
-
-	/** @private */
-	connectedCallback() {
-		super.connectedCallback();
-		listenForMenuClosure(this, this.close.bind(this));
-	}
-
-	/** @private */
-	handleButtonSlotChange(e) {
-		this._btn = e.target.assignedNodes().pop();
-		if(this._btn) {
-			// Chevron
-			this._chevron = this._btn.querySelector("svg.fa-chevron-down");
-			if(this._chevron) {
-				this._chevron.style.transition = "rotate 0.2s";
-				this._chevron.style.rotate = this._opened ? "180deg" : "";
-			}
-
-			this._btn.addEventListener("click", () => {
-				if(this._opened) { this.close(); }
-				else { this.open(); }
-			});
-		}
-	}
-
-	/** @private */
-	adjustMenuPosition(btn) {
-		const btnMenuMargin = 5;
-		const borderMargin = 10;
-
-		// Reset menu position
-		const menu = this.shadowRoot.querySelector("div[part='menu']");
-		menu.style.top = null;
-		menu.style.bottom = null;
-		menu.style.right = null;
-		menu.style.left = null;
-		menu.style.overflowY = null;
-		menu.style.marginTop = null;
-
-		// Get positions on screen
-		const btnRect = btn.getBoundingClientRect();
-		let menuRect = menu.getBoundingClientRect();
-		const fitsWidth = menuRect.right <= window.innerWidth - borderMargin;
-		const fitsHeight = menuRect.bottom <= window.innerHeight - borderMargin;
-
-		// No overflow = space a bit under button
-		if(fitsWidth && fitsHeight) {
-			menu.style.top = `${btnRect.bottom+btnMenuMargin}px`;
-		}
-		// Overflows width+height = put at button's top+left
-		else if(!fitsWidth && !fitsHeight) {
-			menu.style.right = `${window.innerWidth - btnRect.left + btnMenuMargin}px`;
-			menu.style.bottom = `${window.innerHeight - btnRect.bottom}px`;
-
-			// Check if it doesn't overflow on top
-			menuRect = menu.getBoundingClientRect();
-			if(menuRect.top - borderMargin < 0) {
-				menu.style.bottom = `${borderMargin}px`;
-				menu.style.top = `${btnRect.top}px`;
-				menu.style.overflowY = "auto";
-			}
-		}
-		// Overflows height = limit height
-		else if(!fitsHeight) {
-			menu.style.bottom = `${borderMargin}px`;
-			menu.style.top = `${btnRect.bottom+btnMenuMargin}px`;
-			menu.style.overflowY = "auto";
-		}
-		// Overflows width = move to left
-		else if(!fitsWidth) {
-			menu.style.marginTop = `${btnMenuMargin}px`;
-			menu.style.right = `${window.innerWidth - btnRect.right}px`;
-		}
-	}
-
-	/** @private */
-	render() {
-		const panelClasses = {
-			"pnx-panel": true,
-			"pnx-panel-fixed": true,
-			"pnx-hidden": !this._opened,
-			"pnx-padded": this.padded !== "false",
-		};
-
-		return html`<div class="container" @click=${e => e.stopPropagation()}>
-			<slot name="button" @slotchange=${this.handleButtonSlotChange}></slot>
-			<div class=${classMap(panelClasses)} part="menu">
-				<slot></slot>
-			</div>
-		</div>`;
-	}
-}
-
-customElements.define("pnx-togglable-group", TogglableGroup);

package/build/components/ui/index.js

@@ -1,29 +0,0 @@
-/**
- * Smaller UI pieces components
- * @module Panoramax:components:ui
- */
-
-export {default as AnnotationsSwitch} from "./AnnotationsSwitch.js";
-export {default as ButtonGroup} from "./ButtonGroup.js";
-export {default as Button} from "./Button.js";
-export {default as CopyButton} from "./CopyButton.js";
-export {default as Grade} from "./Grade.js";
-export {default as GradeFilter} from "./GradeFilter.js";
-export {default as IconSwitch} from "./IconSwitch.js";
-export {default as LinkButton} from "./LinkButton.js";
-export {default as ListGroup} from "./ListGroup.js";
-export {default as ListItem} from "./ListItem.js";
-export {default as Loader} from "./Loader.js";
-export {default as Map} from "./Map.js";
-export {default as MapMore} from "./MapMore.js";
-export {default as Photo} from "./Photo.js";
-export {default as Popup} from "./Popup.js";
-export {default as ProgressBar} from "./ProgressBar.js";
-export {default as QualityScore} from "./QualityScore.js";
-export {default as SearchBar} from "./SearchBar.js";
-export {default as SemanticsEditor} from "./SemanticsEditor.js";
-export {default as SemanticsTable} from "./SemanticsTable.js";
-export {default as Switch} from "./Switch.js";
-export {default as TogglableGroup} from "./TogglableGroup.js";
-import * as widgets from "./widgets/index.js";
-export {widgets};

package/build/components/ui/index_photoviewer.js

@@ -1,21 +0,0 @@
-// Lightweight export for PhotoViewer
-export {default as ButtonGroup} from "./ButtonGroup.js";
-export {default as Button} from "./Button.js";
-export {default as CopyButton} from "./CopyButton.js";
-export {default as Grade} from "./Grade.js";
-export {default as AnnotationsSwitch} from "./AnnotationsSwitch.js";
-export {default as LinkButton} from "./LinkButton.js";
-export {default as ListGroup} from "./ListGroup.js";
-export {default as ListItem} from "./ListItem.js";
-export {default as Loader} from "./Loader.js";
-export {default as Photo} from "./Photo.js";
-export {default as Popup} from "./Popup.js";
-export {default as ProgressBar} from "./ProgressBar.js";
-export {default as QualityScore} from "./QualityScore.js";
-export {default as SearchBar} from "./SearchBar.js";
-export {default as SemanticsEditor} from "./SemanticsEditor.js";
-export {default as SemanticsTable} from "./SemanticsTable.js";
-export {default as Switch} from "./Switch.js";
-export {default as TogglableGroup} from "./TogglableGroup.js";
-import * as widgets from "./widgets/index_photoviewer.js";
-export {widgets};

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

@@ -1,75 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { degToDms } from "../../../utils/utils.js";
-import { fa } from "../../../utils/widgets.js";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { btngroup } from "../../styles.js";
-
-/**
- * Copy Coordinates button allows easy copy of several format of map coordinates.
- * @class Panoramax.components.ui.widgets.CopyCoordinates
- * @element pnx-copy-coordinates
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <pnx-copy-coordinates gps=${[-1.7, 48.6]} _parent=${viewer} />
- * ```
- */
-export default class CopyCoordinates extends LitElement {
-	/** @private */
-	static styles = [btngroup, css`
-		pnx-togglable-group::part(menu) {
-			border-radius: 5px;
-			min-width: unset;
-		}
-	`];
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.widgets.CopyCoordinates#
-	 * @type {Object}
-	 * @property {number[]} gps GPS/map coordinates, as [lon, lat]
-	 */
-	static properties = {
-		gps: {type: Array},
-	};
-
-	/** @private */
-	render() {
-		const dmslonval = degToDms(this.gps[0]);
-		const dmslon = dmslonval.d < 0 ? `${Math.abs(dmslonval.d)}°${dmslonval.m}'${dmslonval.s}"W` : `${dmslonval.d}°${dmslonval.m}'${dmslonval.s}"E`;
-		const dmslatval = degToDms(this.gps[1]);
-		const dmslat = dmslatval.d < 0 ? `${Math.abs(dmslatval.d)}°${dmslatval.m}'${dmslatval.s}"S` : `${dmslatval.d}°${dmslatval.m}'${dmslatval.s}"N`;
-
-		const values = {
-			ddeclatlon: `${this.gps[1].toFixed(5)}, ${this.gps[0].toFixed(5)}`,
-			ddeclonlat: `${this.gps[0].toFixed(5)}, ${this.gps[1].toFixed(5)}`,
-			ddmslonlat: `${dmslon}, ${dmslat}`,
-			ddmslatlon: `${dmslat}, ${dmslon}`,
-		};
-
-		return html`<pnx-button-group style="display: inline-block; vertical-align: baseline" dir="row">
-			<pnx-copy-button
-				size="sm"
-				text=${values.ddeclonlat}
-				title=${this._parent?._t.pnx.metadata_location_copy.replace("{v}", values.ddeclonlat)}
-			></pnx-copy-button>
-
-			<pnx-togglable-group padded="false" ._parent=${this._parent}>
-				<pnx-button
-					size="sm"
-					slot="button"
-					title=${this._parent?._t.pnx.metadata_location_copy_more}
-				>${fa(faChevronDown)}</pnx-button>
-				<pnx-list-group>
-					${Object.values(values).map(text => html`
-						<pnx-copy-button unstyled text=${text} ._t=${this._parent._t}>
-							${this._parent?._t.pnx.metadata_location_copy.replace("{v}", text)}
-						</pnx-copy-button>
-					`)}
-				</pnx-list-group>
-			</pnx-togglable-group>
-		</pnx-button-group>`;
-	}
-}
-
-customElements.define("pnx-copy-coordinates", CopyCoordinates);

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

@@ -1,21 +0,0 @@
-pnx-widget-geosearch .maplibregl-ctrl {
-	box-shadow: none !important;
-	background: none !important;
-}
-
-pnx-widget-geosearch .maplibregl-ctrl-geolocate {
-	border-radius: 15px;	
-}
-
-pnx-widget-geosearch pnx-search-bar[reduced] .maplibregl-ctrl-geolocate {
-	width: 40px;
-}
-
-pnx-widget-geosearch pnx-search-bar:not([reduced]) .maplibregl-ctrl-geolocate {
-	margin-left: -5px;
-}
-
-pnx-widget-geosearch pnx-search-bar:not([reduceable])::part(input) {
-	width: 300px;
-	max-width: 30vw;
-}

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

@@ -1,150 +0,0 @@
-import "maplibre-gl";
-import { LitElement, html } from "lit";
-import { forwardGeocodingBAN, forwardGeocodingNominatim, forwardGeocodingStandard } from "../../../utils/geocoder.js";
-import { onceParentAvailable } from "../../../utils/widgets.js";
-import GeoSearchStyles from "./GeoSearch.css" with { type: "css" };
-document.adoptedStyleSheets.push(GeoSearchStyles);
-
-const GEOCODER_ENGINES = {
-	"ban": forwardGeocodingBAN,
-	"standard": forwardGeocodingStandard,
-	"nominatim": forwardGeocodingNominatim
-};
-
-/**
- * Ready-to-use geocoder search bar.
- * @class Panoramax.components.ui.widgets.GeoSearch
- * @element pnx-widget-geosearch
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <!-- Default geocoder -->
- * <pnx-widget-geosearch _parent=${viewer} />
- *
- * <!-- Custom-URL geocoder -->
- * <pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _parent=${viewer} />
- * ```
- */
-export default class GeoSearch extends LitElement {
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.widgets.GeoSearch#
-	 * @type {Object}
-	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
-	 */
-	static properties = {
-		geocoder: {type: String},
-		_geolocate: {state: true},
-	};
-
-	constructor() {
-		super();
-		this.geocoder = "nominatim";
-
-		// eslint-disable-next-line no-undef
-		this._geolocateCtrl = new maplibregl.GeolocateControl({
-			positionOptions: {
-				enableHighAccuracy: true,
-				timeout: 60000, // Max 1 minute for first position
-				maximumAge: 300000, // Accepts 5 minutes old position
-			},
-			showAccuracyCircle: true,
-			showUserLocation: true,
-			trackUserLocation: true,
-		});
-	}
-
-	/** @private */
-	createRenderRoot() {
-		return this;
-	}
-
-	/** @private */
-	connectedCallback() {
-		super.connectedCallback();
-
-		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder] || (config => GEOCODER_ENGINES.standard(config, this.geocoder));
-		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
-			if(!this._geolocate) {
-				this._geolocate = this._geolocateCtrl.onAdd(this._parent.map);
-				this._geolocate.setAttribute("slot", "pre");
-			}
-		}));
-	}
-
-	/** @private */
-	_onInput(query) {
-		const rgxCoords = /([-+]?\d{1,2}\.\d+),\s*([-+]?\d{1,3}\.\d+)/;
-		const coordsMatch = query.match(rgxCoords);
-		const rgxUuid = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
-		const uuidMatch = query.match(rgxUuid);
-
-		if(coordsMatch) {
-			const lat = parseFloat(coordsMatch[1]);
-			const lon = parseFloat(coordsMatch[2]);
-			this._parent.map.jumpTo({
-				center: [lon, lat],
-				zoom: 16,
-			});
-			return Promise.resolve(true);
-		}
-		else if(uuidMatch) {
-			this._parent.select(null, query);
-			return Promise.resolve(true);
-		}
-		else {
-			return this._geocoderEngine({
-				query,
-				limit: 5,
-				//Bbox: this._parent.map.getBounds().toArray().map(d => d.join(",")).join(","),
-				proximity: this._parent.map.getCenter().lat+","+this._parent.map.getCenter().lng,
-			}).then(data => {
-				data = data.features.map(f => ({
-					title: f.place_name.split(",")[0],
-					subtitle: f.place_name.split(",").slice(1).join(", "),
-					data: f
-				}));
-				return data;
-			});
-		}
-	}
-
-	/** @private */
-	_onSelect(e) {
-		const entry = e.detail;
-		if(entry) {
-			if(entry.data.bounds) {
-				this._parent?.map.fitBounds(entry.data.bounds, {animate: false});
-			}
-			else {
-				this._parent?.map.jumpTo({
-					center: entry.data.center,
-					zoom: entry.data.zoom || 13,
-				});
-			}
-		}
-	}
-
-	/** @private */
-	render() {
-		const isSmall = this._parent?.isWidthSmall() || false;
-
-		return html`
-			<pnx-search-bar
-				id="pnx-widget-search-bar"
-				placeholder=${this._parent?._t.pnx.search_address}
-				._parent=${this._parent}
-				.searcher=${this._onInput.bind(this)}
-				.reduceable=${isSmall}
-				.reduced=${isSmall}
-				size="xxl"
-				class="pnx-print-hidden"
-				@result=${this._onSelect.bind(this)}
-			>
-				${this._geolocate}
-			</pnx-search-bar>
-		`;
-	}
-}
-
-customElements.define("pnx-widget-geosearch", GeoSearch);