diff options
| -rw-r--r-- | src/lib/Media/HoverCover.svelte | 33 | ||||
| -rw-r--r-- | src/lib/Media/hoverCover.ts | 45 | ||||
| -rw-r--r-- | src/routes/schedule/+page.svelte | 63 |
3 files changed, 94 insertions, 47 deletions
diff --git a/src/lib/Media/HoverCover.svelte b/src/lib/Media/HoverCover.svelte new file mode 100644 index 00000000..a3aea9d6 --- /dev/null +++ b/src/lib/Media/HoverCover.svelte @@ -0,0 +1,33 @@ +<script lang="ts"> + import type { Media } from '$lib/AniList/media'; + import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease'; + + export let hoveredItem: SubsPleaseEpisode | null = null; + export let hoveredMedia: Media | null = null; + export let imageStyle = ''; +</script> + +{#if hoveredItem} + <img + class="hover-image show" + src={hoveredMedia + ? hoveredMedia.coverImage.extraLarge + : `https://subsplease.org${hoveredItem.image_url}`} + alt="Media Cover" + style={imageStyle} + /> +{/if} + +<style> + .hover-image { + position: fixed; + z-index: 1000; + width: 300px; + height: auto; + display: none; + } + + .show { + display: block; + } +</style> diff --git a/src/lib/Media/hoverCover.ts b/src/lib/Media/hoverCover.ts new file mode 100644 index 00000000..5fc98f33 --- /dev/null +++ b/src/lib/Media/hoverCover.ts @@ -0,0 +1,45 @@ +import type { Media } from '$lib/AniList/media'; +import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease'; + +interface OnMouseEnterLeave { + item: SubsPleaseEpisode | null; + media: Media | null; +} + +export const onMouseEnter = (item: SubsPleaseEpisode, media: Media | null) => { + return { item, media } as OnMouseEnterLeave; +}; + +export const onMouseLeave = () => { + return { item: null, media: null } as OnMouseEnterLeave; +}; + +interface OnMouseMove { + height: number; + style: string; +} + +export const onMouseMove = (event: MouseEvent) => { + const imageWidth = 300; + const offset = 10; + let imageLeft = 0; + let imageTop = 0; + const image = document.getElementsByClassName('hover-image')[0] as HTMLImageElement; + const response: OnMouseMove = { + height: 0, + style: '' + }; + + image.onload = () => (response.height = image.height); + imageLeft = + event.pageX + imageWidth + offset > window.innerWidth + ? event.pageX - imageWidth - offset + : event.pageX + offset; + imageTop = + event.pageY + response.height + offset > window.innerHeight + ? event.pageY - response.height + : event.pageY + offset; + response.style = `top: ${imageTop}px; left: ${imageLeft}px;`; + + return response; +}; diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte index 362b6a39..f1d4d92a 100644 --- a/src/routes/schedule/+page.svelte +++ b/src/routes/schedule/+page.svelte @@ -12,6 +12,8 @@ import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte'; import { outboundLink } from '$lib/Media/links'; import HeadTitle from '$lib/HeadTitle.svelte'; + import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover'; + import HoverCover from '$lib/Media/HoverCover.svelte'; let subsPleasePromise: Promise<SubsPlease>; let scheduledMediaPromise: Promise<Partial<Media[]>>; @@ -31,26 +33,6 @@ let hoveredItem: SubsPleaseEpisode | null = null; let hoveredMedia: Media | null = null; let imageStyle = ''; - let imageHeight = 0; - - const onMouseMove = (event: MouseEvent) => { - const imageWidth = 300; - const offset = 10; - let imageLeft = 0; - let imageTop = 0; - const image = document.getElementsByClassName('hover-image')[0] as HTMLImageElement; - - image.onload = () => (imageHeight = image.height); - imageLeft = - event.pageX + imageWidth + offset > window.innerWidth - ? event.pageX - imageWidth - offset - : event.pageX + offset; - imageTop = - event.pageY + imageHeight + offset > window.innerHeight - ? event.pageY - imageHeight - : event.pageY + offset; - imageStyle = `top: ${imageTop}px; left: ${imageLeft}px;`; - }; const shiftSubsPleaseSchedule = (schedule: SubsPlease['schedule']) => { const shiftedSchedule: { [key: string]: SubsPleaseEpisode[] } = {}; @@ -126,14 +108,22 @@ <li class="entry" on:mouseenter={() => { - hoveredItem = entry; - hoveredMedia = media; + const response = onMouseEnter(entry, media); + + hoveredItem = response.item; + hoveredMedia = response.media; }} on:mouseleave={() => { - hoveredItem = null; - hoveredMedia = null; + const response = onMouseLeave(); + + hoveredItem = response.item; + hoveredMedia = response.media; + }} + on:mousemove={(e) => { + const response = onMouseMove(e); + + imageStyle = response.style; }} - on:mousemove={onMouseMove} > <a href={media @@ -186,16 +176,7 @@ <Error type="Schedule" loginSessionError={false} /> {/await} -{#if hoveredItem} - <img - class="hover-image show" - src={hoveredMedia - ? hoveredMedia.coverImage.extraLarge - : `https://subsplease.org${hoveredItem.image_url}`} - alt="Media Cover" - style={imageStyle} - /> -{/if} +<HoverCover {hoveredItem} {hoveredMedia} {imageStyle} /> <style> #list-container { @@ -224,16 +205,4 @@ .today { font-weight: bold; } - - .hover-image { - position: fixed; - z-index: 1000; - width: 300px; - height: auto; - display: none; - } - - .show { - display: block; - } </style> |