refractor: change var name

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

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()
   }

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()

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
 }

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')
 }

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

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<void> {
   // 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<void> {
   // 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<void> {
 
 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 }
   )

layouts/index.html

@@ -33,7 +33,7 @@
           "pColor" (string $pColor)
           "sColor" (string $sColor)) }}
     {{ end }}
-    <script id="images_array" type="application/json">{{ $.Scratch.Get "img" | jsonify | safeJS }}</script>
+    <script id="images_info" type="application/json">{{ $.Scratch.Get "img" | jsonify | safeJS }}</script>
   {{ end }}
 </div>
 <footer>