components update

assets/ts/desktop.ts

@@ -1,31 +1,32 @@
 import { overlayEnable } from './overlay'
 import {
+  styleCache,
+  FIFO,
+  layersStyleSet,
+  center,
   type position,
   createImgElement,
   calcImageIndex,
-  delay,
-  mouseToTransform
+  delay
 } from './utils'
 import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl'
 import { imgIndexSpanUpdate } from './indexDisp'
 import { imagesArrayLen, imagesArray } from './dataFetch'
-import { preloader } from './imageCache'
 
-const imagesDiv = document.getElementsByClassName('images').item(0) as HTMLDivElement
-
-let imagesDivNodes: NodeListOf<HTMLImageElement>
-
-export const desktopImagesInit = (): void => {
-  for (let i = 0; i < imagesArrayLen; i++) {
-    imagesDiv.appendChild(createImgElement(imagesArray[i]))
-  }
-  imagesDivNodes = imagesDiv.childNodes as NodeListOf<HTMLImageElement>
-}
-
-export const trailingImageIndexes: number[] = []
+// get layer divs
+export const layers: HTMLDivElement[] = [
+  document.getElementById('layer1') as HTMLDivElement,
+  document.getElementById('layer2') as HTMLDivElement,
+  document.getElementById('layer3') as HTMLDivElement,
+  document.getElementById('layer4') as HTMLDivElement,
+  document.getElementById('layer5') as HTMLDivElement
+]
 
 // layers position caching
-export const layersStyleArray: number[][] = [[], []]
+export const layersStyleArray: string[][] = [
+  ['0px', '0px', '0px', '0px', '0px'],
+  ['0px', '0px', '0px', '0px', '0px']
+]
 
 // global index for "activated"
 export let globalIndex: number = 0
@@ -33,37 +34,13 @@ export let globalIndex: number = 0
 // last position set as "activated"
 let last: position = { x: 0, y: 0 }
 
-let EnterOverlayController = new AbortController()
-
 // activate top image
-const activate = (index: number, mouseX: number, mouseY: number): void => {
-  EnterOverlayController.abort()
-  EnterOverlayController = new AbortController()
-  trailingImageIndexes.push(index)
-  let indexesNum: number = trailingImageIndexes.length
-  // push the tail index out and hide the image
-  if (indexesNum > 10) {
-    imagesDivNodes[trailingImageIndexes.shift() as number].style.display = 'none'
-    indexesNum = 10
-  }
-  // set img position
-  imagesDivNodes[index].style.transform = mouseToTransform(mouseX, mouseY, true, true)
-  // reset z index
-  for (let i = 0; i < indexesNum; i++) {
-    imagesDivNodes[trailingImageIndexes[i]].style.zIndex = `${i}`
-  }
-  imagesDivNodes[index].style.display = 'block'
-  imagesDivNodes[index].addEventListener(
-    'click',
-    () => {
-      void enterOverlay()
-    },
-    {
-      passive: true,
-      signal: EnterOverlayController.signal
-    }
-  )
-  last = { x: mouseX, y: mouseY }
+const activate = (index: number, x: number, y: number): void => {
+  const imgElem: HTMLImageElement = createImgElement(imagesArray[index])
+  styleCache(x, y, layersStyleArray)
+  layersStyleSet(layersStyleArray, layers)
+  FIFO(imgElem, layers)
+  last = { x, y }
 }
 
 // Compare the current mouse position with the last activated position
@@ -89,11 +66,17 @@ export const handleOnMove = (e: MouseEvent): void => {
 }
 
 async function enterOverlay(): Promise<void> {
+  layers[4].style.backgroundImage = ''
+  const topLayerImage = layers[4].lastElementChild as HTMLImageElement
+  topLayerImage.style.transition = ''
   // stop images animation
   window.removeEventListener('mousemove', handleOnMove)
   // set top image
-  alert('center')
-  await delay(2500)
+  center(layers[4])
+  for (let i = 4; i >= 0; i--) {
+    layers[i].dataset.status = `t${4 - i}`
+  }
+  await delay(1600)
   // Offset previous self increment of global index (by handleOnMove)
   globalIndexDec()
   // overlay init
@@ -102,16 +85,22 @@ async function enterOverlay(): Promise<void> {
 
 // initialization
 export const trackMouseInit = (): void => {
-  desktopImagesInit()
-  window.addEventListener('mousemove', handleOnMove, { passive: true })
+  window.addEventListener('mousemove', handleOnMove)
+  layers[4].addEventListener(
+    'click',
+    () => {
+      void enterOverlay()
+    },
+    {
+      passive: true
+    }
+  )
 }
 
 export const globalIndexDec = (): void => {
   globalIndex--
-  preloader(globalIndex)
 }
 
 export const globalIndexInc = (): void => {
   globalIndex++
-  preloader(globalIndex)
 }

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

assets/ts/thresholdCtl.ts

@@ -5,7 +5,7 @@ const thresholdDisp = document.getElementsByClassName('thid').item(0) as HTMLSpa
 
 // threshold data
 const threshold: number[] = [0, 40, 80, 120, 160, 200]
-export const thresholdSensitivityArray: number[] = [200, 40, 18, 14, 9, 5]
+export const thresholdSensitivityArray: number[] = [100, 40, 18, 14, 9, 5]
 export let thresholdIndex: number = 2
 
 // update inner text of threshold display element

assets/ts/utils.ts

@@ -18,20 +18,66 @@ export interface deviceType {
   desktop: boolean
 }
 
+// cache a xy position to array
+export const styleCache = (x: number, y: number, styleArray: string[][]): void => {
+  // pop element if length surpass limitation
+  styleArray[0].shift()
+  styleArray[1].shift()
+  // push new element
+  styleArray[0].push(`${x}px`)
+  styleArray[1].push(`${y}px`)
+}
+
 // 0 to 0001, 25 to 0025
 export const duper = (num: number): string => {
   return ('0000' + num.toString()).slice(-4)
 }
 
+// FIFO data array for image display
+export const FIFO = (
+  element: HTMLImageElement,
+  layersArray: HTMLDivElement[],
+  fifoPosition: boolean = true
+): void => {
+  function layerProcess(layerL: HTMLDivElement, layerH: HTMLDivElement): void {
+    if (layerL.childElementCount !== 0)
+      layerL.removeChild(layerL.lastElementChild as HTMLImageElement)
+    if (layerH.childElementCount !== 0) {
+      const layerHNode = layerH.lastElementChild as HTMLImageElement
+      layerL.appendChild(layerHNode.cloneNode(true))
+      if (fifoPosition) layerL.style.transform = layerH.style.transform
+    }
+  }
+  for (let i: number = 0; i <= 3; i++) {
+    layerProcess(layersArray[i], layersArray[i + 1])
+  }
+  if (layersArray[4].childElementCount !== 0)
+    layersArray[4].removeChild(layersArray[4].lastElementChild as HTMLImageElement)
+  layersArray[4].appendChild(element)
+}
+
 export const mouseToTransform = (
-  x: number,
-  y: number,
+  x: string,
+  y: string,
   centerCorrection: boolean = true,
   accelerate: boolean = false
 ): string => {
   return `translate${accelerate ? '3d' : ''}(${
-    centerCorrection ? `calc(${x}px - 50%)` : `${x}px`
-  }, ${centerCorrection ? `calc(${y}px - 50%)` : `${y}px`}${accelerate ? ', 0' : ''})`
+    centerCorrection ? `calc(${x} - 50%)` : `${x}`
+  }, ${centerCorrection ? `calc(${y} - 50%)` : `${y}`}${accelerate ? ', 0' : ''})`
+}
+
+// set position for 5 image display layers
+export const layersStyleSet = (
+  styleArray: string[][],
+  layersArray: HTMLDivElement[]
+): void => {
+  function posSet(layer: HTMLDivElement, index: number): void {
+    layer.style.transform = mouseToTransform(styleArray[0][index], styleArray[1][index])
+  }
+  for (let i = 4; i >= 0; i--) {
+    posSet(layersArray[i], i)
+  }
 }
 
 // eslint-disable-next-line @typescript-eslint/promise-function-async
@@ -53,7 +99,7 @@ export const center = (e: HTMLDivElement): void => {
   } else {
     y = (window.innerHeight - 31) / 2 + 31
   }
-  e.style.transform = mouseToTransform(x, y)
+  e.style.transform = mouseToTransform(`${x}px`, `${y}px`)
 }
 
 export const createImgElement = (input: ImageData): HTMLImageElement => {
@@ -62,7 +108,11 @@ export const createImgElement = (input: ImageData): HTMLImageElement => {
   img.setAttribute('alt', '')
   img.setAttribute('height', input.imgH)
   img.setAttribute('width', input.imgW)
-  img.style.display = 'none'
+  img.style.zIndex = '0'
+  img.style.opacity = '1'
+  img.style.backgroundImage = `linear-gradient(15deg, ${input.pColor}, ${input.sColor})`
+  img.style.backgroundSize = `${input.imgW}px ${input.imgH}px`
+  img.dataset.status = 'null'
   return img
 }