54 lines
1.1 KiB
Svelte
54 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { useEntity } from "../../../lib/entity";
|
|
import Spinner from "../../utils/Spinner.svelte";
|
|
export let address: string;
|
|
export let detail: boolean;
|
|
import { xywh } from "../../../util/fragments/xywh";
|
|
import { API_URL } from "../../../lib/api";
|
|
|
|
const { entity } = useEntity(address);
|
|
|
|
$: objectAddress = String($entity?.get("ANNOTATES") || "");
|
|
|
|
let imageLoaded = false;
|
|
</script>
|
|
|
|
<div class="fragment-viewer">
|
|
{#if !imageLoaded}
|
|
<Spinner />
|
|
{/if}
|
|
{#if $entity}
|
|
<img
|
|
class="preview-image"
|
|
class:imageLoaded
|
|
src="{API_URL}/{detail ? 'raw' : 'thumb'}/{objectAddress}#{$entity?.get(
|
|
'W3C_FRAGMENT_SELECTOR'
|
|
)}"
|
|
use:xywh
|
|
alt={address}
|
|
on:load={() => (imageLoaded = true)}
|
|
draggable="false"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use "../../../styles/colors";
|
|
|
|
.fragment-viewer {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
min-height: 0;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
min-height: 0;
|
|
&.imageLoaded {
|
|
border: 2px dashed colors.$yellow;
|
|
}
|
|
}
|
|
</style>
|