diff options
Diffstat (limited to 'src/lib/User/BadgeWall/BadgePreview.svelte')
| -rw-r--r-- | src/lib/User/BadgeWall/BadgePreview.svelte | 151 |
1 files changed, 80 insertions, 71 deletions
diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte index cf0cb284..fd323564 100644 --- a/src/lib/User/BadgeWall/BadgePreview.svelte +++ b/src/lib/User/BadgeWall/BadgePreview.svelte @@ -1,13 +1,13 @@ <script lang="ts"> -import Spacer from '$lib/Layout/Spacer.svelte'; -import { thumbnail } from '$lib/Utility/image'; -import type { Badge } from '$lib/Database/SB/User/badges'; -import { cdn } from '$lib/Utility/image'; -import { databaseTimeToDate } from '$lib/Utility/time'; -import locale from '$stores/locale'; -import { onMount } from 'svelte'; -import root from '$lib/Utility/root'; -import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; +import Spacer from "$lib/Layout/Spacer.svelte"; +import { thumbnail } from "$lib/Utility/image"; +import type { Badge } from "$lib/Database/SB/User/badges"; +import { cdn } from "$lib/Utility/image"; +import { databaseTimeToDate } from "$lib/Utility/time"; +import locale from "$stores/locale"; +import { onMount } from "svelte"; +import root from "$lib/Utility/root"; +import ParallaxImage from "$lib/Image/ParallaxImage.svelte"; export let selectedBadge: Badge | undefined; export let onNext: () => void = () => undefined; @@ -15,89 +15,98 @@ export let onPrevious: () => void = () => undefined; export let hasNext: boolean; export let hasPrevious: boolean; -let source = cdn(thumbnail(selectedBadge?.image || '')) || ''; +let source = cdn(thumbnail(selectedBadge?.image || "")) || ""; let badgeReference: HTMLImageElement; $: { - if (selectedBadge && selectedBadge.image) { - const image = new Image(); - - image.src = cdn(selectedBadge.image) || ''; - image.onload = () => { - source = image.src; - }; - } + if (selectedBadge && selectedBadge.image) { + const image = new Image(); + + image.src = cdn(selectedBadge.image) || ""; + image.onload = () => { + source = image.src; + }; + } } $: { - if (selectedBadge) - fetch(root(`/api/badges?incrementClickCount=${selectedBadge.id}`), { - method: 'PUT' - }); + if (selectedBadge) + fetch(root(`/api/badges?incrementClickCount=${selectedBadge.id}`), { + method: "PUT", + }); } onMount(() => { - badgeReference = document.querySelector('.badge-container-image') as HTMLImageElement; + badgeReference = document.querySelector( + ".badge-container-image", + ) as HTMLImageElement; - const handleClickOutside = (event: MouseEvent) => { - if ((event.target as HTMLElement).classList.contains('popup')) selectedBadge = undefined; - }; + const handleClickOutside = (event: MouseEvent) => { + if ((event.target as HTMLElement).classList.contains("popup")) + selectedBadge = undefined; + }; - document.addEventListener('click', handleClickOutside); + document.addEventListener("click", handleClickOutside); - return () => { - document.removeEventListener('click', handleClickOutside); - }; + return () => { + document.removeEventListener("click", handleClickOutside); + }; }); const classifySource = (source: string) => { - let name = source; - const sourceLower = source.toLowerCase(); - - if (sourceLower.includes('pixiv.net')) { - name = 'Pixiv'; - } else if (sourceLower.includes('twitter.com') || sourceLower.includes('x.com')) { - name = 'X (Twitter)'; - } else if (sourceLower.includes('zerochan.net')) { - name = 'Zerochan'; - } else if (sourceLower.includes('imgur.com')) { - name = 'Imgur'; - } else if (sourceLower.includes('lofter.com')) { - name = 'Lofter'; - } - - return `<a href="${source}" target="_blank">${name}</a>`; + let name = source; + const sourceLower = source.toLowerCase(); + + if (sourceLower.includes("pixiv.net")) { + name = "Pixiv"; + } else if ( + sourceLower.includes("twitter.com") || + sourceLower.includes("x.com") + ) { + name = "X (Twitter)"; + } else if (sourceLower.includes("zerochan.net")) { + name = "Zerochan"; + } else if (sourceLower.includes("imgur.com")) { + name = "Imgur"; + } else if (sourceLower.includes("lofter.com")) { + name = "Lofter"; + } + + return `<a href="${source}" target="_blank">${name}</a>`; }; const classifyDesigner = (designer: string) => { - let name = designer; - let userLink = designer; - const designerLower = designer.toLowerCase(); - const anilistUser = designer.match(/https?:\/\/anilist\.co\/user\/([^/]+)\/?/); - - if (anilistUser) { - name = anilistUser[1]; - } else if (designerLower.startsWith('@')) { - name = designer.replace('@', ''); - userLink = `https://anilist.co/user/${name}/`; - } else if (!designerLower.startsWith('http')) { - userLink = `https://anilist.co/user/${name}/`; - } - - return `<a href="${userLink}" target="_blank">@${name}</a>`; + let name = designer; + let userLink = designer; + const designerLower = designer.toLowerCase(); + const anilistUser = designer.match( + /https?:\/\/anilist\.co\/user\/([^/]+)\/?/, + ); + + if (anilistUser) { + name = anilistUser[1]; + } else if (designerLower.startsWith("@")) { + name = designer.replace("@", ""); + userLink = `https://anilist.co/user/${name}/`; + } else if (!designerLower.startsWith("http")) { + userLink = `https://anilist.co/user/${name}/`; + } + + return `<a href="${userLink}" target="_blank">@${name}</a>`; }; const onClick = (event: MouseEvent) => { - event.preventDefault(); - - if ( - event.clientX < - badgeReference.getBoundingClientRect().left + badgeReference.getBoundingClientRect().width / 2 - ) { - onPrevious(); - } else { - onNext(); - } + event.preventDefault(); + + if ( + event.clientX < + badgeReference.getBoundingClientRect().left + + badgeReference.getBoundingClientRect().width / 2 + ) { + onPrevious(); + } else { + onNext(); + } }; </script> |