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

package/build/components/ui/LinkButton.js

@@ -0,0 +1,67 @@
+import { LitElement } from "lit";
+import { btn } from "../styles.js";
+
+/**
+ * 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, fullwarn, fullsuccess, 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/build/components/ui/ListGroup.js

@@ -0,0 +1,66 @@
+import { LitElement, css, html } from "lit";
+import { panel } from "../styles.js";
+
+/**
+ * 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/build/components/ui/ListItem.js

@@ -0,0 +1,90 @@
+import { LitElement, css, html } from "lit";
+
+/**
+ * ListItem is a list entry, in a Material Design fashion.
+ * @class Panoramax.components.ui.ListItem
+ * @element pnx-list-item
+ * @slot `icon` The left icon (symbol for this item)
+ * @slot `action` The right icon (symbol for an interactive action)
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-list-item title="My feature" subtitle="It is very cool">
+ *   <img src="..." slot="icon" />
+ *   <img src="..." slot="action" />
+ * </pnx-list-item>
+ * ```
+ */
+export default class ListItem extends LitElement {
+	/** @private */
+	static styles = css`
+		.list-item {
+			display: flex;
+			align-items: center;
+			padding: 8px 16px;
+			cursor: pointer;
+			border-bottom: 1px solid #ddd;
+			font-family: var(--font-family);
+			background: var(--white);
+			min-height: 40px;
+			box-sizing: border-box;
+		}
+		.list-item:hover { background: var(--widget-bg-hover); }
+		.icon {
+			margin-right: 16px;
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			position: relative;
+		}
+		.action {
+			margin-left: 16px;
+			display: flex;
+  			gap: 5px;
+		}
+		.content {
+			flex: 1;
+		}
+		.title {
+			font-weight: 600;
+		}
+		.subtitle {
+			font-size: 0.9em;
+			color: var(--grey-dark);
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.ListItem#
+	 * @type {Object}
+	 * @property {string} title The item title
+	 * @property {string} [subtitle] The item subtitle
+	 * @property {string} [tooltip] A display-on-hover label
+	 */
+	static properties = {
+		title: { type: String },
+		subtitle: { type: String },
+		tooltip: { type: String },
+	};
+
+	/** @private */
+	render() {
+		return html`
+			<div class="list-item" title=${this.tooltip}>
+				<div class="icon">
+					<slot name="icon"></slot>
+				</div>
+				<div class="content">
+					<div class="title">${this.title}</div>
+					<div class="subtitle">${this.subtitle}</div>
+				</div>
+				<div class="action">
+					<slot name="action"></slot>
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-list-item", ListItem);

package/build/components/ui/Loader.js

@@ -0,0 +1,203 @@
+import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { inRangeRandom } from "../../utils/utils.js";
+
+const LogoDead = await fetch(new URL("../../img/logo_dead.svg", import.meta.url).href).then(res => res.text());
+const LoaderBg = new URL("../../img/loader_base.jpg", import.meta.url).href;
+
+/**
+ * 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(() => {
+				if(this.parentNode) { 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[inRangeRandom(0, this._parent?._t.pnx.loading_labels_serious.length-1)];
+			this._isLabelFun = true;
+		}
+		else {
+			this._label = this._parent?._t.pnx.loading_labels_fun[inRangeRandom(0, this._parent?._t.pnx.loading_labels_fun.length-1)];
+		}
+		this._loaderLabelChanger = setTimeout(this._nextLabel.bind(this), inRangeRandom(500, 1500));
+	}
+
+	/** @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/build/components/ui/Map.css

@@ -0,0 +1,63 @@
+.maplibregl-map.pnx-map {
+	background: white;
+}
+
+/* Picture thumbnail on map */
+.maplibregl-popup-content {
+	padding: 5px !important;
+	position: relative;
+	pointer-events: none !important;
+}
+
+.pnx-map-thumb {
+	display: inline-block;
+	text-align: center;
+	vertical-align: middle;
+	max-width: 130px;
+	max-height: 130px;
+}
+
+@keyframes rotating {
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+.pnx-map-thumb-loader {
+	background-color: rgb(230,230,230);
+	border-radius: 65px;
+	max-height: 60px;
+	margin: 5px 35px;
+	animation: rotating 2s linear infinite;
+}
+
+.pnx-map-thumb-legend {
+	display: block;
+	position: absolute;
+	bottom: 5px;
+	right: 5px;
+	left: 5px;
+	background-color: rgba(0,0,0,0.8);
+	color: white;
+	text-align: center;
+	font-style: italic;
+	font-size: 0.8em;
+	margin: 0;
+	padding: 0;
+}
+
+.maplibregl-marker {
+	width: 60px;
+}
+
+/* Resize canvas for print */
+@media print {
+	.pnx-map.maplibregl-map .maplibregl-canvas-container {
+		width: 100% !important;
+		height: unset !important;
+	}
+}
+
+/* Discard default indoor= widget */
+.pnx-map .maplibregl-ctrl-indoorequal {
+	display: none;
+}