diff options
| author | Fuwn <[email protected]> | 2023-09-28 16:40:52 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-09-28 16:40:52 -0700 |
| commit | 2f5c73b4f639d18ea298da8d42f660e3fd15958a (patch) | |
| tree | 3e114852b85a816b695fb05e75d017fd274def48 /src/lib | |
| parent | refactor(media): filter duplicates at source (diff) | |
| download | due.moe-2f5c73b4f639d18ea298da8d42f660e3fd15958a.tar.xz due.moe-2f5c73b4f639d18ea298da8d42f660e3fd15958a.zip | |
feat(wrapped): title abbreviation
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/Tools/Wrapped.svelte | 32 |
1 files changed, 30 insertions, 2 deletions
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte index 93d68521..4f2f5bed 100644 --- a/src/lib/Tools/Wrapped.svelte +++ b/src/lib/Tools/Wrapped.svelte @@ -21,6 +21,8 @@ let episodes = 0; let animeList: Media[] | undefined = undefined; let mangaList: Media[] | undefined = undefined; + let abbreviateTitles = true; + let maxAbbreviateLength = 40; onMount(async () => { if (user !== undefined) { @@ -119,6 +121,18 @@ element.classList.remove('light-theme'); } }; + + const abbreviate = (string: string, maxLength = 40, enabled = true) => { + if (!enabled) { + return string; + } + + if (string.length <= maxLength) { + return string; + } + + return string.slice(0, maxLength - 3) + '...'; + }; </script> {#if currentUserIdentity.id !== -1} @@ -202,7 +216,11 @@ {#each animeList?.slice(0, 5) as anime} <li> <a href={`https://anilist.co/anime/${anime.id}`} target="_blank"> - {anime.title.english || anime.title.romaji || anime.title.native} + {abbreviate( + anime.title.english || anime.title.romaji || anime.title.native, + maxAbbreviateLength, + abbreviateTitles + )} </a> </li> {/each} @@ -229,7 +247,11 @@ {#each mangaList?.slice(0, 5) as manga} <li> <a href={`https://anilist.co/manga/${manga.id}`} target="_blank"> - {manga.title.english || manga.title.romaji || manga.title.native} + {abbreviate( + manga.title.english || manga.title.romaji || manga.title.native, + maxAbbreviateLength, + abbreviateTitles + )} </a> </li> {/each} @@ -251,6 +273,12 @@ <li> <a href={'#'} on:click={() => screenshot()}>Download light themed image</a> </li> + <li> + <a href={'#'} on:click={() => (abbreviateTitles = !abbreviateTitles)}> + {abbreviateTitles ? 'Display full titles' : 'Abbreviate titles'} + </a> + <input type="number" bind:value={maxAbbreviateLength} /> + </li> </ul> {:catch} <Error /> |