@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
33 lines (32 loc) • 1.68 kB
JavaScript
import { html as uHtml } from 'uhtml';
// SPDX-License-Identifier: Apache-2.0
import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
export default class MenuMobileOfflineButton 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/offline.svg';
label = 'Offline mode';
constructor() {
super('mobile-offline-button');
}
onPointerUp() {
// If not delaying, the releasing of the click is also fired
// on the offline panel shown
setTimeout(() => {
this.state.interface.offlinePanelVisible = true;
this.state.interface.swipeupPanelContent = 'offline';
}, 50);
}
connectedCallback() {
super.connectedCallback();
this.render();
}
}