diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index e16a4b7..389cf6d 100644 --- a/assets/ts/desktop.ts +++ b/assets/ts/desktop.ts @@ -26,10 +26,25 @@ let EnterOverlayClickAbCtl = new AbortController() export const stackDepth: number = 5 -// activate top image -const activate = (index: number, mouseX: number, mouseY: number): void => { +export const addEnterOverlayEL = (e: HTMLImageElement): void => { EnterOverlayClickAbCtl.abort() EnterOverlayClickAbCtl = new AbortController() + e.addEventListener( + 'click', + () => { + void enterOverlay() + }, + { + passive: true, + once: true, + signal: EnterOverlayClickAbCtl.signal + } + ) +} + +// activate top image +const activate = (index: number, mouseX: number, mouseY: number): void => { + addEnterOverlayEL(images[index]) const indexesNum: number = pushIndex( index, trailingImageIndexes, @@ -45,17 +60,6 @@ const activate = (index: number, mouseX: number, mouseY: number): void => { images[trailingImageIndexes[i]].style.zIndex = `${i}` } images[index].style.display = 'block' - images[index].addEventListener( - 'click', - () => { - void enterOverlay() - }, - { - passive: true, - once: true, - signal: EnterOverlayClickAbCtl.signal - } - ) last = { x: mouseX, y: mouseY } } diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 2fe22f2..3b4624b 100644 --- a/assets/ts/overlay.ts +++ b/assets/ts/overlay.ts @@ -8,7 +8,8 @@ import { transformCache, emptyTransformCache, emptyTrailingImageIndexes, - stackDepth + stackDepth, + addEnterOverlayEL } from './desktop' import { imagesArrayLen } from './dataFetch' import { imgIndexSpanUpdate } from './indexDisp' @@ -55,15 +56,17 @@ async function handleCloseClick(): Promise { trailingImageIndexes.unshift(calcImageIndex(globalIndex - i, imagesArrayLen)) if (i === 0) { e.style.transitionDelay = '0s, 0.7s' + e.dataset.status = 'resumeTop' } else { e.style.transitionDelay = `${1.2 + 0.1 * i - 0.1}s` e.style.display = 'block' + e.dataset.status = 'resume' } e.style.transform = transformCache[indexesNum - i - 1] e.style.zIndex = `${indexesNum - i - 1}` - e.dataset.status = i === 0 ? 'resumeTop' : 'resume' } await delay(1200 + stackDepth * 100 + 100) + addEnterOverlayEL(images[calcImageIndex(globalIndex, imagesArrayLen)]) for (let i: number = 0; i < indexesNum; i++) { images[calcImageIndex(globalIndex - i, imagesArrayLen)].dataset.status = 'null' }