diff options
Diffstat (limited to 'src/lib/User')
| -rw-r--r-- | src/lib/User/BadgeWall/AWC.svelte | 21 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/BadgePreview.svelte | 46 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/Badges.svelte | 31 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/FallbackBadge.svelte | 58 |
4 files changed, 103 insertions, 53 deletions
diff --git a/src/lib/User/BadgeWall/AWC.svelte b/src/lib/User/BadgeWall/AWC.svelte index 1cf82a1b..2bd21001 100644 --- a/src/lib/User/BadgeWall/AWC.svelte +++ b/src/lib/User/BadgeWall/AWC.svelte @@ -5,10 +5,19 @@ import FallbackBadge from './FallbackBadge.svelte'; import './badges.css'; - export let awcPromise: Promise<Response>; - export let categoryFilter: string | null; - export let isOwner: boolean; - export let preferences: Preferences; + interface Props { + awcPromise: Promise<Response>; + categoryFilter: string | null; + isOwner: boolean; + preferences: Preferences; + } + + let { + awcPromise, + categoryFilter, + isOwner, + preferences + }: Props = $props(); const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => { return Array.from( @@ -72,7 +81,7 @@ {group.group} </summary> - <p /> + <p></p> <div class="badges"> {#each group.badges as badge, index} @@ -92,7 +101,7 @@ </div> </details> - <p /> + <p></p> {/each} {/if} {/await} diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte index 7a54cbc4..5daccdd2 100644 --- a/src/lib/User/BadgeWall/BadgePreview.svelte +++ b/src/lib/User/BadgeWall/BadgePreview.svelte @@ -1,4 +1,6 @@ <script lang="ts"> + import { run } from 'svelte/legacy'; + import { thumbnail } from '$lib/Utility/image'; import type { Badge } from '$lib/Database/SB/User/badges'; import { cdn } from '$lib/Utility/image'; @@ -8,16 +10,26 @@ import root from '$lib/Utility/root'; import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; - export let selectedBadge: Badge | undefined; - export let onNext: () => void = () => {}; - export let onPrevious: () => void = () => {}; - export let hasNext: boolean; - export let hasPrevious: boolean; + interface Props { + selectedBadge: Badge | undefined; + onNext?: () => void; + onPrevious?: () => void; + hasNext: boolean; + hasPrevious: boolean; + } + + let { + selectedBadge = $bindable(), + onNext = () => {}, + onPrevious = () => {}, + hasNext, + hasPrevious + }: Props = $props(); - let source = cdn(thumbnail(selectedBadge?.image || '')) || ''; + let source = $state(cdn(thumbnail(selectedBadge?.image || '')) || ''); let badgeReference: HTMLImageElement; - $: { + run(() => { if (selectedBadge && selectedBadge.image) { const image = new Image(); @@ -26,14 +38,14 @@ source = image.src; }; } - } + }); - $: { + run(() => { if (selectedBadge) fetch(root(`/api/badges?incrementClickCount=${selectedBadge.id}`), { method: 'PUT' }); - } + }); onMount(() => { badgeReference = document.querySelector('.badge-container-image') as HTMLImageElement; @@ -105,7 +117,7 @@ <div class="badge-preview-badge"> {#if selectedBadge.image} <div role="img" class="badge-container"> - <a href={'#'} on:click={onClick} class="badge-container-image"> + <a href={'#'} onclick={onClick} class="badge-container-image"> <ParallaxImage {source} alternativeText="selectedBadge.description" @@ -115,7 +127,7 @@ </a> </div> - <p /> + <p></p> {/if} </div> @@ -124,7 +136,7 @@ {$locale().dateFormatter(databaseTimeToDate(selectedBadge.time))} {#if (selectedBadge.designer || selectedBadge.source || selectedBadge.post) && !selectedBadge.description} - <p /> + <p></p> {:else if selectedBadge.description} <br /> {/if} @@ -133,7 +145,7 @@ {#if selectedBadge.description} {selectedBadge.description} - <p /> + <p></p> {/if} {#if selectedBadge.designer} @@ -185,7 +197,7 @@ <a href={`?category=${selectedBadge.category}`} - on:click={() => (selectedBadge = undefined)} + onclick={() => (selectedBadge = undefined)} > {selectedBadge.category} </a> @@ -200,11 +212,11 @@ <div class="badge-preview-seek"> {#if hasPrevious} - <button on:click={onPrevious}>Previous</button> + <button onclick={onPrevious}>Previous</button> {/if} {#if hasNext} - <button on:click={onNext} style="float: right;">Next</button> + <button onclick={onNext} style="float: right;">Next</button> {/if} </div> </div> diff --git a/src/lib/User/BadgeWall/Badges.svelte b/src/lib/User/BadgeWall/Badges.svelte index b233d0c3..1acd4cce 100644 --- a/src/lib/User/BadgeWall/Badges.svelte +++ b/src/lib/User/BadgeWall/Badges.svelte @@ -9,19 +9,30 @@ import type { Preferences } from '../../../graphql/$types'; import type { IndexedBadge } from './badge'; - export let ungroupedBadges: IndexedBadge[]; - export let groupedBadges: [string, IndexedBadge[]][]; - export let categoryFilter: string | null; - export let editMode: boolean; - export let preferences: Preferences | undefined; - export let selectedBadge: IndexedBadge | undefined = undefined; + interface Props { + ungroupedBadges: IndexedBadge[]; + groupedBadges: [string, IndexedBadge[]][]; + categoryFilter: string | null; + editMode: boolean; + preferences: Preferences | undefined; + selectedBadge?: IndexedBadge | undefined; + } + + let { + ungroupedBadges, + groupedBadges, + categoryFilter, + editMode, + preferences, + selectedBadge = $bindable(undefined) + }: Props = $props(); </script> {#if ungroupedBadges.length === 0} <div class="card"> No due.moe registered badges found for this user. <a href={'#'} - on:click={(e) => e.preventDefault()} + onclick={(e) => e.preventDefault()} title="This alert does not include AWC badges." use:tooltip>?</a > @@ -36,7 +47,7 @@ <details open={categoryFilter ? categoryFilter === category : true}> <summary>{category}</summary> - <p /> + <p></p> <div class="badges"> {#each badges as badge} @@ -54,7 +65,7 @@ > <a href={`#`} - on:click={() => { + onclick={() => { selectedBadge = badge; const hiddenInput = document.querySelector('input[name="hidden"]'); @@ -93,6 +104,6 @@ </details> {#if groupedBadges[groupedBadges.length - 1][0] !== category} - <p /> + <p></p> {/if} {/each} diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte index 35a50a7d..68667031 100644 --- a/src/lib/User/BadgeWall/FallbackBadge.svelte +++ b/src/lib/User/BadgeWall/FallbackBadge.svelte @@ -9,22 +9,40 @@ import { dev } from '$app/environment'; import type { Preferences } from '../../../graphql/$types'; - export let source: string | null | undefined; - export let alternative: string | null | undefined; - export let fallback: string | null | undefined; - export let maxReplaceCount = 1; - export let replaceDelay = 1000; - export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg'; - export let hideOnError = false; - export let badge: Badge; - export let style = ''; - export let selectedBadge: Badge | null = null; - export let awc = false; - export let index: number | null = null; - export let preferences: Preferences | undefined; - - let replaceCount = 0; - let badgeReference: HTMLImageElement; + interface Props { + source: string | null | undefined; + alternative: string | null | undefined; + fallback: string | null | undefined; + maxReplaceCount?: number; + replaceDelay?: number; + error?: string; + hideOnError?: boolean; + badge: Badge; + style?: string; + selectedBadge?: Badge | null; + awc?: boolean; + index?: number | null; + preferences: Preferences | undefined; + } + + let { + source, + alternative, + fallback, + maxReplaceCount = 1, + replaceDelay = 1000, + error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg', + hideOnError = false, + badge, + style = '', + selectedBadge = $bindable(null), + awc = false, + index = null, + preferences + }: Props = $props(); + + let replaceCount = $state(0); + let badgeReference: HTMLImageElement = $state(); const mouse = tweened( { x: 0, y: 0 }, { @@ -82,9 +100,9 @@ href={awc ? badgeToAny(badge).link : '#'} target="_blank" class="badge-container badge" - on:mousemove={handleMouseMove} - on:mouseleave={handleMouseLeave} - on:click={(e) => { + onmousemove={handleMouseMove} + onmouseleave={handleMouseLeave} + onclick={(e) => { if (!awc) { e.preventDefault(); @@ -100,7 +118,7 @@ bind:this={badgeReference} style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x / 10}deg); ${style}" - on:error={(e) => delayedReplace(e, fallback)} + onerror={(e) => delayedReplace(e, fallback)} /> </a> </Tooltip> |