diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 35 | ||||
| -rw-r--r-- | src/lib/List/Manga/CleanMangaList.svelte | 35 | ||||
| -rw-r--r-- | src/routes/settings/+page.svelte | 4 | ||||
| -rw-r--r-- | src/stores/settings.ts | 2 |
4 files changed, 74 insertions, 2 deletions
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index 67d6797e..425b588a 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -12,6 +12,8 @@ import { outboundLink } from '$lib/Media/links'; import { onDestroy } from 'svelte'; import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease'; + import HoverCover from '$lib/Media/HoverCover.svelte'; + import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover'; export let media: Media[]; export let title: string; @@ -25,6 +27,10 @@ export let pendingUpdate: number | null; export let subsPlease: SubsPlease | null = null; + let hovering = false; + let hoveredMedia: Media | null = null; + let imageStyle = ''; + const keyCacher = setInterval( () => (media = media), (() => { @@ -60,7 +66,32 @@ {@const progress = (anime.mediaListEntry || { progress: 0 }).progress} {#if title.includes('Upcoming Episodes') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1} - <li class="entry"> + <li + class="entry" + on:mouseenter={() => { + if ($settings.displayHoverCover === false) return; + + const response = onMouseEnter(anime); + + hovering = response.hovering; + hoveredMedia = response.media; + }} + on:mouseleave={() => { + if ($settings.displayHoverCover === false) return; + + const response = onMouseLeave(); + + hovering = response.hovering; + hoveredMedia = response.media; + }} + on:mousemove={(e) => { + if ($settings.displayHoverCover === false) return; + + const response = onMouseMove(e); + + imageStyle = response.style; + }} + > <span class="content"> <a href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} target="_blank"> <span @@ -119,6 +150,8 @@ {/each} </ul> +<HoverCover {hovering} {hoveredMedia} {imageStyle} /> + <style> .entry::after { content: ''; diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte index 3ccdbf49..918db3f9 100644 --- a/src/lib/List/Manga/CleanMangaList.svelte +++ b/src/lib/List/Manga/CleanMangaList.svelte @@ -6,6 +6,8 @@ import settings from '../../../stores/settings'; import ListTitle from '../ListTitle.svelte'; import MediaTitle from '../MediaTitleDisplay.svelte'; + import HoverCover from '$lib/Media/HoverCover.svelte'; + import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover'; export let media: Media[]; export let cleanCache: () => void; @@ -20,6 +22,10 @@ export let due: boolean; export let rateLimited: boolean; export let authorised: boolean; + + let hovering = false; + let hoveredMedia: Media | null = null; + let imageStyle = ''; </script> {#if authorised} @@ -54,7 +60,32 @@ {@const progress = (manga.mediaListEntry || { progress: 0 }).progress} {#if progress !== manga.episodes} - <li> + <li + class="entry" + on:mouseenter={() => { + if ($settings.displayHoverCover === false) return; + + const response = onMouseEnter(manga); + + hovering = response.hovering; + hoveredMedia = response.media; + }} + on:mouseleave={() => { + if ($settings.displayHoverCover === false) return; + + const response = onMouseLeave(); + + hovering = response.hovering; + hoveredMedia = response.media; + }} + on:mousemove={(e) => { + if ($settings.displayHoverCover === false) return; + + const response = onMouseMove(e); + + imageStyle = response.style; + }} + > <a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank"> <span style={lastUpdatedMedia === manga.id && manga.chapters !== progress @@ -96,3 +127,5 @@ {/if} {/each} </ul> + +<HoverCover {hovering} {hoveredMedia} {imageStyle} /> diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index c94c5349..3281d7d3 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -117,6 +117,10 @@ /> <SettingCheckboxToggle setting="displayMangaCollapsed" text="Collapse manga panel by default" /> <SettingCheckboxToggle setting="displayLimitListHeight" text="Limit list area to screen" /> + <SettingCheckboxToggle + setting="displayHoverCover" + text="Display cover on hover for media lists" + /> <SettingCheckboxToggle setting="displaySocialButton" text="Display social button for anime" /> <SettingCheckboxToggle setting="displayCountdownRightAligned" diff --git a/src/stores/settings.ts b/src/stores/settings.ts index 8461abf6..06b8a13f 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -29,6 +29,7 @@ export interface Settings { display24HourTime: boolean; displayCountdownRightAligned: boolean; displayNativeCountdown: boolean; + displayHoverCover: boolean; } const defaultSettings: Settings = { @@ -54,6 +55,7 @@ const defaultSettings: Settings = { display24HourTime: false, displayCountdownRightAligned: false, displayNativeCountdown: false, + displayHoverCover: false, // Calculation calculateChaptersRoundedDown: true, |