eric/bridget
1
0
Fork 0
mirror of https://github.com/Sped0n/bridget.git synced 2026-04-22 14:09:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

refactor(stage.ts): extract getElNextFive() function to improve code readability and reusability

Browse Source 
refactor(stage.ts): move lores(getElNextFive()) to setPositions() function to ensure images are preloaded before setting positions
refactor(stage.ts): move lores(getElTrail()) to setPositions() function to ensure images are preloaded before setting positions when isOpen is true
refactor(stage.ts): remove redundant lores(imgs) call from minimizeImage() function
refactor(stage.ts): move lores(getElNextFive()) to initStage() function to ensure images are preloaded when stage is initialized
refactor(stage.ts): remove unused e.src assignment in createStage() function
This commit is contained in:
Sped0n
2023-10-31 00:05:43 +08:00
parent 1e945353df
commit 6606dcec93
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/ts/desktop/stage.ts
View File

@@ -43,6 +43,10 @@ function getElCurrent(): HTMLImageElement {
return elTrail[elTrail.length - 1] return elTrail[elTrail.length - 1]
} }
function getElNextFive(): HTMLImageElement[] {
return state.get().nextFive.map((i) => imgs[i])
}
/** /**
* main functions * main functions
*/ */
@@ -67,6 +71,9 @@ function setPositions(): void {
const elTrail = getElTrail() const elTrail = getElTrail()
if (!elTrail.length) return if (!elTrail.length) return
// preload
lores(getElNextFive())
gsap.set(elTrail, { gsap.set(elTrail, {
x: (i: number) => cordHist.get()[i].x - window.innerWidth / 2, x: (i: number) => cordHist.get()[i].x - window.innerWidth / 2,
y: (i: number) => cordHist.get()[i].y - window.innerHeight / 2, y: (i: number) => cordHist.get()[i].y - window.innerHeight / 2,
@@ -77,6 +84,7 @@ function setPositions(): void {
}) })
if (isOpen.get()) { if (isOpen.get()) {
lores(getElTrail())
hires([getElCurrent()]) hires([getElCurrent()])
gsap.set(imgs, { opacity: 0 }) gsap.set(imgs, { opacity: 0 })
gsap.set(getElCurrent(), { opacity: 1, x: 0, y: 0, scale: 1 }) gsap.set(getElCurrent(), { opacity: 1, x: 0, y: 0, scale: 1 })
@@ -129,8 +137,6 @@ export function minimizeImage(): void {
isOpen.set(false) isOpen.set(false)
isAnimating.set(true) isAnimating.set(true)
lores(imgs)
const tl = gsap.timeline() const tl = gsap.timeline()
// shrink current // shrink current
tl.to(getElCurrent(), { tl.to(getElCurrent(), {
@@ -179,6 +185,8 @@ export function initStage(ijs: ImageJSON[]): void {
isOpen.addWatcher(() => active.set(isOpen.get() && !isAnimating.get())) isOpen.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
isAnimating.addWatcher(() => active.set(isOpen.get() && !isAnimating.get())) isAnimating.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
cordHist.addWatcher(() => setPositions()) cordHist.addWatcher(() => setPositions())
// preload
lores(getElNextFive())
} }
/** /**
@@ -192,7 +200,6 @@ function createStage(ijs: ImageJSON[]): void {
// append images to container // append images to container
for (let ij of ijs) { for (let ij of ijs) {
const e = document.createElement('img') const e = document.createElement('img')
e.src = ij.loUrl
e.height = ij.loImgH e.height = ij.loImgH
e.width = ij.loImgW e.width = ij.loImgW
// set data attributes // set data attributes