forked from MapComplete/MapComplete
47 lines
1.5 KiB
Svelte
47 lines
1.5 KiB
Svelte
<script lang="ts">/**
|
|
* The OverlayToggle shows a single toggle to enable or disable an overlay
|
|
*/
|
|
import Checkbox from "../Base/Checkbox.svelte";
|
|
import { onDestroy } from "svelte";
|
|
import { UIEventSource } from "../../Logic/UIEventSource";
|
|
import Tr from "../Base/Tr.svelte";
|
|
import Translations from "../i18n/Translations";
|
|
import { Translation } from "../i18n/Translation";
|
|
import type { RasterLayerProperties } from "../../Models/RasterLayerProperties";
|
|
|
|
export let layerproperties : RasterLayerProperties
|
|
export let state: {isDisplayed: UIEventSource<boolean>};
|
|
export let zoomlevel: UIEventSource<number>;
|
|
export let highlightedLayer: UIEventSource<string> | undefined;
|
|
|
|
let isDisplayed: boolean = state.isDisplayed.data;
|
|
onDestroy(state.isDisplayed.addCallbackAndRunD(d => {
|
|
isDisplayed = d;
|
|
return false;
|
|
}));
|
|
|
|
|
|
let mainElem: HTMLElement;
|
|
$: onDestroy(
|
|
highlightedLayer.addCallbackAndRun(highlightedLayer => {
|
|
if (highlightedLayer === layerproperties.id) {
|
|
mainElem?.classList?.add("glowing-shadow");
|
|
} else {
|
|
mainElem?.classList?.remove("glowing-shadow");
|
|
}
|
|
})
|
|
);
|
|
</script>
|
|
{#if layerproperties.name}
|
|
<div bind:this={mainElem}>
|
|
<label class="flex gap-1">
|
|
<Checkbox selected={state.isDisplayed} />
|
|
<Tr t={new Translation(layerproperties.name)}/>
|
|
{#if $zoomlevel < layerproperties.min_zoom}
|
|
<span class="alert">
|
|
<Tr t={Translations.t.general.layerSelection.zoomInToSeeThisLayer} />
|
|
</span>
|
|
{/if}
|
|
</label>
|
|
</div>
|
|
{/if}
|