add enter overlay event listener now is a function

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 }
 }
 

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<void> {
     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'
   }