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

Panoramax web viewer for geolocated pictures

import { LitElement, html, css } from "lit";
import { fa } from "../../utils/widgets";
import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
import { btn, faSvg } from "../styles";
import { classMap } from "lit/directives/class-map.js";

/**
 * Copy Button element allows top copy in clipboard some text.
 * @class Panoramax.components.ui.CopyButton
 * @element pnx-copy-button
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-copy-button text="content to copy" ._t=${viewer._t}>
 *   Copy me !
 * </pnx-copy-button>
 * ```
 */
export default class CopyButton extends LitElement {
	/** @private */
	static styles = [faSvg, btn, css`
		.pnx-btn-unstyled {
			border: none;
			background: none;
			font-family: var(--font-family);
			font-size: 1em;
			color: var(--widget-font);
			cursor: pointer;
			padding: 0;
			margin: 0;
		}
	`];

	/**
     * Component properties.
	 * @memberof Panoramax.components.ui.CopyButton#
     * @type {Object}
     * @property {string} [text] Text to copy in clipboard on click (use either this parameter or input, not both)
	 * @property {input} [input] ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both)
	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
	 * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
	 * @property {string} [title] Tooltip text displayed when hovering over the button
     */
	static properties = {
		text: {type: String},
		input: {type: String},
		kind: {type: String},
		size: {type: String},
		unstyled: {type: Boolean},
		title: { type: String },
		_active: {state: true, type: Boolean},
	};

	constructor() {
		super();
		this.data = "";
		this.input = "";
		this.unstyled = false;
		this.kind = "full";
		this.size = "md";
		this._active = false;
		this.addEventListener("click", this._onClick);
	}

	/** @private */
	_onClick() {
		let textToCopy;
		if(this.input !== "") {
			const inputField = document.getElementById(this.input);
			textToCopy = inputField.innerText || inputField.value;
		}
		else if(this.text !== "") {
			textToCopy = this.text;
		}

		if(!navigator?.clipboard) {
			alert("Clipboard is not available");
		}
		else {
			navigator.clipboard.writeText(textToCopy);
			this._active = true;
			setTimeout(() => this._active = false, 2000);
		}
	}

	/** @private */
	render() {
		/* eslint-disable indent */
		const classes = {
			"pnx-btn": !this.unstyled,
			"pnx-btn-full": !this.unstyled,
			"pnx-btn-active": !this.unstyled && this._active,
			"pnx-btn-unstyled": this.unstyled,
			[`pnx-btn-${this.kind}`]: !this.unstyled,
			[`pnx-btn-${this.size}`]: !this.unstyled,
		};
		return html`<button title=${this.title} class=${classMap(classes)} part="btn">
			${this._active ?
				html`${this._t?.pnx.copied || ""} ${fa(faCheck)}` :
				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || ""}</slot>`
			}
		</button>`;
	}
}

customElements.define("pnx-copy-button", CopyButton);