ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-08 00:00:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#33 clickable index indicator in FeaturedPackages

Browse source
This commit is contained in:
neil 2022-11-30 14:30:59 +08:00
parent 57692288bf
commit f049f179b3
2 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
View file

@ -15,9 +15,9 @@
let width = 0; let width = 0;
let styleFeaturedPackages: string; let styleFeaturedPackages: string;
function getFeaturedStyle() { function resetFeaturedStyle() {
const position = pkgFocus * width; const position = pkgFocus * width;
return ` styleFeaturedPackages = `
width: ${featuredPackages.length * width}px; width: ${featuredPackages.length * width}px;
left: -${position}px; left: -${position}px;
transition: left 0.6s ease-in; transition: left 0.6s ease-in;
@ -26,16 +26,22 @@
function handleContainerResize(node: HTMLElement) { function handleContainerResize(node: HTMLElement) {
width = node.clientWidth; width = node.clientWidth;
styleFeaturedPackages = getFeaturedStyle(); resetFeaturedStyle();
} }
const loop = setInterval(() => { let loop: NodeJS.Timer;
pkgFocus++;
if (pkgFocus === featuredPackages.length) { function resetLoop() {
pkgFocus = 0; if (loop) clearInterval(loop);
} loop = setInterval(() => {
styleFeaturedPackages = getFeaturedStyle(); pkgFocus++;
}, 3000); if (pkgFocus === featuredPackages.length) {
pkgFocus = 0;
}
resetFeaturedStyle();
}, 3000);
resetFeaturedStyle();
}
featuredPackagesStore.subscribe((v) => { featuredPackagesStore.subscribe((v) => {
featuredPackages = v; featuredPackages = v;
@ -46,6 +52,7 @@
if (!featuredPackages.length) { if (!featuredPackages.length) {
initializeFeaturedPackages(); initializeFeaturedPackages();
} }
resetLoop();
}); });
</script> </script>
@ -55,7 +62,11 @@
<p>FEATURED PACKAGES</p> <p>FEATURED PACKAGES</p>
<ul class="flex gap-2"> <ul class="flex gap-2">
{#each featuredPackages as pkg, i} {#each featuredPackages as pkg, i}
<li <button
on:click={() => {
pkgFocus = i;
resetLoop();
}}
class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${ class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${
i === pkgFocus ? 'bg-purple-900' : '' i === pkgFocus ? 'bg-purple-900' : ''
}`} }`}

13
packages/gui/src/routes/packages/[slug]/+page.svelte
View file

@ -9,18 +9,21 @@
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
import { packages as packagesStore } from '$libs/stores'; import { packages, featuredPackages } from '$libs/stores';
import type { Package } from '@tea/ui/types'; import type { Package } from '@tea/ui/types';
let pkg: Package; let pkg: Package;
packagesStore.subscribe((allPackages) => { const setPkg = (pkgs: Package[]) => {
const foundPackage = allPackages.find(({ slug }) => slug === data?.slug) as Package; const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
if (foundPackage) { if (!pkg && foundPackage) {
pkg = foundPackage; pkg = foundPackage;
} }
}); };
packages.subscribe(setPkg);
featuredPackages.subscribe(setPkg);
</script> </script>
<div> <div>