aboutsummaryrefslogtreecommitdiff
path: root/src/lib/User/BadgeWall/FallbackBadge.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/User/BadgeWall/FallbackBadge.svelte')
-rw-r--r--src/lib/User/BadgeWall/FallbackBadge.svelte216
1 files changed, 108 insertions, 108 deletions
diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte
index 0e690443..35a50a7d 100644
--- a/src/lib/User/BadgeWall/FallbackBadge.svelte
+++ b/src/lib/User/BadgeWall/FallbackBadge.svelte
@@ -1,130 +1,130 @@
<script lang="ts">
- import { classifyDesignerName } from './badge';
- import locale from '$stores/locale';
- import { tweened } from 'svelte/motion';
- import type { Badge } from '../../Database/SB/User/badges';
- import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
- import { databaseTimeToDate } from '../../Utility/time';
- import { cubicOut } from 'svelte/easing';
- import { dev } from '$app/environment';
- import type { Preferences } from '../../../graphql/$types';
+ import { classifyDesignerName } from './badge';
+ import locale from '$stores/locale';
+ import { tweened } from 'svelte/motion';
+ import type { Badge } from '../../Database/SB/User/badges';
+ import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
+ import { databaseTimeToDate } from '../../Utility/time';
+ import { cubicOut } from 'svelte/easing';
+ 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;
+ 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;
- const mouse = tweened(
- { x: 0, y: 0 },
- {
- duration: 75,
- easing: cubicOut
- }
- );
+ let replaceCount = 0;
+ let badgeReference: HTMLImageElement;
+ const mouse = tweened(
+ { x: 0, y: 0 },
+ {
+ duration: 75,
+ easing: cubicOut
+ }
+ );
- const delayedReplace = (event: Event, image: string | undefined | null) => {
- if (replaceCount >= maxReplaceCount) return;
+ const delayedReplace = (event: Event, image: string | undefined | null) => {
+ if (replaceCount >= maxReplaceCount) return;
- setTimeout(() => {
- (event.target as HTMLImageElement).src = image || '';
+ setTimeout(() => {
+ (event.target as HTMLImageElement).src = image || '';
- replaceCount += 1;
- }, replaceDelay);
- };
+ replaceCount += 1;
+ }, replaceDelay);
+ };
- const handleMouseMove = (event: MouseEvent) => {
- const boundingRectangle = badgeReference.getBoundingClientRect();
- const factor = 1.25;
- const limit = 50;
+ const handleMouseMove = (event: MouseEvent) => {
+ const boundingRectangle = badgeReference.getBoundingClientRect();
+ const factor = 1.25;
+ const limit = 50;
- if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
+ if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
- $mouse.x +=
- (-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
- $mouse.y +=
- (-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
- $mouse.x = Math.max(Math.min($mouse.x, limit), -limit);
- $mouse.y = Math.max(Math.min($mouse.y, limit), -limit);
- };
+ $mouse.x +=
+ (-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
+ $mouse.y +=
+ (-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
+ $mouse.x = Math.max(Math.min($mouse.x, limit), -limit);
+ $mouse.y = Math.max(Math.min($mouse.y, limit), -limit);
+ };
- const handleMouseLeave = () => {
- $mouse = { x: 0, y: 0 };
- };
+ const handleMouseLeave = () => {
+ $mouse = { x: 0, y: 0 };
+ };
- const badgeToAny = (badge: Badge) => badge as any;
+ const badgeToAny = (badge: Badge) => badge as any;
</script>
{#if replaceCount < maxReplaceCount}
- <Tooltip
- content={`${dev && !awc ? `${badge.id} ${badge.click_count}\n` : ''}${
- badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
- }${badge.description ? `${awc ? '' : '\n'}${badge.description}` : ''}${
- badge.designer ? `\nDesigner: ${classifyDesignerName(badge.designer)}` : ''
- }`}
- pin={`badge-${awc ? index : badge.id}`}
- pinPosition="top"
- relative={preferences &&
- preferences.badge_wall_css !== undefined &&
- preferences.badge_wall_css.includes('backdrop-filter')}
- >
- <a
- href={awc ? badgeToAny(badge).link : '#'}
- target="_blank"
- class="badge-container badge"
- on:mousemove={handleMouseMove}
- on:mouseleave={handleMouseLeave}
- on:click={(e) => {
- if (!awc) {
- e.preventDefault();
+ <Tooltip
+ content={`${dev && !awc ? `${badge.id} ${badge.click_count}\n` : ''}${
+ badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
+ }${badge.description ? `${awc ? '' : '\n'}${badge.description}` : ''}${
+ badge.designer ? `\nDesigner: ${classifyDesignerName(badge.designer)}` : ''
+ }`}
+ pin={`badge-${awc ? index : badge.id}`}
+ pinPosition="top"
+ relative={preferences &&
+ preferences.badge_wall_css !== undefined &&
+ preferences.badge_wall_css.includes('backdrop-filter')}
+ >
+ <a
+ href={awc ? badgeToAny(badge).link : '#'}
+ target="_blank"
+ class="badge-container badge"
+ on:mousemove={handleMouseMove}
+ on:mouseleave={handleMouseLeave}
+ on:click={(e) => {
+ if (!awc) {
+ e.preventDefault();
- selectedBadge = badge;
- }
- }}
- >
- <img
- src={source}
- alt={alternative}
- loading="lazy"
- class="badge"
- bind:this={badgeReference}
- style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
- 10}deg); ${style}"
- on:error={(e) => delayedReplace(e, fallback)}
- />
- </a>
- </Tooltip>
+ selectedBadge = badge;
+ }
+ }}
+ >
+ <img
+ src={source}
+ alt={alternative}
+ loading="lazy"
+ class="badge"
+ bind:this={badgeReference}
+ style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
+ 10}deg); ${style}"
+ on:error={(e) => delayedReplace(e, fallback)}
+ />
+ </a>
+ </Tooltip>
{:else if !hideOnError}
- <img src={error} alt="Not found" loading="lazy" class="badge" />
+ <img src={error} alt="Not found" loading="lazy" class="badge" />
{/if}
<style lang="scss">
- $transition: transform 0.325s ease;
+ $transition: transform 0.325s ease;
- .badge {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- transition: $transition;
- box-sizing: border-box;
- border-radius: 8px;
- }
+ .badge {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ transition: $transition;
+ box-sizing: border-box;
+ border-radius: 8px;
+ }
- .badge:hover {
- transform: scale(1.075);
- position: relative;
- z-index: 2;
- transition: $transition;
- }
+ .badge:hover {
+ transform: scale(1.075);
+ position: relative;
+ z-index: 2;
+ transition: $transition;
+ }
</style>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-25 00:50:30 +0000