MapComplete/src/UI/BigComponents/GpsElementHelper.svelte

<script lang="ts">
  /**
   * Element that labels the GPS state
   */
  import { fade } from "svelte/transition"
  import ThemeViewState from "../../Models/ThemeViewState"
  import Tr from "../Base/Tr.svelte"
  import { onDestroy } from "svelte"
  import { Popover } from "flowbite-svelte"

  export let state: ThemeViewState
  let gpsState = state.geolocationState
  export let mapIsDragged: Store<void>
  let open = true

  function showFor(timeoutSeconds: number = 5) {
    open = true
    window.setTimeout(() => {
      open = false
    }, timeoutSeconds * 1000)
  }

  mapIsDragged.addCallback(() => {
    const movingIsAllowed = gpsState.allowMoving.data
    if (!movingIsAllowed) {
      showFor(5)
    }
  })
  gpsState.requestMoment.stabilized(50).addCallback(() => {
    if (gpsState.gpsAvailable.data && gpsState.allowMoving.data) {
      return
    }
    showFor(5)
  })
  let explanation = gpsState.gpsStateExplanation
  onDestroy(
    explanation.stabilized(50).addCallbackD((expl) => {
      if (expl) {
        showFor(5)
      } else {
        open = false
      }
    })
  )
</script>

<Popover
  reference={undefined}
  trigger="null"
  placement="left"
  transition={(e) => fade(e, { duration: 150 })}
  bind:open
>
  <div class="break-words" style="max-width: calc( 100vw - 8rem)">
    <Tr t={$explanation} />
  </div>
</Popover>