add the function of clicking prev and next to control displaying image

assets/ts/overlay.ts

@@ -1,5 +1,22 @@
-import { delay, removeAllEventListeners, layersPosSet, center } from './utils'
-import { posArray, layers, handleOnMove } from './trackMouse'
+import {
+  delay,
+  removeAllEventListeners,
+  layersPosSet,
+  center,
+  createImgElement,
+  calcImageIndex,
+  FIFO
+} from './utils'
+import {
+  posArray,
+  layers,
+  handleOnMove,
+  globalIndex,
+  globalIndexDec,
+  globalIndexInc
+} from './trackMouse'
+import { imagesArray, imagesArrayLen } from './dataFetch'
+import { imgIndexSpanUpdate } from './indexDisp'
 
 // get components of overlay
 const overlay = document.getElementsByClassName('overlay').item(0) as HTMLDivElement
@@ -40,6 +57,8 @@ export function overlayDisable(): void {
   overlay.style.zIndex = '-1'
   setCursorText('')
   disableListener()
+  // Add back previous self increment of global index (by handleOnMove)
+  globalIndexInc()
 }
 
 // handle close click
@@ -56,6 +75,20 @@ async function handleCloseClick(): Promise<void> {
   window.addEventListener('mousemove', handleOnMove)
 }
 
+function handlePrevClick(): void {
+  globalIndexDec()
+  const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers)
+  imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
+}
+
+function handleNextClick(): void {
+  globalIndexInc()
+  const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers)
+  imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
+}
+
 // set event listener
 function setListener(): void {
   window.addEventListener('mousemove', overlayCursor, { passive: true })
@@ -80,6 +113,13 @@ function setListener(): void {
     },
     { passive: true }
   )
+  prevSection.addEventListener(
+    'click',
+    () => {
+      handlePrevClick()
+    },
+    { passive: true }
+  )
   nextSection.addEventListener(
     'mouseover',
     () => {
@@ -87,6 +127,13 @@ function setListener(): void {
     },
     { passive: true }
   )
+  nextSection.addEventListener(
+    'click',
+    () => {
+      handleNextClick()
+    },
+    { passive: true }
+  )
 }
 
 export function vwRefreshInit(): void {

assets/ts/trackMouse.ts

@@ -38,26 +38,6 @@ const activate = (index: number, x: number, y: number): void => {
   posCache(x, y, posArray)
   layersPosSet(posArray, layers)
   FIFO(createImgElement(imagesArray[index]), layers)
-  // top
-  layers[4].addEventListener(
-    'click',
-    () => {
-      // stop images animation
-      window.removeEventListener('mousemove', handleOnMove)
-      // set top image
-      center(layers[4])
-      for (let i = 4; i >= 0; i--) {
-        layers[i].dataset.status = `t${4 - i}`
-      }
-      // overlay init
-      overlayEnable()
-    },
-    {
-      passive: true,
-      once: true
-    }
-  )
-
   last = { x, y }
 }
 
@@ -86,4 +66,31 @@ export const handleOnMove = (e: MouseEvent): void => {
 // initialization
 export function trackMouseInit(): void {
   window.addEventListener('mousemove', handleOnMove)
+  layers[4].addEventListener(
+    'click',
+    () => {
+      // stop images animation
+      window.removeEventListener('mousemove', handleOnMove)
+      // set top image
+      center(layers[4])
+      for (let i = 4; i >= 0; i--) {
+        layers[i].dataset.status = `t${4 - i}`
+      }
+      // Offset previous self increment of global index (by handleOnMove)
+      globalIndexDec()
+      // overlay init
+      overlayEnable()
+    },
+    {
+      passive: true
+    }
+  )
+}
+
+export function globalIndexDec(): void {
+  globalIndex--
+}
+
+export function globalIndexInc(): void {
+  globalIndex++
 }