@panoramax/web-viewer 3.0.2-develop-a8ea8e60

package/src/components/CoreView.css

@@ -0,0 +1,64 @@
+/* Main container */
+.gvs {
+	container-type: inline-size;
+	box-sizing: border-box;
+}
+
+.gvs * { box-sizing: border-box; }
+
+/* Colors */
+:root {
+	--white: #ffffff;
+	--black: #181818;
+	--black-pale: #1b1a17;
+	--red: #f70000;
+	--red-pale: #ff726f;
+	--grey: #f5f5f5;
+	--grey-pale: #cfd2cf;
+	--grey-semi-dark: #808080;
+	--grey-dark: #3e3e3e;
+	--blue: #2954e9;
+	--blue-dark: #0a1f69;
+	--blue-semi: #d7dffc;
+	--blue-pale: #f2f5ff;
+	--blue-geovisio: #34495e;
+	--beige: #f5f3ec;
+	--yellow: #fec868;
+	--orange: #ff6f00;
+	--orange-pale: #fffafa;
+	--green: #7ec636;
+	--green-pale: #f0ffee;
+}
+
+/* Titles */
+.gvs h3 {
+	font-size: 1.1em;
+	line-height: 1.1em;
+	font-weight: 500;
+	margin: 10px 0 10px 0;
+}
+
+.gvs h4 {
+	font-size: 1.0em;
+	line-height: 1.0em;
+	font-weight: 500;
+	margin: 15px 0;
+}
+
+.gvs h4:first-of-type { margin-top: 0; }
+
+.gvs h4 svg {
+	height: 18px;
+	vertical-align: sub;
+	margin-right: 2px;
+}
+
+/* Hidden elements on mobile */
+@container (max-width: 576px) {
+	.gvs-mobile-hidden { display: none !important; }
+}
+
+/* Hidden elements on print */
+@media print {
+	.gvs-print-hidden { display: none !important; }
+}

package/src/components/CoreView.js

@@ -0,0 +1,159 @@
+import "./CoreView.css";
+import API from "../utils/API";
+import { getTranslations } from "../utils/I18n";
+import { DEFAULT_TILES } from "../utils/Map";
+import { isInIframe, isInternetFast } from "../utils/Utils";
+import PACKAGE_JSON from "../../package.json";
+import Loader from "./Loader";
+
+
+/**
+ * Core view is an abstract class used for setting up any of the main Panoramax JS view components.
+ * 
+ * It is used to prepare API, internationalization, options checks... for Viewer, StandaloneMap and Editor classes.
+ * 
+ * @param {string|Element} container The DOM element to create viewer into
+ * @param {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
+ * @param {object} [options] View options.
+ * @param {string} [options.selectedSequence] The ID of sequence to highlight on load (defaults to none)
+ * @param {string} [options.selectedPicture] The ID of picture to highlight on load (defaults to none)
+ * @param {object} [options.fetchOptions=null] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
+ * @param {string|string[]} [options.users] List of user IDs to default use for display. Defaults to all users.
+ * @param {string|object} [options.style] The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/), or a URL string pointing to one. Defaults to OSMFR vector tiles.
+ * 
+ * @property {object} _t The translations labels
+ * @property {string} _selectedSeqId The selected sequence ID
+ * @property {string} _selectedPicId The selected picture ID
+ * @property {API} _api The API handler
+ * @property {Loader} _loader The initial loader message
+ * @property {object} _options The stored options
+ * @property {Element} container The DOM container
+ */
+export default class CoreView extends EventTarget {
+	constructor(container, endpoint, options = {}) {
+		super();
+
+		this._options = options;
+		if(this._options == null) { this._options = {}; }
+		if(!this._options.users) { this._options.users = ["geovisio"]; }
+		if(typeof this._options.users === "string") { this._options.users = [this._options.users]; }
+		if(!this._options.style) { this._options.style = DEFAULT_TILES; }
+
+		if(!this._options.testing) {
+			// Display version in logs
+			console.info(`📷 Panoramax ${this.getClassName()} - Version ${PACKAGE_JSON.version} (${__COMMIT_HASH__})
+
+🆘 Issues can be reported at ${PACKAGE_JSON.repository.url}`);
+		}
+
+		// Translations
+		this._t = getTranslations(this._options.lang);
+
+		// Internet speed check
+		this._isInternetFast = null;
+		isInternetFast().then(isFast => this._isInternetFast = isFast);
+
+		// Selected IDs
+		this._selectedSeqId = this._options.selectedSequence || null;
+		this._selectedPicId = this._options.selectedPicture || null;
+
+		// Container init
+		this.container = typeof container === "string" ? document.getElementById(container) : container;
+		if(!(this.container instanceof Element)) { throw new Error("Container is not a valid HTML element, does it exist in your page ?"); }
+		this.container.classList.add("gvs", `gvs-${this.getClassName().toLocaleLowerCase()}`);
+		if(isInIframe()) { this.container.classList.add("gvs-iframed"); }
+
+		// Loader init
+		this.loaderContainer = document.createElement("div");
+		this.container.appendChild(this.loaderContainer);
+		this._loader = new Loader(this, this.loaderContainer);
+
+		// API init
+		endpoint = endpoint.replace("/api/search", "/api");
+		this._api = new API(endpoint, {
+			users: this._options.users,
+			fetch: this._options?.fetchOptions,
+			style: this._options.style,
+		});
+		this._api.onceReady()
+			.then(() => console.info(`🌐 Connected to API "${this._api._metadata.name}" (${this._api._endpoint})\nℹ️ API runs STAC ${this._api._metadata.stac_version} & GeoVisio ${this._api._metadata.geovisio_version}`))
+			.catch(e => this._loader.dismiss(e, this._t.gvs.error_api));
+	}
+
+	/**
+	 * This allows to retrieve an always correct class name.
+	 * This is crap, but avoids issues with Webpack & so on.
+	 * 
+	 * Each inheriting class must override this method.
+	 */
+	getClassName() {
+		return "CoreView";
+	}
+
+	/**
+	 * Ends all form of life in this object.
+	 * 
+	 * This is useful for Single Page Applications (SPA), to remove various event listeners.
+	 */
+	destroy() {
+		delete this._options;
+		delete this._t;
+		delete this._api;
+		delete this._loader;
+		this.loaderContainer.remove();
+		delete this.loaderContainer;
+	}
+
+	/**
+	 * Is the view running in a small container (small embed or smartphone)
+	 * @returns {boolean} True if container is small
+	 */
+	isWidthSmall() {
+		return this.container?.offsetWidth < 576;
+	}
+
+	/**
+	 * Is the view running in a small-height container (small embed or smartphone)
+	 * @returns {boolean} True if container height is small
+	 */
+	isHeightSmall() {
+		return this.container?.offsetHeight < 400;
+	}
+	
+	/**
+	 * Change the currently picture and/or sequence.
+	 * Calling the method without parameters unselects.
+	 * @param {string} [seqId] The sequence UUID
+	 * @param {string} [picId] The picture UUID
+	 * @param {boolean} [force=false] Force select even if already selected
+	 */
+	select(seqId = null, picId = null, force = false) {
+		const prevSeqId = this._selectedSeqId || null;
+		const prevPicId = this._selectedPicId || null;
+		if(!force && prevPicId == picId) { return; } // Avoid running if already selected
+
+		this._selectedSeqId = seqId;
+		this._selectedPicId = picId;
+
+		/**
+		 * Event for sequence/picture selection
+		 *
+		 * @event select
+		 * @memberof CoreView
+		 * @type {object}
+		 * @property {object} detail Event information
+		 * @property {string} detail.seqId The selected sequence ID
+		 * @property {string} detail.picId The selected picture ID (or null if not a precise picture clicked)
+		 * @property {string} [detail.prevSeqId] The previously selected sequence ID (or null if none)
+		 * @property {string} [detail.prevPicId] The previously selected picture ID (or null if none)
+		 */
+		this.dispatchEvent(new CustomEvent("select", {
+			detail: {
+				seqId,
+				picId,
+				prevSeqId,
+				prevPicId,
+			}
+		}));
+	}
+}

package/src/components/Loader.css

@@ -0,0 +1,56 @@
+.gvs .gvs-loader {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+}
+
+.gvs .gvs-loader.gvs-loader-visible {
+	visibility: visible;
+	opacity: 1;
+}
+
+/* Loader overlay */
+.gvs .gvs-loader {
+	visibility: hidden;
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	opacity: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 40px;
+	align-items: center;
+	background: #37474F;
+	z-index: 9000;
+	transition: all 0.5s;
+	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+	font-weight: 550;
+	color: white;
+	font-size: 1.4em;
+	text-align: center;
+}
+
+.gvs .gvs-loader a {
+	color: white !important;
+}
+
+/* Flashing text */
+.gvs .gvs-loader > div > span {
+	animation: blinker 2s linear infinite;
+}
+@keyframes blinker { 50% { opacity: 0.3; } }
+
+/* Rotating logo */
+.gvs .gvs-loader .gvs-loader-img {
+	width: 150px;
+	animation: rotating 1.4s linear infinite;
+}
+
+@keyframes rotating {
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}

package/src/components/Loader.js

@@ -0,0 +1,111 @@
+import "./Loader.css";
+import LogoDead from "../img/logo_dead.svg";
+import LoaderImg from "../img/marker.svg";
+
+/**
+ * Loader is a full-screen loading message.
+ * @private
+ * 
+ * @param {CoreView} parent The parent view
+ * @param {Element} container The DOM element to create loader into
+ */
+export default class Loader {
+	constructor(parent, container) {
+		this._parent = parent;
+		this.container = container;
+		this.container.classList.add("gvs-loader", "gvs-loader-visible");
+
+		// Logo
+		const logo = document.createElement("img");
+		logo.src = LoaderImg;
+		logo.title = this._parent._t.map.loading;
+		logo.classList.add("gvs-loader-img");
+		this.container.appendChild(logo);
+
+		// Label (1 serious, then fun ones)
+		const labelWrapper = document.createElement("div");
+		const label = document.createElement("span");
+		const nextLabelFun = () => (
+			this._parent._t.gvs.loading_labels_fun[
+				Math.floor(Math.random() * this._parent._t.gvs.loading_labels_fun.length)
+			]
+		);
+		label.innerHTML = this._parent._t.gvs.loading_labels_serious[
+			Math.floor(Math.random() * this._parent._t.gvs.loading_labels_serious.length)
+		];
+		const nextLabelFct = () => setTimeout(() => {
+			label.innerHTML = nextLabelFun();
+			this._loaderLabelChanger = nextLabelFct();
+		}, 500 + Math.random() * 1000);
+		this._loaderLabelChanger = nextLabelFct();
+		labelWrapper.appendChild(label);
+
+		this.container.appendChild(labelWrapper);
+	}
+
+	/**
+	 * Is the loader visible ?
+	 * @returns {boolean} True if visible
+	 */
+	isVisible() {
+		return this.container.classList.contains("gvs-loader-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
+	 */
+	dismiss(err = null, errMeaningful = null, next = null) {
+		clearTimeout(this._loaderLabelChanger);
+
+		if(!err) {
+			this.container.classList.remove("gvs-loader-visible");
+			setTimeout(() => this.container.remove(), 2000);
+
+			/**
+			 * Event for viewer being ready to use (API loaded)
+			 *
+			 * @event ready
+			 * @memberof CoreView
+			 */
+			const readyEvt = new CustomEvent("ready");
+			this._parent.dispatchEvent(readyEvt);
+
+			if(next) { next(); }
+		}
+		else {
+			if(err !== true) { console.error(err); }
+
+			// Change content
+			this.container.children[0].src = LogoDead;
+			this.container.children[0].style.width = "200px";
+			this.container.children[0].style.animation = "unset";
+			let errHtml = `<small>${next ? this._parent._t.gvs.error_click : this._parent._t.gvs.error_retry}</small>`;
+			if(errMeaningful) { errHtml = errMeaningful + "<br />" + errHtml; }
+			this.container.children[1].innerHTML = `${this._parent._t.gvs.error}<br />${errHtml}`;
+			if(next) {
+				this.container.addEventListener("click", next);
+			}
+			const errLabel = errMeaningful || "Panoramax JS had a blocking exception";
+
+			/**
+			 * Event for viewer failing to initially load
+			 *
+			 * @event broken
+			 * @memberof CoreView
+			 * @type {object}
+			 * @property {object} detail Event information
+			 * @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);
+		}
+	}
+}

package/src/components/Map.css

@@ -0,0 +1,65 @@
+/* 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 {
+	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); }
+}
+
+.gvs-map-thumb-loader {
+	background-color: rgb(230,230,230);
+	border-radius: 65px;
+	max-height: 60px;
+	margin: 5px 35px;
+	animation: rotating 2s linear infinite;
+}
+
+.gvs-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;
+}
+
+/* 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 {
+		width: 100% !important;
+		height: 100% !important;
+	}
+}