@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/src/components/ui/ButtonGroup.css

@@ -0,0 +1,57 @@
+pnx-button-group > pnx-button {
+	display: inline-flex;
+}
+
+pnx-button-group > pnx-button::part(btn) {
+	height: unset;
+}
+
+/* Togglable in group */
+pnx-button-group > pnx-togglable-group > pnx-button {
+	width: 100%;
+	height: 100%;
+}
+
+/* Row */
+pnx-button-group[dir="row"] > :not(:first-child):not(:last-child)::part(btn),
+pnx-button-group[dir="row"] > :not(:first-child):not(:last-child) > ::part(btn) {
+	border-radius: 0;
+	border-left: none;
+	border-right: none;
+}
+
+pnx-button-group[dir="row"] > :first-child::part(btn),
+pnx-button-group[dir="row"] > :first-child > ::part(btn) {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	border-right: none;
+}
+
+pnx-button-group[dir="row"] > :last-child::part(btn),
+pnx-button-group[dir="row"] > :last-child > ::part(btn) {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	border-left: none;
+}
+
+/* Column */
+pnx-button-group[dir="column"] > :not(:first-child):not(:last-child)::part(btn),
+pnx-button-group[dir="column"] > :not(:first-child):not(:last-child) > ::part(btn) {
+	border-radius: 0;
+	border-top: none;
+	border-bottom: none;
+}
+
+pnx-button-group[dir="column"] > :first-child::part(btn),
+pnx-button-group[dir="column"] > :first-child > ::part(btn) {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	border-bottom: none;
+}
+
+pnx-button-group[dir="column"] > :last-child::part(btn),
+pnx-button-group[dir="column"] > :last-child > ::part(btn) {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-top: none;
+}

package/src/components/ui/ButtonGroup.js

@@ -0,0 +1,68 @@
+import { LitElement, css, html } from "lit";
+import "./ButtonGroup.css";
+
+/**
+ * Button Group element allows to merge many button in a single bar.
+ * @class Panoramax.components.ui.ButtonGroup
+ * @element pnx-button-group
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-button-group id="pnx-widget-player" dir="row" size="xl" class="pnx-print-hidden">
+ *   <pnx-button>B1</pnx-button>
+ *   <pnx-button>B2</pnx-button>
+ * </pnx-button-group>
+ * ```
+ */
+export default class ButtonGroup extends LitElement {
+	/** @private */
+	static styles = css`
+		div {
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: stretch;
+			align-content: stretch;
+			justify-content: center;
+		}
+
+		div.row { flex-direction: row; }
+		div.column { flex-direction: column; }
+
+		div.xl { line-height: 38px; font-size: 20px; }
+		div.row.xl { height: 38px; }
+		div.column.xl { width: 38px; }
+
+		div.row ::slotted(*) { height: 100%; min-width: 24px; }
+		div.column ::slotted(*) { width: 100%; min-height: 24px; }
+
+		div.row.xl ::slotted(*) { min-width: 38px; }
+		div.column.xl ::slotted(*) { min-height: 38px; }
+	`;
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.ui.ButtonGroup#
+     * @type {Object}
+     * @property {string} [dir] Group direction (row, column)
+     * @property {string} [size] Group size (md, xl)
+     */
+	static properties = {
+		dir: {type: String},
+		size: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.dir = "row";
+		this.size = "md";
+	}
+
+	/** @private */
+	render() {
+		return html`<div class="${this.dir} ${this.size}">
+			<slot></slot>
+		</div>`;
+	}
+}
+
+customElements.define("pnx-button-group", ButtonGroup);

package/src/components/ui/CopyButton.js

@@ -0,0 +1,106 @@
+import { LitElement, html, css } from "lit";
+import { fa } from "../../utils/widgets";
+import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
+import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
+import { btn, faSvg } from "../styles";
+import { classMap } from "lit/directives/class-map.js";
+
+/**
+ * Copy Button element allows top copy in clipboard some text.
+ * @class Panoramax.components.ui.CopyButton
+ * @element pnx-copy-button
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-copy-button text="content to copy" ._t=${viewer._t}>
+ *   Copy me !
+ * </pnx-copy-button>
+ * ```
+ */
+export default class CopyButton extends LitElement {
+	/** @private */
+	static styles = [faSvg, btn, css`
+		.pnx-btn-unstyled {
+			border: none;
+			background: none;
+			font-family: var(--font-family);
+			font-size: 1em;
+			color: var(--widget-font);
+			cursor: pointer;
+			padding: 0;
+			margin: 0;
+		}
+	`];
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.ui.CopyButton#
+     * @type {Object}
+     * @property {string} [text] Text to copy in clipboard on click (use either this parameter or input, not both)
+	 * @property {input} [input] ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both)
+	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
+	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
+	 * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
+     */
+	static properties = {
+		text: {type: String},
+		input: {type: String},
+		kind: {type: String},
+		size: {type: String},
+		unstyled: {type: Boolean},
+		_active: {state: true, type: Boolean},
+	};
+
+	constructor() {
+		super();
+		this.data = "";
+		this.input = "";
+		this.unstyled = false;
+		this.kind = "full";
+		this.size = "md";
+		this._active = false;
+		this.addEventListener("click", this._onClick);
+	}
+
+	/** @private */
+	_onClick() {
+		let textToCopy;
+		if(this.input !== "") {
+			const inputField = document.getElementById(this.input);
+			textToCopy = inputField.innerText || inputField.value;
+		}
+		else if(this.text !== "") {
+			textToCopy = this.text;
+		}
+
+		if(!navigator?.clipboard) {
+			alert("Clipboard is not available");
+		}
+		else {
+			navigator.clipboard.writeText(textToCopy);
+			this._active = true;
+			setTimeout(() => this._active = false, 2000);
+		}
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		const classes = {
+			"pnx-btn": !this.unstyled,
+			"pnx-btn-full": !this.unstyled,
+			"pnx-btn-active": !this.unstyled && this._active,
+			"pnx-btn-unstyled": this.unstyled,
+			[`pnx-btn-${this.kind}`]: !this.unstyled,
+			[`pnx-btn-${this.size}`]: !this.unstyled,
+		};
+		return html`<button class=${classMap(classes)} part="btn">
+			${this._active ?
+				html`${this._t?.pnx.copied || ""} ${fa(faCheck)}` :
+				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || ""}</slot>`
+			}
+		</button>`;
+	}
+}
+
+customElements.define("pnx-copy-button", CopyButton);

package/src/components/ui/Grade.js

@@ -0,0 +1,54 @@
+import { LitElement, html, css } from "lit";
+import { fa } from "../../utils/widgets";
+import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons/faStar";
+import { faSvg } from "../styles";
+
+/**
+ * Grade element displays a 5-star rating.
+ * @class Panoramax.components.ui.Grade
+ * @element pnx-grade
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-grade stars="5" .t=${viewer._t} />
+ * ```
+ */
+export default class Grade extends LitElement {
+	/** @private */
+	static styles = [ faSvg, css`
+		span { color: var(--orange); }
+	`];
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.ui.Grade#
+     * @type {Object}
+     * @property {number} [stars=0] 1 to 5 grade (or 0 for unknown value)
+     */
+	static properties = {
+		stars: {type: Number},
+	};
+
+	constructor() {
+		super();
+		this.stars = 0;
+	}
+
+	/** @private */
+	render() {
+		const nbStars = this.stars || 0;
+		const fastars = [];
+		for(let i=1; i <= nbStars; i++) {
+			fastars.push(fa(faStar));
+		}
+		for(let i=nbStars+1; i <= 5; i++) {
+			fastars.push(fa(farStar));
+		}
+		return html`<span>
+			${fastars}
+		</span> (${this.stars ? this.stars+"/5" : this._t?.pnx.metadata_quality_missing || "?"})`;
+	}
+}
+
+customElements.define("pnx-grade", Grade);

package/src/components/ui/LinkButton.js

@@ -0,0 +1,67 @@
+import { LitElement } from "lit";
+import { btn } from "../styles";
+
+/**
+ * Link Button element displays a HTML `<a>` anchor with a button style.
+ * @class Panoramax.components.ui.LinkButton
+ * @element pnx-link-button
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-link-button
+ *   title="Redirect to other website"
+ *   kind="outline"
+ *   href="https://panoramax.fr"
+ *   target="_blank"
+ * >
+ *   Click to go on Panoramax
+ * </pnx-link-button>
+ * ```
+ */
+export default class LinkButton extends LitElement {
+	/** @private */
+	static styles = btn;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.LinkButton#
+	 * @type {Object}
+	 * @property {string} [href] The URL the button should navigate to when clicked
+	 * @property {string} [target] Specifies where to open the linked document (e.g., '_blank')
+	 * @property {string} [title] Tooltip text displayed when hovering over the button
+	 * @property {string} [download] Indicates if the linked resource should be downloaded
+	 * @property {string} [class] Custom CSS class for additional styling
+	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat)
+	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
+	 */
+	static properties = {
+		href: { type: String },
+		target: { type: String },
+		title: { type: String },
+		download: { type: String },
+		class: { type: String },
+		kind: {type: String},
+		size: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.kind = "full";
+		this.size = "md";
+	}
+
+	/** @private */
+	render() {
+		const a = document.createElement("a");
+		a.setAttribute("part", "btn");
+		this.constructor.observedAttributes
+			.filter(k => this[k] !== undefined)
+			.forEach(k => a.setAttribute(k, this[k]));
+		a.classList.add("pnx-btn", `pnx-btn-${this.kind}`, `pnx-btn-${this.size}`);
+		const slot = document.createElement("slot");
+		a.appendChild(slot);
+		return a;
+	}
+}
+
+customElements.define("pnx-link-button", LinkButton);

package/src/components/ui/ListGroup.js

@@ -0,0 +1,66 @@
+import { LitElement, html, css } from "lit";
+import { panel } from "../styles";
+
+/**
+ * List Group element displays a menu having a list of rapid actions (links, buttons).
+ * 
+ * Note that you may only want to use basic HTML elements (`a`, `button`) instead of Panoramax ones.
+ * The list group overrides style, so using `pnx-*` component may conflict on styling.
+ * @class Panoramax.components.ui.ListGroup
+ * @element pnx-list-group
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `default` Any element you want to add in list.
+ * @example
+ * ```html
+ * <pnx-list-group>
+ *   <a href="https://web.site/">First link</a>
+ *   <button>Second button</button>
+ * </pnx-list-group>
+ * ```
+ */
+export default class ListGroup extends LitElement {
+	/** @private */
+	static styles = [ panel, css`
+		:host ::slotted(*) {
+			text-decoration: none;
+			border: none;
+			border-bottom: 1px solid var(--widget-border-div);
+			background: none;
+			display: block;
+			width: 100%;
+			color: var(--widget-font);
+			font-family: var(--font-family);
+			cursor: pointer;
+			font-size: 1em;
+			font-weight: 400;
+			line-height: 18px;
+			padding: 5px 10px;
+  			min-width: 150px;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+		}
+
+		:host ::slotted(*:hover) {
+			background-color: var(--widget-bg-hover);
+		}
+
+		:host ::slotted(*:first-child) {
+			border-top-left-radius: 5px;
+			border-top-right-radius: 5px;
+		}
+
+		:host ::slotted(*:last-child) {
+			border: none;
+			border-bottom-left-radius: 5px;
+			border-bottom-right-radius: 5px;
+		}
+	` ];
+
+	/** @private */
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+customElements.define("pnx-list-group", ListGroup);

package/src/components/ui/Loader.js

@@ -0,0 +1,203 @@
+import { LitElement, html, css, unsafeCSS, nothing } from "lit";
+import LogoDead from "../../img/logo_dead.svg";
+import LoaderBg from "../../img/loader_base.jpg";
+
+/**
+ * Loader component display a full page covering for user waiting.
+ * @class Panoramax.components.ui.Loader
+ * @element pnx-loader
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-loader ._parent=${this.viewer} />
+ * ```
+ */
+export default class Loader extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			gap: 10px;
+			align-items: center;
+			background-image: url('${unsafeCSS(LoaderBg)}');
+			background-repeat: no-repeat;
+			background-size: cover;
+			background-position: center; 
+			z-index: 200;
+			font-family: var(--font-family);
+			font-weight: 550;
+			color: var(--black);
+			font-size: 1.4em;
+			text-align: center;
+			visibility: hidden;
+			opacity: 0;
+		}
+		:host(*[visible]) {
+			visibility: visible;
+			opacity: 1;
+		}
+
+		div.label {
+			background-color: rgba(255,255,255,0.5);
+			box-shadow: white 0 0 10px;
+			padding: 3px 10px;
+			border-radius: 50px;
+		}
+		/* Logo */
+		img.logo-dead { width: 100px; }
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.Loader#
+	 * @type {Object}
+	 * @property {boolean} [visible=true] Is the loader visible to user ?
+	 * @property {boolean} [no-label=false] Set to true to avoid loading label display
+	 * @property {number} [value] Progress bar percentage (0-100)
+	 */
+	static properties = {
+		_mode: {state: true},
+		_label: {state: true},
+		_isLabelFun: {state: true},
+		visible: {type: Boolean, reflect: true},
+		"no-label": {type: Boolean},
+		value: {type: Number},
+	};
+
+	constructor() {
+		super();
+		this.visible = true;
+		this["no-label"] = false;
+		this._mode = "loading";
+		this._isLabelFun = false;
+		this.value = -1;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._nextLabel();
+	}
+
+	/**
+	 * Is the loader currently visible ?
+	 * @returns {boolean} True if visible
+	 * @memberof Panoramax.components.ui.Loader#
+	 */
+	isVisible() {
+		return this.visible;
+	}
+
+	/**
+	 * Dismiss loader, or show error
+	 * @param {object} [err] Optional error object to show in browser console
+	 * @param {str} [errMeaningful] Optional error message to show to user
+	 * @param {fct} [next] Optional function to run after loader dismiss
+	 * @memberof Panoramax.components.ui.Loader#
+	 */
+	dismiss(err = null, errMeaningful = null, next = null) {
+		clearTimeout(this._loaderLabelChanger);
+
+		if(!err) {
+			this.value = 100;
+			this._mode = "done";
+			this.visible = false;
+			this.style.transition = "all 0.5s";
+			setTimeout(() => this.parentNode.removeChild(this), 2000);
+
+			/**
+			 * Event when component is ready to use.
+			 * This happens when loader screen disappear, with picture and map loaded.
+			 * 
+			 * To follow more precisely loading steps, you can also watch for sub-components `ready` events.
+			 * ```js
+			 * // Watch API-readiness
+			 * viewer.addEventListener("api:ready", ...); // From parent
+			 * viewer.api.addEventListener("ready", ...); // Or on sub-component
+			 * ```
+			 * @event Panoramax.components.core.Basic#ready
+			 * @type {CustomEvent}
+			 */
+			const readyEvt = new CustomEvent("ready");
+			this._parent.dispatchEvent(readyEvt);
+
+			if(next) { next(); }
+		}
+		else {
+			if(err !== true) { console.error(err); }
+
+			let errHtml = [ this._parent?._t.pnx.error, html`<br />` ];
+
+			if(errMeaningful) { errHtml.push(errMeaningful, html`<br />`); }
+
+			if(next) {
+				errHtml.push(html`<pnx-button kind="full">${this._parent?._t.pnx.error_click}</pnx-button>`);
+				this.addEventListener("click", next);
+			}
+			else { errHtml.push(html`<small>${this._parent?._t.pnx.error_retry}</small>`); }
+
+			this._mode = "error";
+			this._label = errHtml;
+
+			const errLabel = errMeaningful || "Panoramax JS had a blocking exception";
+
+			/**
+			 * Event for viewer failing to initially load.
+			 * 
+			 * To follow more precisely loading failures, you can also watch for sub-components `broken` events.
+			 * ```js
+			 * // Watch API breaks
+			 * viewer.addEventListener("api:broken", ...); // From parent
+			 * viewer.api.addEventListener("broken", ...); // Or on sub-component
+			 * ```
+			 * @event Panoramax.components.core.Basic#broken
+			 * @type {CustomEvent}
+			 * @property {string} detail.error The user-friendly error message to display
+			 */
+			const brokenEvt = new CustomEvent("broken", {
+				detail: { error: errLabel }
+			});
+			this._parent.dispatchEvent(brokenEvt);
+
+			// Throw error
+			throw new Error(errLabel);
+		}
+	}
+
+	/** @private */
+	_nextLabel() {
+		if(!this._isLabelFun) {
+			this._label = this._parent?._t.pnx.loading_labels_serious[
+				Math.floor(Math.random() * this._parent?._t.pnx.loading_labels_serious.length)
+			];
+			this._isLabelFun = true;
+		}
+		else {
+			this._label = this._parent?._t.pnx.loading_labels_fun[
+				Math.floor(Math.random() * this._parent?._t.pnx.loading_labels_fun.length)
+			];
+		}
+		this._loaderLabelChanger = setTimeout(this._nextLabel.bind(this), 500 + Math.random() * 1000);
+	}
+
+	/** @private */
+	render() {
+		if(this._mode == "error") {
+			return html`
+				<img class="logo-dead" src=${LogoDead} alt="" title=${this._parent?._t.map.loading} />
+				${this._label}
+			`;
+		}
+
+		return html`
+			<pnx-progress-bar .value=${this.value}></pnx-progress-bar>
+			${this["no-label"] ? nothing : html`<div class="label">${this._label}</div>`}
+		`;
+	}
+}
+
+customElements.define("pnx-loader", Loader);

package/src/components/{Map.css → ui/Map.css}

@@ -1,17 +1,10 @@
-/* Force maplibre to fill all available space */
-.gvs-map.maplibregl-map {
-	width: 100%;
-	height: 100%;
-	background-color: white;
-}
-
 /* Picture thumbnail on map */
 .maplibregl-popup-content {
 	padding: 5px !important;
 	position: relative;
 }
 
-.gvs-map-thumb {
+.pnx-map-thumb {
 	display: inline-block;
 	text-align: center;
 	vertical-align: middle;
@@ -24,7 +17,7 @@
 	to { transform: rotate(360deg); }
 }
 
-.gvs-map-thumb-loader {
+.pnx-map-thumb-loader {
 	background-color: rgb(230,230,230);
 	border-radius: 65px;
 	max-height: 60px;
@@ -32,7 +25,7 @@
 	animation: rotating 2s linear infinite;
 }
 
-.gvs-map-thumb-legend {
+.pnx-map-thumb-legend {
 	display: block;
 	position: absolute;
 	bottom: 5px;
@@ -47,19 +40,14 @@
 	padding: 0;
 }
 
-/* Max size for geocoder search bar */
-.maplibregl-ctrl-geocoder {
-	max-width: 60%;
-}
-
 .maplibregl-marker {
 	width: 60px;
 }
 
 /* Resize canvas for print */
 @media print {
-	.gvs-map.maplibregl-map canvas {
+	.pnx-map.maplibregl-map .maplibregl-canvas-container {
 		width: 100% !important;
-		height: 100% !important;
+		height: unset !important;
 	}
 }