@panoramax/web-viewer/src/components/ui/AnnotationsSwitch.js

Panoramax web viewer for geolocated pictures

import { LitElement, html, css, nothing } from "lit";
import { fa, onceParentAvailable } from "../../utils/widgets";
import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
import { hasAnnotations } from "../../utils/picture";
import { classMap } from "lit/directives/class-map.js";
import { panel } from "../styles";
import { DISABLE_ANNOTATIONS_PARAM } from "../../utils/utils";

/**
 * 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)
	 */
	/** @private */
	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() {
		/* eslint-disable indent */
		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);