110 lines
3.2 KiB
Svelte
110 lines
3.2 KiB
Svelte
<script>
|
|
import "$lib/css/base.css";
|
|
import "$lib/css/hover-card.css";
|
|
|
|
import anime from "animejs";
|
|
import SvgIcon from "@jamescoyle/svelte-icon";
|
|
import { mdiEye, mdiMapMarker } from "@mdi/js";
|
|
import { popupComponent } from "$lib/ts/popup.ts";
|
|
import HoverCardPopup from "$lib/components/popup/hover-card.svelte";
|
|
|
|
import text from "$lib/json/hover-card.json";
|
|
|
|
export let picture;
|
|
export let picturefull;
|
|
export let title = "Title";
|
|
export let localisation = "Paris, France";
|
|
export let description =
|
|
"This is a description, you can add some explaination to your picture in here!";
|
|
|
|
let divHoverCardOverlay;
|
|
let divHoverCardMetadata = {
|
|
div: null,
|
|
title: null,
|
|
localisation: null,
|
|
tip: null,
|
|
};
|
|
function animateCard(isEntering) {
|
|
const opacityValues = [0, 1];
|
|
let translateValues = [-30, 0];
|
|
|
|
if (!isEntering) {
|
|
opacityValues.reverse();
|
|
translateValues.reverse();
|
|
}
|
|
|
|
anime({
|
|
targets: [divHoverCardOverlay, divHoverCardMetadata.div],
|
|
opacity: opacityValues,
|
|
duration: 400,
|
|
easing: "easeInOutQuad",
|
|
});
|
|
anime({
|
|
targets: [divHoverCardMetadata.title, divHoverCardMetadata.tip],
|
|
opacity: opacityValues,
|
|
translateX: translateValues,
|
|
delay: 100,
|
|
duration: 500,
|
|
easing: "easeInOutQuad",
|
|
});
|
|
translateValues = translateValues.map((e) => -e);
|
|
anime({
|
|
targets: [divHoverCardMetadata.localisation],
|
|
opacity: opacityValues,
|
|
translateY: translateValues,
|
|
delay: 100,
|
|
duration: 500,
|
|
easing: "easeInOutQuad",
|
|
});
|
|
}
|
|
|
|
function showPopup() {
|
|
popupComponent.set({
|
|
component: HoverCardPopup,
|
|
props: {
|
|
title: title,
|
|
localisation: localisation,
|
|
description: description,
|
|
picture: picturefull,
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="hover-card-container"
|
|
role="button"
|
|
tabindex="0"
|
|
on:mouseenter={() => {
|
|
animateCard(true);
|
|
}}
|
|
on:mouseleave={() => {
|
|
animateCard(false);
|
|
}}
|
|
on:click={showPopup}
|
|
on:keydown={(e) => e.key === "Enter" && showPopup()}
|
|
>
|
|
<div class="hover-card">
|
|
<img alt="hover-card" src={picture} />
|
|
</div>
|
|
<div class="hover-card-overlay" bind:this={divHoverCardOverlay}></div>
|
|
<div class="hover-card flex-col">
|
|
<div
|
|
class="hover-card-tip flex-row"
|
|
bind:this={divHoverCardMetadata.tip}
|
|
>
|
|
<SvgIcon type="mdi" path={mdiEye}></SvgIcon>
|
|
<span>{text.seemore}</span>
|
|
</div>
|
|
<div
|
|
class="hover-card-metadata margin-bot-force"
|
|
bind:this={divHoverCardMetadata.div}
|
|
>
|
|
<h1 bind:this={divHoverCardMetadata.title}>{title}</h1>
|
|
<div bind:this={divHoverCardMetadata.localisation} class="flex align-center">
|
|
<SvgIcon type="mdi" path={mdiMapMarker}></SvgIcon>
|
|
<p>{localisation}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|