@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/src/components/ui/LinkButton.js

@@ -0,0 +1,68 @@
+import { LitElement, css } 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, css`
+		.pnx-btn {
+			padding: 5px 0;
+		}
+	` ];
+
+	/**
+	 * 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)
+	 */
+	static properties = {
+		href: { type: String },
+		target: { type: String },
+		title: { type: String },
+		download: { type: String },
+		class: { type: String },
+		kind: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.kind = "full";
+	}
+
+	/** @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}`);
+		const slot = document.createElement("slot");
+		a.appendChild(slot);
+		return a;
+	}
+}
+
+customElements.define("pnx-link-button", LinkButton);

package/src/components/ui/Loader.js

@@ -0,0 +1,188 @@
+import { LitElement, html, css } from "lit";
+import LogoDead from "../../img/logo_dead.svg";
+import LoaderImg from "../../img/marker.svg";
+
+/**
+ * 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: 20px;
+			align-items: center;
+			background: #37474F;
+			z-index: 200;
+			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+			font-weight: 550;
+			color: white;
+			font-size: 1.4em;
+			text-align: center;
+			visibility: hidden;
+			opacity: 0;
+		}
+		:host(*[visible]) {
+			visibility: visible;
+			opacity: 1;
+		}
+
+		/* Flashing text */
+		div.label {
+			animation: blinker 2s linear infinite;
+		}
+		@keyframes blinker { 50% { opacity: 0.3; } }
+
+		/* Logo */
+		img.logo {
+			width: 150px;
+			animation: rotating 1.4s linear infinite;
+		}
+		@keyframes rotating {
+			from { transform: rotate(0deg); }
+			to { transform: rotate(360deg); }
+		}
+		img.logo-dead {
+			width: 200px;
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.Loader#
+	 * @type {Object}
+	 * @property {boolean} [visible=true] Is the loader visible to user ?
+	 */
+	static properties = {
+		_mode: {state: true},
+		_label: {state: true},
+		_isLabelFun: {state: true},
+		visible: {type: Boolean, reflect: true},
+	};
+
+	constructor() {
+		super();
+		this.visible = true;
+		this._mode = "loading";
+		this._isLabelFun = false;
+	}
+
+	/** @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._mode = "done";
+			this.visible = false;
+			this.style.transition = "all 0.5s";
+			setTimeout(() => this.parentNode.removeChild(this), 2000);
+
+			/**
+			 * Event for component being ready to use (API loaded)
+			 * @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
+			 * @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`
+			<img class="logo" src=${LoaderImg} alt="" title=${this._parent?._t.map.loading} />
+			<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;
 	}
 }