@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
28 lines (27 loc) • 1.47 kB
JavaScript
import { html as uHtml } from 'uhtml';
// SPDX-License-Identifier: Apache-2.0
import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
export default class MenuMobile3dButton extends GirafeHTMLElement {
templateUrl = null;
styleUrls = null;
template = () => {
return uHtml `<style>
.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
</style>
<style>${this.customStyle}</style>
<div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>
${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
};
icon = 'icons/globe.svg';
label = '2D / 3D';
constructor() {
super('mobile-3d-button');
}
onPointerUp() {
this.state.globe.display = this.state.globe.display === '3D' ? '2D' : '3D';
}
connectedCallback() {
super.connectedCallback();
this.render();
}
}