41 lines
954 B
Svelte
41 lines
954 B
Svelte
<script lang="ts">
|
|
import Image from './Image.svelte'
|
|
|
|
export let id: string
|
|
export let alt: string
|
|
export let disabled: boolean = false
|
|
|
|
let hovering: boolean = false
|
|
let timer: ReturnType<typeof setTimeout> | number = null
|
|
|
|
$: classes = [
|
|
hovering ? 'is-hovered' : undefined,
|
|
$$props.class
|
|
].join(' ').trim()
|
|
|
|
// Hovering functions
|
|
const handleMouseEnter = () => {
|
|
clearTimeout(timer)
|
|
hovering = true
|
|
}
|
|
const handleMouseLeave = () => {
|
|
// Reset hovering to false after a delay
|
|
timer = setTimeout(() => hovering = false, 800)
|
|
}
|
|
</script>
|
|
|
|
<figure class={classes}
|
|
on:mouseenter={handleMouseEnter}
|
|
on:mouseleave={handleMouseLeave}
|
|
>
|
|
<Image
|
|
class={disabled ? 'is-disabled' : null}
|
|
{id}
|
|
sizeKey="photo-list"
|
|
sizes={{
|
|
small: { width: 250 },
|
|
}}
|
|
ratio={1.5}
|
|
{alt}
|
|
/>
|
|
</figure> |