@panoramax/web-viewer 3.2.3 → 4.0.0-develop-9f9cf858

package/src/components/menus/ReportForm.js

@@ -0,0 +1,133 @@
+import { LitElement, html, css, nothing } from "lit";
+import { faSvg, titles, select, textarea, input } from "../styles";
+import { fa } from "../../utils/widgets";
+import { faAt } from "@fortawesome/free-solid-svg-icons/faAt";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
+import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
+import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane";
+import { getUserAccount } from "../../utils/utils";
+
+const REPORT_NATURE = [
+	"", "blur_missing", "blur_excess", "inappropriate", "privacy",
+	"picture_low_quality", "mislocated", "copyright", "other"
+];
+
+/**
+ * Report Form displays a form to send issues about pictures.
+ * @class Panoramax.components.menus.ReportForm
+ * @element pnx-report-form
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-report-form ._parent=${viewer} />
+ * ```
+ */
+export default class ReportForm extends LitElement {
+	/** @private */
+	static styles = [ titles, faSvg, select, textarea, input, css`
+		.group {
+			margin-bottom: 10px;
+		}
+
+		.group:not(.group-inline) label {
+			margin-bottom: 5px;
+			display: inline-block;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		mode: {state: true},
+		failure: {state: true},
+	};
+
+	/** @private */
+	_onSubmit(e) {
+		e.preventDefault();
+
+		const picMeta = this._parent?.psv?.getPictureMetadata();
+		const data = Object.fromEntries(new FormData(e.target));
+		const params = {
+			issue: data.issue,
+			picture_id: data["whole-sequence"] ? null : picMeta?.id,
+			reporter_comments: data.comments,
+			reporter_email: data.email,
+			sequence_id: picMeta?.sequence?.id
+		};
+
+		this.mode = "wait";
+
+		// Call API
+		this._parent?.api.sendReport(params).then(() => {
+			this.mode = "success";
+		}).catch(e => {
+			console.error(e);
+			this.mode = "failure";
+			this.failure = e;
+		});
+	}
+
+	/** @private */
+	render() {
+		const userAccount = getUserAccount();
+
+		if(this.mode) {
+			return html`
+				<h4>${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}</h4>
+				<p>
+					${this.mode === "wait" ? this._parent?._t.pnx.report_wait : nothing}
+					${this.mode === "success" ? this._parent?._t.pnx.report_success : nothing}
+					${this.mode === "failure" ? this._parent?._t.pnx.report_failure.replace("{e}", this.failure) : nothing}
+				</p>
+			`;
+		}
+
+		return html`
+			<h4>${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}</h4>
+
+			${userAccount && this._parent?._t ? html`
+				<p>${this._parent?._t.pnx.report_auth.replace("{a}", userAccount.name)}</p>
+			` : nothing}
+
+			<form @submit=${this._onSubmit.bind(this)}>
+				<div class="group">
+					<label for="issue">${fa(faCircleInfo)} ${this._parent?._t.pnx.report_nature_label}</label>
+					<select name="issue" id="issue" required class="pnx-100w">
+						${REPORT_NATURE.map(nature => html`
+							<option
+								value=${nature}
+								${nature === "" ? html`disabled selected hidden` : nothing}
+							>
+								${this._parent?._t.pnx.report_nature[nature]}
+							</option>
+						`)}
+					</select>
+				</div>
+
+				<div class="group group-inline">
+					<input name="whole-sequence" id="whole-sequence" type="checkbox" />
+					<label for="whole-sequence">${this._parent?._t.pnx.report_whole_sequence}</label>
+				</div>
+
+				<div class="group">
+					<label for="comments">${fa(faCommentDots)} ${this._parent?._t.pnx.report_details}</label>
+					<textarea name="comments" id="comments" placeholder=${this._parent?._t.pnx.report_details_placeholder}></textarea>
+				</div>
+
+				${!userAccount ? html`
+					<div class="group">
+						<label for="email">${fa(faAt)} ${this._parent?._t.pnx.report_email}</label>
+						<input type="email" name="email" id="email" placeholder=${this._parent?._t.pnx.report_email_placeholder} class="pnx-100w" />
+					</div>
+				`: nothing}
+
+				<pnx-button type="submit" style="width: 100%">
+					${fa(faPaperPlane)} ${this._parent?._t.pnx.report_submit}
+				</pnx-button>
+			</form>
+		`;
+	}
+}
+
+customElements.define("pnx-report-form", ReportForm);

package/src/components/menus/Share.js

@@ -0,0 +1,100 @@
+import { LitElement, css, html } from "lit";
+import { fa } from "../../utils/widgets";
+import { faSvg, textarea, titles, input } from "../styles";
+import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
+import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
+
+/**
+ * Share Menu displays links for quick picture sharing.
+ * @class Panoramax.components.menus.ShareMenu
+ * @element pnx-share-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-share-menu ._parent=${viewer} />
+ * ```
+ */
+export default class ShareMenu extends LitElement {
+	/** @private */
+	static styles = [ faSvg, input, textarea, titles, css`
+		div[slot="content"] {
+			margin-top: 10px;
+		}
+		.links {
+			display: flex;
+			gap: 5px;
+		}
+		.embed {
+			display: flex;
+			gap: 5px;
+			align-items: center;
+			flex-direction: column;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		_url: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._onUrlChange();
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._parent?.onceReady().then(() => {
+			this._onUrlChange();
+			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
+		});
+	}
+
+	/** @private */
+	_onUrlChange() {
+		const baseUrl = window.location.href.replace(/\/$/, "");
+		this._url = this._parent?.urlHandler?.nextShortLink(baseUrl) || baseUrl;
+	}
+
+	/** @private */
+	render() {
+		const iframe = `<iframe src="${this._url}" style="border: none; width: 500px; height: 300px"></iframe>`;
+
+		return html`
+			<h4>${fa(faShareAlt)} ${this._parent?._t.pnx.share}</h4>
+			<pnx-tabs>
+				<h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_page}</h4>
+				<div slot="content">
+					<div class="links">
+						<input type="text" readonly value=${this._url} style="flex: 2" />
+						<pnx-copy-button ._t=${this._parent?._t} text=${this._url}></pnx-copy-button>
+					</div>
+				</div>
+					
+				<h4 slot="title">${fa(faMap)} ${this._parent?._t.pnx.share_embed}</h4>
+				<div slot="content">
+					<div class="embed">
+						<pnx-link-button
+							href="https://docs.panoramax.fr/web-viewer/03_URL_settings/"
+							target="_blank"
+							kind="superinline"
+							size="sm"
+						>
+							${fa(faCircleInfo)} ${this._parent?._t.pnx.share_embed_docs}
+						</pnx-link-button>
+						<textarea readonly>${iframe}</textarea>
+						<pnx-copy-button
+							._t=${this._parent?._t}
+							text=${iframe}
+							style="width: 100%"
+						></pnx-copy-button>
+					</div>
+				</div>
+			</pnx-tabs>`;
+	}
+}
+
+customElements.define("pnx-share-menu", ShareMenu);

package/src/components/menus/index.js

@@ -0,0 +1,15 @@
+/**
+ * Complex menus components
+ * @module Panoramax:components:menus
+ */
+
+export {default as MapFilters} from "./MapFilters";
+export {default as MapLayers} from "./MapLayers";
+export {default as MapBackground} from "./MapBackground";
+export {default as PlayerOptions} from "./PlayerOptions";
+export {default as QualityScoreDoc} from "./QualityScoreDoc";
+export {default as ReportForm} from "./ReportForm";
+export {default as Share} from "./Share";
+export {default as PictureLegend} from "./PictureLegend";
+export {default as MapLegend} from "./MapLegend";
+export {default as PictureMetadata} from "./PictureMetadata";

package/src/components/styles.js

@@ -0,0 +1,383 @@
+import { css } from "lit";
+
+/* eslint-disable import/no-unused-modules */
+
+// Classic panel
+export const panel = css`
+	.pnx-panel {
+		position: absolute;
+		transition: opacity 0.2s 0.1s;
+		border-radius: 25px;
+		border: 1px solid var(--widget-border-div);
+		background-color: var(--widget-bg);
+		color: var(--widget-font);
+		min-width: 250px;
+		box-sizing: border-box;
+		font-family: var(--font-family);
+	}
+
+	.pnx-panel.pnx-hidden {
+		opacity: 0;
+		display: block !important;
+		pointer-events: none;
+	}
+
+	.pnx-panel.pnx-padded {
+		padding: 15px;
+	}
+`;
+
+// Font Awesome SVG
+export const faSvg = css`
+	.svg-inline--fa {
+		display: var(--fa-display, inline-block);
+		height: 1em;
+		overflow: visible;
+		vertical-align: -0.125em;
+	}
+	svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
+		overflow: visible;
+		box-sizing: content-box;
+	}
+	@keyframes fa-spin {
+		from {transform:rotate(0deg);}
+		to {transform:rotate(360deg);}
+	}
+	.fa-spin {
+		animation: fa-spin 2s infinite linear;
+	}
+`;
+
+// Textarea
+export const textarea = css`
+	textarea {
+		background-color: var(--widget-bg);
+		color: var(--widget-font);
+		border: 1px solid var(--widget-border-div);
+		border-radius: 10px;
+		padding: 5px;
+		width: 100%;
+		box-sizing: border-box;
+		font-family: var(--font-family);
+	}
+`;
+
+// Select
+export const select = css`
+	select {
+		background-color: var(--widget-bg);
+		color: var(--widget-font);
+		border: 1px solid var(--widget-border-div);
+		border-radius: 20px;
+		font-size: 16px;
+		padding: 2px 10px;
+		font-family: var(--font-family);
+	}
+
+	select.pnx-100w {
+		width: 100%;
+		box-sizing: border-box;
+	}
+`;
+
+// Input
+export const input = css`
+	input {
+		background-color: var(--widget-bg);
+		color: var(--widget-font);
+		border: 1px solid var(--widget-border-div);
+		border-radius: 20px;
+		font-size: 16px;
+		padding: 2px 10px;
+		font-family: var(--font-family);
+	}
+
+	input.pnx-100w {
+		width: 100%;
+		box-sizing: border-box;
+	}
+`;
+
+// Buttons
+export const btn = css`
+	:host {
+		display: inline-flex;
+	}
+	
+	/* Common properties */
+	.pnx-btn {
+		white-space: nowrap;
+		font-size: 1em;
+		font-family: var(--font-family);
+		flex-grow: 1;
+		flex-shrink: 1;
+		text-align: center;
+		padding: 5px;
+		font-weight: 600;
+		flex-basis: 30%;
+		line-height: 18px;
+		justify-content: center;
+		border-radius: 8px;
+		cursor: pointer;
+		text-decoration: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		min-width: 26px;
+	}
+
+	.pnx-btn:disabled { color: var(--widget-bg-inactive); }
+
+	.pnx-btn.pnx-btn-active,
+	.pnx-btn.pnx-btn-active:hover,
+	.pnx-btn.pnx-btn-full.pnx-btn-active:hover,
+	.pnx-btn.pnx-btn-outline.pnx-btn-active:hover {
+		background-color: var(--widget-bg-active);
+		border-color: var(--widget-bg-active);
+		color: var(--widget-font-active);
+	}
+
+	.pnx-btn .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;
+		min-width: unset;
+	}
+
+	.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;
+		line-height: 24px;
+		font-size: 20px;
+		min-width: 24px;
+	}
+
+	.pnx-btn-xl {
+		border-radius: 20px;
+		height: 40px;
+		line-height: 40px;
+		font-size: 16px;
+		font-weight: 500;
+		min-width: 40px;
+		padding: 0 10px;
+		gap: 8px;
+	}
+
+	.pnx-btn.pnx-btn-xl .svg-inline--fa,
+	.pnx-btn.pnx-btn-xl ::slotted(.svg-inline--fa) {
+		height: 16px;
+	}
+
+	.pnx-btn-xxl {
+		border-radius: 28px;
+		height: 56px;
+		line-height: 56px;
+		font-size: 24px;
+		min-width: 56px;
+	}
+
+	.pnx-btn.pnx-btn-xxl .svg-inline--fa,
+	.pnx-btn.pnx-btn-xxl ::slotted(.svg-inline--fa) {
+		height: 24px;
+	}
+
+	/* Fully-filled style */
+	.pnx-btn-full {
+		background-color: var(--widget-bg-primary);
+		color: var(--widget-font-direct);
+		border: none;
+	}
+
+	.pnx-btn-full:not(:disabled):hover {
+		background-color: var(--widget-bg-primary-hover);
+	}
+
+	/* Outline style */
+	.pnx-btn-outline {
+		border: 1px solid var(--widget-border-btn);
+		color: var(--widget-font-direct);
+		background-color: var(--widget-bg);
+	}
+
+	.pnx-btn-outline:not(:disabled):hover {
+		background-color: var(--widget-bg-hover);
+	}
+
+	/* Flat style */
+	.pnx-btn-flat,
+	.pnx-btn-flat.pnx-btn-active,
+	.pnx-btn-flat.pnx-btn-active:hover,
+	.pnx-btn-flat:not(:disabled):hover {
+		border: 1px solid var(--widget-border-div);
+		color: var(--widget-font);
+		background-color: var(--widget-bg);
+	}
+
+	.pnx-btn-flat:not(:disabled):hover {
+		background-color: var(--widget-bg-hover);
+	}
+
+	/* Superflat style */
+	.pnx-btn-superflat,
+	.pnx-btn-superflat.pnx-btn-active,
+	.pnx-btn-superflat.pnx-btn-active:hover,
+	.pnx-btn-superflat:not(:disabled):hover {
+		border: 1px solid var(--widget-border-div);
+		color: var(--widget-font-direct);
+		background-color: var(--widget-bg);
+	}
+
+	.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,
+	.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);
+		background: none;
+	}
+
+	.pnx-btn-inline:not(:disabled):hover,
+	.pnx-btn-superinline: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 {
+		color: var(--widget-font-direct);
+	}
+`;
+
+// Titles
+export const titles = css`
+	h1, h2, h3, h4, h5, h6 {
+		font-family: var(--font-family);
+	}
+	
+	h3 {
+		font-size: 1.1em;
+		line-height: 1.1em;
+		font-weight: 500;
+		margin: 10px 0 10px 0;
+	}
+
+	h4 {
+		font-size: 1.0em;
+		line-height: 1.0em;
+		font-weight: 500;
+		margin: 15px 0;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 5px;
+	}
+
+	h4:first-of-type { margin-top: 0; }
+
+	h4 > svg.svg-inline--fa {
+		height: 18px;
+	}
+
+	h4[slot="title"] {
+		margin: 0;
+		justify-content: center;
+		font-size: 0.8em;
+		line-height: 2em;
+		padding: 0.5em 0;
+	}
+	h4[slot="title"] svg.svg-inline--fa {
+		height: 14px;
+	}
+`;
+
+// Active icon badge
+export const activeIcon = css`
+	.pnx-active-icon {
+		box-sizing: border-box;
+		background-color: var(--orange);
+		border: 3px solid #fff;
+		border-radius: 8px;
+		height: 15px;
+		left: 20px;
+		position: absolute;
+		top: 5px;
+		width: 15px;
+	}
+`;
+
+// Placeholder background
+export const placeholder = css`
+	@keyframes animatedBackground {
+		from {
+			background-position: 0 0;
+		}
+		to {
+			background-position: 1000px 0;
+		}
+	}
+
+	.pnx-placeholder-loading {
+		width: 100px;
+		height: 100px;
+		background-image: linear-gradient(
+			90deg,
+			#e4e4e4 0%,
+			#f1f1f1 40%,
+			#ededed 60%,
+			#e4e4e4 100%
+		);
+		background-position: 0px 0px;
+		background-repeat: repeat;
+		animation: animatedBackground 5s linear infinite;
+	}
+`;
+
+// Expandable block
+export const expandable = css`
+	details summary {
+		font-size: 1.0em;
+		line-height: 1.0em;
+		font-weight: 500;
+		margin: 15px 0;
+		cursor: pointer;
+	}
+
+	details summary svg {
+		height: 18px;
+		vertical-align: sub;
+		margin-right: 2px;
+	}
+`;
+
+// Print hidden
+export const noprint = css`
+	@media print {
+		.pnx-print-hidden { display: none !important; }
+	}
+`;

package/src/components/ui/Button.js

@@ -0,0 +1,77 @@
+import { LitElement } from "lit";
+import { btn } from "../styles";
+
+/**
+ * Button element displays a direct action button.
+ * Binds to a HTML button, so you can use any events offered by it.
+ * @class Panoramax.components.ui.Button
+ * @element pnx-button
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-button kind="flat" size="l" @click=${() => alert("click!")}>
+ *    Click on me
+ * </pnx-button>
+ * ```
+ */
+export default class Button extends LitElement {
+	/** @private */
+	static styles = btn;
+
+	/**
+	 * Component properties.
+	 * @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, 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},
+		kind: {type: String},
+		size: {type: String},
+		disabled: {type: Boolean},
+		type: {type: String},
+		title: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.active = false;
+		this.disabled = false;
+		this.kind = "full";
+		this.size = "md";
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		if(this.type === "submit") {
+			this.addEventListener("click", () => this.closest("FORM")?.requestSubmit());
+		}
+	}
+
+	/** @private */
+	render() {
+		const b = document.createElement("button");
+		b.setAttribute("part", "btn");
+
+		this.constructor.observedAttributes
+			.filter(k => this[k] !== undefined && this[k] !== false && !["active", "kind", "size"].includes(k))
+			.forEach(k => b.setAttribute(k, this[k]));
+
+		b.classList.add("pnx-btn", `pnx-btn-${this.kind}`, `pnx-btn-${this.size}`);
+		if(this.active) { b.classList.add("pnx-btn-active"); }
+
+		const slot = document.createElement("slot");
+		b.appendChild(slot);
+
+		return b;
+	}
+}
+
+customElements.define("pnx-button", Button);