components update

assets/ts/overlay.ts

@@ -1,5 +1,20 @@
-import { delay, calcImageIndex, mouseToTransform } from './utils'
-import { handleOnMove, globalIndex, globalIndexDec, globalIndexInc } from './desktop'
+import {
+  delay,
+  layersStyleSet,
+  center,
+  createImgElement,
+  calcImageIndex,
+  FIFO,
+  mouseToTransform
+} from './utils'
+import {
+  layersStyleArray,
+  layers,
+  handleOnMove,
+  globalIndex,
+  globalIndexDec,
+  globalIndexInc
+} from './desktop'
 import { imagesArray, imagesArrayLen } from './dataFetch'
 import { imgIndexSpanUpdate } from './indexDisp'
 
@@ -20,7 +35,12 @@ const setCursorText = (text: string): void => {
 const setTextPos = (e: MouseEvent): void => {
   // overlayCursor.style.left = `${e.clientX}px`
   // overlayCursor.style.top = `${e.clientY}px`
-  overlayCursor.style.transform = mouseToTransform(e.clientX, e.clientY, false, true)
+  overlayCursor.style.transform = mouseToTransform(
+    `${e.clientX}px`,
+    `${e.clientY}px`,
+    false,
+    true
+  )
 }
 
 // disable listeners
@@ -47,19 +67,28 @@ export const overlayDisable = (): void => {
 // handle close click
 async function handleCloseClick(): Promise<void> {
   overlayDisable()
-  await delay(2500)
-  window.addEventListener('mousemove', handleOnMove)
+  layersStyleSet(layersStyleArray, layers)
+  for (let i: number = 4; i >= 0; i--) {
+    layers[i].dataset.status = `r${4 - i}`
+  }
+  await delay(1700)
+  for (let i: number = 4; i >= 0; i--) {
+    layers[i].dataset.status = 'null'
+  }
+  window.addEventListener('mousemove', handleOnMove, { passive: true })
 }
 
 const handlePrevClick = (): void => {
   globalIndexDec()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
 const handleNextClick = (): void => {
   globalIndexInc()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
@@ -109,6 +138,7 @@ export const vwRefreshInit = (): void => {
         r.style.setProperty('--footer-height', '31px')
       }
       // recenter image (only in overlay)
+      if (layers[4].dataset.status === 't0') center(layers[4])
     },
     { passive: true }
   )