@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/src/components/ui/Popup.js

@@ -0,0 +1,145 @@
+import { LitElement, html, css } from "lit";
+import { fa } from "../../utils/widgets";
+import { panel, faSvg } from "../styles";
+import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+
+/**
+ * Popup Element displays a full overlay container.
+ * @class Panoramax.components.ui.Popup
+ * @element pnx-popup
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.Popup#open
+ * @fires Panoramax.components.ui.Popup#close
+ * @example
+ * ```html
+ * <pnx-popup @close=${() => alert("closed")}>
+ *    <h3>Popup content</h3>
+ * </pnx-popup>
+ * ```
+ */
+export default class Popup extends LitElement {
+	/** @private */
+	static styles = [ panel, faSvg, css`
+		/* Backdrop */
+		:host {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			opacity: 0;
+			visibility: hidden;
+			pointer-events: none;
+			transition: all 0.2s;
+			background: rgba(0, 0, 0, 0.85);
+		}
+		:host(*[visible]) {
+			opacity: 1;
+			visibility: visible;
+			pointer-events: unset;
+			z-index: 200;
+		}
+
+		/* Content backgroud */
+		.pnx-panel {
+			box-sizing: border-box;
+			position: relative;
+			width: 90%;
+			max-height: 90%;
+			max-width: 550px;
+			overflow-y: auto;
+		}
+
+		.btn-close {
+			position: absolute;
+			top: 15px;
+			right: 15px;
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.Popup#
+	 * @type {Object}
+	 * @property {boolean} [visible=true] Is the popup visible to user ?
+	 */
+	static properties = {
+		visible: {type: Boolean, reflect: true},
+	};
+
+	constructor() {
+		super();
+		this.visible = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// Backdrop closing
+		this.addEventListener("click", e => {
+			if(e.target === this) { this.close(); }
+		});
+
+		// Esc closing
+		document.addEventListener("keyup", e => {
+			if(e.key === "Escape" && this.visible) {
+				this.close();
+			}
+		});
+	}
+
+	/** @private */
+	attributeChangedCallback(name, _old, value) {
+		super.attributeChangedCallback(name, _old, value);
+
+		if(name == "visible") {
+			if(value === "" || value === true) {
+				/**
+				 * Event for popup opening
+				 * @event Panoramax.components.ui.Popup#open
+				 * @type {Event}
+				 */
+				this.dispatchEvent(new Event("open"));
+			}
+		}
+	}
+
+	/**
+	 * Close popup
+	 * @memberof Panoramax.components.ui.Popup#
+	 */
+	close() {
+		this.visible = false;
+
+		/**
+		 * Event for popup closing
+		 * @event Panoramax.components.ui.Popup#close
+		 * @type {Event}
+		 */
+		this.dispatchEvent(new Event("close"));
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<div class="pnx-panel pnx-padded">
+				<pnx-button
+					class="btn-close"
+					kind="flat"
+					size="l"
+					@click=${this.close.bind(this)}
+				>
+					${fa(faXmark)}
+				</pnx-button>
+
+				<slot></slot>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-popup", Popup);

package/src/components/ui/ProgressBar.js

@@ -0,0 +1,104 @@
+import { LitElement, css, html, nothing } from "lit";
+
+/**
+ * Progress bar with nice styling.
+ * @class Panoramax.components.ui.ProgressBar
+ * @element pnx-progress-bar
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-loader value="42" ._t=${viewer._t} />
+ * ```
+ */
+export default class ProgressBar extends LitElement {
+	/** @private */
+	static styles = css`
+		progress {
+			max-width: 80vh;
+			width: 300px;
+			height: 16px;
+			appearance: none;
+			-webkit-appearance: none;
+			border: 1px solid var(--grey-semi-dark);
+			background-color: var(--grey);
+			border-radius: 8px;
+			overflow: hidden;
+			padding: 3px;
+			box-sizing: border-box;
+			display: block;
+		}
+
+		progress::-webkit-progress-bar {
+			background-color: var(--grey);
+		}
+
+		/* Don't merge with -moz below, for some f*ing reason a list selector doesn't work with Chrome */
+		progress::-webkit-progress-value {
+			background-color: var(--blue);
+			border-radius: 5px;
+			box-sizing: border-box;
+		}
+
+		progress::-moz-progress-bar {
+			background-color: var(--blue);
+			border-radius: 5px;
+			box-sizing: border-box;
+		}
+
+		progress[value=""]::-moz-progress-bar,
+		progress:not([value])::-moz-progress-bar {
+			animation: indeterminateAnimation 1.5s infinite linear;
+		}
+
+		progress.indeterminate {
+			position: relative;
+			background-color: var(--grey);
+			overflow: hidden;
+		}
+
+		progress.indeterminate::after {
+			content: "";
+			position: absolute;
+			left: 3px;
+			top: 3px;
+			bottom: 3px;
+			width: 20%;
+			background-color: var(--blue);
+			border-radius: 5px;
+			animation: indeterminateAnimation 1.5s infinite linear;
+			pointer-events: none;
+		}
+
+		@keyframes indeterminateAnimation {
+			0%   { margin-left: 0%; width: 2%; }
+			15%  { margin-left: 0%; width: 20%; }
+			50%  { margin-left: 40%; width: 20%; }
+			85%  { margin-left: 80%; width: 20%; }
+			100% { margin-left: 98%; width: 2%; }
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.ProgressBar#
+	 * @type {Object}
+	 * @property {number} [value] Progress bar percentage (0-100) or empty for indeterminate state
+	 */
+	static properties = {
+		value: {type: Number},
+	};
+
+	/** @private */
+	render() {
+		return html`
+			<progress
+				value=${this.value >= 0 ? this.value : nothing}
+				class=${this.value >= 0 ? nothing : "indeterminate"}
+				max="100"
+				title=${this._t?.map.loading}
+			></progress>
+		`;
+	}
+}
+
+customElements.define("pnx-progress-bar", ProgressBar);

package/src/components/ui/QualityScore.js

@@ -0,0 +1,147 @@
+import { LitElement, html, css } from "lit";
+import { QUALITYSCORE_VALUES } from "../../utils/utils";
+
+/**
+ * Quality Score element displays the picture quality grade.
+ * @class Panoramax.components.ui.QualityScore
+ * @element pnx-quality-score
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.QualityScore#change
+ * @example
+ * ```html
+ * <!-- Read-only -->
+ * <pnx-quality-score grade="5" ._t=${viewer._t} />
+ * 
+ * <!-- Input -->
+ * <pnx-quality-score grade="5" input="pnx-qs-input" @change=${() => alert('changed')} ._t=${viewer._t} />
+ * ```
+ */
+export default class QualityScore extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			gap: 0px;
+			justify-content: center;
+			height: 2em;
+			font-size: 18px;
+			display: inline-flex;
+			align-items: center;
+			color: white;
+		}
+	
+		/* Single letter */
+		span, label {
+			width: 1.2em;
+			height: 1.5em;
+			line-height: 1.5em;
+			display: inline-block;
+			border: 0.05em solid white;
+			text-align: center;
+			background-color: gray;
+			color: rgba(255,255,255,0.9);
+			font-family: var(--font-family);
+			font-weight: 800;
+			vertical-align: middle;
+		}
+
+		/* Rounded corners for first/last */
+		span:first-of-type, label:first-of-type {
+			border-top-left-radius: 0.4em;
+			border-bottom-left-radius: 0.4em;
+		}
+
+		span:last-of-type, label:last-of-type {
+			border-top-right-radius: 0.4em;
+			border-bottom-right-radius: 0.4em;
+		}
+
+		/* Selected letter */
+		.selected, input[type="checkbox"]:checked + label {
+			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 {
+			font-size: 1.2em;
+			height: 1.6em;
+			line-height: 1.6em;
+			border-radius: 0.3em !important;
+		}
+
+		input[type="checkbox"] { display: none; }
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.QualityScore#
+	 * @type {Object}
+	 * @property {number|string} [grade=0] The grade (5=A, 1=E, 0=none selected), or a list of grades
+ 	 * @property {string} [input=false] If set, score is an input and value is used as ID prefix
+	 */
+	static properties = {
+		grade: {type: String},
+		input: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.grade = 0;
+		this.input = false;
+	}
+
+	/** @private */
+	_onInput() {
+		// List all checked boxes
+		const newgrade = [];
+		for(let i of this.renderRoot.querySelectorAll("input")) {
+			if(i.checked) { newgrade.push(i.value); }
+		}
+		this.grade = newgrade.join(",");
+
+		/**
+		 * Event for grade change
+		 * @event Panoramax.components.ui.QualityScore#change
+		 * @type {CustomEvent}
+		 */
+		this.dispatchEvent(new CustomEvent("change", {bubbles: true, composed: true}));
+	}
+
+	/** @private */
+	render() {
+		const grades = `${this.grade}`.split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
+		if(this.input) {
+			return QUALITYSCORE_VALUES.map((pv, index) => {
+				return html`
+				<input
+					id="${this.input}-${pv.label}"
+					type="checkbox"
+					name="qualityscore"
+					value="${5-index}"
+					@change="${this._onInput}"
+					.checked=${grades.includes(5-index)}
+				/>
+				<label
+					for="${this.input}-${pv.label}"
+					title="${this._t?.pnx.filter_qualityscore_help}"
+					style="background-color: ${pv.color}"
+				>
+					${pv.label}
+				</label>
+			`;});
+		}
+		else {
+			return QUALITYSCORE_VALUES.map((pv, index) => html`
+				<span class="${grades.includes(5-index) ? "selected" : ""}" style="background-color: ${pv.color}">
+					${pv.label}
+				</span>
+			`);
+		}
+	}
+}
+
+customElements.define("pnx-quality-score", QualityScore);