fix(customCursor.ts): move import statement for active to the top for better organization

fix(customCursor.ts): add return type void to onMouse function for clarity
fix(customCursor.ts): add passive option to window event listener for mousemove to improve performance
fix(stageNav.ts): move import statement for setCustomCursor to the top for better organization
fix(stageNav.ts): add return type void to handleClick function for clarity
fix(stageNav.ts): add return type void to handleKey function for clarity
fix(stageNav.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance
fix(stageNav.ts): add passive option to window event listener for keydown to improve performance
fix(stageNav.ts): add return type void to nextImage function for clarity
fix(stageNav.ts): add return type void to prevImage function for clarity
fix(gallery.ts): move import statement for Swiper to the top for better organization
fix(gallery.ts): add return type void to slideUp function for clarity
fix(gallery.ts): add return type void to initGallery function for clarity
fix(gallery.ts): add passive option to window event listener for touchstart to improve performance
fix(gallery.ts): add return type void to changeSlide function for clarity
fix(gallery.ts): add return type void to scrollToActive function for clarity
fix(gallery.ts): add return type void to createGallery function for clarity
fix(gallery.ts): add passive option to close event listeners for click and keydown to improve performance
fix(gallery.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance
fix(gallery.ts): add passive option to window event listener for touchstart to improve performance
fix(nav.ts): add return type void to initNav function for clarity
fix(utils.ts): add return type number to getRandom function for clarity
fix(utils.ts): add return type void to onVisible function for clarity
fix(utils.ts): add return type void to addWatcher function in Watchable class for clarity

assets/ts/mobile/collection.ts

@@ -1,7 +1,8 @@
 import { container } from '../container'
-import { ImageJSON } from '../resources'
-import { getNextFive, setIndex } from '../state'
+import { type ImageJSON } from '../resources'
+import { setIndex } from '../state'
 import { Watchable, getRandom, onVisible } from '../utils'
+
 import { slideUp } from './gallery'
 
 /**
@@ -42,16 +43,27 @@ export function initCollection(ijs: ImageJSON[]): void {
   imgs = Array.from(collection.getElementsByTagName('img'))
   // add event listeners
   imgs.forEach((img, i) => {
-    img.addEventListener('click', () => handleClick(i))
-    img.addEventListener('keydown', () => handleClick(i))
+    img.addEventListener(
+      'click',
+      () => {
+        handleClick(i)
+      },
+      { passive: true }
+    )
+    img.addEventListener(
+      'keydown',
+      () => {
+        handleClick(i)
+      },
+      { passive: true }
+    )
     // preload
     onVisible(img, () => {
-      // minues one because we want to preload the current and the next 4 images
-      getNextFive(i - 1, imgs.length)
-        .map((i) => imgs[i])
-        .forEach((e) => {
-          e.src = e.dataset.src!
-        })
+      for (let _i = 0; _i < 5; _i++) {
+        const n = i + _i
+        if (n < 0 || n > imgs.length - 1) continue
+        imgs[n].src = imgs[n].dataset.src as string
+      }
     })
   })
 }
@@ -65,7 +77,7 @@ function createCollection(ijs: ImageJSON[]): void {
   const _collection: HTMLDivElement = document.createElement('div')
   _collection.className = 'collection'
   // append images to container
-  for (let [i, ij] of ijs.entries()) {
+  for (const [i, ij] of ijs.entries()) {
     // random x and y
     const x = i !== 0 ? getRandom(-25, 25) : 0
     const y = i !== 0 ? getRandom(-30, 30) : 0

assets/ts/mobile/gallery.ts

@@ -1,9 +1,11 @@
 import { Power3, gsap } from 'gsap'
-import Swiper from 'swiper'
+import { Swiper } from 'swiper'
+
 import { container } from '../container'
-import { ImageJSON } from '../resources'
+import { type ImageJSON } from '../resources'
 import { setIndex, state } from '../state'
 import { Watchable, expand } from '../utils'
+
 import { imgs, mounted } from './collection'
 import { scrollable } from './scroll'
 
@@ -46,7 +48,6 @@ export function slideUp(): void {
   setTimeout(() => {
     scrollable.set(false)
     isAnimating.set(false)
-    console.log(swiper.activeIndex)
   }, 1200)
 }
 
@@ -76,7 +77,7 @@ export function initGallery(ijs: ImageJSON[]): void {
   createGallery(ijs)
   // get elements
   indexDispNums = Array.from(
-    document.getElementsByClassName('nav').item(0)!.getElementsByClassName('num')
+    document.getElementsByClassName('nav').item(0)?.getElementsByClassName('num') ?? []
   ) as HTMLSpanElement[]
   swiperNode = document.getElementsByClassName('galleryInner').item(0) as HTMLDivElement
   gallery = document.getElementsByClassName('gallery').item(0) as HTMLDivElement
@@ -100,9 +101,10 @@ export function initGallery(ijs: ImageJSON[]): void {
       setIndex(realIndex)
     })
   })
-
   // mounted
   mounted.set(true)
+  // dynamic load
+  window.addEventListener('touchstart', () => {})
 }
 
 /**
@@ -111,7 +113,7 @@ export function initGallery(ijs: ImageJSON[]): void {
 
 function changeSlide(slide: number): void {
   loadImages()
-  swiper!.slideTo(slide, 0)
+  swiper.slideTo(slide, 0)
 }
 
 function scrollToActive(): void {
@@ -151,7 +153,7 @@ function createGallery(ijs: ImageJSON[]): void {
   const _swiperWrapper = document.createElement('div')
   _swiperWrapper.className = 'swiper-wrapper'
   // swiper slide
-  for (let ij of ijs) {
+  for (const ij of ijs) {
     const _swiperSlide = document.createElement('div')
     _swiperSlide.className = 'swiper-slide'
     // img
@@ -179,8 +181,12 @@ function createGallery(ijs: ImageJSON[]): void {
   // close
   const _close = document.createElement('div')
   _close.innerText = 'Close'
-  _close.addEventListener('click', () => slideDown())
-  _close.addEventListener('keydown', () => slideDown())
+  _close.addEventListener('click', () => {
+    slideDown()
+  })
+  _close.addEventListener('keydown', () => {
+    slideDown()
+  })
   // nav
   const _navDiv = document.createElement('div')
   _navDiv.className = 'nav'
@@ -210,14 +216,14 @@ function createGallery(ijs: ImageJSON[]): void {
  */
 
 function loadImages(): void {
-  const activeImages = new Array()
+  const activeImages = []
   // load current, next, prev image
   activeImages.push(galleryImages[swiper.activeIndex])
   activeImages.push(
     galleryImages[Math.min(swiper.activeIndex + 1, swiper.slides.length)]
   )
   activeImages.push(galleryImages[Math.max(swiper.activeIndex - 1, 0)])
-  for (let e of activeImages) {
-    e.src = e.dataset.src!
+  for (const e of activeImages) {
+    e.src = e.dataset.src as string
   }
 }

assets/ts/mobile/init.ts

@@ -0,0 +1,9 @@
+import { type ImageJSON } from '../resources'
+
+import { initCollection } from './collection'
+import { initGallery } from './gallery'
+
+export function initMobile(ijs: ImageJSON[]): void {
+  initCollection(ijs)
+  initGallery(ijs)
+}