forked from MapComplete/MapComplete
68 lines
2.6 KiB
Svelte
68 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* The 'imageOperations' previews an image and offers some extra tools (e.g. download)
|
|
*/
|
|
|
|
import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
|
|
import type { HotspotProperties } from "../../Logic/ImageProviders/ImageProvider"
|
|
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
|
import ImageAttribution from "./ImageAttribution.svelte"
|
|
import ImagePreview from "./ImagePreview.svelte"
|
|
import { DownloadIcon, ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
|
|
import { twMerge } from "tailwind-merge"
|
|
import { UIEventSource } from "../../Logic/UIEventSource"
|
|
import Loading from "../Base/Loading.svelte"
|
|
import Tr from "../Base/Tr.svelte"
|
|
import Translations from "../i18n/Translations"
|
|
import DotMenu from "../Base/DotMenu.svelte"
|
|
import type { Feature, Geometry } from "geojson"
|
|
import { Store } from "../../Logic/UIEventSource"
|
|
|
|
export let image: Partial<ProvidedImage> & { id: string; url: string }
|
|
export let clss: string = undefined
|
|
export let nearbyFeatures:
|
|
| Feature<Geometry, HotspotProperties>[]
|
|
| Store<Feature<Geometry, HotspotProperties>[]> = []
|
|
let visitUrl = image.provider?.visitUrl(image)
|
|
let isLoaded = new UIEventSource(false)
|
|
</script>
|
|
|
|
<div class={twMerge("relative h-full w-full", clss)}>
|
|
<div class="panzoom-container focusable absolute left-0 top-0 h-full w-full overflow-hidden">
|
|
{#if !$isLoaded}
|
|
<div class="flex h-full w-full items-center justify-center">
|
|
<Loading />
|
|
</div>
|
|
{/if}
|
|
<ImagePreview {image} {isLoaded} {nearbyFeatures} />
|
|
</div>
|
|
|
|
{#if $$slots["dot-menu-actions"]}
|
|
<DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
|
|
<slot name="dot-menu-actions" />
|
|
<button
|
|
class="no-image-background pointer-events-auto flex items-center"
|
|
on:click={() => ImageProvider.offerImageAsDownload(image)}
|
|
>
|
|
<DownloadIcon class="h-6 w-6 px-2 opacity-100" />
|
|
<Tr t={Translations.t.general.download.downloadImage} />
|
|
</button>
|
|
|
|
{#if visitUrl !== undefined}
|
|
<a href={visitUrl} target="_blank" rel="noopener">
|
|
<ExternalLinkIcon class="w-6" />
|
|
<Tr t={Translations.t.image.openOnWebsite.Subs(image.provider)} />
|
|
</a>
|
|
{/if}
|
|
</DotMenu>
|
|
{/if}
|
|
<div
|
|
class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
|
|
>
|
|
<div class="pointer-events-auto m-1 w-fit transition-colors duration-200">
|
|
<ImageAttribution {image} attributionFormat="large" />
|
|
</div>
|
|
|
|
<slot />
|
|
</div>
|
|
</div>
|