@panoramax/web-viewer/src/components/menus/Share.js

Panoramax web viewer for geolocated pictures

import { LitElement, css, html } from "lit";
import { fa, onceParentAvailable } from "../../utils/widgets";
import { faSvg, textarea, titles, input } from "../styles";
import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";

/**
 * Share Menu displays links for quick picture sharing.
 * @class Panoramax.components.menus.ShareMenu
 * @element pnx-share-menu
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-share-menu ._parent=${viewer} />
 * ```
 */
export default class ShareMenu extends LitElement {
	/** @private */
	static styles = [ faSvg, input, textarea, titles, css`
		div[slot="content"] {
			margin-top: 10px;
		}
		.links {
			display: flex;
			gap: 5px;
		}
		.embed {
			display: flex;
			gap: 5px;
			align-items: center;
			flex-direction: column;
		}
	` ];

	/** @private */
	static properties = {
		_url: {state: true},
	};

	constructor() {
		super();
		this._onUrlChange();
	}

	/** @private */
	connectedCallback() {
		super.connectedCallback();
		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
			this._onUrlChange();
			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
		});
	}

	/** @private */
	_onUrlChange() {
		const baseUrl = window.location.href.replace(/\/$/, "");
		this._url = this._parent?.urlHandler?.nextShortLink(baseUrl) || baseUrl;
	}

	/** @private */
	render() {
		const iframe = `<iframe src="${this._url}" style="border: none; width: 500px; height: 300px"></iframe>`;

		return html`
			<h4>${fa(faShareAlt)} ${this._parent?._t.pnx.share}</h4>
			<pnx-tabs>
				<h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_page}</h4>
				<div slot="content">
					<div class="links">
						<input type="text" readonly value=${this._url} style="flex: 2" />
						<pnx-copy-button ._t=${this._parent?._t} text=${this._url}></pnx-copy-button>
					</div>
				</div>
					
				<h4 slot="title">${fa(faMap)} ${this._parent?._t.pnx.share_embed}</h4>
				<div slot="content">
					<div class="embed">
						<pnx-link-button
							href="https://docs.panoramax.fr/web-viewer/03_URL_settings/"
							target="_blank"
							kind="superinline"
							size="sm"
						>
							${fa(faCircleInfo)} ${this._parent?._t.pnx.share_embed_docs}
						</pnx-link-button>
						<textarea readonly .value=${iframe}></textarea>
						<pnx-copy-button
							._t=${this._parent?._t}
							text=${iframe}
							style="width: 100%"
						></pnx-copy-button>
					</div>
				</div>
			</pnx-tabs>`;
	}
}

customElements.define("pnx-share-menu", ShareMenu);