diff options
| author | Fuwn <[email protected]> | 2024-01-21 17:53:00 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-21 17:53:00 -0800 |
| commit | eb11e54a4b8a9bf3d648659521906d4cacdd8ae2 (patch) | |
| tree | d50c146930a51fecd4d8253bc86906a5baf180a1 /src/lib/Schedule/CoverBypass.svelte | |
| parent | refactor(schedule): move top-level tool to route (diff) | |
| download | due.moe-eb11e54a4b8a9bf3d648659521906d4cacdd8ae2.tar.xz due.moe-eb11e54a4b8a9bf3d648659521906d4cacdd8ae2.zip | |
refactor(schedule): move module out of tools
Diffstat (limited to 'src/lib/Schedule/CoverBypass.svelte')
| -rw-r--r-- | src/lib/Schedule/CoverBypass.svelte | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/src/lib/Schedule/CoverBypass.svelte b/src/lib/Schedule/CoverBypass.svelte new file mode 100644 index 00000000..235979c1 --- /dev/null +++ b/src/lib/Schedule/CoverBypass.svelte @@ -0,0 +1,66 @@ +<script lang="ts" ts> + import type { Media } from '$lib/AniList/media'; + import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte'; + import type { SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease'; + import HoverCover from '$lib/Media/Cover/HoverCover.svelte'; + import { + onMouseEnter, + type HoverCoverResponse, + onMouseLeave, + onMouseMove + } from '$lib/Media/Cover/hoverCover'; + + import { outboundLink } from '$lib/Media/links'; + import settings from '$stores/settings'; + + export let media: Media | null; + export let entry: SubsPleaseEpisode; + export let cover = true; + + let hoverCoverState: HoverCoverResponse = {}; + + const titleSelect = (media: Media | null) => + media ? media.title.english || media.title.romaji || media.title.native : null; +</script> + +<a + href={media + ? outboundLink(media, 'anime', $settings.displayOutboundLinksTo) + : outboundLink( + null, + 'anime', + $settings.displayOutboundLinksTo, + true, + titleSelect(media) || entry.title + )} + target="_blank" + on:mouseenter={() => { + const response = onMouseEnter(media, entry); + + hoverCoverState.hovering = response.hovering; + hoverCoverState.item = response.item; + hoverCoverState.media = response.media; + }} + on:mouseleave={() => { + const response = onMouseLeave(); + + hoverCoverState.hovering = response.hovering; + hoverCoverState.item = response.item; + hoverCoverState.media = response.media; + }} + on:mousemove={(e) => { + const response = onMouseMove(e, 300); + + hoverCoverState.style = response.style; + }} +> + {#if media} + <MediaTitleDisplay title={media.title} /> + {:else} + {entry.title} + {/if} +</a> + +{#if cover} + <HoverCover options={hoverCoverState} width={300} /> +{/if} |