From b1415b7f17b202a5ac85361ae5314a3e1261b5c0 Mon Sep 17 00:00:00 2001 From: Sped0n Date: Sun, 13 Aug 2023 22:33:47 +0800 Subject: [PATCH] refractor: change var name --- assets/ts/dataFetch.ts | 8 ++++---- assets/ts/desktop.ts | 8 ++++---- assets/ts/elemGen.ts | 10 +++++----- assets/ts/imageCache.ts | 8 ++++---- assets/ts/main.ts | 6 +++--- assets/ts/mobile.ts | 4 ++-- assets/ts/overlay.ts | 22 +++++++++++----------- layouts/index.html | 2 +- 8 files changed, 34 insertions(+), 34 deletions(-) diff --git a/assets/ts/dataFetch.ts b/assets/ts/dataFetch.ts index 07db65d..5a4e92c 100644 --- a/assets/ts/dataFetch.ts +++ b/assets/ts/dataFetch.ts @@ -1,9 +1,9 @@ import { type ImageData } from './utils' // fetch images info from JSON -const imageArrayElement = document.getElementById('images_array') as HTMLScriptElement -const rawImageArray = imageArrayElement.textContent as string -export const imagesArray: ImageData[] = JSON.parse(rawImageArray).sort( +const imageArrayElement = document.getElementById('images_info') as HTMLScriptElement +const rawImagesInfo = imageArrayElement.textContent as string +export const imagesInfo: ImageData[] = JSON.parse(rawImagesInfo).sort( (a: ImageData, b: ImageData) => { if (a.index < b.index) { return -1 @@ -11,4 +11,4 @@ export const imagesArray: ImageData[] = JSON.parse(rawImageArray).sort( return 1 } ) -export const imagesArrayLen: number = imagesArray.length +export const imagesLen: number = imagesInfo.length diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index dba830e..daea4a3 100644 --- a/assets/ts/desktop.ts +++ b/assets/ts/desktop.ts @@ -10,7 +10,7 @@ import { } from './utils' import { thresholdIndex, thresholdSensitivityArray } from './thresholdCtl' import { imgIndexSpanUpdate } from './indexDisp' -import { imagesArrayLen } from './dataFetch' +import { imagesLen } from './dataFetch' import { imagesDivNodes as images } from './elemGen' // global index for "activated" @@ -55,7 +55,7 @@ const activate = (index: number, mouseX: number, mouseY: number): void => { trailingImageIndexes, stackDepth, images, - imagesArrayLen + imagesLen ) // set img position images[index].style.transform = mouseToTransform(mouseX, mouseY, true, true) @@ -81,10 +81,10 @@ export const handleOnMove = (e: MouseEvent): void => { window.innerWidth / thresholdSensitivityArray[thresholdIndex] ) { // calculate the actual index - const imageIndex = calcImageIndex(globalIndex, imagesArrayLen) + const imageIndex = calcImageIndex(globalIndex, imagesLen) // show top image and change index activate(imageIndex, e.clientX, e.clientY) - imgIndexSpanUpdate(imageIndex + 1, imagesArrayLen) + imgIndexSpanUpdate(imageIndex + 1, imagesLen) // self increment globalIndexInc() } diff --git a/assets/ts/elemGen.ts b/assets/ts/elemGen.ts index 65963f9..6b54071 100644 --- a/assets/ts/elemGen.ts +++ b/assets/ts/elemGen.ts @@ -1,4 +1,4 @@ -import { imagesArray, imagesArrayLen } from './dataFetch' +import { imagesInfo, imagesLen } from './dataFetch' import { createImgElement } from './utils' // get components of overlay @@ -37,8 +37,8 @@ export const createDesktopElements = (): void => { mainDiv.appendChild(createCursorDiv()) const imagesDiv: HTMLDivElement = document.createElement('div') imagesDiv.className = 'imagesDesktop' - for (let i = 0; i < imagesArrayLen; i++) { - imagesDiv.appendChild(createImgElement(imagesArray[i])) + for (let i = 0; i < imagesLen; i++) { + imagesDiv.appendChild(createImgElement(imagesInfo[i])) } mainDiv.appendChild(imagesDiv) passDesktopElements() @@ -47,8 +47,8 @@ export const createDesktopElements = (): void => { export const createMobileElements = (): void => { const imagesDiv: HTMLDivElement = document.createElement('div') imagesDiv.className = 'imagesMobile' - for (let i = 0; i < imagesArrayLen; i++) { - imagesDiv.appendChild(createImgElement(imagesArray[i])) + for (let i = 0; i < imagesLen; i++) { + imagesDiv.appendChild(createImgElement(imagesInfo[i])) } mainDiv.appendChild(imagesDiv) passMobileElements() diff --git a/assets/ts/imageCache.ts b/assets/ts/imageCache.ts index feaa88d..46320c3 100644 --- a/assets/ts/imageCache.ts +++ b/assets/ts/imageCache.ts @@ -1,4 +1,4 @@ -import { imagesArray, imagesArrayLen } from './dataFetch' +import { imagesInfo, imagesLen } from './dataFetch' import { preloadImage, calcImageIndex } from './utils' let lastIndex: number = 0 @@ -6,13 +6,13 @@ let lastIndex: number = 0 export const preloader = (index: number): void => { if (lastIndex === index) { for (let i: number = -2; i <= 1; i++) - preloadImage(imagesArray[calcImageIndex(index + i, imagesArrayLen)].url) + preloadImage(imagesInfo[calcImageIndex(index + i, imagesLen)].url) } else if (lastIndex > index) { for (let i: number = 1; i <= 3; i++) - preloadImage(imagesArray[calcImageIndex(index - i, imagesArrayLen)].url) + preloadImage(imagesInfo[calcImageIndex(index - i, imagesLen)].url) } else { for (let i: number = 1; i <= 3; i++) - preloadImage(imagesArray[calcImageIndex(index + i, imagesArrayLen)].url) + preloadImage(imagesInfo[calcImageIndex(index + i, imagesLen)].url) } lastIndex = index } diff --git a/assets/ts/main.ts b/assets/ts/main.ts index e1e3b1b..19b6283 100644 --- a/assets/ts/main.ts +++ b/assets/ts/main.ts @@ -2,7 +2,7 @@ import { createDesktopElements, createMobileElements } from './elemGen' import { imgIndexSpanUpdate } from './indexDisp' import { trackMouseInit } from './desktop' import { thresholdCtlInit } from './thresholdCtl' -import { imagesArrayLen } from './dataFetch' +import { imagesLen } from './dataFetch' import { vwRefreshInit } from './overlay' import { preloader } from './imageCache' import { getDeviceType } from './utils' @@ -12,7 +12,7 @@ const desktopInit = (): void => { createDesktopElements() preloader(0) vwRefreshInit() - imgIndexSpanUpdate(0, imagesArrayLen) + imgIndexSpanUpdate(0, imagesLen) thresholdCtlInit() trackMouseInit() } @@ -20,7 +20,7 @@ const desktopInit = (): void => { const mobileInit = (): void => { createMobileElements() vwRefreshInit() - imgIndexSpanUpdate(0, imagesArrayLen) + imgIndexSpanUpdate(0, imagesLen) renderImages() console.log('mobile') } diff --git a/assets/ts/mobile.ts b/assets/ts/mobile.ts index 8f66752..b3e93ee 100644 --- a/assets/ts/mobile.ts +++ b/assets/ts/mobile.ts @@ -1,5 +1,5 @@ import { imagesDivNodes as images } from './elemGen' -import { imagesArrayLen } from './dataFetch' +import { imagesLen } from './dataFetch' export const renderImages = (): void => { images.forEach((img: HTMLImageElement, idx: number): void => { @@ -11,7 +11,7 @@ export const renderImages = (): void => { randomY = 68 } else if (idx === 1) { randomY = 44 - } else if (idx === imagesArrayLen - 1) { + } else if (idx === imagesLen - 1) { randomY = 100 } else { randomY = Math.floor(Math.random() * 51) + 2 diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 08e883f..544a013 100644 --- a/assets/ts/overlay.ts +++ b/assets/ts/overlay.ts @@ -11,7 +11,7 @@ import { stackDepth, addEnterOverlayEL } from './desktop' -import { imagesArrayLen } from './dataFetch' +import { imagesLen } from './dataFetch' import { imgIndexSpanUpdate } from './indexDisp' import { overlayCursor, cursorInnerContent, imagesDivNodes as images } from './elemGen' @@ -61,7 +61,7 @@ async function handleCloseClick(): Promise { // prepare animation for (let i: number = 0; i < indexesNum; i++) { // get element from index and store the index - const index: number = calcImageIndex(globalIndex - i, imagesArrayLen) + const index: number = calcImageIndex(globalIndex - i, imagesLen) const e: HTMLImageElement = images[index] trailingImageIndexes.unshift(index) // set z index for the image element @@ -88,10 +88,10 @@ async function handleCloseClick(): Promise { // halt the function while animation is running await delay(1200 + stackDepth * 100 + 100) // add back enter overlay event listener to top image - addEnterOverlayEL(images[calcImageIndex(globalIndex, imagesArrayLen)]) + addEnterOverlayEL(images[calcImageIndex(globalIndex, imagesLen)]) // clear unused status and transition delay for (let i: number = 0; i < indexesNum; i++) { - const index: number = calcImageIndex(globalIndex - i, imagesArrayLen) + const index: number = calcImageIndex(globalIndex - i, imagesLen) images[index].dataset.status = 'null' images[index].style.transitionDelay = '' } @@ -105,10 +105,10 @@ async function handleCloseClick(): Promise { const handleSideClick = (CLD: boolean): void => { // get last displayed image's index - const imgIndex: number = calcImageIndex(globalIndex, imagesArrayLen) + const imgIndex: number = calcImageIndex(globalIndex, imagesLen) // change global index and get current displayed image's index CLD ? globalIndexInc() : globalIndexDec() - const currImgIndex: number = calcImageIndex(globalIndex, imagesArrayLen) + const currImgIndex: number = calcImageIndex(globalIndex, imagesLen) // store current displayed image's index CLD ? pushIndex( @@ -116,7 +116,7 @@ const handleSideClick = (CLD: boolean): void => { trailingImageIndexes, stackDepth, images, - imagesArrayLen, + imagesLen, false, false ) @@ -125,7 +125,7 @@ const handleSideClick = (CLD: boolean): void => { trailingImageIndexes, stackDepth, images, - imagesArrayLen, + imagesLen, true, false ) @@ -138,7 +138,7 @@ const handleSideClick = (CLD: boolean): void => { // process complete, show the image images[currImgIndex].style.visibility = 'visible' // change index display - imgIndexSpanUpdate(currImgIndex + 1, imagesArrayLen) + imgIndexSpanUpdate(currImgIndex + 1, imagesLen) } // change text and position of overlay cursor @@ -195,9 +195,9 @@ export const vwRefreshInit = (): void => { } // recenter image (only in overlay) if ( - images[calcImageIndex(globalIndex, imagesArrayLen)].dataset.status === 'overlay' + images[calcImageIndex(globalIndex, imagesLen)].dataset.status === 'overlay' ) - center(images[calcImageIndex(globalIndex, imagesArrayLen)]) + center(images[calcImageIndex(globalIndex, imagesLen)]) }, { passive: true } ) diff --git a/layouts/index.html b/layouts/index.html index edb54b2..03e0fdc 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -33,7 +33,7 @@ "pColor" (string $pColor) "sColor" (string $sColor)) }} {{ end }} - + {{ end }}