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

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

@@ -0,0 +1,152 @@
+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: 42px;
+			display: inline-flex;
+			align-items: center;
+		}
+	
+		/* Single letter */
+		span, label {
+			font-size: 18px;
+			width: 25px;
+			height: 30px;
+			line-height: 26px;
+			display: inline-block;
+			border: 1px solid white;
+			text-align: center;
+			background-color: gray;
+			color: rgba(255,255,255,0.9);
+			font-family: sans-serif;
+			font-weight: bold;
+			vertical-align: middle;
+		}
+
+		/* 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;
+		}
+
+		span:last-of-type, label:last-of-type {
+			border-top-right-radius: 8px !important;
+			border-bottom-right-radius: 8px !important;
+		}
+
+		/* Selected letter */
+		.selected, input[type="checkbox"]:checked + label {
+			width: 30px;
+			height: 42px;
+			line-height: 37px;
+			border-radius: 8px;
+			font-size: 27px;
+			color: white;
+			border: 2px solid white;
+		}
+
+		/* Clickable letter for input */
+		label { cursor: pointer; }
+
+		label:hover {
+			width: 28px;
+			height: 35px;
+			line-height: 30px;
+			border-radius: 3px;
+			font-size: 22px;
+			color: white;
+			border: 2px solid white;
+		}
+
+		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);

package/src/components/ui/SearchBar.js

@@ -0,0 +1,363 @@
+import { LitElement, html, css, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { map } from "lit/directives/map.js";
+import { fa, listenForMenuClosure } from "../../utils/widgets";
+import { faSvg } from "../styles";
+import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons/faMagnifyingGlass";
+import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
+import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+
+
+/**
+ * Search Bar Element displays an interactive search widget.
+ * @class Panoramax.components.ui.SearchBar
+ * @element pnx-search-bar
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.SearchBar#result
+ * @example
+ * ```html
+ * <pnx-search-bar
+ *   id="my-search-bar"
+ *   placeholder="Search something..."
+ *   .searcher=${mysearchfct}
+ *   ._parent=${viewer}
+ *   reduceable="false"
+ *   reduced="false"
+ *   size="xxl" @result=${e => console.log(e.detail)}
+ * >
+ *   <!-- Optional icon for display on left-side of search bar -->
+ * </pnx-search-bar>
+ * ```
+ */
+export default class SearchBar extends LitElement {
+	/** @private */
+	static styles = [ faSvg, css`
+		/* Container */
+		.sb {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 5px;
+			border: 1px solid var(--widget-border-div);
+			border-radius: 5px;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			height: 30px;
+			border-radius: 20px;
+			position: relative;
+			padding: 0 0 0 10px;
+			width: fit-content;
+			max-width: 100%;
+			box-sizing: border-box;
+		}
+		.sb.sb-xxl {
+			height: 40px;
+			line-height: 40px;
+		}
+		.sb.sb-reduceable {
+			width: 360px;
+		}
+		.sb.sb-reduceable.sb-reduced {
+			width: fit-content;
+			padding: 0;
+			gap: 0;
+		}
+
+		/* Text field */
+		.sb input {
+			background: none;
+			border: none !important;
+			outline: none;
+			height: 20px;
+			width: 100%;
+		}
+		.sb.sb-xxl input {
+			font-size: 1.1em;
+		}
+		.sb.sb-reduceable.sb-reduced input {
+			display: none;
+		}
+
+		/* Status icon */
+		.sb-icon {
+			cursor: pointer;
+			height: 30px;
+			line-height: 30px;
+			width: 30px;
+			min-width: 30px;
+			text-align: center;
+		}
+		.sb.sb-xxl .sb-icon {
+			height: 40px;
+			line-height: 40px;
+			width: 40px;
+			min-width: 40px;
+		}
+		.sb-icon svg {
+			pointer-events: none;
+			width: 14px;
+			height: 14px;
+		}
+
+		/* Search results */
+		.sb-results {
+			position: absolute;
+			top: 35px;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			max-width: calc(100% - 20px);
+			border: 1px solid var(--widget-border-div);
+			border-radius: 10px;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			z-index: 130;
+			font-size: 1em;
+  			line-height: normal;
+			font-family: sans;
+		}
+		.sb.sb-xxl .sb-results {
+			top: 45px;
+		}
+		.sb-result,
+		.sb-empty {
+			display: block;
+			padding: 5px 15px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			cursor: pointer;
+			border-radius: 0;
+		}
+		.sb-result:hover {
+			background-color: var(--widget-bg-hover);
+		}
+		.sb-result:first-child {
+			border-top-right-radius: 10px;
+			border-top-left-radius: 10px;
+			padding-top: 15px;
+		}
+		.sb-result:last-child {
+			border-bottom-right-radius: 10px;
+			border-bottom-left-radius: 10px;
+			padding-bottom: 15px;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.SearchBar#
+	 * @type {Object}
+	 * @property {string} [id] The ID attribute set on component and prefix for input as well
+	 * @property {string} [placeholder] Default text to display on empty field
+	 * @property {boolean} [reduceable=false] Can the search bar be collapsed (for mobile view)
+	 * @property {boolean} [reduced=false] Is the search bar currently collapsed ?
+	 * @property {string} [value] The default input value
+	 * @property {string} [size=md] The component sizing (md, xxl)
+	 * @property {function} [searcher] Search callback, function that takes as parameter the input text value, and resolves on list of results ({title, subtitle} and any other data you'd like to get on validation)
+	 * @property {boolean} [no-menu-closure=false] Set to true to ignore menu closure events
+	 */
+	static properties = {
+		id: {type: String},
+		placeholder: {type: String},
+		reduceable: {type: Boolean, reflect: true},
+		reduced: {type: Boolean, reflect: true},
+		value: {type: String},
+		size: {type: String},
+		_icon: {state: true},
+		_results: {state: true},
+		searcher: {type: Function},
+		"no-menu-closure": {type: Boolean},
+	};
+
+	constructor() {
+		super();
+
+		// State properties
+		this.reduceable = false;
+		this.reduced = false;
+		this.placeholder = nothing;
+		this.size = "md";
+		this._icon = "search";
+		this._results = null;
+		this["no-menu-closure"] = false;
+
+		// Other properties
+		this._throttler = null;
+		delete this._lastSearch;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		if(!this["no-menu-closure"]) { listenForMenuClosure(this, this.reset.bind(this)); }
+	}
+
+	/** @private */
+	attributeChangedCallback(name, _old, value) {
+		super.attributeChangedCallback(name, _old, value);
+		if(name == "value" && this._icon == "search") {
+			this._icon = "empty";
+		}
+	}
+
+	/** @private */
+	_onIconClick() {
+		if(["empty", "warn"].includes(this._icon)) {
+			this.reset();
+		}
+		if(this.reduceable && this._icon == "search") {
+			this.reduced = !this.reduced;
+		}
+	}
+
+	/** @private */
+	_onInputChange(e) {
+		this.value = e.target.value;
+		this._throttledSearch();
+	}
+
+	/** @private */
+	_onResultClick(item) {
+		/**
+		 * Event for search result clicked
+		 * @event Panoramax.components.ui.SearchBar#result
+		 * @type {CustomEvent}
+		 * @property {object|null} detail The data associated to clicked item (format based on searcher function results), or null on reset
+		 */
+		this.dispatchEvent(new CustomEvent("result", {bubbles: true, composed: true, detail: item}));
+
+		this._results = null;
+		if(this._throttler) {
+			clearTimeout(this._throttler);
+			this._throttler = null;
+		}
+
+		if(!this.reduceable && item) {
+			this.value = item?.title;
+			this._icon = "empty";
+		}
+		else {
+			this.value = "";
+			this._icon = "search";
+			if(this.reduceable) { this.reduced = true; }
+		}
+	}
+
+	/**
+	 * Limit search calls to every 250ms
+	 * @private
+	 */
+	_throttledSearch() {
+		if(this._throttler) {
+			clearTimeout(this._throttler);
+			delete this._throttler;
+		}
+
+		this._throttler = setTimeout(this._search.bind(this), 250);
+	}
+
+	/**
+	 * Perform real search
+	 * @private
+	 */
+	_search() {
+		if(!this.value || this.value.length == 0) {
+			this.reset();
+			return;
+		}
+
+		if(!this.searcher) {
+			console.warn("No search handler defined");
+			return;
+		}
+
+		this._icon = "loading";
+		this._results = null;
+
+		this.searcher(this.value).then(data => {
+			this._icon = "empty";
+			if(!data || data.length == 0) {
+				this._results = [];
+			}
+			else if(data === true) {
+				this._results = null;
+			}
+			else {
+				this._results = data;
+				if(!this["no-menu-closure"]) {
+					this._parent?.dispatchEvent(new CustomEvent("menu-opened", { detail: { menu: this }}));
+				}
+			}
+		}).catch(e => {
+			console.error(e);
+			this._icon = "warn";
+		});
+	}
+
+	/**
+	 * Empty results list and reset search bar content.
+	 */
+	reset() {
+		this._onResultClick(null);
+	}
+
+	/** @private */
+	render() {
+		const classes = {
+			sb: true,
+			"sb-xxl": this.size === "xxl",
+			"sb-reduceable": this.reduceable,
+			"sb-reduced": this.reduced,
+		};
+
+		return html`<div
+			id=${this.id}
+			class=${classMap(classes)}
+			part="container"
+		>
+			<slot name="pre" class=${classMap({"sb-reduced": this.reduced})}></slot>
+
+			<input
+				id="${this.id}-input"
+				type="text"
+				placeholder=${this.placeholder}
+				autocomplete="off"
+				@change=${this._onInputChange.bind(this)}
+				@keypress=${this._onInputChange.bind(this)}
+				@paste=${this._onInputChange.bind(this)}
+				@input=${this._onInputChange.bind(this)}
+				.value=${this.value || ""}
+				part="input"
+			/>
+
+			<span
+				class="sb-icon"
+				@click=${this._onIconClick.bind(this)}
+			>
+				${this._icon == "search" ? fa(faMagnifyingGlass) : nothing}
+				${this._icon == "loading" ? fa(faCircleNotch, { classes: ["fa-spin"] }) : nothing}
+				${this._icon == "empty" ? fa(faXmark) : nothing}
+				${this._icon == "warn" ? fa(faCircleExclamation) : nothing}
+			</span>
+
+			${!this.reduced && this._results ? html`
+				<div class="sb-results">
+					${this._results.length === 0 ? html`
+						<div class="sb-empty">${this._parent?._t?.pnx.search_empty}</div>
+					` : nothing}
+
+					${map(this._results, i => html`
+						<div class="sb-result" @click=${() => this._onResultClick(i)}>
+							${i.title}
+							${i.subtitle && i.subtitle != "" ? html`<br /><small>${i.subtitle}</small>` : nothing}
+						</div>
+					`)}
+				</div>
+			` : nothing}
+		</div>`;
+	}
+}
+
+customElements.define("pnx-search-bar", SearchBar);