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

package/build/components/styles.js

@@ -1,557 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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);