mapcomplete/UI/Base/SubtleButton.svelte

<script lang="ts">
  import { onMount } from "svelte"
  import { Store } from "../../Logic/UIEventSource"
  import BaseUIElement from "../BaseUIElement"
  import Img from "./Img"
  import Translations from "../i18n/Translations"

  export let imageUrl: string | BaseUIElement = undefined
  export let message: string | BaseUIElement = undefined
  export let options: {
    url?: string | Store<string>
    newTab?: boolean
    imgSize?: string
    extraClasses?: string
  } = {}

  let href = typeof options?.url == "string" ? options.url : ""

  let imgElem: HTMLElement
  let msgElem: HTMLElement

  onMount(() => {
    if (typeof options?.url != "string" && options?.url != undefined) {
      options.url.addCallbackAndRun((data) => {
        href = data
      })
    }

    // Image
    if (imgElem && imageUrl) {
      let img: BaseUIElement

      const imgClasses = "block justify-center flex-none mr-4 " + (options?.imgSize ?? "h-11 w-11")
      if ((imageUrl ?? "") === "") {
        img = undefined
      } else if (typeof imageUrl === "string") {
        img = new Img(imageUrl)?.SetClass(imgClasses)
      } else {
        img = imageUrl?.SetClass(imgClasses)
      }

      if (img) imgElem.replaceWith(img.ConstructElement())
    }

    // Message
    if (msgElem && message) {
      let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink")
      msgElem.replaceWith(msg.ConstructElement())
    }
  })
</script>

<svelte:element
  this={options?.url == undefined ? "span" : "a"}
  class={(options.extraClasses??"") + ' hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle'}
  target={options?.newTab ? "_blank" : ""}
  {href}
>
  <slot name="image">
    {#if imgElem}
      <template bind:this={imgElem} />
      {/if}
  </slot>
  <slot name="message">
    <template bind:this={msgElem} />
  </slot>
</svelte:element>

<style lang="scss">
  span,
  a {
    @apply flex p-3 my-2 rounded-lg ;
    @apply items-center w-full no-underline;
    @apply bg-subtle text-black;

    :global(img) {
      @apply block justify-center flex-none mr-4 h-11 w-11;
    }

    :global(span) {
      @apply block text-ellipsis flex-shrink;
    }
  }
</style>