ci: update bundled artifacts (#270)

Co-authored-by: Sped0n <Sped0n@users.noreply.github.com>

.github/workflows/build.yml

@@ -87,7 +87,7 @@ jobs:
         uses: peter-evans/create-pull-request@v5
         with:
           token: ${{ secrets.PAT }}
-          title: Update bundled artifacts
+          title: "ci: update bundled artifacts"
-          commit-message: Update bundled artifacts
+          commit-message: "ci: update bundled artifacts"
           branch: update-artifacts-${{ steps.version.outputs.builddate }}
           base: main

assets/scss/_partial/_article.scss

@@ -1,4 +1,4 @@
-.info {
+article {
   padding: var(--space-standard);
   max-width: 25em;
 
@@ -42,7 +42,7 @@
 }
 
 @media (max-width: $tablet), (hover: none) {
-  .info {
+  article {
     margin-top: var(--nav-height);
   }
 }

assets/scss/_partial/_container.scss

@@ -1,3 +1,6 @@
+$tablet: map-get($breakpoints, 'tablet') - 1;
+
+@media (max-width: $tablet), (hover: none) {
   .container {
     position: fixed;
     top: 0;
@@ -17,3 +20,4 @@
   .disableScroll {
     pointer-events: none;
   }
+}

assets/scss/_partial/_gallery.scss

@@ -16,11 +16,13 @@
   .galleryInner {
     flex: 1;
     height: 0;
+  }
 
   .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
+  }
 
   img {
     width: 100%;
@@ -39,8 +41,6 @@
     position: relative;
     display: inline-block;
   }
-    }
-  }
 
   .nav {
     height: var(--nav-height);

assets/scss/_variables.scss

@@ -1,7 +1,7 @@
 @import '_core/mixins';
 
 :root {
-  --window-height: 100svh;
+  --window-height: 100vh;
   --nav-height: 2rem;
   --space-standard: 0.625rem;
 

assets/scss/critical.scss

@@ -9,3 +9,4 @@
 
 @import '_partial/nav';
 @import '_partial/article';
+@import '_partial/container';

assets/scss/style.scss

@@ -6,6 +6,5 @@
 
 @import '_partial/collection';
 @import '_partial/gallery';
-@import '_partial/container';
 
 @import 'node_modules/swiper/swiper.scss';

assets/ts/container.ts

@@ -1,9 +1,24 @@
-import { scrollable } from './mobile/scroll'
+import { Watchable } from './globalUtils'
 
-export let container: HTMLDivElement
+export const scrollable = new Watchable<boolean>(true)
+
+export let container: Container
+
+/**
+ * interfaces
+ */
+
+export interface Container extends HTMLDivElement {
+  dataset: {
+    next: string
+    close: string
+    prev: string
+    loading: string
+  }
+}
 
 export function initContainer(): void {
-  container = document.getElementsByClassName('container').item(0) as HTMLDivElement
+  container = document.getElementsByClassName('container').item(0) as Container
   scrollable.addWatcher((o) => {
     if (o) {
       container.classList.remove('disableScroll')

assets/ts/desktop/customCursor.ts

@@ -1,6 +1,6 @@
 import { container } from '../container'
 
-import { active } from './stage'
+import { active } from './state'
 
 /**
  * variables

assets/ts/desktop/init.ts

@@ -4,6 +4,10 @@ import { initCustomCursor } from './customCursor'
 import { initStage } from './stage'
 import { initStageNav } from './stageNav'
 
+/**
+ * main functions
+ */
+
 export function initDesktop(ijs: ImageJSON[]): void {
   initCustomCursor()
   initStage(ijs)

assets/ts/desktop/stage.ts

@@ -1,31 +1,20 @@
 import { type Power3, type gsap } from 'gsap'
 
 import { container } from '../container'
+import { incIndex, isAnimating, navigateVector, state } from '../globalState'
+import { decrement, increment, loadGsap } from '../globalUtils'
 import { type ImageJSON } from '../resources'
-import { incIndex, state } from '../state'
-import { Watchable, decrement, increment, loadGsap } from '../utils'
 
-/**
+import { active, cordHist, isLoading, isOpen } from './state'
- * types
+// eslint-disable-next-line sort-imports
- */
+import { onMutation, type DesktopImage } from './utils'
-
-export interface HistoryItem {
-  i: number
-  x: number
-  y: number
-}
 
 /**
  * variables
  */
 
-let imgs: HTMLImageElement[] = []
+let imgs: DesktopImage[] = []
 let last = { x: 0, y: 0 }
-export const cordHist = new Watchable<HistoryItem[]>([])
-export const isOpen = new Watchable<boolean>(false)
-export const isAnimating = new Watchable<boolean>(false)
-export const active = new Watchable<boolean>(false)
-export const isLoading = new Watchable<boolean>(false)
 
 let _gsap: typeof gsap
 let _Power3: typeof Power3
@@ -36,45 +25,34 @@ let gsapLoaded = false
  * getter
  */
 
-function getElTrail(): HTMLImageElement[] {
+function getTrailElsIndex(): number[] {
-  return cordHist.get().map((item) => imgs[item.i])
+  return cordHist.get().map((item) => item.i)
 }
 
-function getElTrailCurrent(): HTMLImageElement[] {
+function getTrailCurrentElsIndex(): number[] {
-  return getElTrail().slice(-state.get().trailLength)
+  return getTrailElsIndex().slice(-state.get().trailLength)
 }
 
-function getElTrailInactive(): HTMLImageElement[] {
+function getTrailInactiveElsIndex(): number[] {
-  const elTrailCurrent = getElTrailCurrent()
+  const trailCurrentElsIndex = getTrailCurrentElsIndex()
-  return elTrailCurrent.slice(0, elTrailCurrent.length - 1)
+  return trailCurrentElsIndex.slice(0, trailCurrentElsIndex.length - 1)
 }
 
-function getElCurrent(): HTMLImageElement {
+function getCurrentElIndex(): number {
-  const elTrail = getElTrail()
+  const trailElsIndex = getTrailElsIndex()
-  return elTrail[elTrail.length - 1]
+  return trailElsIndex[trailElsIndex.length - 1]
 }
 
-function getElNextSeven(): HTMLImageElement[] {
+function getPrevElIndex(): number {
   const c = cordHist.get()
   const s = state.get()
-  const c0 = c.length > 0 ? c[c.length - 1].i : s.index
+  return decrement(c[c.length - 1].i, s.length)
-  const els = []
-  for (let i = 0; i < 7; i++) {
-    els.push(imgs[increment(c0 + i, s.length)])
-  }
-  return els
 }
 
-function getElPrev(): HTMLImageElement {
+function getNextElIndex(): number {
   const c = cordHist.get()
   const s = state.get()
-  return imgs[decrement(c[c.length - 1].i, s.length)]
+  return increment(c[c.length - 1].i, s.length)
-}
-
-function getElNext(): HTMLImageElement {
-  const c = cordHist.get()
-  const s = state.get()
-  return imgs[increment(c[c.length - 1].i, s.length)]
 }
 
 /**
@@ -83,7 +61,11 @@ function getElNext(): HTMLImageElement {
 
 // on mouse
 function onMouse(e: MouseEvent): void {
-  if (isOpen.get() || isAnimating.get() || !gsapLoaded) return
+  if (isOpen.get() || isAnimating.get()) return
+  if (!gsapLoaded) {
+    loadLib()
+    return
+  }
   const cord = { x: e.clientX, y: e.clientY }
   const travelDist = Math.hypot(cord.x - last.x, cord.y - last.y)
 
@@ -96,15 +78,14 @@ function onMouse(e: MouseEvent): void {
   }
 }
 
-// set image position with gsap
+// set image position with gsap (in both stage and navigation)
 function setPositions(): void {
-  const elTrail = getElTrail()
+  const trailElsIndex = getTrailElsIndex()
-  if (elTrail.length === 0 || !gsapLoaded) return
+  if (trailElsIndex.length === 0 || !gsapLoaded) return
 
-  // preload
+  const elsTrail = getImagesWithIndexArray(trailElsIndex)
-  lores(getElNextSeven())
 
-  _gsap.set(elTrail, {
+  _gsap.set(elsTrail, {
     x: (i: number) => cordHist.get()[i].x - window.innerWidth / 2,
     y: (i: number) => cordHist.get()[i].y - window.innerHeight / 2,
     opacity: (i: number) =>
@@ -114,33 +95,47 @@ function setPositions(): void {
   })
 
   if (isOpen.get()) {
-    lores(getElTrail())
+    const elc = getImagesWithIndexArray([getCurrentElIndex()])[0]
-    const elc = getElCurrent()
+    elc.classList.add('hide') // hide image to prevent flash
-    elc.src = '' // reset src to ensure we only display hires images
+    const indexArrayToHires: number[] = []
-    elc.classList.add('hide')
+    switch (navigateVector.get()) {
-    hires([elc, getElPrev(), getElNext()])
+      case 'prev':
+        indexArrayToHires.push(getPrevElIndex())
+        break
+      case 'next':
+        indexArrayToHires.push(getNextElIndex())
+        break
+      default:
+        break
+    }
+    hires(getImagesWithIndexArray(indexArrayToHires)) // preload
+    setLoaderForImage(elc)
     _gsap.set(imgs, { opacity: 0 })
     _gsap.set(elc, { opacity: 1, x: 0, y: 0, scale: 1 })
-    loader(elc)
+  } else {
+    lores(elsTrail)
   }
 }
 
 // open image into navigation
 function expandImage(): void {
-  if (isAnimating.get() || !gsapLoaded) return
+  if (isAnimating.get()) return
 
   isOpen.set(true)
   isAnimating.set(true)
 
-  const elc = getElCurrent()
+  const elcIndex = getCurrentElIndex()
-  // don't clear src here because we want a better transition
+  const elc = getImagesWithIndexArray([elcIndex])[0]
+  // don't hide here because we want a better transition
+  // elc.classList.add('hide')
 
-  hires([elc, getElPrev(), getElNext()])
+  hires(getImagesWithIndexArray([elcIndex, getPrevElIndex(), getNextElIndex()]))
-  loader(elc)
+  setLoaderForImage(elc)
 
   const tl = _gsap.timeline()
+  const trailInactiveEls = getImagesWithIndexArray(getTrailInactiveElsIndex())
   // move down and hide trail inactive
-  tl.to(getElTrailInactive(), {
+  tl.to(trailInactiveEls, {
     y: '+=20',
     ease: _Power3.easeIn,
     stagger: 0.075,
@@ -149,7 +144,7 @@ function expandImage(): void {
     opacity: 0
   })
   // current move to center
-  tl.to(getElCurrent(), {
+  tl.to(elc, {
     x: 0,
     y: 0,
     ease: _Power3.easeInOut,
@@ -157,7 +152,7 @@ function expandImage(): void {
     delay: 0.3
   })
   // current expand
-  tl.to(getElCurrent(), {
+  tl.to(elc, {
     delay: 0.1,
     scale: 1,
     ease: _Power3.easeInOut
@@ -172,23 +167,27 @@ function expandImage(): void {
 
 // close navigation and back to stage
 export function minimizeImage(): void {
-  if (isAnimating.get() || !gsapLoaded) return
+  if (isAnimating.get()) return
 
   isOpen.set(false)
   isAnimating.set(true)
+  navigateVector.set('none') // cleanup
 
-  lores([getElCurrent()])
+  lores(
-  lores(getElTrailInactive())
+    getImagesWithIndexArray([...getTrailInactiveElsIndex(), ...[getCurrentElIndex()]])
+  )
 
   const tl = _gsap.timeline()
+  const elc = getImagesWithIndexArray([getCurrentElIndex()])[0]
+  const elsTrailInactive = getImagesWithIndexArray(getTrailInactiveElsIndex())
   // shrink current
-  tl.to(getElCurrent(), {
+  tl.to(elc, {
     scale: 0.6,
     duration: 0.6,
     ease: _Power3.easeInOut
   })
   // move current to original position
-  tl.to(getElCurrent(), {
+  tl.to(elc, {
     delay: 0.3,
     duration: 0.7,
     ease: _Power3.easeInOut,
@@ -196,7 +195,7 @@ export function minimizeImage(): void {
     y: cordHist.get()[cordHist.get().length - 1].y - window.innerHeight / 2
   })
   // show trail inactive
-  tl.to(getElTrailInactive(), {
+  tl.to(elsTrailInactive, {
     y: '-=20',
     ease: _Power3.easeOut,
     stagger: -0.1,
@@ -221,14 +220,47 @@ export function initStage(ijs: ImageJSON[]): void {
   // get stage
   const stage = document.getElementsByClassName('stage').item(0) as HTMLDivElement
   // get image elements
-  imgs = Array.from(stage.getElementsByTagName('img'))
+  imgs = Array.from(stage.getElementsByTagName('img')) as DesktopImage[]
+  imgs.forEach((img, i) => {
+    // preload first 5 images on page load
+    if (i < 5) {
+      img.src = img.dataset.loUrl
+    }
+    // lores preloader for rest of the images
+    onMutation(img, (mutations, observer) => {
+      mutations.every((mutation) => {
+        // if open or animating, skip
+        if (isOpen.get() || isAnimating.get()) return true
+        // if mutation is not about style attribute, skip
+        if (mutation.attributeName !== 'style') return true
+        const opacity = parseFloat(img.style.opacity)
+        // if opacity is not 1, skip
+        if (opacity !== 1) return true
+        // preload the i + 5th image
+        if (i + 5 < imgs.length) {
+          imgs[i + 5].src = imgs[i + 5].dataset.loUrl
+        }
+        // disconnect observer and return false to break the loop
+        observer.disconnect()
+        return false
+      })
+    })
+  })
   // event listeners
-  stage.addEventListener('click', () => {
+  stage.addEventListener(
+    'click',
+    () => {
       expandImage()
-  })
+    },
-  stage.addEventListener('keydown', () => {
+    { passive: true }
+  )
+  stage.addEventListener(
+    'keydown',
+    () => {
       expandImage()
-  })
+    },
+    { passive: true }
+  )
   window.addEventListener('mousemove', onMouse, { passive: true })
   // watchers
   isOpen.addWatcher((o) => {
@@ -240,21 +272,11 @@ export function initStage(ijs: ImageJSON[]): void {
   cordHist.addWatcher((_) => {
     setPositions()
   })
-  // preload
-  lores(getElNextSeven())
   // dynamic import
   window.addEventListener(
     'mousemove',
     () => {
-      loadGsap()
+      loadLib()
-        .then((g) => {
-          _gsap = g[0]
-          _Power3 = g[1]
-          gsapLoaded = true
-        })
-        .catch((e) => {
-          console.log(e)
-        })
     },
     { once: true, passive: true }
   )
@@ -270,7 +292,7 @@ function createStage(ijs: ImageJSON[]): void {
   stage.className = 'stage'
   // append images to container
   for (const ij of ijs) {
-    const e = document.createElement('img')
+    const e = document.createElement('img') as DesktopImage
     e.height = ij.loImgH
     e.width = ij.loImgW
     // set data attributes
@@ -281,28 +303,35 @@ function createStage(ijs: ImageJSON[]): void {
     e.dataset.loImgH = ij.loImgH.toString()
     e.dataset.loImgW = ij.loImgW.toString()
     e.alt = ij.alt
+    // append
     stage.append(e)
   }
   container.append(stage)
 }
 
-function hires(imgs: HTMLImageElement[]): void {
+function getImagesWithIndexArray(indexArray: number[]): DesktopImage[] {
+  return indexArray.map((i) => imgs[i])
+}
+
+function hires(imgs: DesktopImage[]): void {
   imgs.forEach((img) => {
-    img.src = img.dataset.hiUrl as string
+    if (img.src === img.dataset.hiUrl) return
-    img.height = parseInt(img.dataset.hiImgH as string)
+    img.src = img.dataset.hiUrl
-    img.width = parseInt(img.dataset.hiImgW as string)
+    img.height = parseInt(img.dataset.hiImgH)
+    img.width = parseInt(img.dataset.hiImgW)
   })
 }
 
-function lores(imgs: HTMLImageElement[]): void {
+function lores(imgs: DesktopImage[]): void {
   imgs.forEach((img) => {
-    img.src = img.dataset.loUrl as string
+    if (img.src === img.dataset.loUrl) return
-    img.height = parseInt(img.dataset.loImgH as string)
+    img.src = img.dataset.loUrl
-    img.width = parseInt(img.dataset.loImgW as string)
+    img.height = parseInt(img.dataset.loImgH)
+    img.width = parseInt(img.dataset.loImgW)
   })
 }
 
-function loader(e: HTMLImageElement): void {
+function setLoaderForImage(e: HTMLImageElement): void {
   if (!e.complete) {
     isLoading.set(true)
     e.addEventListener(
@@ -325,3 +354,15 @@ function loader(e: HTMLImageElement): void {
     isLoading.set(false)
   }
 }
+
+function loadLib(): void {
+  loadGsap()
+    .then((g) => {
+      _gsap = g[0]
+      _Power3 = g[1]
+      gsapLoaded = true
+    })
+    .catch((e) => {
+      console.log(e)
+    })
+}

assets/ts/desktop/stageNav.ts

@@ -1,16 +1,10 @@
 import { container } from '../container'
-import { decIndex, incIndex, state } from '../state'
+import { decIndex, incIndex, isAnimating, navigateVector, state } from '../globalState'
-import { decrement, increment } from '../utils'
+import { decrement, increment } from '../globalUtils'
 
 import { setCustomCursor } from './customCursor'
-import {
+import { minimizeImage } from './stage'
-  active,
+import { active, cordHist, isLoading, isOpen } from './state'
-  cordHist,
-  isAnimating,
-  isLoading,
-  isOpen,
-  minimizeImage
-} from './stage'
 
 /**
  * types
@@ -22,13 +16,12 @@ type NavItem = (typeof navItems)[number]
  * variables
  */
 
-const mainDiv = document.getElementById('main') as HTMLDivElement
 const navItems = [
-  mainDiv.getAttribute('prevText') as string,
+  container.dataset.prev,
-  mainDiv.getAttribute('closeText') as string,
+  container.dataset.close,
-  mainDiv.getAttribute('nextText') as string
+  container.dataset.next
 ] as const
-const loadingText = (mainDiv.getAttribute('loadingText') as string) + '...'
+const loadingText = container.dataset.loading + '...'
 let loadedText = ''
 
 /**
@@ -158,6 +151,7 @@ export function initStageNav(): void {
 
 function nextImage(): void {
   if (isAnimating.get()) return
+  navigateVector.set('next')
   cordHist.set(
     cordHist.get().map((item) => {
       return { ...item, i: increment(item.i, state.get().length) }
@@ -169,6 +163,7 @@ function nextImage(): void {
 
 function prevImage(): void {
   if (isAnimating.get()) return
+  navigateVector.set('prev')
   cordHist.set(
     cordHist.get().map((item) => {
       return { ...item, i: decrement(item.i, state.get().length) }

assets/ts/desktop/state.ts

@@ -0,0 +1,20 @@
+import { Watchable } from '../globalUtils'
+
+/**
+ * types
+ */
+
+export interface HistoryItem {
+  i: number
+  x: number
+  y: number
+}
+
+/**
+ * variables
+ */
+
+export const cordHist = new Watchable<HistoryItem[]>([])
+export const isOpen = new Watchable<boolean>(false)
+export const active = new Watchable<boolean>(false)
+export const isLoading = new Watchable<boolean>(false)

assets/ts/desktop/utils.ts

@@ -0,0 +1,28 @@
+/**
+ * interfaces
+ */
+
+export interface DesktopImage extends HTMLImageElement {
+  dataset: {
+    hiUrl: string
+    hiImgH: string
+    hiImgW: string
+    loUrl: string
+    loImgH: string
+    loImgW: string
+  }
+}
+
+/**
+ * utils
+ */
+
+export function onMutation<T extends HTMLElement>(
+  element: T,
+  callback: (arg0: MutationRecord[], arg1: MutationObserver) => void,
+  observeOptions: MutationObserverInit = { attributes: true }
+): void {
+  new MutationObserver((mutations, observer) => {
+    callback(mutations, observer)
+  }).observe(element, observeOptions)
+}

assets/ts/globalState.ts

@@ -1,10 +1,16 @@
-import { Watchable, decrement, increment } from './utils'
+import {
+  Watchable,
+  decrement,
+  getThresholdSessionIndex,
+  increment
+} from './globalUtils'
 
 /**
  * types
  */
 
 export type State = typeof defaultState
+export type NavVec = 'next' | 'none' | 'prev'
 
 /**
  * variables
@@ -26,6 +32,8 @@ const defaultState = {
 }
 
 export const state = new Watchable<State>(defaultState)
+export const isAnimating = new Watchable<boolean>(false)
+export const navigateVector = new Watchable<NavVec>('none')
 
 /**
  * main functions
@@ -81,9 +89,3 @@ function updateThreshold(state: State, inc: number): State {
   const newItems = thresholds[i]
   return { ...state, ...newItems }
 }
-
-function getThresholdSessionIndex(): number {
-  const s = sessionStorage.getItem('thresholdsIndex')
-  if (s === null) return 2
-  return parseInt(s)
-}

assets/ts/globalUtils.ts

@@ -1,8 +1,7 @@
 import { type Power3, type gsap } from 'gsap'
-import { type Swiper } from 'swiper'
 
 /**
- * custom helpers
+ * utils
  */
 
 export function increment(num: number, length: number): number {
@@ -17,44 +16,24 @@ export function expand(num: number): string {
   return ('0000' + num.toString()).slice(-4)
 }
 
-export function isMobile(): boolean {
-  return window.matchMedia('(hover: none)').matches
-}
-
-export function getRandom(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-export function onVisible<T extends Element>(
-  element: T,
-  callback: (arg0: T) => void
-): void {
-  new IntersectionObserver((entries, observer) => {
-    entries.forEach((entry) => {
-      if (entry.intersectionRatio > 0) {
-        callback(element)
-        observer.disconnect()
-      }
-    })
-  }).observe(element)
-}
-
-export function capitalizeFirstLetter(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
 export async function loadGsap(): Promise<[typeof gsap, typeof Power3]> {
   const g = await import('gsap')
   return [g.gsap, g.Power3]
 }
 
-export async function loadSwiper(): Promise<typeof Swiper> {
+export function getThresholdSessionIndex(): number {
-  const s = await import('swiper')
+  const s = sessionStorage.getItem('thresholdsIndex')
-  return s.Swiper
+  if (s === null) return 2
+  return parseInt(s)
+}
+
+export function removeDuplicates<T>(arr: T[]): T[] {
+  if (arr.length < 2) return arr // optimization
+  return [...new Set(arr)]
 }
 
 /**
- * custom types
+ * custom "reactive" object
  */
 
 export class Watchable<T> {

assets/ts/main.ts

@@ -1,19 +1,33 @@
 import { initContainer } from './container'
+import { initState } from './globalState'
 import { initNav } from './nav'
 import { initResources } from './resources'
-import { initState } from './state'
-import { isMobile } from './utils'
 
+// this is the main entry point for the app
+document.addEventListener('DOMContentLoaded', () => {
+  main().catch((e) => {
+    console.log(e)
+  })
+})
+
+/**
+ * main functions
+ */
+
+async function main(): Promise<void> {
   initContainer()
   const ijs = await initResources()
   initState(ijs.length)
   initNav()
 
+  if (ijs.length === 0) {
+    return
+  }
+
   // NOTE: it seems firefox and chromnium don't like top layer await
   //       so we are using import then instead
-if (ijs.length > 0) {
   if (!isMobile()) {
-    import('./desktop/init')
+    await import('./desktop/init')
       .then((d) => {
         d.initDesktop(ijs)
       })
@@ -21,7 +35,7 @@ if (ijs.length > 0) {
         console.log(e)
       })
   } else {
-    import('./mobile/init')
+    await import('./mobile/init')
       .then((m) => {
         m.initMobile(ijs)
       })
@@ -30,3 +44,11 @@ if (ijs.length > 0) {
       })
   }
 }
+
+/**
+ * hepler
+ */
+
+function isMobile(): boolean {
+  return window.matchMedia('(hover: none)').matches
+}

assets/ts/mobile/collection.ts

@@ -1,16 +1,17 @@
 import { container } from '../container'
+import { setIndex } from '../globalState'
 import { type ImageJSON } from '../resources'
-import { setIndex } from '../state'
-import { getRandom, onVisible } from '../utils'
 
 import { slideUp } from './gallery'
-import { mounted } from './mounted'
+import { mounted } from './state'
+// eslint-disable-next-line sort-imports
+import { getRandom, onIntersection, type MobileImage } from './utils'
 
 /**
  * variables
  */
 
-export let imgs: HTMLImageElement[] = []
+export let imgs: MobileImage[] = []
 
 /**
  * main functions
@@ -40,9 +41,14 @@ export function initCollection(ijs: ImageJSON[]): void {
     }
   })
   // get image elements
-  imgs = Array.from(collection.getElementsByTagName('img'))
+  imgs = Array.from(collection.getElementsByTagName('img')) as MobileImage[]
   // add event listeners
   imgs.forEach((img, i) => {
+    // preload first 5 images on page load
+    if (i < 5) {
+      img.src = img.dataset.src
+    }
+    // event listeners
     img.addEventListener(
       'click',
       () => {
@@ -58,12 +64,18 @@ export function initCollection(ijs: ImageJSON[]): void {
       { passive: true }
     )
     // preload
-    onVisible(img, () => {
+    onIntersection(img, (entries, observer) => {
-      for (let _i = 0; _i < 5; _i++) {
+      entries.every((entry) => {
-        const n = i + _i
+        // no intersection, skip
-        if (n < 0 || n > imgs.length - 1) continue
+        if (entry.intersectionRatio <= 0) return true
-        imgs[n].src = imgs[n].dataset.src as string
+        // preload the i + 5th image
+        if (i + 5 < imgs.length) {
+          imgs[i + 5].src = imgs[i + 5].dataset.src
         }
+        // disconnect observer and return false to break the loop
+        observer.disconnect()
+        return false
+      })
     })
   })
 }
@@ -82,7 +94,7 @@ function createCollection(ijs: ImageJSON[]): void {
     const x = i !== 0 ? getRandom(-25, 25) : 0
     const y = i !== 0 ? getRandom(-30, 30) : 0
     // element
-    const e = document.createElement('img')
+    const e = document.createElement('img') as MobileImage
     e.dataset.src = ij.loUrl
     e.height = ij.loImgH
     e.width = ij.loImgW

assets/ts/mobile/gallery.ts

@@ -1,19 +1,14 @@
 import { type Power3, type gsap } from 'gsap'
 import { type Swiper } from 'swiper'
 
-import { container } from '../container'
+import { container, scrollable } from '../container'
+import { isAnimating, navigateVector, setIndex, state } from '../globalState'
+import { expand, loadGsap, removeDuplicates } from '../globalUtils'
 import { type ImageJSON } from '../resources'
-import { setIndex, state } from '../state'
-import {
-  Watchable,
-  capitalizeFirstLetter,
-  expand,
-  loadGsap,
-  loadSwiper
-} from '../utils'
 
-import { mounted } from './mounted'
+import { mounted } from './state'
-import { scrollable } from './scroll'
+// eslint-disable-next-line sort-imports
+import { capitalizeFirstLetter, loadSwiper, type MobileImage } from './utils'
 
 /**
  * variables
@@ -23,11 +18,10 @@ let swiperNode: HTMLDivElement
 let gallery: HTMLDivElement
 let curtain: HTMLDivElement
 let swiper: Swiper
-const isAnimating = new Watchable<boolean>(false)
 let lastIndex = -1
 let indexDispNums: HTMLSpanElement[] = []
-let galleryImages: HTMLImageElement[] = []
+let galleryImages: MobileImage[] = []
-let collectionImages: HTMLImageElement[] = []
+let collectionImages: MobileImage[] = []
 
 let _Swiper: typeof Swiper
 let _gsap: typeof gsap
@@ -43,9 +37,6 @@ export function slideUp(): void {
   if (isAnimating.get() || !libLoaded) return
   isAnimating.set(true)
 
-  // load active image
-  loadImages()
-
   _gsap.to(curtain, {
     opacity: 1,
     duration: 1
@@ -59,13 +50,15 @@ export function slideUp(): void {
   })
 
   setTimeout(() => {
+    // cleanup
     scrollable.set(false)
     isAnimating.set(false)
-  }, 1200)
+  }, 1400)
 }
 
 function slideDown(): void {
-  scrollable.set(true)
+  if (isAnimating.get()) return
+  isAnimating.set(true)
   scrollToActive()
 
   _gsap.to(gallery, {
@@ -79,6 +72,13 @@ function slideDown(): void {
     duration: 1.2,
     delay: 0.4
   })
+
+  setTimeout(() => {
+    // cleanup
+    scrollable.set(true)
+    isAnimating.set(false)
+    lastIndex = -1
+  }, 1600)
 }
 
 /**
@@ -95,21 +95,27 @@ export function initGallery(ijs: ImageJSON[]): void {
   swiperNode = document.getElementsByClassName('galleryInner').item(0) as HTMLDivElement
   gallery = document.getElementsByClassName('gallery').item(0) as HTMLDivElement
   curtain = document.getElementsByClassName('curtain').item(0) as HTMLDivElement
-  galleryImages = Array.from(gallery.getElementsByTagName('img'))
+  galleryImages = Array.from(gallery.getElementsByTagName('img')) as MobileImage[]
   collectionImages = Array.from(
     document
       .getElementsByClassName('collection')
       .item(0)
       ?.getElementsByTagName('img') ?? []
-  )
+  ) as MobileImage[]
   // state watcher
-  state.addWatcher(() => {
+  state.addWatcher((o) => {
-    const s = state.get()
+    if (o.index === lastIndex)
-    // change slide only when index is changed
+      return // change slide only when index is changed
-    if (s.index === lastIndex) return
+    else if (lastIndex === -1)
-    changeSlide(s.index)
+      navigateVector.set('none') // lastIndex before set
-    updateIndexText()
+    else if (o.index < lastIndex)
-    lastIndex = s.index
+      navigateVector.set('prev') // set navigate vector for galleryLoadImages
+    else if (o.index > lastIndex)
+      navigateVector.set('next') // set navigate vector for galleryLoadImages
+    else navigateVector.set('none') // default
+    changeSlide(o.index) // change slide to new index
+    updateIndexText() // update index text
+    lastIndex = o.index // update last index
   })
   // mounted watcher
   mounted.addWatcher((o) => {
@@ -152,7 +158,7 @@ export function initGallery(ijs: ImageJSON[]): void {
  */
 
 function changeSlide(slide: number): void {
-  loadImages()
+  galleryLoadImages()
   swiper.slideTo(slide, 0)
 }
 
@@ -175,6 +181,29 @@ function updateIndexText(): void {
   })
 }
 
+function galleryLoadImages(): void {
+  let activeImagesIndex: number[] = []
+  const currentIndex = state.get().index
+  const nextIndex = Math.min(currentIndex + 1, state.get().length - 1)
+  const prevIndex = Math.max(currentIndex - 1, 0)
+  switch (navigateVector.get()) {
+    case 'next':
+      activeImagesIndex = [nextIndex]
+      break
+    case 'prev':
+      activeImagesIndex = [prevIndex]
+      break
+    case 'none':
+      activeImagesIndex = [currentIndex, nextIndex, prevIndex]
+      break
+  }
+  removeDuplicates(activeImagesIndex).forEach((i) => {
+    const e = galleryImages[i]
+    if (e.src === e.dataset.src) return // already loaded
+    e.src = e.dataset.src
+  })
+}
+
 function createGallery(ijs: ImageJSON[]): void {
   /**
    * gallery
@@ -192,17 +221,18 @@ function createGallery(ijs: ImageJSON[]): void {
   // swiper wrapper
   const _swiperWrapper = document.createElement('div')
   _swiperWrapper.className = 'swiper-wrapper'
-  // swiper slide
+  // loading text
+  const loadingText = container.dataset.loading + '...'
   for (const ij of ijs) {
+    // swiper slide
     const _swiperSlide = document.createElement('div')
     _swiperSlide.className = 'swiper-slide'
     // loading indicator
     const l = document.createElement('div')
     l.className = 'loadingText'
-    l.innerText =
+    l.innerText = loadingText
-      (document.getElementById('main')?.getAttribute('loadingText') as string) + '...'
     // img
-    const e = document.createElement('img')
+    const e = document.createElement('img') as MobileImage
     e.dataset.src = ij.hiUrl
     e.height = ij.hiImgH
     e.width = ij.hiImgW
@@ -240,10 +270,7 @@ function createGallery(ijs: ImageJSON[]): void {
   )
   // close
   const _close = document.createElement('div')
-  const str: string = document
+  _close.innerText = capitalizeFirstLetter(container.dataset.close)
-    .getElementById('main')
-    ?.getAttribute('closeText') as string
-  _close.innerText = capitalizeFirstLetter(str)
   _close.addEventListener(
     'click',
     () => {
@@ -281,16 +308,3 @@ function createGallery(ijs: ImageJSON[]): void {
    */
   container.append(_gallery, _curtain)
 }
-
-function loadImages(): void {
-  const activeImages: HTMLImageElement[] = []
-  // 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 (const e of activeImages) {
-    e.src = e.dataset.src as string
-  }
-}

assets/ts/mobile/scroll.ts

@@ -1,3 +0,0 @@
-import { Watchable } from '../utils'
-
-export const scrollable = new Watchable<boolean>(true)

assets/ts/mobile/state.ts

@@ -1,3 +1,3 @@
-import { Watchable } from '../utils'
+import { Watchable } from '../globalUtils'
 
 export const mounted = new Watchable<boolean>(false)

assets/ts/mobile/utils.ts

@@ -0,0 +1,37 @@
+import { type Swiper } from 'swiper'
+
+/**
+ * interfaces
+ */
+
+export interface MobileImage extends HTMLImageElement {
+  dataset: {
+    src: string
+  }
+}
+
+/**
+ * utils
+ */
+
+export function getRandom(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export function onIntersection<T extends HTMLElement>(
+  element: T,
+  callback: (arg0: IntersectionObserverEntry[], arg1: IntersectionObserver) => void
+): void {
+  new IntersectionObserver((entries, observer) => {
+    callback(entries, observer)
+  }).observe(element)
+}
+
+export function capitalizeFirstLetter(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export async function loadSwiper(): Promise<typeof Swiper> {
+  const s = await import('swiper')
+  return s.Swiper
+}

assets/ts/nav.ts

@@ -1,5 +1,5 @@
-import { decThreshold, incThreshold, state } from './state'
+import { decThreshold, incThreshold, state } from './globalState'
-import { expand } from './utils'
+import { expand } from './globalUtils'
 
 /**
  * variables

assets/ts/resources.ts

@@ -11,6 +11,9 @@ export interface ImageJSON {
 }
 
 export async function initResources(): Promise<ImageJSON[]> {
+  if (document.title.split(' | ')[0] === '404') {
+    return [] // no images on 404 page
+  }
   try {
     const response = await fetch(`${window.location.href}index.json`, {
       headers: {

doc/getStarted.md

@@ -163,12 +163,12 @@ replacements = "github.com/Sped0n/bridget -> ../.."
 path = "github.com/Sped0n/bridget"
 ```
 
-- If you have <u>installation with Git</u>
+- If you have _installation with Git_
 
-  - `replacement`: replace the <u>path after the arrow</u>(`../..`) with the location of your local theme file (⚠️⚠️⚠️**relative path only**, example: `themes/bridget`)
+  - `replacement`: replace the _path after the arrow_(`../..`) with the location of your local theme file (⚠️⚠️⚠️**relative path only**, example: `themes/bridget`)
   - `path`: no change
 
-- If you have <u>installation with Module</u>, **remove the `replacements` configuration**.
+- If you have _installation with Module_, **remove the `replacements` configuration**.
 
 ### `markup.toml`
 
@@ -199,17 +199,17 @@ https://gohugo.io/templates/sitemap-template/#configuration
 > If you want to modify js/ts file, please use option 2.
 
 1.  Use hugo create a site and move the bridget theme into the theme directory.
-2.  Run `npm install` in the <u>bridget theme root dir</u>, not <u>your hugo site root dir</u>.
+2.  Run `npm install` in the _bridget theme root dir_, not _your hugo site root dir_.
-3.  After the command is done, copy the `node_modules` dir from <u>bridget theme root dir</u> to <u>your hugo site root dir</u>.
+3.  After the command is done, copy the `node_modules` dir from _bridget theme root dir_ to _your hugo site root dir_.
-4.  In <u>your hugo site root dir</u>, write/modify configuration files according to your needs, remember to set `bundled` option to `false`, so hugo will not use prebuilt css file.
+4.  In _your hugo site root dir_, write/modify configuration files according to your needs, remember to set `bundled` option to `false`, so hugo will not use prebuilt css file.
-5.  Run `hugo server` in <u>your hugo site root dir</u>, and you are good to go.
+5.  Run `hugo server` in _your hugo site root dir_, and you are good to go.
 
 ### Option 2: recommended way
 
 1.  Use hugo create a site and move the bridget theme into the theme directory.
-2.  Run `npm install` in the <u>bridget theme root dir</u>, not <u>your hugo site root dir</u>.
+2.  Run `npm install` in the _bridget theme root dir_, not _your hugo site root dir_.
-3.  Run `npm run dev` in the <u>bridget theme root dir</u>, we will use content in exampleSite to debug.
+3.  Run `npm run dev` in the _bridget theme root dir_, we will use content in exampleSite to debug.
 4.  Make your customization.
-5.  After modification, run `npm run build` in the <u>bridget theme root dir</u> to build artifacts.
+5.  After modification, run `npm run build` in the _bridget theme root dir_ to build artifacts.
-6.  In <u>your hugo site root dir</u>, write/modify configuration files according to your needs, remember to set `bundled` option to `true`, so hugo will use the artifacts you built in step 5.
+6.  In _your hugo site root dir_, write/modify configuration files according to your needs, remember to set `bundled` option to `true`, so hugo will use the artifacts you built in step 5.
-7.  Run `hugo server` in <u>your hugo site root dir</u>, and you are good to go.
+7.  Run `hugo server` in _your hugo site root dir_, and you are good to go.

exampleSite/content/Info/index.md

@@ -12,11 +12,11 @@ unifiedAlt: ''
 
 Bridget is a _minimal_ Hugo theme designed for photographers/visual artists.
 
-The inspiration for this theme came from a video by <u>[Hyperlexed](https://www.youtube.com/@Hyperplexed)</u>, which can be found <u>[here](https://www.youtube.com/watch?v=Jt3A2lNN2aE)</u>. Initially, it was developed using raw TypeScript and CSS. However, after website designer <u>[Tyler McRobert](https://tylermcrobert.com)</u> made the source code publicly available, I realized that I have invented many unnecessary components, and this project was modified to porting the original design to hugo while focusing on _performance_.
+The inspiration for this theme came from a video by <u>[Hyperlexed](https://www.youtube.com/@Hyperplexed)</u>, which can be found <u>[here](https://www.youtube.com/watch?v=Jt3A2lNN2aE)</u>. Initially, it was developed using no third-party dependencies. However, after website designer <u>[Tyler McRobert](https://tylermcrobert.com)</u> made the source code publicly available, I realized that I have invented many unnecessary wheels, and this project was modified to porting the original design to hugo while focusing on _performance_.
 
 Once again, great shout out to <u>[Tyler McRobert](https://tylermcrobert.com)</u> for his inspiration to this project.
 
-[Repo ↗](https://github.com/Sped0n/bridget)
+[GitHub Repo ↗](https://github.com/Sped0n/bridget)
 
 Original site design by <u>[Tyler McRobert](https://tylermcrobert.com)</u>.
 

layouts/404.html

@@ -1,10 +1,10 @@
 {{- define "main" -}}
   <div class="container">
     {{- partial "nav.html" . -}}
-  </div>
+    <article>
-  <article class="info">
       <p class="error">&#9949; <u>404</u>&nbsp;{{- i18n 404 -}}&nbsp;&#9949;</p>
       <p class="error">&#9949; <u>404</u>&nbsp;{{- i18n 404 -}}&nbsp;&#9949;</p>
       <p class="error">&#9949; <u>404</u>&nbsp;{{- i18n 404 -}}&nbsp;&#9949;</p>
     </article>
+  </div>
 {{- end -}}

layouts/_default/single.html

@@ -1,14 +1,17 @@
 {{- define "main" -}}
-  <script>
+  <div
-    document.getElementById("main").setAttribute("nextText", "{{- i18n "next" -}}")
+    class="container"
-    document.getElementById("main").setAttribute("prevText", "{{- i18n "prev" -}}")
+    data-next="{{- i18n "next" -}}"
-    document.getElementById("main").setAttribute("closeText", "{{- i18n "close" -}}")
+    data-prev="{{- i18n "prev" -}}"
-    document.getElementById("main").setAttribute("loadingText", "{{- i18n "loading" -}}")
+    data-close="{{- i18n "close" -}}"
-  </script>
+    data-loading="{{- i18n "loading" -}}"
-  <div class="container">
+  >
-    {{- partial "nav.html" . -}}
+    {{- with .Content -}}
-    <article class="info">
+      <article>
-      {{ .Content }}
+        {{- . -}}
       </article>
+    {{- end -}}
+
+    {{- partial "nav.html" . -}}
   </div>
 {{- end -}}

layouts/partials/function/currentMenuItem.html

@@ -1,7 +1,7 @@
 {{- $currentPage := . -}}
 
 {{- $identifier := "" -}}
-{{- $title := "" -}}
+{{- $title := "404" -}}
 {{- $weight := -1 -}}
 
 {{- range site.Menus.main -}}

layouts/partials/head/link.html

@@ -18,6 +18,16 @@
   {{- partial "plugin/style.html" $style -}}
 {{- end -}}
 
+{{/* fuck safari */}}
+<script>
+  function z() {
+    const r = document.querySelector(':root')
+    r.style.setProperty('--window-height', `${window.innerHeight}px`)
+  }
+  z()
+  window.addEventListener('resize', z, { passive: true })
+</script>
+
 {{/* main js */}}
 {{- $script := dict "Link" "/bundled/js/main.js" "Defer" true "Esm" true -}}
 {{- partial "plugin/script.html" $script -}}

package.json

@@ -37,8 +37,8 @@
   },
   "homepage": "https://github.com/Sped0n/bridget#readme",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",

pnpm-lock.yaml

@@ -26,11 +26,11 @@ dependencies:
 
 devDependencies:
   '@typescript-eslint/eslint-plugin':
-    specifier: ^6.19.0
+    specifier: ^6.20.0
-    version: 6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3)
+    version: 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
   '@typescript-eslint/parser':
-    specifier: ^6.19.0
+    specifier: ^6.20.0
-    version: 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+    version: 6.20.0(eslint@8.56.0)(typescript@5.3.3)
   eslint:
     specifier: ^8.56.0
     version: 8.56.0
@@ -42,13 +42,13 @@ devDependencies:
     version: 17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.1.1)(eslint@8.56.0)
   eslint-config-standard-with-typescript:
     specifier: ^43.0.1
-    version: 43.0.1(@typescript-eslint/eslint-plugin@6.19.0)(eslint-plugin-import@2.29.1)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.1.1)(eslint@8.56.0)(typescript@5.3.3)
+    version: 43.0.1(@typescript-eslint/eslint-plugin@6.20.0)(eslint-plugin-import@2.29.1)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.1.1)(eslint@8.56.0)(typescript@5.3.3)
   eslint-import-resolver-typescript:
     specifier: ^3.6.1
-    version: 3.6.1(@typescript-eslint/parser@6.19.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
+    version: 3.6.1(@typescript-eslint/parser@6.20.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
   eslint-plugin-import:
     specifier: ^2.29.1
-    version: 2.29.1(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+    version: 2.29.1(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
   eslint-plugin-n:
     specifier: ^16.6.2
     version: 16.6.2(eslint@8.56.0)
@@ -407,8 +407,8 @@ packages:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3):
+  /@typescript-eslint/eslint-plugin@6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==}
+    resolution: {integrity: sha512-fTwGQUnjhoYHeSF6m5pWNkzmDDdsKELYrOBxhjMrofPqCkoC2k3B2wvGHFxa1CTIqkEn88nlW1HVMztjo2K8Hg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@@ -419,11 +419,11 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.6.2
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 6.19.0
+      '@typescript-eslint/scope-manager': 6.20.0
-      '@typescript-eslint/type-utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/type-utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 6.19.0
+      '@typescript-eslint/visitor-keys': 6.20.0
       debug: 4.3.4
       eslint: 8.56.0
       graphemer: 1.4.0
@@ -436,8 +436,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3):
+  /@typescript-eslint/parser@6.20.0(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==}
+    resolution: {integrity: sha512-bYerPDF/H5v6V76MdMYhjwmwgMA+jlPVqjSDq2cRqMi8bP5sR3Z+RLOiOMad3nsnmDVmn2gAFCyNgh/dIrfP/w==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -446,10 +446,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 6.19.0
+      '@typescript-eslint/scope-manager': 6.20.0
-      '@typescript-eslint/types': 6.19.0
+      '@typescript-eslint/types': 6.20.0
-      '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 6.19.0
+      '@typescript-eslint/visitor-keys': 6.20.0
       debug: 4.3.4
       eslint: 8.56.0
       typescript: 5.3.3
@@ -457,16 +457,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager@6.19.0:
+  /@typescript-eslint/scope-manager@6.20.0:
-    resolution: {integrity: sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==}
+    resolution: {integrity: sha512-p4rvHQRDTI1tGGMDFQm+GtxP1ZHyAh64WANVoyEcNMpaTFn3ox/3CcgtIlELnRfKzSs/DwYlDccJEtr3O6qBvA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.19.0
+      '@typescript-eslint/types': 6.20.0
-      '@typescript-eslint/visitor-keys': 6.19.0
+      '@typescript-eslint/visitor-keys': 6.20.0
     dev: true
 
-  /@typescript-eslint/type-utils@6.19.0(eslint@8.56.0)(typescript@5.3.3):
+  /@typescript-eslint/type-utils@6.20.0(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-mcvS6WSWbjiSxKCwBcXtOM5pRkPQ6kcDds/juxcy/727IQr3xMEcwr/YLHW2A2+Fp5ql6khjbKBzOyjuPqGi/w==}
+    resolution: {integrity: sha512-qnSobiJQb1F5JjN0YDRPHruQTrX7ICsmltXhkV536mp4idGAYrIyr47zF/JmkJtEcAVnIz4gUYJ7gOZa6SmN4g==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -475,8 +475,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
       debug: 4.3.4
       eslint: 8.56.0
       ts-api-utils: 1.0.1(typescript@5.3.3)
@@ -485,13 +485,13 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types@6.19.0:
+  /@typescript-eslint/types@6.20.0:
-    resolution: {integrity: sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==}
+    resolution: {integrity: sha512-MM9mfZMAhiN4cOEcUOEx+0HmuaW3WBfukBZPCfwSqFnQy0grXYtngKCqpQN339X3RrwtzspWJrpbrupKYUSBXQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.19.0(typescript@5.3.3):
+  /@typescript-eslint/typescript-estree@6.20.0(typescript@5.3.3):
-    resolution: {integrity: sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==}
+    resolution: {integrity: sha512-RnRya9q5m6YYSpBN7IzKu9FmLcYtErkDkc8/dKv81I9QiLLtVBHrjz+Ev/crAqgMNW2FCsoZF4g2QUylMnJz+g==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
@@ -499,8 +499,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 6.19.0
+      '@typescript-eslint/types': 6.20.0
-      '@typescript-eslint/visitor-keys': 6.19.0
+      '@typescript-eslint/visitor-keys': 6.20.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -512,8 +512,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@6.19.0(eslint@8.56.0)(typescript@5.3.3):
+  /@typescript-eslint/utils@6.20.0(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-QR41YXySiuN++/dC9UArYOg4X86OAYP83OWTewpVx5ct1IZhjjgTLocj7QNxGhWoTqknsgpl7L+hGygCO+sdYw==}
+    resolution: {integrity: sha512-/EKuw+kRu2vAqCoDwDCBtDRU6CTKbUmwwI7SH7AashZ+W+7o8eiyy6V2cdOqN49KsTcASWsC5QeghYuRDTyOOg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -521,9 +521,9 @@ packages:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
       '@types/json-schema': 7.0.12
       '@types/semver': 7.5.0
-      '@typescript-eslint/scope-manager': 6.19.0
+      '@typescript-eslint/scope-manager': 6.20.0
-      '@typescript-eslint/types': 6.19.0
+      '@typescript-eslint/types': 6.20.0
-      '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3)
       eslint: 8.56.0
       semver: 7.5.4
     transitivePeerDependencies:
@@ -531,11 +531,11 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.19.0:
+  /@typescript-eslint/visitor-keys@6.20.0:
-    resolution: {integrity: sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==}
+    resolution: {integrity: sha512-E8Cp98kRe4gKHjJD4NExXKz/zOJ1A2hhZc+IMVD6i7w4yjIvh6VyuRI0gRtxAsXtoC35uGMaQ9rjI2zJaXDEAw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.19.0
+      '@typescript-eslint/types': 6.20.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -947,7 +947,7 @@ packages:
       eslint: 8.56.0
     dev: true
 
-  /eslint-config-standard-with-typescript@43.0.1(@typescript-eslint/eslint-plugin@6.19.0)(eslint-plugin-import@2.29.1)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.1.1)(eslint@8.56.0)(typescript@5.3.3):
+  /eslint-config-standard-with-typescript@43.0.1(@typescript-eslint/eslint-plugin@6.20.0)(eslint-plugin-import@2.29.1)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.1.1)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-WfZ986+qzIzX6dcr4yGUyVb/l9N3Z8wPXCc5z/70fljs3UbWhhV+WxrfgsqMToRzuuyX9MqZ974pq2UPhDTOcA==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^6.4.0
@@ -957,11 +957,11 @@ packages:
       eslint-plugin-promise: ^6.0.0
       typescript: '*'
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
       eslint: 8.56.0
       eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.1.1)(eslint@8.56.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       eslint-plugin-n: 16.6.2(eslint@8.56.0)
       eslint-plugin-promise: 6.1.1(eslint@8.56.0)
       typescript: 5.3.3
@@ -979,7 +979,7 @@ packages:
       eslint-plugin-promise: ^6.0.0
     dependencies:
       eslint: 8.56.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       eslint-plugin-n: 16.6.2(eslint@8.56.0)
       eslint-plugin-promise: 6.1.1(eslint@8.56.0)
     dev: true
@@ -994,7 +994,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.19.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0):
+  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.20.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0):
     resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -1004,8 +1004,8 @@ packages:
       debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.56.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       fast-glob: 3.3.1
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -1017,7 +1017,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -1038,11 +1038,11 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
       debug: 3.2.7
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.19.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.20.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1059,7 +1059,7 @@ packages:
       eslint-compat-utils: 0.1.2(eslint@8.56.0)
     dev: true
 
-  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
     resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -1069,7 +1069,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.2
@@ -1078,7 +1078,7 @@ packages:
       doctrine: 2.1.0
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3

static/bundled/js/lC-UIm.js

@@ -0,0 +1 @@
+import{W as e,s as t,n,f as a,l as s,g as c,h as o,r as i,c as d,i as r}from"./main.js";const l=new e(!1);function m(e,t){return Math.floor(Math.random()*(t-e+1))+e}let p,u,g,h,v,E,y,f=-1,N=[],w=[],x=[],L=!1;function B(){r.get()||(r.set(!0),x[t.get().index].scrollIntoView({block:"center",behavior:"auto"}),E.to(u,{y:"100%",ease:y.easeInOut,duration:1}),E.to(g,{opacity:0,duration:1.2,delay:.4}),setTimeout((()=>{a.set(!0),r.set(!1),f=-1}),1600))}let I=[];function T(e){c(e),!r.get()&&L&&(r.set(!0),E.to(g,{opacity:1,duration:1}),E.to(u,{y:0,ease:y.easeInOut,duration:1,delay:.4}),setTimeout((()=>{a.set(!1),r.set(!1)}),1400))}function C(e){(function(e){!function(e){const t=document.createElement("div");t.className="collection";for(const[n,a]of e.entries()){const e=0!==n?m(-25,25):0,s=0!==n?m(-30,30):0,c=document.createElement("img");c.dataset.src=a.loUrl,c.height=a.loImgH,c.width=a.loImgW,c.alt=a.alt,c.style.transform=`translate3d(${e}%, ${s-50}%, 0)`,t.append(c)}d.append(t)}(e);const t=document.getElementsByClassName("collection").item(0);l.addWatcher((e=>{e?t.classList.remove("hidden"):t.classList.add("hidden")})),I=Array.from(t.getElementsByTagName("img")),I.forEach(((e,t)=>{var n,a;t<5&&(e.src=e.dataset.src),e.addEventListener("click",(()=>{T(t)}),{passive:!0}),e.addEventListener("keydown",(()=>{T(t)}),{passive:!0}),n=e,a=(e,n)=>{e.every((e=>e.intersectionRatio<=0||(t+5<I.length&&(I[t+5].src=I[t+5].dataset.src),n.disconnect(),!1)))},new IntersectionObserver(((e,t)=>{a(e,t)})).observe(n)}))})(e),function(e){!function(e){const t=document.createElement("div");t.className="swiper-wrapper";const n=d.dataset.loading+"...";for(const a of e){const e=document.createElement("div");e.className="swiper-slide";const s=document.createElement("div");s.className="loadingText",s.innerText=n;const c=document.createElement("img");c.dataset.src=a.hiUrl,c.height=a.hiImgH,c.width=a.hiImgW,c.alt=a.alt,c.classList.add("hide"),c.addEventListener("load",(()=>{c.classList.remove("hide"),s.classList.add("hide")}),{once:!0,passive:!0});const o=document.createElement("div");o.className="slideContainer",o.append(c),o.append(s),e.append(o),t.append(e)}const a=document.createElement("div");a.className="galleryInner",a.append(t);const s=document.createElement("div");s.insertAdjacentHTML("afterbegin",'<span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>\n    <span>/</span>\n    <span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>');const c=document.createElement("div");var o;c.innerText=(o=d.dataset.close).charAt(0).toUpperCase()+o.slice(1),c.addEventListener("click",(()=>{B()}),{passive:!0}),c.addEventListener("keydown",(()=>{B()}),{passive:!0});const i=document.createElement("div");i.className="nav",i.append(s,c);const r=document.createElement("div");r.className="gallery",r.append(a),r.append(i);const l=document.createElement("div");l.className="curtain",d.append(r,l)}(e),N=Array.from(document.getElementsByClassName("nav").item(0)?.getElementsByClassName("num")??[]),p=document.getElementsByClassName("galleryInner").item(0),u=document.getElementsByClassName("gallery").item(0),g=document.getElementsByClassName("curtain").item(0),w=Array.from(u.getElementsByTagName("img")),x=Array.from(document.getElementsByClassName("collection").item(0)?.getElementsByTagName("img")??[]),t.addWatcher((e=>{var a;e.index!==f&&(-1===f?n.set("none"):e.index<f?n.set("prev"):e.index>f?n.set("next"):n.set("none"),a=e.index,function(){let e=[];const a=t.get().index,s=Math.min(a+1,t.get().length-1),c=Math.max(a-1,0);switch(n.get()){case"next":e=[s];break;case"prev":e=[c];break;case"none":e=[a,s,c]}i(e).forEach((e=>{const t=w[e];t.src!==t.dataset.src&&(t.src=t.dataset.src)}))}(),h.slideTo(a,0),function(){const e=o(t.get().index+1),n=o(t.get().length);N.forEach(((t,a)=>{t.innerText=a<4?e[a]:n[a-4]}))}(),f=e.index)})),l.addWatcher((e=>{e&&a.set(!0)})),window.addEventListener("touchstart",(()=>{s().then((e=>{E=e[0],y=e[1]})).catch((e=>{console.log(e)})),async function(){return(await import("./f6JTi3.js")).Swiper}().then((e=>{v=e,h=new v(p,{spaceBetween:20}),h.on("slideChange",(({realIndex:e})=>{c(e)}))})).catch((e=>{console.log(e)})),L=!0}),{once:!0,passive:!0}),l.set(!0)}(e)}export{C as initMobile};

static/bundled/js/main.js

@@ -1 +1 @@
-function t(t,e){return(t+1)%e}function e(t,e){return(t+e-1)%e}function n(t){return("0000"+t.toString()).slice(-4)}function s(t,e){return Math.floor(Math.random()*(e-t+1))+t}function o(t,e){new IntersectionObserver(((n,s)=>{n.forEach((n=>{n.intersectionRatio>0&&(e(t),s.disconnect())}))})).observe(t)}function r(t){return t.charAt(0).toUpperCase()+t.slice(1)}async function a(){const t=await import("./EY5BO_.js");return[t.gsap,t.Power3]}async function i(){return(await import("./f6JTi3.js")).Swiper}class c{constructor(t){this.obj=t,this.watchers=[]}get(){return this.obj}set(t){this.obj=t,this.watchers.forEach((t=>{t(this.obj)}))}addWatcher(t){this.watchers.push(t)}}const h=new c(!0);let l;const d=[{threshold:20,trailLength:20},{threshold:40,trailLength:10},{threshold:80,trailLength:5},{threshold:140,trailLength:5},{threshold:200,trailLength:5}],g=new c({index:-1,length:0,threshold:d[w()].threshold,trailLength:d[w()].trailLength});function u(t){const e=g.get();e.index=t,g.set(e)}function m(){const e=g.get();e.index=t(e.index,e.length),g.set(e)}function f(){const t=g.get();t.index=e(t.index,t.length),g.set(t)}function p(t,e){const n=d.findIndex((e=>t.threshold===e.threshold))+e;if(n<0||n>=d.length)return t;sessionStorage.setItem("thresholdsIndex",n.toString());const s=d[n];return{...t,...s}}function w(){const t=sessionStorage.getItem("thresholdsIndex");return null===t?2:parseInt(t)}const x=document.getElementsByClassName("threshold").item(0),y=Array.from(x.getElementsByClassName("num")),E=x.getElementsByClassName("dec").item(0),j=x.getElementsByClassName("inc").item(0),L=document.getElementsByClassName("index").item(0),b=Array.from(L.getElementsByClassName("num"));l=document.getElementsByClassName("container").item(0),h.addWatcher((t=>{t?l.classList.remove("disableScroll"):l.classList.add("disableScroll")}));const v=await async function(){try{const t=await fetch(`${window.location.href}index.json`,{headers:{Accept:"application/json"}});return(await t.json()).sort(((t,e)=>t.index<e.index?-1:1))}catch(t){return[]}}();!function(t){const e=g.get();e.length=t,p(e,0),g.set(e)}(v.length),g.addWatcher((t=>{var e,s,o;e=n(t.index+1),s=n(t.length),b.forEach(((t,n)=>{t.innerText=n<4?e[n]:s[n-4]})),o=n(t.threshold),y.forEach(((t,e)=>{t.innerText=o[e]}))})),E.addEventListener("click",(()=>{!function(){let t=g.get();t=p(t,-1),g.set(t)}()}),{passive:!0}),j.addEventListener("click",(()=>{!function(){let t=g.get();t=p(t,1),g.set(t)}()}),{passive:!0}),v.length>0&&(window.matchMedia("(hover: none)").matches?import("./x7en59.js").then((t=>{t.initMobile(v)})).catch((t=>{console.log(t)})):import("./xwx9uS.js").then((t=>{t.initDesktop(v)})).catch((t=>{console.log(t)})));export{c as W,m as a,f as b,l as c,e as d,h as e,i as f,u as g,n as h,t as i,r as j,s as k,a as l,o,g as s};
+function t(t,e){return(t+1)%e}function e(t,e){return(t+e-1)%e}function n(t){return("0000"+t.toString()).slice(-4)}async function s(){const t=await import("./EY5BO_.js");return[t.gsap,t.Power3]}function o(){const t=sessionStorage.getItem("thresholdsIndex");return null===t?2:parseInt(t)}function a(t){return t.length<2?t:[...new Set(t)]}class i{constructor(t){this.obj=t,this.watchers=[]}get(){return this.obj}set(t){this.obj=t,this.watchers.forEach((t=>{t(this.obj)}))}addWatcher(t){this.watchers.push(t)}}const r=new i(!0);let c;const h=[{threshold:20,trailLength:20},{threshold:40,trailLength:10},{threshold:80,trailLength:5},{threshold:140,trailLength:5},{threshold:200,trailLength:5}],l=new i({index:-1,length:0,threshold:h[o()].threshold,trailLength:h[o()].trailLength}),d=new i(!1),g=new i("none");function u(t){const e=l.get();e.index=t,l.set(e)}function m(){const e=l.get();e.index=t(e.index,e.length),l.set(e)}function f(){const t=l.get();t.index=e(t.index,t.length),l.set(t)}function w(t,e){const n=h.findIndex((e=>t.threshold===e.threshold))+e;if(n<0||n>=h.length)return t;sessionStorage.setItem("thresholdsIndex",n.toString());const s=h[n];return{...t,...s}}const x=document.getElementsByClassName("threshold").item(0),p=Array.from(x.getElementsByClassName("num")),y=x.getElementsByClassName("dec").item(0),E=x.getElementsByClassName("inc").item(0),L=document.getElementsByClassName("index").item(0),j=Array.from(L.getElementsByClassName("num"));document.addEventListener("DOMContentLoaded",(()=>{(async function(){c=document.getElementsByClassName("container").item(0),r.addWatcher((t=>{t?c.classList.remove("disableScroll"):c.classList.add("disableScroll")}));const t=await async function(){if("404"===document.title.split(" | ")[0])return[];try{const t=await fetch(`${window.location.href}index.json`,{headers:{Accept:"application/json"}});return(await t.json()).sort(((t,e)=>t.index<e.index?-1:1))}catch(t){return[]}}();(function(t){const e=l.get();e.length=t,w(e,0),l.set(e)})(t.length),l.addWatcher((t=>{var e,s,o;e=n(t.index+1),s=n(t.length),j.forEach(((t,n)=>{t.innerText=n<4?e[n]:s[n-4]})),o=n(t.threshold),p.forEach(((t,e)=>{t.innerText=o[e]}))})),y.addEventListener("click",(()=>{!function(){let t=l.get();t=w(t,-1),l.set(t)}()}),{passive:!0}),E.addEventListener("click",(()=>{!function(){let t=l.get();t=w(t,1),l.set(t)}()}),{passive:!0}),0!==t.length&&(window.matchMedia("(hover: none)").matches?await import("./lC-UIm.js").then((e=>{e.initMobile(t)})).catch((t=>{console.log(t)})):await import("./LbzzjK.js").then((e=>{e.initDesktop(t)})).catch((t=>{console.log(t)})))})().catch((t=>{console.log(t)}))}));export{i as W,m as a,t as b,c,e as d,f as e,r as f,u as g,n as h,d as i,s as l,g as n,a as r,l as s};

static/bundled/js/x7en59.js

@@ -1 +0,0 @@
-import{W as e,s as t,e as n,l as a,f as s,g as c,h as o,j as d,c as i,o as l,k as m}from"./main.js";const r=new e(!1);let p,u,g,h;const E=new e(!1);let v,y,f,N=-1,x=[],I=[],w=[],B=!1;function L(){n.set(!0),w[t.get().index].scrollIntoView({block:"center",behavior:"auto"}),y.to(u,{y:"100%",ease:f.easeInOut,duration:1}),y.to(g,{opacity:0,duration:1.2,delay:.4})}function T(){const e=[];e.push(I[h.activeIndex]),e.push(I[Math.min(h.activeIndex+1,h.slides.length)]),e.push(I[Math.max(h.activeIndex-1,0)]);for(const t of e)t.src=t.dataset.src}let C=[];function A(e){c(e),!E.get()&&B&&(E.set(!0),T(),y.to(g,{opacity:1,duration:1}),y.to(u,{y:0,ease:f.easeInOut,duration:1,delay:.4}),setTimeout((()=>{n.set(!1),E.set(!1)}),1200))}function k(e){(function(e){!function(e){const t=document.createElement("div");t.className="collection";for(const[n,a]of e.entries()){const e=0!==n?m(-25,25):0,s=0!==n?m(-30,30):0,c=document.createElement("img");c.dataset.src=a.loUrl,c.height=a.loImgH,c.width=a.loImgW,c.alt=a.alt,c.style.transform=`translate3d(${e}%, ${s-50}%, 0)`,t.append(c)}i.append(t)}(e);const t=document.getElementsByClassName("collection").item(0);r.addWatcher((e=>{e?t.classList.remove("hidden"):t.classList.add("hidden")})),C=Array.from(t.getElementsByTagName("img")),C.forEach(((e,t)=>{e.addEventListener("click",(()=>{A(t)}),{passive:!0}),e.addEventListener("keydown",(()=>{A(t)}),{passive:!0}),l(e,(()=>{for(let e=0;e<5;e++){const n=t+e;n<0||n>C.length-1||(C[n].src=C[n].dataset.src)}}))}))})(e),function(e){!function(e){const t=document.createElement("div");t.className="swiper-wrapper";for(const n of e){const e=document.createElement("div");e.className="swiper-slide";const a=document.createElement("div");a.className="loadingText",a.innerText=document.getElementById("main")?.getAttribute("loadingText")+"...";const s=document.createElement("img");s.dataset.src=n.hiUrl,s.height=n.hiImgH,s.width=n.hiImgW,s.alt=n.alt,s.classList.add("hide"),s.addEventListener("load",(()=>{s.classList.remove("hide"),a.classList.add("hide")}),{once:!0,passive:!0});const c=document.createElement("div");c.className="slideContainer",c.append(s),c.append(a),e.append(c),t.append(e)}const n=document.createElement("div");n.className="galleryInner",n.append(t);const a=document.createElement("div");a.insertAdjacentHTML("afterbegin",'<span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>\n    <span>/</span>\n    <span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>');const s=document.createElement("div"),c=document.getElementById("main")?.getAttribute("closeText");s.innerText=d(c),s.addEventListener("click",(()=>{L()}),{passive:!0}),s.addEventListener("keydown",(()=>{L()}),{passive:!0});const o=document.createElement("div");o.className="nav",o.append(a,s);const l=document.createElement("div");l.className="gallery",l.append(n),l.append(o);const m=document.createElement("div");m.className="curtain",i.append(l,m)}(e),x=Array.from(document.getElementsByClassName("nav").item(0)?.getElementsByClassName("num")??[]),p=document.getElementsByClassName("galleryInner").item(0),u=document.getElementsByClassName("gallery").item(0),g=document.getElementsByClassName("curtain").item(0),I=Array.from(u.getElementsByTagName("img")),w=Array.from(document.getElementsByClassName("collection").item(0)?.getElementsByTagName("img")??[]),t.addWatcher((()=>{const e=t.get();var n;e.index!==N&&(n=e.index,T(),h.slideTo(n,0),function(){const e=o(t.get().index+1),n=o(t.get().length);x.forEach(((t,a)=>{t.innerText=a<4?e[a]:n[a-4]}))}(),N=e.index)})),r.addWatcher((e=>{e&&n.set(!0)})),window.addEventListener("touchstart",(()=>{a().then((e=>{y=e[0],f=e[1]})).catch((e=>{console.log(e)})),s().then((e=>{v=e,h=new v(p,{spaceBetween:20}),h.on("slideChange",(({realIndex:e})=>{c(e)}))})).catch((e=>{console.log(e)})),B=!0}),{once:!0,passive:!0}),r.set(!0)}(e)}export{k as initMobile};