MapComplete/src/UI/Image/LinkableImage.svelte

<script lang="ts">
  import { UIEventSource } from "../../Logic/UIEventSource"
  import type { Store } from "../../Logic/UIEventSource"
  import type { OsmTags } from "../../Models/OsmFeature"
  import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
  import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
  import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
  import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
  import { Tag } from "../../Logic/Tags/Tag"
  import type { Feature } from "geojson"
  import Translations from "../i18n/Translations"
  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
  import AttributedImage from "./AttributedImage.svelte"
  import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
  import LoginToggle from "../Base/LoginToggle.svelte"
  import { onDestroy } from "svelte"
  import { Utils } from "../../Utils"
  import ThemeViewState from "../../Models/ThemeViewState"
  import { MenuState } from "../../Models/MenuState"
  import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"

  export let tags: UIEventSource<OsmTags>
  export let state: ThemeViewState
  export let image: P4CPicture
  export let feature: Feature
  export let layer: LayerConfig

  export let highlighted: UIEventSource<string> = undefined
  export let nearbyFeatures: Feature[] | Store<Feature[]> = []
  export let linkable = true
  let targetValue = Object.values(image.osmTags)[0]
  let isLinked = new UIEventSource(Object.values(tags.data).some((v) => targetValue === v))
  isLinked.addCallbackAndRun((linked) => {
    if (linked) {
      MenuState.previewedImage.set(undefined)
    }
  })
  const t = Translations.t.image.nearby

  let date: Date
  if (image.date) {
    try {
      date = new Date(image.date)
    } catch (e) {
      console.warn("Could not parse image date", image.date, "for", image.detailsUrl)
    }
  }

  let license: LicenseInfo = {
    artist: image.author,
    license: image.license,
    informationLocation: (image.detailsUrl ?? image.pictureUrl ?? image.thumbUrl),
    date
  }
  console.log(">>> trying to create license info based on", image, license)
  let providedImage: ProvidedImage = {
    url: image.thumbUrl ?? image.pictureUrl,
    url_hd: image.pictureUrl,
    key: undefined,
    provider: AllImageProviders.byName(image.provider),
    date,
    id: Object.values(image.osmTags)[0],
    isSpherical: image.details.isSpherical,
    license,
  }

  async function applyLink(isLinked: boolean) {
    console.log("Applying linked image", isLinked, targetValue)
    const currentTags = tags.data
    const key = Object.keys(image.osmTags)[0]
    const url = targetValue
    if (isLinked) {
      const action = new LinkImageAction(currentTags.id, key, url, tags, {
        theme: tags.data._orig_theme ?? state.theme.id,
        changeType: "link-image",
      })
      await state.changes.applyAction(action)
    } else {
      for (const k in currentTags) {
        const v = currentTags[k]
        if (v === url) {
          const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, {
            theme: tags.data._orig_theme ?? state.theme.id,
            changeType: "remove-image",
          })
          state.changes.applyAction(action)
        }
      }
    }
  }

  isLinked.addCallback((isLinked) => applyLink(isLinked))

  let element: HTMLDivElement
  if (highlighted) {
    onDestroy(
      highlighted.addCallbackD((highlightedUrl) => {
        if (highlightedUrl === image.pictureUrl) {
          Utils.scrollIntoView(element)
        }
      })
    )
  }
</script>

<div
  class="flex w-fit shrink-0 flex-col overflow-hidden rounded-lg"
  class:border-interactive={$isLinked || $highlighted === image.pictureUrl}
  style="border-width: 2px"
  bind:this={element}
>
  <AttributedImage
    {state}
    image={providedImage}
    {nearbyFeatures}
    imgClass="max-h-64 w-auto sm:h-32 md:h-64"
    attributionFormat="minimal"
  >
    <svelte:fragment slot="dot-menu-actions">
      <LoginToggle {state} silentFail={true} hiddenFail={true}>
        {#if linkable}
          <label>
            <input bind:checked={$isLinked} type="checkbox" />
            <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
          </label>
        {/if}
      </LoginToggle>
    </svelte:fragment>
  </AttributedImage>
  <LoginToggle {state} silentFail={true}>
    {#if linkable}
      <label>
        <input bind:checked={$isLinked} type="checkbox" />
        <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
      </label>
    {/if}
  </LoginToggle>
</div>