MapComplete/UI/BigComponents/OverlayToggle.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}