diff options
| -rw-r--r-- | src/lib/List/MediaTitleDisplay.svelte | 39 | ||||
| -rw-r--r-- | src/lib/Schedule/CoverBypass.svelte | 16 | ||||
| -rw-r--r-- | src/lib/Utility/string.ts | 2 |
3 files changed, 46 insertions, 11 deletions
diff --git a/src/lib/List/MediaTitleDisplay.svelte b/src/lib/List/MediaTitleDisplay.svelte index 118d9b2c..5463d009 100644 --- a/src/lib/List/MediaTitleDisplay.svelte +++ b/src/lib/List/MediaTitleDisplay.svelte @@ -1,32 +1,53 @@ <script lang="ts"> import type { MediaTitle } from '$lib/AniList/media'; + import * as tooltipper from '$lib/Tooltip/tooltip'; + import { abbreviate as abbreviated } from '$lib/Utility/string'; import settings from '$stores/settings'; import * as wanakana from 'wanakana'; export let title: MediaTitle; + export let abbreviate = false; + export let abbreviateTo = 20; + export let tooltip = false; </script> {#if $settings.displayTitleFormat === 'native'} {#if $settings.displayFurigana} - <span title={title.english || title.romaji || title.native}> + <span + title={title.english || title.romaji || title.native} + use:tooltipper.default + data-tooltip-disable={tooltip} + > <ruby> - {title.native} + {abbreviate ? abbreviated(title.native, abbreviateTo) : title.native} <rt> - {wanakana.toKana(title.romaji)} + {abbreviate + ? abbreviated(wanakana.toKana(title.native), abbreviateTo) + : wanakana.toKana(title.native)} </rt> </ruby> </span> {:else} - <span title={title.english || title.romaji || title.native}> - {title.native} + <span + title={title.english || title.romaji || title.native} + use:tooltipper.default + data-tooltip-disable={tooltip} + > + {abbreviate ? abbreviated(title.native, abbreviateTo) : title.native} </span> {/if} {:else if $settings.displayTitleFormat === 'romaji'} - <span title={title.english || title.romaji || title.native}> - {title.romaji} + <span + title={title.english || title.romaji || title.native} + use:tooltipper.default + data-tooltip-disable={tooltip} + > + {abbreviate ? abbreviated(title.romaji, abbreviateTo) : title.romaji} </span> {:else} - <span title={title.romaji || title.native}> - {title.english || title.romaji || title.native} + <span title={title.romaji || title.native} use:tooltipper.default data-tooltip-disable={tooltip}> + {abbreviate + ? abbreviated(title.english || title.romaji || title.native, abbreviateTo) + : title.english || title.romaji || title.native} </span> {/if} diff --git a/src/lib/Schedule/CoverBypass.svelte b/src/lib/Schedule/CoverBypass.svelte index 235979c1..6aa47701 100644 --- a/src/lib/Schedule/CoverBypass.svelte +++ b/src/lib/Schedule/CoverBypass.svelte @@ -11,6 +11,8 @@ } from '$lib/Media/Cover/hoverCover'; import { outboundLink } from '$lib/Media/links'; + import tooltip from '$lib/Tooltip/tooltip'; + import { abbreviate } from '$lib/Utility/string'; import settings from '$stores/settings'; export let media: Media | null; @@ -18,6 +20,7 @@ export let cover = true; let hoverCoverState: HoverCoverResponse = {}; + const abbreviateTo = 40; const titleSelect = (media: Media | null) => media ? media.title.english || media.title.romaji || media.title.native : null; @@ -55,9 +58,18 @@ }} > {#if media} - <MediaTitleDisplay title={media.title} /> + <MediaTitleDisplay + title={media.title} + abbreviate + {abbreviateTo} + tooltip={media.title.english?.length > abbreviateTo || + media.title.romaji?.length > abbreviateTo || + media.title.native?.length > abbreviateTo} + /> {:else} - {entry.title} + <span title={entry.title} use:tooltip> + {abbreviate(entry.title, abbreviateTo)} + </span> {/if} </a> diff --git a/src/lib/Utility/string.ts b/src/lib/Utility/string.ts new file mode 100644 index 00000000..8cfc4ee5 --- /dev/null +++ b/src/lib/Utility/string.ts @@ -0,0 +1,2 @@ +export const abbreviate = (title: string, maxLength: number) => + title.length > maxLength ? `${title.slice(0, maxLength)}...` : title; |