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

package/build/components/styles.js

@@ -0,0 +1,557 @@
+import { css } from "lit";
+
+// 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;
+	}
+`;
+
+// Hidden
+export const hidden = css`
+	.pnx-hidden { display: none !important; }
+`;
+
+// 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);
+		resize: vertical;
+	}
+`;
+
+// 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[disabled] {
+		background-color: var(--widget-bg-inactive);
+	}
+
+	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;
+		pointer-events: none;
+	}
+
+	/* 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);
+	}
+
+	/* Fully-filled warning style */
+	.pnx-btn-fullwarn {
+		background-color: var(--widget-bg-warn);
+		color: var(--widget-font-warn);
+		border: none;
+	}
+
+	.pnx-btn-fullwarn:not(:disabled):hover {
+		background-color: var(--widget-bg-warn);
+	}
+
+	/* Fully-filled success style */
+	.pnx-btn-fullsuccess {
+		background-color: var(--widget-bg-success);
+		color: var(--widget-font-success);
+		border: none;
+	}
+
+	.pnx-btn-fullsuccess:not(:disabled):hover {
+		background-color: var(--widget-bg-success);
+	}
+
+	/* 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);
+	}
+`;
+
+// Button group
+export const btngroup = css`
+	pnx-button-group > pnx-button {
+		display: inline-flex;
+	}
+
+	pnx-button-group > pnx-button::part(btn) {
+		height: unset;
+	}
+
+	/* 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;
+	}
+`;
+
+// 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;
+	}
+`;
+
+// Counting badge
+export const badgeCount = css`
+	.pnx-badge-count {
+		box-sizing: border-box;
+		background-color: var(--grey-pale);
+		border-radius: 8px;
+		right: -6px;
+		position: absolute;
+		top: -6px;
+		width: 12px;
+		height: 12px;
+		font-size: 10px;
+		text-align: center;
+		line-height: 12px;
+		font-weight: 800;
+	}
+`;
+
+// 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; }
+	}
+`;
+
+// Data table
+export const table = css`
+	table {
+		border-collapse: collapse;
+		font-size: 0.9rem;
+		width: 100%;
+		max-width: 100%;
+		font-family: var(--font-family);
+		background: var(--white);
+	}
+
+	th, td {
+		padding: 10px;
+		text-align: left;
+		border-bottom: 1px solid #ddd;
+	}
+
+	th { font-weight: 600; }
+`;
+
+// Iconify icons
+export const iconify = css`
+	iconify-icon {
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+	}
+`;
+
+// Tabbed-legend data blocks
+export const dataBlocks = css`
+	.data-block {
+		display: inline-block;
+		margin: 8px 0;
+		box-sizing: border-box;
+		vertical-align: top;
+	}
+	.data-block h5 {
+		font-size: 0.8em;
+		font-weight: 400;
+		color: var(--blue-dark);
+		margin: 0 0 5px 0;
+		display: flex;
+		align-items: center;
+		gap: 5px;
+	}
+	.data-block h5 pnx-button { vertical-align: middle; }
+	.data-block h5 svg.svg-inline--fa { height: 14px; }
+	.data-block div {
+		font-size: 0.8em;
+	}
+`;
+
+// Documentation popup
+export const docPopup = css`
+	h4 {
+		font-size: 1.3em;
+		font-weight: 600;
+		border-bottom: 3px solid var(--grey-pale);
+		padding-bottom: 10px;
+  		padding-top: 5px;
+	}
+`;

package/build/components/ui/AnnotationsSwitch.js

@@ -0,0 +1,159 @@
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faTags, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { hasAnnotations } from "../../utils/picture.js";
+import { classMap } from "lit/directives/class-map.js";
+import { panel } from "../styles.js";
+import { DISABLE_ANNOTATIONS_PARAM } from "../../utils/utils.js";
+
+/**
+ * AnnotationsSwitch component allows to switch on/off pictures annotations.
+ * @class Panoramax.components.ui.AnnotationsSwitch
+ * @element pnx-annotations-switch
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-annotations-switch ._parent=${viewer} />
+ * ```
+ */
+export default class AnnotationsSwitch extends LitElement {
+	/** @private */
+	static styles = [ panel, css`
+		.pnx-panel {
+			padding: 5px;
+			margin-top: 5px;
+			width: max-content;
+  			min-width: unset;
+		}
+
+		/* Custom button look */
+		pnx-button::part(btn) {
+			border-radius: 8px;
+			height: 26px;
+			width: 26px;
+		}
+
+		pnx-button[size="xl"]::part(btn) {
+			border-radius: 8px;
+			height: 38px;
+			width: 38px;
+		}
+
+		pnx-button[active]::part(btn),
+		pnx-button[active]:hover::part(btn) {
+			background-color: var(--widget-bg-active) !important;
+			border-color: var(--widget-bg-active) !important;
+			color: var(--widget-font-active) !important;
+		}
+
+		/* No-annotations badge */
+		.pnx-annotations-switch-empty {
+			position: absolute;
+			top: 1px;
+			right: 1px;
+			color: var(--orange);
+			height: 8px;
+		}
+
+		pnx-button[size="xl"] .pnx-annotations-switch-empty {
+			top: 2px;
+			right: 2px;
+			height: 12px;
+		}
+
+		pnx-button[active] .pnx-annotations-switch-empty {
+			color: var(--yellow);
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.AnnotationsSwitch#
+	 * @type {Object}
+	 * @property {string} [size=xl] Button size (md, xl)
+	 */
+	static properties = {
+		size: {type: String},
+		_annotationsToggled: {state: true},
+		_warnNoAnnot: {state: true},
+		_warnNoAnnotTooltip: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._annotationsToggled = false;
+		this._warnNoAnnot = false;
+		this._warnNoAnnotTooltip = false;
+		this.size = "xl";
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this).then(() => {
+			this._parent.onceReady().then(() => {
+				this._parent.psv.addEventListener("annotations-toggled", e => {
+					this._annotationsToggled = e.detail.visible;
+					this._persistAnnotationsLocalStorage(this._annotationsToggled);
+				});
+
+				this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+				});
+			});
+
+			this._parent.onceFirstPicLoaded().then(() => {
+				this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+				this._persistAnnotationsLocalStorage(this._annotationsToggled);
+			});
+		});
+	}
+
+	/** @private */
+	_persistAnnotationsLocalStorage(isAnnotToggled) {
+		localStorage.setItem(DISABLE_ANNOTATIONS_PARAM, isAnnotToggled ? "false": "true");
+	}
+
+	/** @private */
+	_onClick() {
+		if(!this._annotationsToggled && this._warnNoAnnot) {
+			this._warnNoAnnotTooltip = true;
+			setTimeout(() => this._warnNoAnnotTooltip = false, 2000);
+		}
+		this._persistAnnotationsLocalStorage(!this._annotationsToggled);
+		this._parent.psv.toggleAllAnnotations(!this._annotationsToggled);
+	}
+
+	/** @private */
+	render() {
+		const panelClasses = {
+			"pnx-panel": true,
+			"pnx-hidden": !this._warnNoAnnotTooltip,
+		};
+
+		return html`
+			<pnx-button
+				kind="superflat"
+				size=${this.size}
+				style="vertical-align: middle"
+				class="pnx-print-hidden"
+				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
+				active=${this._annotationsToggled ? "" : nothing}
+				@click=${this._onClick}
+			>
+				${fa(faTags, { styles: { "height": "20px" }})}
+				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
+			</pnx-button>
+			<div
+				class=${classMap(panelClasses)}
+				@click=${() => this._warnNoAnnotTooltip = false}
+			>
+				${this._parent._t?.pnx.semantics_zero_annotations}
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-annotations-switch", AnnotationsSwitch);