@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
49 lines (48 loc) • 3.14 kB
JavaScript
import { htmlFor as uHtmlFor } from 'uhtml/keyed';
import { html as uHtml } from 'uhtml';
// SPDX-License-Identifier: Apache-2.0
import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
import _GroupLayer from '../../../models/layers/grouplayer.js'; // NOSONAR
class MobileThemeElementComponent extends GirafeHTMLElement {
templateUrl = null;
styleUrls = null;
template = () => {
return uHtml `<style>
.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
</style><style>
header{align-items:center;gap:1rem;font-size:1.5rem;display:flex}
</style>
<style>${this.customStyle}</style>
<header><button onclick="${() => this.state.themes.lastSelectedTheme = null}" class="gg-icon-button gg-small"><img alt="Back button" src="icons/arrow_left.svg"></button> <img alt="Theme icon" src="${this.theme?.icon}"> <span i18n="${this.theme?.name}"></span></header><div class="children">${(this.theme?.children ?? []).map(layer => (layer instanceof _GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-group groupid="${layer.treeItemId}"></girafe-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-layer layerid="${layer.treeItemId}"></girafe-layer>`)}</div>
${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
};
theme;
static get observedAttributes() {
return ['themeid'];
}
constructor() {
super('theme-mobile');
}
render() {
super.render();
this.refreshTheme();
}
refreshTheme() {
const themeId = Number(this.getAttribute('themeid'));
const theme = this.state.layers.layersList.find((layer) => layer.id === themeId);
if (theme) {
this.theme = this.context.layerManager.getTreeItem(theme.treeItemId);
}
super.refreshRender();
}
connectedCallback() {
super.connectedCallback();
this.render();
}
attributeChangedCallback(name) {
if (name === 'themeid') {
this.refreshTheme();
}
}
}
export default MobileThemeElementComponent;