@panoramax/web-viewer 3.2.3-develop-6e69906d → 3.2.3-develop-8b82a4e5

package/src/components/menus/Share.js

@@ -1,22 +1,8 @@
-import { LitElement, css, nothing } from "lit";
-import { html, unsafeStatic } from "lit/static-html.js";
+import { LitElement, css, html } from "lit";
 import { fa } from "../../utils/widgets";
-import { josmBboxParameters } from "../../utils/utils";
 import { faSvg, textarea, titles } from "../styles";
-
-import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
-import { faCloudArrowDown } from "@fortawesome/free-solid-svg-icons/faCloudArrowDown";
-import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
-import { faPrint } from "@fortawesome/free-solid-svg-icons/faPrint";
 import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
-import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
-import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
-import { faSatelliteDish } from "@fortawesome/free-solid-svg-icons/faSatelliteDish";
-import { faSquareRss } from "@fortawesome/free-solid-svg-icons/faSquareRss";
-
-const JOSM_REMOTE_URL = "http://127.0.0.1:8111";
-const ID_URL = "https://www.openstreetmap.org/edit?editor=id";
 
 /**
  * Share Menu displays links for quick picture sharing.
@@ -54,25 +40,15 @@ export default class ShareMenu extends LitElement {
 			flex-grow: 2;
 			flex-shrink: 2;
 		}
-
-		.pnx-many-buttons.pnx-edit-buttons pnx-button,
-		.pnx-many-buttons.pnx-edit-buttons pnx-link-button {
-			flex-basis: 30%;
-			flex-grow: 1;
-			flex-shrink: 1;
-		}
 	` ];
 
 	/** @private */
 	static properties = {
-		_pic: {state: true},
 		_baseUrl: {state: true},
-		_josm: {state: true},
 	};
 
 	constructor() {
 		super();
-		this._josm = false;
 		this._onUrlChange();
 	}
 
@@ -82,9 +58,6 @@ export default class ShareMenu extends LitElement {
 		this._parent?.onceReady().then(() => {
 			this._onUrlChange();
 			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
-			
-			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
-			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
 		});
 	}
 
@@ -93,110 +66,12 @@ export default class ShareMenu extends LitElement {
 		this._baseUrl = window.location.href.replace(/\/$/, "");
 	}
 
-	/** @private */
-	_onPictureLoad() {
-		this._pic = this._parent?.psv?.getPictureMetadata();
-	}
-
-	/**
-	 * Enable or disable JOSM live editing using [Remote](https://josm.openstreetmap.de/wiki/Help/RemoteControlCommands)
-	 * @private
-	 */
-	_toggleJOSMLive() {
-		this._josm = !this._josm;
-
-		if(this._josm) {
-			// Check if JOSM remote is enabled
-			fetch(JOSM_REMOTE_URL+"/version")
-				.then(() => {
-					// First loading : download + zoom
-					const p1 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
-					if(p1) {
-						const url = `${JOSM_REMOTE_URL}/load_and_zoom?${p1}`;
-						fetch(url).catch(e => {
-							console.warn(e);
-							this._toggleJOSMLive();
-						});
-					}
-
-					// Enable event listening
-					this._josmListener = () => {
-						const p2 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
-						if(p2) {
-							// Next loadings : just zoom
-							//   This avoids desktop focus to go on JOSM instead of
-							//   staying on web browser
-							const url = `${JOSM_REMOTE_URL}/zoom?${p2}`;
-							fetch(url).catch(e => {
-								console.warn(e);
-								this._toggleJOSMLive();
-							});
-						}
-					};
-					this._parent?.psv?.addEventListener?.("picture-loaded", this._josmListener);
-					this._parent?.psv?.addEventListener?.("picture-loading", this._josmListener);
-				})
-				.catch(e => {
-					console.warn(e);
-					alert(this._parent?._t.pnx.error_josm);
-					this._toggleJOSMLive();
-				});
-		}
-		else {
-			if(this._josmListener) {
-				this._parent?.psv?.removeEventListener?.("picture-loading", this._josmListener);
-				this._parent?.psv?.removeEventListener?.("picture-loaded", this._josmListener);
-				delete this._josmListener;
-			}
-		}
-	}
-
 	/** @private */
 	render() {
 		const shareUrl = this._parent?.urlHandler?.nextShortLink(this._baseUrl) || this._baseUrl;
 		const iframe = `<iframe src="${shareUrl}" style="border: none; width: 500px; height: 300px"></iframe>`;
 
-		const idOpts = this._pic && {
-			"map": `19/${this._pic.gps[1]}/${this._pic.gps[0]}`,
-			"source": "Panoramax",
-			"photo_overlay": "panoramax",
-			"photo": `panoramax/${this._pic.id}`,
-		};
-		const idUrl = idOpts && `${ID_URL}#${new URLSearchParams(idOpts).toString()}`;
-
 		return html`
-			${this._pic && html`
-				<p style="margin: 0 0 10px 0;">
-					${this._pic?.caption?.license ? html`${unsafeStatic(this._parent?._t.pnx.legend_license.replace("{l}", this._pic.caption.license))}` : ""}
-				</p>
-			`}
-
-			<h4 style="margin-top: 0">${fa(faLink)} ${this._parent?._t.pnx.share_links}</h4>
-			<div class="pnx-many-buttons">
-				${this._pic && html`
-					<pnx-link-button
-						download
-						target="_blank"
-						href=${this._pic?.panorama?.hdUrl}
-					>${fa(faCloudArrowDown)} ${this._parent?._t.pnx.share_image}</pnx-link-button>
-				`}
-				${this._parent?.api?.getRSSURL() && html`
-					<pnx-link-button
-						target="_blank"
-						href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
-						title=${this._parent?._t.pnx.share_rss_title}
-					>
-						${fa(faSquareRss)} ${this._parent?._t.pnx.share_rss}
-					</pnx-link-button>
-				`}
-				<pnx-copy-button ._t=${this._parent?._t} text=${shareUrl}>
-					${fa(faCopy)} ${this._parent?._t.pnx.share_page}
-				</pnx-copy-button>
-				${this._parent.isWidthSmall() ? nothing : html`<pnx-button @click=${window.print.bind(window)}>
-					${fa(faPrint)} ${this._parent?._t.pnx.share_print}
-				</pnx-button>`}
-			</div>
-
 			<h4>
 				${fa(faMap)} ${this._parent?._t.pnx.share_embed}
 				<pnx-link-button
@@ -210,22 +85,7 @@ export default class ShareMenu extends LitElement {
 			<div class="pnx-many-buttons">
 				<textarea readonly>${iframe}</textarea>
 				<pnx-copy-button ._t=${this._parent?._t} text=${iframe}></pnx-copy-button>
-			</div>
-			
-			${this._pic && html`
-				<h4>${fa(faPen)} ${this._parent?._t.pnx.edit_osm}</h4>
-				<div class="pnx-many-buttons pnx-edit-buttons">
-					<pnx-link-button href=${idUrl} target="_blank">
-						${fa(faLocationDot)} ${this._parent?._t.pnx.id}
-					</pnx-link-button>
-					<pnx-button
-						id="pnx-edit-josm"
-						active=${this._josm ? "" : nothing}
-						@click=${this._toggleJOSMLive}
-						title="${this._parent?._t.pnx.josm_live}"
-					>${fa(faSatelliteDish)} ${this._parent?._t.pnx.josm}</pnx-button>
-				</div>
-			`}`;
+			</div>`;
 	}
 }
 

package/src/components/styles.js

@@ -126,6 +126,7 @@ export const btn = css`
 		position: relative;
 		width: 100%;
 		height: 100%;
+		min-width: 26px;
 	}
 
 	.pnx-btn:disabled { color: var(--widget-bg-inactive); }
@@ -140,11 +141,23 @@ export const btn = css`
 	}
 
 	.pnx-btn .svg-inline--fa,
-	.pnx-btn ::slotted(.svg-inline--fa) {
+	.pnx-btn ::slotted(.svg-inline--fa),
+	.pnx-btn slot .svg-inline--fa {
 		height: 16px;
 	}
 
 	/* Sizing */
+	.pnx-btn-sm {
+		border-radius: 6px;
+		line-height: 12px;
+		font-size: 12px;
+	}
+
+	.pnx-btn.pnx-btn-sm .svg-inline--fa,
+	.pnx-btn.pnx-btn-sm ::slotted(.svg-inline--fa) {
+		height: 12px;
+	}
+
 	.pnx-btn-l {
 		border-radius: 12px;
 		height: 24px;
@@ -231,6 +244,34 @@ export const btn = css`
 	.pnx-btn-superflat:not(:disabled):hover {
 		background-color: var(--widget-bg-hover);
 	}
+
+	/* Inline style */
+	.pnx-btn-inline,
+	.pnx-btn-inline.pnx-btn-active,
+	.pnx-btn-inline.pnx-btn-active:hover,
+	.pnx-btn-inline:not(:disabled):hover {
+		border: none;
+		color: var(--widget-font);
+		background-color: var(--widget-bg);
+	}
+
+	.pnx-btn-inline:not(:disabled):hover {
+		background-color: var(--widget-bg-hover);
+	}
+
+	/* Superinline style */
+	.pnx-btn-superinline,
+	.pnx-btn-superinline.pnx-btn-active,
+	.pnx-btn-superinline.pnx-btn-active:hover,
+	.pnx-btn-superinline:not(:disabled):hover {
+		border: none;
+		color: var(--widget-font-direct);
+		background-color: var(--widget-bg);
+	}
+
+	.pnx-btn-superinline:not(:disabled):hover {
+		background-color: var(--widget-bg-hover);
+	}
 `;
 
 // Titles
@@ -323,50 +364,9 @@ export const expandable = css`
 	}
 `;
 
-// Tables
-export const tables = css`
-	table {
-		border-collapse: collapse;
-		font-size: 0.9rem;
-		width: 100%;
-	}
-
-	thead {
-		background-color: var(--blue-pale);
-	}
-
-	th[scope="row"] {
-		text-align: left;
-	}
-
-	th, td {
-		border: 1px solid var(--grey-semi-dark);
-		padding: 8px 10px;
-		max-width: 600px;
-	}
-
-	.pnx-table-light th[scope="row"] {
-		width: 30%;
-	}
-
-	.pnx-table-light th,
-	.pnx-table-light td {
-		border: none;
-		padding: 5px 10px;
-		text-align: left;
+// Print hidden
+export const noprint = css`
+	@media print {
+		.pnx-print-hidden { display: none !important; }
 	}
-
-	.pnx-table-light .pnx-td-with-id {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	table:not(.pnx-table-light) td:last-of-type {
-		text-align: center;
-	}
-
-	table:not(.pnx-table-light) tbody > tr:nth-of-type(even) {
-		background-color: var(--grey);
-	}
-`;
+`;

package/src/components/ui/Button.js

@@ -23,10 +23,11 @@ export default class Button extends LitElement {
 	 * @memberof Panoramax.components.ui.Button#
 	 * @type {Object}
 	 * @property {boolean} [active=false] Whether the button is in an active state.
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat)
-	 * @property {string} [size=md] The size of the button (md, l, xl, xxl)
+	 * @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} [disabled=false] Whether the button is disabled.
 	 * @property {string} [type] The button type (e.g., 'submit').
+	 * @property {string} [title] Tooltip text displayed when hovering over the button
 	 */
 	static properties = {
 		active: {type: Boolean},
@@ -34,6 +35,7 @@ export default class Button extends LitElement {
 		size: {type: String},
 		disabled: {type: Boolean},
 		type: {type: String},
+		title: { type: String },
 	};
 
 	constructor() {

package/src/components/ui/CopyButton.js

@@ -1,8 +1,9 @@
-import { LitElement, html } from "lit";
+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.
@@ -18,7 +19,18 @@ import { btn, faSvg } from "../styles";
  */
 export default class CopyButton extends LitElement {
 	/** @private */
-	static styles = [faSvg, btn];
+	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.
@@ -26,10 +38,16 @@ export default class CopyButton extends LitElement {
      * @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},
 	};
 
@@ -37,6 +55,9 @@ export default class CopyButton extends LitElement {
 		super();
 		this.data = "";
 		this.input = "";
+		this.unstyled = false;
+		this.kind = "full";
+		this.size = "md";
 		this._active = false;
 		this.addEventListener("click", this._onClick);
 	}
@@ -59,10 +80,18 @@ export default class CopyButton extends LitElement {
 	/** @private */
 	render() {
 		/* eslint-disable indent */
-		return html`<button class="pnx-btn pnx-btn-full ${this._active ? "pnx-btn-active" : ""}" part="btn">
+		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 || "Copied"} ${fa(faCheck)}` :
-				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || "Copy"}</slot>`
+				html`${this._t?.pnx.copied || ""} ${fa(faCheck)}` :
+				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || ""}</slot>`
 			}
 		</button>`;
 	}

package/src/components/ui/LinkButton.js

@@ -1,4 +1,4 @@
-import { LitElement, css } from "lit";
+import { LitElement } from "lit";
 import { btn } from "../styles";
 
 /**
@@ -20,11 +20,7 @@ import { btn } from "../styles";
  */
 export default class LinkButton extends LitElement {
 	/** @private */
-	static styles = [ btn, css`
-		.pnx-btn {
-			padding: 5px 0;
-		}
-	` ];
+	static styles = btn;
 
 	/**
 	 * Component properties.
@@ -36,6 +32,7 @@ export default class LinkButton extends LitElement {
 	 * @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 },
@@ -44,11 +41,13 @@ export default class LinkButton extends LitElement {
 		download: { type: String },
 		class: { type: String },
 		kind: {type: String},
+		size: {type: String},
 	};
 
 	constructor() {
 		super();
 		this.kind = "full";
+		this.size = "md";
 	}
 
 	/** @private */
@@ -58,7 +57,7 @@ export default class LinkButton extends LitElement {
 		this.constructor.observedAttributes
 			.filter(k => this[k] !== undefined)
 			.forEach(k => a.setAttribute(k, this[k]));
-		a.classList.add("pnx-btn", `pnx-btn-${this.kind}`);
+		a.classList.add("pnx-btn", `pnx-btn-${this.kind}`, `pnx-btn-${this.size}`);
 		const slot = document.createElement("slot");
 		a.appendChild(slot);
 		return a;

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/Map.js

@@ -106,7 +106,10 @@ export default class Map extends maplibregl.Map {
 		// Timeout for initial loading
 		setTimeout(() => {
 			if(!this.loaded() && this._parent?.loader.isVisible()) {
-				this._parent.loader.dismiss({}, this._parent._t.map.slow_loading, () => {});
+				this._parent.loader.dismiss({}, this._parent._t.map.slow_loading, async () => {
+					await this._postLoad();
+					this._parent.loader.dismiss();
+				});
 			}
 		}, 15000);
 

package/src/components/ui/QualityScore.js

@@ -22,19 +22,20 @@ export default class QualityScore extends LitElement {
 		:host {
 			gap: 0px;
 			justify-content: center;
-			height: 42px;
+			height: 2em;
+			font-size: 18px;
 			display: inline-flex;
 			align-items: center;
+			color: white;
 		}
 	
 		/* Single letter */
 		span, label {
-			font-size: 18px;
-			width: 25px;
-			height: 30px;
-			line-height: 28px;
+			width: 1.2em;
+			height: 1.5em;
+			line-height: 1.5em;
 			display: inline-block;
-			border: 1px solid white;
+			border: 0.05em solid white;
 			text-align: center;
 			background-color: gray;
 			color: rgba(255,255,255,0.9);
@@ -45,37 +46,31 @@ export default class QualityScore extends LitElement {
 
 		/* Rounded corners for first/last */
 		span:first-of-type, label:first-of-type {
-			border-top-left-radius: 8px !important;
-			border-bottom-left-radius: 8px !important;
+			border-top-left-radius: 0.4em;
+			border-bottom-left-radius: 0.4em;
 		}
 
 		span:last-of-type, label:last-of-type {
-			border-top-right-radius: 8px !important;
-			border-bottom-right-radius: 8px !important;
+			border-top-right-radius: 0.4em;
+			border-bottom-right-radius: 0.4em;
 		}
 
 		/* Selected letter */
 		.selected, input[type="checkbox"]:checked + label {
-			width: 30px;
-			height: 42px;
-			line-height: 41px;
-			border-radius: 8px;
-			font-size: 27px;
-			color: white;
-			border: 2px solid white;
+			font-size: 1.3em;
+			height: 1.6em;
+			line-height: 1.6em;
+			border-radius: 0.3em !important;
 		}
 
 		/* Clickable letter for input */
 		label { cursor: pointer; }
 
 		label:hover {
-			width: 28px;
-			height: 35px;
-			line-height: 34px;
-			border-radius: 3px;
-			font-size: 22px;
-			color: white;
-			border: 2px solid white;
+			font-size: 1.2em;
+			height: 1.6em;
+			line-height: 1.6em;
+			border-radius: 0.3em !important;
 		}
 
 		input[type="checkbox"] { display: none; }