move pushIndex function to utils.ts

assets/ts/desktop.ts

@@ -1,5 +1,12 @@
 import { overlayEnable } from './overlay'
-import { calcImageIndex, center, delay, mouseToTransform, type position } from './utils'
+import {
+  calcImageIndex,
+  center,
+  delay,
+  mouseToTransform,
+  pushIndex,
+  type position
+} from './utils'
 import { thresholdIndex, thresholdSensitivityArray } from './thresholdCtl'
 import { imgIndexSpanUpdate } from './indexDisp'
 import { imagesArrayLen } from './dataFetch'
@@ -19,51 +26,17 @@ let EnterOverlayClickAbCtl = new AbortController()
 
 export const stackDepth: number = 5
 
-export const pushIndex = (
-  index: number,
-  invert: boolean = false,
-  autoHide: boolean = true
-): number => {
-  let indexesNum: number = trailingImageIndexes.length
-  let overflow: number
-  if (!invert) {
-    // push the tail index out and hide the image
-    if (indexesNum === stackDepth) {
-      trailingImageIndexes.push(index)
-      overflow = trailingImageIndexes.shift() as number
-      if (autoHide) {
-        images[overflow].style.display = 'none'
-        images[overflow].dataset.status = 'trail'
-      }
-    } else {
-      trailingImageIndexes.push(index)
-      indexesNum += 1
-    }
-  } else {
-    if (indexesNum === stackDepth) {
-      trailingImageIndexes.unshift(
-        calcImageIndex(index - stackDepth + 1, imagesArrayLen)
-      )
-      overflow = trailingImageIndexes.pop() as number
-      if (autoHide) {
-        images[overflow].style.display = 'none'
-        images[overflow].dataset.status = 'trail'
-      }
-    } else {
-      trailingImageIndexes.unshift(
-        calcImageIndex(index - indexesNum + 1, imagesArrayLen)
-      )
-      indexesNum += 1
-    }
-  }
-  return indexesNum
-}
-
 // activate top image
 const activate = (index: number, mouseX: number, mouseY: number): void => {
   EnterOverlayClickAbCtl.abort()
   EnterOverlayClickAbCtl = new AbortController()
-  const indexesNum: number = pushIndex(index)
+  const indexesNum: number = pushIndex(
+    index,
+    trailingImageIndexes,
+    stackDepth,
+    images,
+    imagesArrayLen
+  )
   // set img position
   images[index].style.transform = mouseToTransform(mouseX, mouseY, true, true)
   images[index].dataset.status = 'null'

assets/ts/overlay.ts

@@ -1,4 +1,4 @@
-import { delay, center, calcImageIndex, mouseToTransform } from './utils'
+import { delay, center, calcImageIndex, mouseToTransform, pushIndex } from './utils'
 import {
   handleOnMove,
   globalIndex,
@@ -6,7 +6,6 @@ import {
   globalIndexInc,
   trailingImageIndexes,
   transformCache,
-  pushIndex,
   emptyTransformCache,
   emptyTrailingImageIndexes,
   stackDepth
@@ -78,7 +77,15 @@ const handlePrevClick = (): void => {
   const imgIndex: number = calcImageIndex(globalIndex, imagesArrayLen)
   globalIndexDec()
   const prevImgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  pushIndex(prevImgIndex, true, false)
+  pushIndex(
+    prevImgIndex,
+    trailingImageIndexes,
+    stackDepth,
+    images,
+    imagesArrayLen,
+    true,
+    false
+  )
   images[imgIndex].style.display = 'none'
   center(images[prevImgIndex])
   images[prevImgIndex].dataset.status = 'top'
@@ -90,7 +97,15 @@ const handleNextClick = (): void => {
   const imgIndex: number = calcImageIndex(globalIndex, imagesArrayLen)
   globalIndexInc()
   const nextImgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  pushIndex(nextImgIndex, false, false)
+  pushIndex(
+    nextImgIndex,
+    trailingImageIndexes,
+    stackDepth,
+    images,
+    imagesArrayLen,
+    false,
+    false
+  )
   images[imgIndex].style.display = 'none'
   center(images[nextImgIndex])
   images[nextImgIndex].dataset.status = 'top'

assets/ts/utils.ts

@@ -96,3 +96,43 @@ export const getDeviceType = (): deviceType => {
   } else result.desktop = true
   return result
 }
+
+export const pushIndex = (
+  index: number,
+  indexesArray: number[],
+  stackDepth: number,
+  imagesArray: NodeListOf<HTMLImageElement>,
+  imagesArrayLen: number,
+  invert: boolean = false,
+  autoHide: boolean = true
+): number => {
+  let indexesNum: number = indexesArray.length
+  let overflow: number
+  if (!invert) {
+    // push the tail index out and hide the image
+    if (indexesNum === stackDepth) {
+      indexesArray.push(index)
+      overflow = indexesArray.shift() as number
+      if (autoHide) {
+        imagesArray[overflow].style.display = 'none'
+        imagesArray[overflow].dataset.status = 'trail'
+      }
+    } else {
+      indexesArray.push(index)
+      indexesNum += 1
+    }
+  } else {
+    if (indexesNum === stackDepth) {
+      indexesArray.unshift(calcImageIndex(index - stackDepth + 1, imagesArrayLen))
+      overflow = indexesArray.pop() as number
+      if (autoHide) {
+        imagesArray[overflow].style.display = 'none'
+        imagesArray[overflow].dataset.status = 'trail'
+      }
+    } else {
+      indexesArray.unshift(calcImageIndex(index - indexesNum + 1, imagesArrayLen))
+      indexesNum += 1
+    }
+  }
+  return indexesNum
+}