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

package/build/components/core/PhotoViewer.js

@@ -0,0 +1,650 @@
+import { DEFAULTS as PSDefaults, SYSTEM as PSSystem } from "@photo-sphere-viewer/core";
+import URLHandler from "../../utils/URLHandler.js";
+import Basic from "./Basic.js";
+import Photo, { PSV_ANIM_DURATION, PSV_DEFAULT_ZOOM } from "../ui/Photo.js";
+import { createWebComp } from "../../utils/widgets.js";
+import { DISABLE_ANNOTATIONS_PARAM, isInIframe, isNullId } from "../../utils/utils.js";
+import { default as InitParameters, alterPSVState, alterPhotoViewerState } from "../../utils/InitParameters.js";
+import PresetManager from "../../utils/PresetsManager.js";
+import { deepQuerySelector } from "shadow-dom-selector";
+import PhotoViewerStyles from "./PhotoViewer.css" with { type: "css" };
+document.adoptedStyleSheets.push(PhotoViewerStyles);
+
+
+export const PSV_ZOOM_DELTA = 20;
+const PSV_MOVE_DELTA = Math.PI / 6;
+export const KEYBOARD_SKIP_FOCUS_WIDGETS = ["pnx-mini", "pnx-widget-player", "pnx-widget-zoom"];
+
+
+/**
+ * Photo Viewer is a component showing pictures (without any map).
+ *
+ * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
+ *
+ * If you need a viewer with map, checkout [Viewer component](#Panoramax.components.core.Viewer).
+ *
+ * Make sure to set width/height through CSS for proper display.
+ * @class Panoramax.components.core.PhotoViewer
+ * @element pnx-photo-viewer
+ * @extends Panoramax.components.core.Basic
+ * @property {Panoramax.components.ui.Loader} loader The loader screen
+ * @property {Panoramax.utils.API} api The API manager
+ * @property {Panoramax.components.ui.Photo} psv The Photo Sphere Viewer component itself
+ * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
+ * @property {Panoramax.components.ui.Popup} popup The popup container
+ * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters manager
+ * @property {Panoramax.utils.PresetsManager} presetsManager The semantics presets manager
+ * @fires Panoramax.components.core.Basic#select
+ * @fires Panoramax.components.core.Basic#ready
+ * @fires Panoramax.components.core.Basic#broken
+ * @slot `top-left` The top-left corner
+ * @slot `top` The top middle corner
+ * @slot `top-right` The top-right corner
+ * @slot `bottom-left` The bottom-left corner
+ * @slot `bottom` The bottom middle corner
+ * @slot `bottom-right` The bottom-right corner
+ * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
+ * @example
+ * ```html
+ * <!-- Basic example -->
+ * <pnx-photo-viewer
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
+ * />
+ *
+ * <!-- With slotted widgets -->
+ * <pnx-photo-viewer
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
+ * >
+ *   <p slot="top-right">My custom text</p>
+ *   <p slot="editors"><a href="https://my.own.tool/">Edit in my own tool</a></p>
+ * </pnx-photo-viewer>
+ *
+ * <!-- With only your custom widgets -->
+ * <pnx-photo-viewer
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
+ *   widgets="false"
+ * >
+ *   <p slot="top-right">My custom text</p>
+ * </pnx-photo-viewer>
+ * ```
+ */
+export default class PhotoViewer extends Basic {
+	/**
+	 * Component properties. All of [Basic properties](#Panoramax.components.core.Basic+properties) are available as well.
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 * @mixes Panoramax.components.core.Basic#properties
+	 * @type {Object}
+	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
+	 * @property {object} [psv-options] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv-options="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
+	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
+	 * @property {string} [picture] The picture ID to display
+	 * @property {string} [sequence] The sequence ID of the picture displayed
+	 * @property {object} [fetch-options] 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))
+	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
+	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
+	 * @property {string} [skip-tags-menu-opening=false] Should the "Tags" menu automatically open when you toggle Annotations switch ? Set true to avoid auto-opening.
+	 * @property {string} [share-base-url] Override the default base URL (current page) for the Share widget. Useful to lead to a public page when viewer is used in a closed tool.
+	 */
+	static properties = {
+		"psv-options": {converter: Basic.GetJSONConverter()},
+		widgets: {type: String},
+		"url-parameters": {type: String},
+		"keyboard-shortcuts": {type: String},
+		tabindex: {type: Number},
+		"skip-tags-menu-opening": {type: String},
+		"share-base-url": {type: String},
+		...Basic.properties
+	};
+
+	constructor() {
+		super();
+
+		// Defaults
+		this["psv-options"] = {};
+		this["url-parameters"] = this.getAttribute("url-parameters") || "true";
+		this["keyboard-shortcuts"] = this.getAttribute("keyboard-shortcuts") || "true";
+		this["skip-tags-menu-opening"] = (this.getAttribute("skip-tags-menu-opening") || "false") !== "true";
+		this["share-base-url"] = this.getAttribute("share-base-url") || null;
+		this.widgets = this.getAttribute("widgets") || "true";
+
+		// Init DOM containers
+		this.grid = createWebComp("pnx-cornered-grid");
+		this.psvContainer = document.createElement("div");
+		this.psvContainer.setAttribute("slot", "bg");
+		this.grid.appendChild(this.psvContainer);
+		this.popup = createWebComp("pnx-popup", {_parent: this, onclose: this._onPopupClose.bind(this)});
+		this.tabindex = 0;
+
+		// Cache for sequences metadata
+		// Used by semantics metadata component to avoid re-downloads
+		this._sequencesMetadata = {};
+	}
+
+	/** @private */
+	_createInitParamsHandler() {
+		this._initParams = new InitParameters(
+			InitParameters.GetComponentProperties(PhotoViewer, this),
+			Object.assign({}, this.urlHandler?.currentURLParams(), this.urlHandler?.currentURLParams(true)),
+			{ disableAnnotations: localStorage.getItem(DISABLE_ANNOTATIONS_PARAM) },
+		);
+	}
+
+	/** @private */
+	_initWidgets() {
+		if(this._initParams.getParentPostInit().widgets !== "false") {
+			if(!isInIframe()) {
+				this.grid.appendChild(createWebComp("pnx-widget-player", {
+					slot: this.isWidthMedium() ? "top-right": "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() || this.isWidthMedium() ? "md": "xl",
+				}));
+
+				this.grid.appendChild(createWebComp("pnx-annotations-switch", {
+					slot: this.isWidthMedium() ? "top-right": "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() || this.isWidthMedium() ? "md": "xl",
+				}));
+			}
+
+			if(isInIframe()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: "bottom-right",
+					light: true,
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this.grid.appendChild(this.legend);
+			}
+			else if(!this.isWidthSmall()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: !this.isWidthSmall() ? "top-left" : undefined,
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+
+				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
+					slot: "bottom-right",
+					class: "pnx-print-hidden",
+					_parent: this
+				}));
+				this.grid.appendChild(this.legend);
+			}
+			else {
+				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
+				this.bottomDrawer = createWebComp("pnx-bottom-drawer", {
+					slot: "bottom",
+					_parent: this,
+					class: this._initParams.getParentPostInit().willLoadPicture ? undefined: "pnx-hidden",
+				});
+				this.bottomDrawer.appendChild(this.legend);
+				this.grid.appendChild(this.bottomDrawer);
+				this.addEventListener("select", e => {
+					if(isNullId(e.detail.picId)) { this.bottomDrawer.classList.add("pnx-hidden"); }
+					else { this.bottomDrawer.classList.remove("pnx-hidden"); }
+				});
+			}
+		}
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this.presetsManager = new PresetManager(this.lang);
+
+		if(this["url-parameters"] !== "false") {
+			this.urlHandler = new URLHandler(this);
+			this.onceReady().then(() => {
+				this.urlHandler.listenToChanges();
+				this.urlHandler._onParentChange();
+			});
+		}
+
+		this.onceAPIReady().then(this._postAPIInit.bind(this));
+
+		this._moveChildToGrid();
+		window.addEventListener("DOMContentLoaded", () => {
+			this._moveChildToGrid();
+		}, { once: true });
+	}
+
+	/** @private */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.urlHandler?.destroy();
+		this.psv?.destroy();
+		document.body.removeEventListener("click", this._toggleKeyboardBasedOnFocus);
+		window.removeEventListener("keypress", this._toggleKeyboardBasedOnFocus);
+	}
+
+	// eslint-disable-next-line class-methods-use-this
+	getClassName() {
+		return "PhotoViewer";
+	}
+
+	/**
+	 * Waits for PhotoViewer to be completely ready (map & PSV loaded, first picture also if one is wanted)
+	 * @returns {Promise} When viewer is ready
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	async onceReady() {
+		return await this.oncePSVReady().then(() => {
+			if(this._initParams.getParentPostInit().willLoadPicture && !this.psv.getPictureMetadata()) { return this.onceFirstPicLoaded(); }
+			else { return Promise.resolve(); }
+		});
+	}
+
+	/** @private */
+	render() {
+		return [this.loader, this.grid, this.popup];
+	}
+
+	getSubComponentsNames() {
+		return super.getSubComponentsNames().concat(["psv", "grid", "popup", "urlHandler"]);
+	}
+
+	/**
+	 * Waiting for Photo Sphere Viewer to be available.
+	 * @returns {Promise} When PSV is ready to use
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	oncePSVReady() {
+		let waiter;
+		return new Promise(resolve => {
+			waiter = setInterval(() => {
+				if(this.psv && typeof this.psv === "object") {
+					if(this.psv.container) {
+						clearInterval(waiter);
+						resolve();
+					}
+					else if(this.psv.addEventListener) {
+						this.psv.addEventListener("ready", () => {
+							clearInterval(waiter);
+							resolve();
+						}, {once: true});
+					}
+				}
+			}, 250);
+		});
+	}
+
+	/**
+	 * Waits for first picture to display on PSV.
+	 * @returns {Promise}
+	 * @fulfil {undefined} When picture is shown
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	onceFirstPicLoaded() {
+		return this.oncePSVReady().then(() => {
+			if(this.psv.getPictureMetadata()) { return Promise.resolve(); }
+			else {
+				return new Promise(resolve => {
+					this.psv.addEventListener("picture-loaded", resolve, {once: true});
+				});
+			}
+		});
+	}
+
+	/** @private */
+	_postAPIInit() {
+		this.loader.setAttribute("value", 30);
+		this._createInitParamsHandler();
+
+		const myPostInitParams = this._initParams.getParentPostInit();
+
+		this._initPSV();
+		this._initWidgets();
+		alterPhotoViewerState(this, myPostInitParams);
+
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
+
+		if(myPostInitParams.willLoadPicture) {
+			if(this.psv.getPictureMetadata()) {
+				this.loader.dismiss();
+			}
+			else {
+				this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
+			}
+		}
+		else {
+			this.loader.dismiss();
+		}
+	}
+
+	/** @private */
+	_initPSV() {
+		try {
+			this.psv = new Photo(this, this.psvContainer, {
+				shouldGoFast: this._psvShouldGoFast.bind(this),
+				keyboard: "always",
+				keyboardActions: {
+					...PSDefaults.keyboardActions,
+					"8": "ROTATE_UP",
+					"2": "ROTATE_DOWN",
+					"4": "ROTATE_LEFT",
+					"6": "ROTATE_RIGHT",
+
+					"PageUp": () => this.psv.goToNextPicture(),
+					"9": () => this.psv.goToNextPicture(),
+
+					"PageDown": () => this.psv.goToPrevPicture(),
+					"3": () => this.psv.goToPrevPicture(),
+
+					"5": () => this.moveCenter(),
+					"*": () => this.moveCenter(),
+
+					"Home": () => this._toggleFocus?.(),
+					"7": () => this._toggleFocus?.(),
+
+					"End": () => this.mini.toggleAttribute("collapsed"),
+					"1": () => this.mini.toggleAttribute("collapsed"),
+
+					" ": () => this.psv.toggleSequencePlaying(),
+					"0": () => this.psv.toggleSequencePlaying(),
+				},
+				...this._initParams.getPSVInit()
+			});
+			this.oncePSVReady().then(() => {
+				this.loader.setAttribute("value", 50);
+				alterPSVState(this.psv, this._initParams.getPSVPostInit());
+			});
+
+			// Show class when PSV is playing sequence
+			this.psv.addEventListener("sequence-playing", () => this.classList.add("pnx-playing"));
+			this.psv.addEventListener("sequence-stopped", () => this.classList.remove("pnx-playing"));
+
+			// One-click focusing
+			this.psv.addEventListener("dblclick", () => clearTimeout(this._gridFocus));
+			this.psv.addEventListener("click", e => {
+				clearTimeout(this._gridFocus);
+
+				if(e.data.target.tagName === "CANVAS") {
+					if(!this._hasMenuOpened() && (!this.isMapWide || (this.isMapWide && !this.isMapWide()))) {
+						this._gridFocus = setTimeout(() => {
+							if(this.grid.toggleAway()) {
+								this.classList.add("pnx-grid-toggled");
+							}
+							else {
+								this.classList.remove("pnx-grid-toggled");
+							}
+						}, 250);
+					}
+				}
+			});
+			this.psvContainer.addEventListener("mousemove", () => {
+				if(this.grid._hidden) {
+					clearTimeout(this._gridFocus);
+					this.grid.toggleAway(true);
+					this.classList.remove("pnx-grid-toggled");
+				}
+			});
+		}
+		catch(e) {
+			let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;
+			this.loader.dismiss(e, err);
+		}
+	}
+
+	/** @private */
+	// eslint-disable-next-line class-methods-use-this
+	_hasMenuOpened() {
+		// eslint-disable-next-line eqeqeq
+		return deepQuerySelector("pnx-togglable-group > div > .pnx-panel:not(.pnx-hidden)") != null;
+	}
+
+	/** @private */
+	_enableKeyboard() {
+		this.psv.startKeyboardControl();
+	}
+
+	/** @private */
+	_disableKeyboard() {
+		this.psv.stopKeyboardControl();
+	}
+
+	/** @private */
+	_toggleKeyboardBasedOnFocus(e) {
+		const target = e?.target || document.activeElement;
+		if(this.contains(target)) {
+			// Check if focus is not in a widget
+			for(let cn of this.grid.childNodes) {
+				if(
+					cn.getAttribute("slot") !== "bg"
+					&& !KEYBOARD_SKIP_FOCUS_WIDGETS.includes(cn.tagName.toLowerCase())
+				) {
+					if(cn.contains(target)) {
+						this._disableKeyboard();
+						return;
+					}
+				}
+			}
+
+			// Skip if popup is opened
+			if(this.popup.getAttribute("visible") !== null) {
+				this._disableKeyboard();
+				return;
+			}
+
+			this._enableKeyboard();
+		}
+		else {
+			this._disableKeyboard();
+		}
+	}
+
+	/** @private */
+	_handleKeyboardManagement() {
+		// General
+		window.addEventListener("click", e => this._toggleKeyboardBasedOnFocus(e));
+		window.addEventListener("keypress", this._toggleKeyboardBasedOnFocus.bind(this));
+
+		// Popup
+		this.popup.addEventListener("open", this._disableKeyboard.bind(this));
+		this.popup.addEventListener("close", this._enableKeyboard.bind(this));
+		this.psv.addEventListener("click", this._enableKeyboard.bind(this));
+
+		// Widgets
+		for(let cn of this.grid.childNodes) {
+			if(
+				cn.getAttribute("slot") !== "bg"
+				&& !KEYBOARD_SKIP_FOCUS_WIDGETS.includes(cn.tagName.toLowerCase())
+			) {
+				cn.addEventListener("focusin", this._disableKeyboard.bind(this));
+				cn.addEventListener("focusout", () => {
+					if(this.popup.getAttribute("visible") === null) {
+						this._enableKeyboard();
+					}
+				});
+			}
+		}
+	}
+
+	/**
+	 * Given context, should tiles be loaded in PSV.
+	 * @private
+	 */
+	_psvShouldGoFast() {
+		return (this.psv._sequencePlaying && this.psv.getTransitionDuration() < 1000);
+	}
+
+	/** @private */
+	_moveChildToGrid() {
+		const slotContent = Array.from(this.querySelectorAll("[slot]"));
+
+		slotContent.forEach(n => {
+			// Add parent + translation for our components
+			if(n.tagName?.toLowerCase().startsWith("pnx-")) {
+				n._parent = this;
+				n._t = this._t;
+			}
+
+			// Editors slot -> legend
+			if(n.getAttribute("slot") === "editors") {
+				this.onceReady().then(() => this.legend?.appendChild(n));
+			}
+			// Add to grid else
+			else {
+				this.grid.appendChild(n);
+			}
+		});
+	}
+
+	/**
+	 * Change full-page popup visibility and content
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 * @param {boolean} visible True to make it appear
+	 * @param {string|Element[]} [content] The new popup content
+	 */
+	setPopup(visible, content = null) {
+		if(visible) { this.popup.setAttribute("visible", ""); }
+		else { this.popup.removeAttribute("visible"); }
+
+		this.popup.innerHTML = "";
+		if(typeof content === "string") { this.popup.innerHTML = content; }
+		else if(Array.isArray(content)) { content.forEach(c => this.popup.appendChild(c)); }
+	}
+
+	/** @private */
+	_onPopupClose() {
+		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: this.map && this.isMapWide() ? "map" : "pic" } }));
+	}
+
+	/** @private */
+	_showQualityScoreDoc() {
+		this.setPopup(true, [createWebComp("pnx-quality-score-doc", {_t: this._t})]);
+	}
+
+	/** @private */
+	_showReportForm() {
+		if(!this.psv.getPictureMetadata()) { throw new Error("No picture currently selected"); }
+		this.setPopup(true, [createWebComp("pnx-report-form", {_parent: this})]);
+	}
+
+	/** @private */
+	_showShareOptions() {
+		this.setPopup(true, [createWebComp("pnx-share-menu", {_parent: this, "base-url": this["share-base-url"]})]);
+	}
+
+	/** @private */
+	_showSemanticsDoc() {
+		this.setPopup(true, [createWebComp("pnx-semantics-doc", {_t: this._t})]);
+	}
+
+	/** @private */
+	_showSemanticsDownload() {
+		this.setPopup(true, [createWebComp("pnx-semantics-download", {_t: this._t})]);
+	}
+
+	/**
+	 * Move the view of main component to its center.
+	 * For map, center view on selected picture.
+	 * For picture, center view on image center.
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	moveCenter() {
+		const meta = this.psv.getPictureMetadata();
+		if(!meta) { return; }
+
+		this._psvAnimate({
+			speed: PSV_ANIM_DURATION,
+			yaw: 0,
+			pitch: 0,
+			zoom: PSV_DEFAULT_ZOOM
+		});
+	}
+
+	/**
+	 * Moves the view of main component slightly to the left.
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	moveLeft() {
+		this._moveToDirection("left");
+	}
+
+	/**
+	 * Moves the view of main component slightly to the right.
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	moveRight() {
+		this._moveToDirection("right");
+	}
+
+	/**
+	 * Moves the view of main component slightly to the top.
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	moveUp() {
+		this._moveToDirection("up");
+	}
+
+	/**
+	 * Moves the view of main component slightly to the bottom.
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	moveDown() {
+		this._moveToDirection("down");
+	}
+
+	/**
+	 * Moves map or picture viewer to given direction.
+	 * @param {string} dir Direction to move to (up, left, down, right)
+	 * @private
+	 */
+	_moveToDirection(dir) {
+		let pos = this.psv.getPosition();
+		switch(dir) {
+		case "up":
+			pos.pitch += PSV_MOVE_DELTA;
+			break;
+		case "left":
+			pos.yaw -= PSV_MOVE_DELTA;
+			break;
+		case "down":
+			pos.pitch -= PSV_MOVE_DELTA;
+			break;
+		case "right":
+			pos.yaw += PSV_MOVE_DELTA;
+			break;
+		}
+		this._psvAnimate({ speed: PSV_ANIM_DURATION, ...pos });
+	}
+
+	/**
+	 * Overrided PSV animate function to ensure a single animation plays at once.
+	 * @param {object} options PSV animate options
+	 * @private
+	 */
+	_psvAnimate(options) {
+		if(this._lastPsvAnim) { this._lastPsvAnim.cancel(); }
+		this._lastPsvAnim = this.psv.animate(options);
+	}
+
+	/**
+	 * Listen to events from this components or one of its sub-components.
+	 *
+	 * For example, you can listen to `psv` events using prefix `psv:`.
+	 *
+	 * ```js
+	 * me.addEventListener("psv:picture-loading", doSomething);
+	 * ```
+	 * @param {string} type The event type to listen for
+	 * @param {function} listener The event handler
+	 * @param {object} [options] [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options)
+	 * @memberof Panoramax.components.core.PhotoViewer#
+	 */
+	addEventListener(type, listener, options) {
+		super.addEventListener(type, listener, options);
+	}
+}
+
+customElements.define("pnx-photo-viewer", PhotoViewer);