@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/src/components/styles.js

@@ -0,0 +1,365 @@
+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: sans-serif;
+	}
+
+	.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;
+	}
+`;
+
+// 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;
+	}
+
+	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;
+	}
+
+	input.pnx-100w {
+		width: 100%;
+		box-sizing: border-box;
+	}
+`;
+
+// Buttons
+export const btn = css`
+	:host {
+		display: inline-block;
+	}
+	
+	/* Common properties */
+	.pnx-btn {
+		white-space: nowrap;
+		font-size: 0.9em;
+		font-family: sans-serif;
+		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%;
+	}
+
+	.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) {
+		height: 16px;
+	}
+
+	/* Sizing */
+	.pnx-btn-l {
+		border-radius: 12px;
+		height: 24px;
+		line-height: 24px;
+		font-size: 20px;
+		width: 24px;
+	}
+
+	.pnx-btn-xl {
+		border-radius: 20px;
+		height: 40px;
+		line-height: 40px;
+		font-size: 16px;
+		font-weight: 400;
+		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;
+		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);
+	}
+`;
+
+// Titles
+export const titles = css`
+	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;
+	}
+`;
+
+// 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;
+	}
+`;
+
+// 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;
+	}
+
+	.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

@@ -0,0 +1,75 @@
+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)
+	 * @property {string} [size=md] The size of the button (md, l, xl, xxl)
+	 * @property {boolean} [disabled=false] Whether the button is disabled.
+	 * @property {string} [type] The button type (e.g., 'submit').
+	 */
+	static properties = {
+		active: {type: Boolean},
+		kind: {type: String},
+		size: {type: String},
+		disabled: {type: Boolean},
+		type: {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);

package/src/components/ui/ButtonGroup.css

@@ -0,0 +1,49 @@
+/* Togglable in group */
+pnx-button-group > pnx-togglable-group > pnx-button {
+	width: 100%;
+	height: 100%;
+}
+
+/* Row */
+pnx-button-group[dir="row"] > :not(:first-child):not(:last-child)::part(btn),
+pnx-button-group[dir="row"] > :not(:first-child):not(:last-child) > ::part(btn) {
+	border-radius: 0;
+	border-left: none;
+	border-right: none;
+}
+
+pnx-button-group[dir="row"] > :first-child::part(btn),
+pnx-button-group[dir="row"] > :first-child > ::part(btn) {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	border-right: none;
+}
+
+pnx-button-group[dir="row"] > :last-child::part(btn),
+pnx-button-group[dir="row"] > :last-child > ::part(btn) {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	border-left: none;
+}
+
+/* Column */
+pnx-button-group[dir="column"] > :not(:first-child):not(:last-child)::part(btn),
+pnx-button-group[dir="column"] > :not(:first-child):not(:last-child) > ::part(btn) {
+	border-radius: 0;
+	border-top: none;
+	border-bottom: none;
+}
+
+pnx-button-group[dir="column"] > :first-child::part(btn),
+pnx-button-group[dir="column"] > :first-child > ::part(btn) {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	border-bottom: none;
+}
+
+pnx-button-group[dir="column"] > :last-child::part(btn),
+pnx-button-group[dir="column"] > :last-child > ::part(btn) {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-top: none;
+}

package/src/components/ui/ButtonGroup.js

@@ -0,0 +1,68 @@
+import { LitElement, css, html } from "lit";
+import "./ButtonGroup.css";
+
+/**
+ * Button Group element allows to merge many button in a single bar.
+ * @class Panoramax.components.ui.ButtonGroup
+ * @element pnx-button-group
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-button-group id="pnx-widget-player" dir="row" size="xl" class="pnx-print-hidden">
+ *   <pnx-button>B1</pnx-button>
+ *   <pnx-button>B2</pnx-button>
+ * </pnx-button-group>
+ * ```
+ */
+export default class ButtonGroup extends LitElement {
+	/** @private */
+	static styles = css`
+		div {
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: stretch;
+			align-content: stretch;
+			justify-content: center;
+		}
+
+		div.row { flex-direction: row; }
+		div.column { flex-direction: column; }
+
+		div.xl { line-height: 38px; font-size: 20px; }
+		div.row.xl { height: 38px; }
+		div.column.xl { width: 38px;}
+
+		div.row ::slotted(*) { height: 100%; }
+		div.column ::slotted(*) { width: 100%; }
+
+		div.row.xl ::slotted(*) { min-width: 38px; }
+		div.column.xl ::slotted(*) { min-height: 38px; }
+	`;
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.ui.ButtonGroup#
+     * @type {Object}
+     * @property {string} [dir] Group direction (row, column)
+     * @property {string} [size] Group size (md, xl)
+     */
+	static properties = {
+		dir: {type: String},
+		size: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.dir = "row";
+		this.size = "md";
+	}
+
+	/** @private */
+	render() {
+		return html`<div class="${this.dir} ${this.size}">
+			<slot></slot>
+		</div>`;
+	}
+}
+
+customElements.define("pnx-button-group", ButtonGroup);

package/src/components/ui/CopyButton.js

@@ -0,0 +1,71 @@
+import { LitElement, html } 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";
+
+/**
+ * Copy Button element allows top copy in clipboard some text.
+ * @class Panoramax.components.ui.CopyButton
+ * @element pnx-copy-button
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-copy-button text="content to copy" ._t=${viewer._t}>
+ *   Copy me !
+ * </pnx-copy-button>
+ * ```
+ */
+export default class CopyButton extends LitElement {
+	/** @private */
+	static styles = [faSvg, btn];
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.ui.CopyButton#
+     * @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)
+     */
+	static properties = {
+		text: {type: String},
+		input: {type: String},
+		_active: {state: true, type: Boolean},
+	};
+
+	constructor() {
+		super();
+		this.data = "";
+		this.input = "";
+		this._active = false;
+		this.addEventListener("click", this._onClick);
+	}
+
+	/** @private */
+	_onClick() {
+		let textToCopy;
+		if(this.input !== "") {
+			const inputField = document.getElementById(this.input);
+			textToCopy = inputField.innerText || inputField.value;
+		}
+		else if(this.text !== "") {
+			textToCopy = this.text;
+		}
+		navigator.clipboard.writeText(textToCopy);
+		this._active = true;
+		setTimeout(() => this._active = false, 2000);
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		return html`<button class="pnx-btn pnx-btn-full ${this._active ? "pnx-btn-active" : ""}" part="btn">
+			${this._active ?
+				html`${this._t?.pnx.copied || "Copied"} ${fa(faCheck)}` :
+				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || "Copy"}</slot>`
+			}
+		</button>`;
+	}
+}
+
+customElements.define("pnx-copy-button", CopyButton);

package/src/components/ui/Grade.js

@@ -0,0 +1,54 @@
+import { LitElement, html, css } from "lit";
+import { fa } from "../../utils/widgets";
+import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons/faStar";
+import { faSvg } from "../styles";
+
+/**
+ * Grade element displays a 5-star rating.
+ * @class Panoramax.components.ui.Grade
+ * @element pnx-grade
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-grade stars="5" .t=${viewer._t} />
+ * ```
+ */
+export default class Grade extends LitElement {
+	/** @private */
+	static styles = [ faSvg, css`
+		span { color: var(--orange); }
+	`];
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.ui.Grade#
+     * @type {Object}
+     * @property {number} [stars=0] 1 to 5 grade (or 0 for unknown value)
+     */
+	static properties = {
+		stars: {type: Number},
+	};
+
+	constructor() {
+		super();
+		this.stars = 0;
+	}
+
+	/** @private */
+	render() {
+		const nbStars = this.stars || 0;
+		const fastars = [];
+		for(let i=1; i <= nbStars; i++) {
+			fastars.push(fa(faStar));
+		}
+		for(let i=nbStars+1; i <= 5; i++) {
+			fastars.push(fa(farStar));
+		}
+		return html`<span>
+			${fastars}
+		</span> (${this.stars ? this.stars+"/5" : this._t?.pnx.metadata_quality_missing || "?"})`;
+	}
+}
+
+customElements.define("pnx-grade", Grade);