Merge branch 'main' of https://github.com/Sped0n/bridget

assets/ts/desktop/stage.ts

@@ -1,4 +1,4 @@
-import { type Power3, type gsap } from 'gsap'
+import { type gsap } from 'gsap'
 
 import { container } from '../container'
 import { incIndex, isAnimating, navigateVector, state } from '../globalState'
@@ -17,7 +17,10 @@ let imgs: DesktopImage[] = []
 let last = { x: 0, y: 0 }
 
 let _gsap: typeof gsap
-let _Power3: typeof Power3
+
+/**
+ * state
+ */
 
 let gsapLoaded = false
 
@@ -147,7 +150,7 @@ function expandImage(): void {
   // move down and hide trail inactive
   tl.to(trailInactiveEls, {
     y: '+=20',
-    ease: _Power3.easeIn,
+    ease: 'power3.in',
     stagger: 0.075,
     duration: 0.3,
     delay: 0.1,
@@ -157,7 +160,7 @@ function expandImage(): void {
   tl.to(elc, {
     x: 0,
     y: 0,
-    ease: _Power3.easeInOut,
+    ease: 'power3.inOut',
     duration: 0.7,
     delay: 0.3
   })
@@ -165,7 +168,7 @@ function expandImage(): void {
   tl.to(elc, {
     delay: 0.1,
     scale: 1,
-    ease: _Power3.easeInOut
+    ease: 'power3.inOut'
   })
   // finished
   tl.then(() => {
@@ -194,20 +197,20 @@ export function minimizeImage(): void {
   tl.to(elc, {
     scale: 0.6,
     duration: 0.6,
-    ease: _Power3.easeInOut
+    ease: 'power3.inOut'
   })
   // move current to original position
   tl.to(elc, {
     delay: 0.3,
     duration: 0.7,
-    ease: _Power3.easeInOut,
+    ease: 'power3.inOut',
     x: cordHist.get()[cordHist.get().length - 1].x - window.innerWidth / 2,
     y: cordHist.get()[cordHist.get().length - 1].y - window.innerHeight / 2
   })
   // show trail inactive
   tl.to(elsTrailInactive, {
     y: '-=20',
-    ease: _Power3.easeOut,
+    ease: 'power3.out',
     stagger: -0.1,
     duration: 0.3,
     opacity: 1
@@ -237,23 +240,20 @@ export function initStage(ijs: ImageJSON[]): void {
       img.src = img.dataset.loUrl
     }
     // lores preloader for rest of the images
-    onMutation(img, (mutations, observer) => {
+    onMutation(img, (mutation) => {
-      mutations.every((mutation) => {
+      // if open or animating, hold
-        // if open or animating, skip
+      if (isOpen.get() || isAnimating.get()) return false
-        if (isOpen.get() || isAnimating.get()) return true
+      // if mutation is not about style attribute, hold
-        // if mutation is not about style attribute, skip
+      if (mutation.attributeName !== 'style') return false
-        if (mutation.attributeName !== 'style') return true
+      const opacity = parseFloat(img.style.opacity)
-        const opacity = parseFloat(img.style.opacity)
+      // if opacity is not 1, hold
-        // if opacity is not 1, skip
+      if (opacity !== 1) return false
-        if (opacity !== 1) return true
+      // preload the i + 5th image, if it exists
-        // preload the i + 5th image
+      if (i + 5 < imgs.length) {
-        if (i + 5 < imgs.length) {
+        imgs[i + 5].src = imgs[i + 5].dataset.loUrl
-          imgs[i + 5].src = imgs[i + 5].dataset.loUrl
+      }
-        }
+      // triggered
-        // disconnect observer and return false to break the loop
+      return true
-        observer.disconnect()
-        return false
-      })
     })
   })
   // event listeners
@@ -348,7 +348,7 @@ function setLoaderForHiresImage(e: HTMLImageElement): void {
       'load',
       () => {
         _gsap
-          .to(e, { opacity: 1, ease: _Power3.easeIn, duration: 0.5 })
+          .to(e, { opacity: 1, ease: 'power3.out', duration: 0.5 })
           .then(() => {
             isLoading.set(false)
           })
@@ -387,8 +387,7 @@ function setLoaderForHiresImage(e: HTMLImageElement): void {
 function loadLib(): void {
   loadGsap()
     .then((g) => {
-      _gsap = g[0]
+      _gsap = g
-      _Power3 = g[1]
       gsapLoaded = true
     })
     .catch((e) => {

assets/ts/desktop/utils.ts

@@ -19,10 +19,15 @@ export interface DesktopImage extends HTMLImageElement {
 
 export function onMutation<T extends HTMLElement>(
   element: T,
-  callback: (arg0: MutationRecord[], arg1: MutationObserver) => void,
+  trigger: (arg0: MutationRecord) => boolean,
   observeOptions: MutationObserverInit = { attributes: true }
 ): void {
   new MutationObserver((mutations, observer) => {
-    callback(mutations, observer)
+    for (const mutation of mutations) {
+      if (trigger(mutation)) {
+        observer.disconnect()
+        break
+      }
+    }
   }).observe(element, observeOptions)
 }

assets/ts/globalState.ts

@@ -31,7 +31,7 @@ const defaultState = {
   trailLength: thresholds[getThresholdSessionIndex()].trailLength
 }
 
-export const state = new Watchable<State>(defaultState)
+export const state = new Watchable<State>(defaultState, false)
 export const isAnimating = new Watchable<boolean>(false)
 export const navigateVector = new Watchable<NavVec>('none')
 

assets/ts/globalUtils.ts

@@ -1,4 +1,4 @@
-import { type Power3, type gsap } from 'gsap'
+import { type gsap } from 'gsap'
 
 /**
  * utils
@@ -16,9 +16,9 @@ export function expand(num: number): string {
   return ('0000' + num.toString()).slice(-4)
 }
 
-export async function loadGsap(): Promise<[typeof gsap, typeof Power3]> {
+export async function loadGsap(): Promise<typeof gsap> {
   const g = await import('gsap')
-  return [g.gsap, g.Power3]
+  return g.gsap
 }
 
 export function getThresholdSessionIndex(): number {
@@ -37,7 +37,11 @@ export function removeDuplicates<T>(arr: T[]): T[] {
  */
 
 export class Watchable<T> {
-  constructor(private obj: T) {}
+  constructor(
+    private obj: T,
+    private readonly lazy: boolean = true
+  ) {}
+
   private readonly watchers: Array<(arg0: T) => void> = []
 
   get(): T {
@@ -45,6 +49,7 @@ export class Watchable<T> {
   }
 
   set(e: T): void {
+    if (e === this.obj && this.lazy) return
     this.obj = e
     this.watchers.forEach((watcher) => {
       watcher(this.obj)

assets/ts/mobile/collection.ts

@@ -64,18 +64,15 @@ export function initCollection(ijs: ImageJSON[]): void {
       { passive: true }
     )
     // preload
-    onIntersection(img, (entries, observer) => {
+    onIntersection(img, (entry) => {
-      entries.every((entry) => {
+      // no intersection, hold
-        // no intersection, skip
+      if (entry.intersectionRatio <= 0) return false
-        if (entry.intersectionRatio <= 0) return true
+      // preload the i + 5th image, if it exists
-        // preload the i + 5th image
+      if (i + 5 < imgs.length) {
-        if (i + 5 < imgs.length) {
+        imgs[i + 5].src = imgs[i + 5].dataset.src
-          imgs[i + 5].src = imgs[i + 5].dataset.src
+      }
-        }
+      // triggered
-        // disconnect observer and return false to break the loop
+      return true
-        observer.disconnect()
-        return false
-      })
     })
   })
 }

assets/ts/mobile/gallery.ts

@@ -1,4 +1,4 @@
-import { type Power3, type gsap } from 'gsap'
+import { type gsap } from 'gsap'
 import { type Swiper } from 'swiper'
 
 import { container, scrollable } from '../container'
@@ -17,16 +17,18 @@ import { capitalizeFirstLetter, loadSwiper, type MobileImage } from './utils'
 let swiperNode: HTMLDivElement
 let gallery: HTMLDivElement
 let curtain: HTMLDivElement
-let swiper: Swiper
-let lastIndex = -1
 let indexDispNums: HTMLSpanElement[] = []
 let galleryImages: MobileImage[] = []
 let collectionImages: MobileImage[] = []
 
-let _Swiper: typeof Swiper
 let _gsap: typeof gsap
-let _Power3: typeof Power3
+let _swiper: Swiper
 
+/**
+ * state
+ */
+
+let lastIndex = -1
 let libLoaded = false
 
 /**
@@ -44,7 +46,7 @@ export function slideUp(): void {
 
   _gsap.to(gallery, {
     y: 0,
-    ease: _Power3.easeInOut,
+    ease: 'power3.inOut',
     duration: 1,
     delay: 0.4
   })
@@ -63,7 +65,7 @@ function slideDown(): void {
 
   _gsap.to(gallery, {
     y: '100%',
-    ease: _Power3.easeInOut,
+    ease: 'power3.inOut',
     duration: 1
   })
 
@@ -128,17 +130,15 @@ export function initGallery(ijs: ImageJSON[]): void {
     () => {
       loadGsap()
         .then((g) => {
-          _gsap = g[0]
+          _gsap = g
-          _Power3 = g[1]
         })
         .catch((e) => {
           console.log(e)
         })
       loadSwiper()
-        .then((s) => {
+        .then((S) => {
-          _Swiper = s
+          _swiper = new S(swiperNode, { spaceBetween: 20 })
-          swiper = new _Swiper(swiperNode, { spaceBetween: 20 })
+          _swiper.on('slideChange', ({ realIndex }) => {
-          swiper.on('slideChange', ({ realIndex }) => {
             setIndex(realIndex)
           })
         })
@@ -159,7 +159,7 @@ export function initGallery(ijs: ImageJSON[]): void {
 
 function changeSlide(slide: number): void {
   galleryLoadImages()
-  swiper.slideTo(slide, 0)
+  _swiper.slideTo(slide, 0)
 }
 
 function scrollToActive(): void {
@@ -246,8 +246,8 @@ function createGallery(ijs: ImageJSON[]): void {
           _gsap.set(e, { opacity: 1 })
           _gsap.set(l, { opacity: 0 })
         } else {
-          _gsap.to(e, { opacity: 1, duration: 0.5, ease: _Power3.easeIn })
+          _gsap.to(e, { opacity: 1, delay: 0.5, duration: 0.5, ease: 'power3.out' })
-          _gsap.to(l, { opacity: 0, duration: 0.5, ease: _Power3.easeIn })
+          _gsap.to(l, { opacity: 0, duration: 0.5, ease: 'power3.in' })
         }
       },
       { once: true, passive: true }

assets/ts/mobile/utils.ts

@@ -20,10 +20,15 @@ export function getRandom(min: number, max: number): number {
 
 export function onIntersection<T extends HTMLElement>(
   element: T,
-  callback: (arg0: IntersectionObserverEntry[], arg1: IntersectionObserver) => void
+  trigger: (arg0: IntersectionObserverEntry) => boolean
 ): void {
   new IntersectionObserver((entries, observer) => {
-    callback(entries, observer)
+    for (const entry of entries) {
+      if (trigger(entry)) {
+        observer.disconnect()
+        break
+      }
+    }
   }).observe(element)
 }
 

static/bundled/js/R3tU0p.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 r,i as d}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,y,h,v=[],E=[],f=[],w=-1,x=!1;function N(){d.get()||(d.set(!0),f[t.get().index].scrollIntoView({block:"center",behavior:"auto"}),y.to(u,{y:"100%",ease:"power3.inOut",duration:1}),y.to(g,{opacity:0,duration:1.2,delay:.4}),setTimeout((()=>{a.set(!0),d.set(!1),w=-1}),1600))}let B=[];function T(e){c(e),!d.get()&&x&&(d.set(!0),y.to(g,{opacity:1,duration:1}),y.to(u,{y:0,ease:"power3.inOut",duration:1,delay:.4}),setTimeout((()=>{a.set(!1),d.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)}r.append(t)}(e);const t=document.getElementsByClassName("collection").item(0);l.addWatcher((e=>{e?t.classList.remove("hidden"):t.classList.add("hidden")})),B=Array.from(t.getElementsByTagName("img")),B.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=>!(e.intersectionRatio<=0||(t+5<B.length&&(B[t+5].src=B[t+5].dataset.src),0)),new IntersectionObserver(((e,t)=>{for(const n of e)if(a(n)){t.disconnect();break}})).observe(n)}))})(e),function(e){!function(e){const n=document.createElement("div");n.className="swiper-wrapper";const a=r.dataset.loading+"...";for(const s of e){const e=document.createElement("div");e.className="swiper-slide";const c=document.createElement("div");c.className="loadingText",c.innerText=a;const o=document.createElement("img");o.dataset.src=s.hiUrl,o.height=s.hiImgH,o.width=s.hiImgW,o.alt=s.alt,o.style.opacity="0",o.addEventListener("load",(()=>{t.get().index!==s.index?(y.set(o,{opacity:1}),y.set(c,{opacity:0})):(y.to(o,{opacity:1,delay:.5,duration:.5,ease:"power3.out"}),y.to(c,{opacity:0,duration:.5,ease:"power3.in"}))}),{once:!0,passive:!0});const i=document.createElement("div");i.className="slideContainer",i.append(o),i.append(c),e.append(i),n.append(e)}const s=document.createElement("div");s.className="galleryInner",s.append(n);const c=document.createElement("div");c.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 o=document.createElement("div");var i;o.innerText=(i=r.dataset.close).charAt(0).toUpperCase()+i.slice(1),o.addEventListener("click",(()=>{N()}),{passive:!0}),o.addEventListener("keydown",(()=>{N()}),{passive:!0});const d=document.createElement("div");d.className="nav",d.append(c,o);const l=document.createElement("div");l.className="gallery",l.append(s),l.append(d);const m=document.createElement("div");m.className="curtain",r.append(l,m)}(e),v=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),E=Array.from(u.getElementsByTagName("img")),f=Array.from(document.getElementsByClassName("collection").item(0)?.getElementsByTagName("img")??[]),t.addWatcher((e=>{var a;e.index!==w&&(-1===w?n.set("none"):e.index<w?n.set("prev"):e.index>w?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=E[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);v.forEach(((t,a)=>{t.innerText=a<4?e[a]:n[a-4]}))}(),w=e.index)})),l.addWatcher((e=>{e&&a.set(!0)})),window.addEventListener("touchstart",(()=>{s().then((e=>{y=e})).catch((e=>{console.log(e)})),async function(){return(await import("./zXhbFx.js")).Swiper}().then((e=>{h=new e(p,{spaceBetween:20}),h.on("slideChange",(({realIndex:e})=>{c(e)}))})).catch((e=>{console.log(e)})),x=!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)}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("./sr-IH1.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};
+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(){return(await import("./EY5BO_.js")).gsap}function a(){const t=sessionStorage.getItem("thresholdsIndex");return null===t?2:parseInt(t)}function o(t){return t.length<2?t:[...new Set(t)]}class i{constructor(t,e=!0){this.obj=t,this.lazy=e,this.watchers=[]}get(){return this.obj}set(t){t===this.obj&&this.lazy||(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[a()].threshold,trailLength:h[a()].trailLength},!1),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),y=Array.from(x.getElementsByClassName("num")),p=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,a;e=n(t.index+1),s=n(t.length),j.forEach(((t,n)=>{t.innerText=n<4?e[n]:s[n-4]})),a=n(t.threshold),y.forEach(((t,e)=>{t.innerText=a[e]}))})),p.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("./R3tU0p.js").then((e=>{e.initMobile(t)})).catch((t=>{console.log(t)})):await import("./bNN_m2.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,o as r,l as s};

static/bundled/js/sr-IH1.js

@@ -1 +0,0 @@
-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("./zXhbFx.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};