initial version of transition toward image elements

assets/ts/overlay.ts

@@ -1,21 +1,20 @@
-import {
-  delay,
-  center,
-  createImgElement,
-  calcImageIndex,
-  FIFO,
-  mouseToTransform
-} from './utils'
+import { delay, center, calcImageIndex, mouseToTransform } from './utils'
 import {
   handleOnMove,
   globalIndex,
   globalIndexDec,
   globalIndexInc,
-  topLayerPosSet
+  trailingImageIndexes,
+  transformCache,
+  pushIndex,
+  emptyTransformCache,
+  emptyTrailingImageIndexes
 } from './desktop'
-import { imagesArray, imagesArrayLen } from './dataFetch'
+import { imagesArrayLen } from './dataFetch'
 import { imgIndexSpanUpdate } from './indexDisp'
-import { overlayCursor, cursorInnerContent, layers } from './elemGen'
+import { overlayCursor, cursorInnerContent, imagesDivNodes as images } from './elemGen'
+
+let oneThird: number = Math.round(window.innerWidth / 3)
 
 // set cursor text
 const setCursorText = (text: string): void => {
@@ -35,7 +34,7 @@ const disableListener = (): void => {
 
 // enable overlay
 export const overlayEnable = (): void => {
-  overlayCursor.style.zIndex = '7'
+  overlayCursor.style.zIndex = '100'
   setListener()
 }
 
@@ -44,41 +43,62 @@ export const overlayDisable = (): void => {
   overlayCursor.style.zIndex = '-1'
   setCursorText('')
   disableListener()
-  // Add back previous self increment of global index (by handleOnMove)
-  globalIndexInc()
 }
 
 // handle close click
 async function handleCloseClick(): Promise<void> {
   overlayDisable()
-  topLayerPosSet()
-  for (let i: number = 0; i <= 4; i++) {
-    layers[i].dataset.status = `r${i}`
+  const indexesNum = trailingImageIndexes.length
+  emptyTrailingImageIndexes()
+  for (let i: number = 0; i < indexesNum; i++) {
+    const e: HTMLImageElement = images[calcImageIndex(globalIndex - i, imagesArrayLen)]
+    trailingImageIndexes.unshift(calcImageIndex(globalIndex - i, imagesArrayLen))
+    if (i === 0) {
+      e.style.transitionDelay = '0s, 0.7s'
+    } else {
+      e.style.transitionDelay = `${1.2 + 0.1 * i - 0.1}s`
+      e.style.display = 'block'
+    }
+    e.style.transform = transformCache[indexesNum - i - 1]
+    e.style.zIndex = `${indexesNum - i - 1}`
+    e.dataset.status = i === 0 ? 'resumeTop' : 'resume'
   }
   await delay(1700)
-  for (let i: number = 0; i <= 4; i++) {
-    layers[i].dataset.status = 'null'
+  for (let i: number = 0; i < indexesNum; i++) {
+    images[calcImageIndex(globalIndex - i, imagesArrayLen)].dataset.status = 'null'
   }
+  // Add back previous self increment of global index (by handleOnMove)
+  globalIndexInc()
   window.addEventListener('mousemove', handleOnMove, { passive: true })
+  emptyTransformCache()
 }
 
 const handlePrevClick = (): void => {
+  const imgIndex: number = calcImageIndex(globalIndex, imagesArrayLen)
   globalIndexDec()
-  const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex]), layers, false)
-  imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
+  const prevImgIndex = calcImageIndex(globalIndex, imagesArrayLen)
+  pushIndex(prevImgIndex, true, false)
+  images[imgIndex].style.display = 'none'
+  center(images[prevImgIndex])
+  images[prevImgIndex].dataset.status = 'top'
+  images[prevImgIndex].style.display = 'block'
+  imgIndexSpanUpdate(prevImgIndex + 1, imagesArrayLen)
 }
 
 const handleNextClick = (): void => {
+  const imgIndex: number = calcImageIndex(globalIndex, imagesArrayLen)
   globalIndexInc()
-  const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex]), layers, false)
-  imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
+  const nextImgIndex = calcImageIndex(globalIndex, imagesArrayLen)
+  pushIndex(nextImgIndex, false, false)
+  images[imgIndex].style.display = 'none'
+  center(images[nextImgIndex])
+  images[nextImgIndex].dataset.status = 'top'
+  images[nextImgIndex].style.display = 'block'
+  imgIndexSpanUpdate(nextImgIndex + 1, imagesArrayLen)
 }
 
 const handleOverlayMouseMove = (e: MouseEvent): void => {
   setTextPos(e)
-  const oneThird: number = Math.round(window.innerWidth / 3)
   if (e.clientX < oneThird) {
     setCursorText('PREV')
     overlayCursor.dataset.status = 'PREV'
@@ -114,6 +134,7 @@ export const vwRefreshInit = (): void => {
   window.addEventListener(
     'resize',
     () => {
+      oneThird = Math.round(window.innerWidth / 3)
       // reset footer height
       const r = document.querySelector(':root') as HTMLStyleElement
       if (window.innerWidth > 768) {
@@ -122,7 +143,8 @@ export const vwRefreshInit = (): void => {
         r.style.setProperty('--footer-height', '31px')
       }
       // recenter image (only in overlay)
-      if (layers[0].dataset.status === 't0') center(layers[0])
+      const i: HTMLImageElement = images[calcImageIndex(globalIndex, imagesArrayLen)]
+      if (i.dataset.status === 'top') center(i)
     },
     { passive: true }
   )