qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-05 22:48:17 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

⚡️ Remove spotlight effect to improve performance

Browse Source
This commit is contained in:
pheralb 2024-04-20 23:41:34 +01:00
parent 632ec0ae27
commit 038edfa2ae
2 changed files with 130 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/cardSpotlight.svelte
View File

@ -1,55 +0,0 @@
<script lang="ts">
let domElement: HTMLElement;
let focused = false;
let position = { x: 0, y: 0 };
let opacity = 0;
const handleMouseMove = (e: MouseEvent) => {
if (!domElement || focused) return;
const rect = domElement.getBoundingClientRect();
position = {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
};
const handleFocus = () => {
focused = true;
opacity = 1;
};
const handleBlur = () => {
focused = false;
opacity = 0;
};
const handleMouseEnter = () => {
opacity = 1;
};
const handleMouseLeave = () => {
opacity = 0;
};
</script>
<!--Se quito el aria-hidden="true" para que se pueda leer el contenido del card con el lector de pantalla -->
<article
bind:this={domElement}
on:mousemove={handleMouseMove}
on:focus={handleFocus}
on:blur={handleBlur}
on:mouseenter={handleMouseEnter}
on:mouseleave={handleMouseLeave}
class="relative flex items-center justify-center overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
>
<div
class="pointer-events-none absolute transform-gpu -inset-px opacity-0 transition duration-300"
style={`
opacity: ${opacity};
background: radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(97, 97, 97, 0.1), transparent 40%);
`}
/>
<slot />
</article>

23
src/components/svgCard.svelte
View File

@ -1,16 +1,14 @@
<script lang="ts">
import type { iSVG } from '../types/svg';
import { toast } from 'svelte-sonner';
import type { iSVG } from '@/types/svg';
// Utils:
import { cn } from '@/utils/cn';
import { getSvgContent } from '@/utils/getSvgContent';
// Icons:
import { CopyIcon, LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
import { LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
// Components & styles:
import CardSpotlight from './cardSpotlight.svelte';
import DownloadSvg from './downloadSvg.svelte';
import CopySvg from './copySvg.svelte';
import { badgeStyles } from '@/ui/styles';
@ -39,14 +37,18 @@
// Icon Stroke & Size:
let iconStroke = 1.8;
let iconSize = 16;
// Global Images Styles:
const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
</script>
<CardSpotlight>
<div class="flex flex-col items-center justify-center rounded-md p-4">
<div
class="flex flex-col items-center justify-center rounded-md p-4 border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-300/50 dark:hover:bg-neutral-800/20 transition-colors duration-100 group"
>
<!-- Image -->
{#if wordmarkSvg == true}
<img
class="hidden dark:block mb-4 mt-2 h-10 select-none"
class={cn('hidden dark:block', globalImageStyles)}
src={typeof svgInfo.wordmark !== 'string'
? svgInfo.wordmark?.dark || ''
: svgInfo.wordmark || ''}
@ -55,7 +57,7 @@
loading="lazy"
/>
<img
class="block dark:hidden mb-4 mt-2 h-10 select-none"
class={cn('block dark:hidden', globalImageStyles)}
src={typeof svgInfo.wordmark !== 'string'
? svgInfo.wordmark?.light || ''
: svgInfo.wordmark || ''}
@ -65,14 +67,14 @@
/>
{:else}
<img
class={cn('hidden dark:block mb-4 mt-2 h-10 select-none')}
class={cn('hidden dark:block', globalImageStyles)}
src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
alt={svgInfo.title}
title={svgInfo.title}
loading="lazy"
/>
<img
class={cn('block dark:hidden mb-4 mt-2 h-10 select-none')}
class={cn('block dark:hidden', globalImageStyles)}
src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
alt={svgInfo.title}
title={svgInfo.title}
@ -169,4 +171,3 @@
{/if}
</div>
</div>
</CardSpotlight>