From 7262a43fae7fa2312d26a76fd6fba3ccb1bf72f0 Mon Sep 17 00:00:00 2001 From: Spedon Date: Fri, 24 Mar 2023 17:17:57 +0800 Subject: [PATCH] move pushIndex function to utils.ts --- assets/ts/desktop.ts | 57 ++++++++++++-------------------------------- assets/ts/overlay.ts | 23 ++++++++++++++---- assets/ts/utils.ts | 40 +++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 46 deletions(-) diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index 2bbbf90..e16a4b7 100644 --- a/assets/ts/desktop.ts +++ b/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' diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 7beaaa2..2fe22f2 100644 --- a/assets/ts/overlay.ts +++ b/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' diff --git a/assets/ts/utils.ts b/assets/ts/utils.ts index 7958f5b..a1d5a3b 100644 --- a/assets/ts/utils.ts +++ b/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, + 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 +}