wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

streamlines scroller bg show/hide logic as utils

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-05-22 08:40:52 -07:00
parent 56d61e0932
commit 217780d785
Failed to extract signature
2 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/Scroller/Background.svelte
View file

@ -9,16 +9,26 @@
}
let { index, steps, preload = 1, stackBackground = true }: Props = $props();
function shouldShowStep(i:number) {
if (preload === 0) return true;
if (stackBackground) return i <= index;
return i >= index - preload && i <= index + preload;
}
function isStepVisible(i:number) {
if (stackBackground) return i <= index;
return i === index;
}
</script>
{#each steps as step, i}
<!-- Load the step(s) before and after the active one, only -->
<!-- Unless stackBackground is true. If so, keep all steps before the current one loaded. -->
{#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
{#if shouldShowStep(i)}
<div
class="step-background step-{i + 1} w-full absolute"
class:visible={stackBackground ? i <= index : i === index}
class:invisible={stackBackground ? i > index : i !== index}
class={`step step-${i + 1} w-full absolute`}
class:visible={isStepVisible(i)}
class:invisible={!isStepVisible(i)}
>
<step.background {...step.backgroundProps || {}}></step.background>
</div>

2
src/components/Theme/@types/component.ts
View file

@ -50,5 +50,5 @@ export interface Theme {
export interface CustomTheme {
colour?: Partial<Colour>;
font?: Partial<CustomFont>;
[customProperty: string]: unknown;
[customProperty: string]: unknown;
}