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 {