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

package/build/components/ui/Popup.js

@@ -1,145 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets.js";
-import { faSvg, panel } from "../styles.js";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
-
-/**
- * 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: 400px;
-			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="inline"
-					size="l"
-					@click=${this.close.bind(this)}
-				>
-					${fa(faXmark)}
-				</pnx-button>
-
-				<slot></slot>
-			</div>
-		`;
-	}
-}
-
-customElements.define("pnx-popup", Popup);

package/build/components/ui/ProgressBar.js

@@ -1,104 +0,0 @@
-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/build/components/ui/QualityScore.js

@@ -1,147 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { QUALITYSCORE_VALUES } from "../../utils/utils.js";
-
-/**
- * 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, reflect: true},
-		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);