From 0812a5a6b83090e366691fcc694cdfcbd75da2b8 Mon Sep 17 00:00:00 2001 From: Spedon <70063177+Sped0n@users.noreply.github.com> Date: Tue, 6 Feb 2024 23:12:44 +0800 Subject: [PATCH 1/2] feat: loading transition (#277) * refactor: change hires loader function name * feat: add loading transition animation and improve performance * refactor: refactor mutation handling in desktop codebase - Modify the `initStage` function in `assets/ts/desktop/stage.ts`: - Change the `onMutation` callback to accept a single mutation instead of an array of mutations. - Update the conditions inside the callback to use `hold` instead of `skip`. - Modify the `onMutation` function in `assets/ts/desktop/utils.ts`: - Change the `callback` parameter to `trigger`. - Update the implementation of the function to iterate over each mutation and check if it triggers the `trigger` function. If it does, disconnect the observer and break the loop. * style: refactor state section and remove unnecessary code - Remove the declaration of `lastIndex` on line 21 - Add a comment block for the state section - Add a declaration of `lastIndex` for the state section * refactor: refactor mobile collection and intersection functions - Modify the `initCollection` function in `assets/ts/mobile/collection.ts` - Remove the nested loop in the `initCollection` function - Modify the `onIntersection` function in `assets/ts/mobile/utils.ts` - Replace the callback parameter with a trigger parameter in the `onIntersection` function - Remove the nested loop in the `onIntersection` function * refactor: refactor Watchable class constructor to include lazy parameter - Add a second parameter `lazy` in the constructor of the `Watchable` class in `globalUtils.ts` - Set the default value of `lazy` to `true` in the constructor - Add a condition to check if `e` is equal to `this.obj` and `this.lazy` is `true` to return in `watch` - Delete the previous constructor definition in the `Watchable` class in `globalUtils.ts` * fix: set state's lazy param to false * refactor: refactor third party lib import --- assets/ts/desktop/stage.ts | 112 ++++++++++++++++++++------------- assets/ts/desktop/utils.ts | 9 ++- assets/ts/globalState.ts | 2 +- assets/ts/globalUtils.ts | 13 ++-- assets/ts/mobile/collection.ts | 21 +++---- assets/ts/mobile/gallery.ts | 39 +++++++----- assets/ts/mobile/utils.ts | 9 ++- 7 files changed, 125 insertions(+), 80 deletions(-) diff --git a/assets/ts/desktop/stage.ts b/assets/ts/desktop/stage.ts index 013f930..f96df68 100644 --- a/assets/ts/desktop/stage.ts +++ b/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 @@ -85,33 +88,43 @@ function setPositions(): void { const elsTrail = getImagesWithIndexArray(trailElsIndex) + // cached state + const _isOpen = isOpen.get() + const _cordHist = cordHist.get() + const _state = state.get() + _gsap.set(elsTrail, { - x: (i: number) => cordHist.get()[i].x - window.innerWidth / 2, - y: (i: number) => cordHist.get()[i].y - window.innerHeight / 2, + x: (i: number) => _cordHist[i].x - window.innerWidth / 2, + y: (i: number) => _cordHist[i].y - window.innerHeight / 2, opacity: (i: number) => - i + 1 + state.get().trailLength <= cordHist.get().length ? 0 : 1, + Math.max( + (i + 1 + _state.trailLength <= _cordHist.length ? 0 : 1) - (_isOpen ? 1 : 0), + 0 + ), zIndex: (i: number) => i, scale: 0.6 }) - if (isOpen.get()) { + if (_isOpen) { const elc = getImagesWithIndexArray([getCurrentElIndex()])[0] - elc.classList.add('hide') // hide image to prevent flash const indexArrayToHires: number[] = [] + const indexArrayToCleanup: number[] = [] switch (navigateVector.get()) { case 'prev': indexArrayToHires.push(getPrevElIndex()) + indexArrayToCleanup.push(getNextElIndex()) break case 'next': indexArrayToHires.push(getNextElIndex()) + indexArrayToCleanup.push(getPrevElIndex()) 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 }) + _gsap.set(getImagesWithIndexArray(indexArrayToCleanup), { opacity: 0 }) + _gsap.set(elc, { x: 0, y: 0, scale: 1 }) // set current to center + setLoaderForHiresImage(elc) // set loader, if loaded set current opacity to 1 } else { lores(elsTrail) } @@ -130,14 +143,14 @@ function expandImage(): void { // elc.classList.add('hide') hires(getImagesWithIndexArray([elcIndex, getPrevElIndex(), getNextElIndex()])) - setLoaderForImage(elc) + setLoaderForHiresImage(elc) const tl = _gsap.timeline() const trailInactiveEls = getImagesWithIndexArray(getTrailInactiveElsIndex()) // 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, @@ -147,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 }) @@ -155,7 +168,7 @@ function expandImage(): void { tl.to(elc, { delay: 0.1, scale: 1, - ease: _Power3.easeInOut + ease: 'power3.inOut' }) // finished tl.then(() => { @@ -184,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 @@ -227,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) => { - 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 - }) + onMutation(img, (mutation) => { + // if open or animating, hold + if (isOpen.get() || isAnimating.get()) return false + // if mutation is not about style attribute, hold + if (mutation.attributeName !== 'style') return false + const opacity = parseFloat(img.style.opacity) + // if opacity is not 1, hold + if (opacity !== 1) return false + // preload the i + 5th image, if it exists + if (i + 5 < imgs.length) { + imgs[i + 5].src = imgs[i + 5].dataset.loUrl + } + // triggered + return true }) }) // event listeners @@ -331,35 +341,53 @@ function lores(imgs: DesktopImage[]): void { }) } -function setLoaderForImage(e: HTMLImageElement): void { +function setLoaderForHiresImage(e: HTMLImageElement): void { if (!e.complete) { isLoading.set(true) e.addEventListener( 'load', () => { - isLoading.set(false) - e.classList.remove('hide') + _gsap + .to(e, { opacity: 1, ease: 'power3.out', duration: 0.5 }) + .then(() => { + isLoading.set(false) + }) + .catch((e) => { + console.log(e) + }) }, { once: true, passive: true } ) e.addEventListener( 'error', () => { - isLoading.set(false) + _gsap + .set(e, { opacity: 1 }) + .then(() => { + isLoading.set(false) + }) + .catch((e) => { + console.log(e) + }) }, { once: true, passive: true } ) } else { - e.classList.remove('hide') - isLoading.set(false) + _gsap + .set(e, { opacity: 1 }) + .then(() => { + isLoading.set(false) + }) + .catch((e) => { + console.log(e) + }) } } function loadLib(): void { loadGsap() .then((g) => { - _gsap = g[0] - _Power3 = g[1] + _gsap = g gsapLoaded = true }) .catch((e) => { diff --git a/assets/ts/desktop/utils.ts b/assets/ts/desktop/utils.ts index 50b4d02..eff3b23 100644 --- a/assets/ts/desktop/utils.ts +++ b/assets/ts/desktop/utils.ts @@ -19,10 +19,15 @@ export interface DesktopImage extends HTMLImageElement { export function onMutation( 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) } diff --git a/assets/ts/globalState.ts b/assets/ts/globalState.ts index 30650ad..56461f6 100644 --- a/assets/ts/globalState.ts +++ b/assets/ts/globalState.ts @@ -31,7 +31,7 @@ const defaultState = { trailLength: thresholds[getThresholdSessionIndex()].trailLength } -export const state = new Watchable(defaultState) +export const state = new Watchable(defaultState, false) export const isAnimating = new Watchable(false) export const navigateVector = new Watchable('none') diff --git a/assets/ts/globalUtils.ts b/assets/ts/globalUtils.ts index 433c590..6fa22ec 100644 --- a/assets/ts/globalUtils.ts +++ b/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 { const g = await import('gsap') - return [g.gsap, g.Power3] + return g.gsap } export function getThresholdSessionIndex(): number { @@ -37,7 +37,11 @@ export function removeDuplicates(arr: T[]): T[] { */ export class Watchable { - 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 { } set(e: T): void { + if (e === this.obj && this.lazy) return this.obj = e this.watchers.forEach((watcher) => { watcher(this.obj) diff --git a/assets/ts/mobile/collection.ts b/assets/ts/mobile/collection.ts index 0c7865b..c787fbf 100644 --- a/assets/ts/mobile/collection.ts +++ b/assets/ts/mobile/collection.ts @@ -64,18 +64,15 @@ export function initCollection(ijs: ImageJSON[]): void { { passive: true } ) // preload - onIntersection(img, (entries, observer) => { - entries.every((entry) => { - // no intersection, skip - if (entry.intersectionRatio <= 0) return true - // 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 - }) + onIntersection(img, (entry) => { + // no intersection, hold + if (entry.intersectionRatio <= 0) return false + // preload the i + 5th image, if it exists + if (i + 5 < imgs.length) { + imgs[i + 5].src = imgs[i + 5].dataset.src + } + // triggered + return true }) }) } diff --git a/assets/ts/mobile/gallery.ts b/assets/ts/mobile/gallery.ts index 290da84..b2c4552 100644 --- a/assets/ts/mobile/gallery.ts +++ b/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] - _Power3 = g[1] + _gsap = g }) .catch((e) => { console.log(e) }) loadSwiper() - .then((s) => { - _Swiper = s - swiper = new _Swiper(swiperNode, { spaceBetween: 20 }) - swiper.on('slideChange', ({ realIndex }) => { + .then((S) => { + _swiper = new S(swiperNode, { spaceBetween: 20 }) + _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 { @@ -237,13 +237,18 @@ function createGallery(ijs: ImageJSON[]): void { e.height = ij.hiImgH e.width = ij.hiImgW e.alt = ij.alt - e.classList.add('hide') + e.style.opacity = '0' // load event e.addEventListener( 'load', () => { - e.classList.remove('hide') - l.classList.add('hide') + if (state.get().index !== ij.index) { + _gsap.set(e, { opacity: 1 }) + _gsap.set(l, { opacity: 0 }) + } else { + _gsap.to(e, { opacity: 1, delay: 0.5, duration: 0.5, ease: 'power3.out' }) + _gsap.to(l, { opacity: 0, duration: 0.5, ease: 'power3.in' }) + } }, { once: true, passive: true } ) diff --git a/assets/ts/mobile/utils.ts b/assets/ts/mobile/utils.ts index 79a624a..e6b4a4f 100644 --- a/assets/ts/mobile/utils.ts +++ b/assets/ts/mobile/utils.ts @@ -20,10 +20,15 @@ export function getRandom(min: number, max: number): number { export function onIntersection( 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) } From f7d2c7962c5ac82a5aa656392e05907cee37d1c6 Mon Sep 17 00:00:00 2001 From: Sped0n Date: Tue, 6 Feb 2024 15:13:23 +0000 Subject: [PATCH 2/2] ci: update bundled artifacts [skip ci] --- static/bundled/js/LbzzjK.js | 1 - static/bundled/js/R3tU0p.js | 1 + static/bundled/js/bNN_m2.js | 1 + static/bundled/js/main.js | 2 +- static/bundled/js/sr-IH1.js | 1 - 5 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 static/bundled/js/LbzzjK.js create mode 100644 static/bundled/js/R3tU0p.js create mode 100644 static/bundled/js/bNN_m2.js delete mode 100644 static/bundled/js/sr-IH1.js diff --git a/static/bundled/js/LbzzjK.js b/static/bundled/js/LbzzjK.js deleted file mode 100644 index 79c22fa..0000000 --- a/static/bundled/js/LbzzjK.js +++ /dev/null @@ -1 +0,0 @@ -import{W as e,c as t,i as n,l as s,s as a,a as i,n as o,d as c,b as r,e as d}from"./main.js";const l=new e([]),g=new e(!1),u=new e(!1),h=new e(!1),m=document.createElement("div"),v=document.createElement("div");function p(e){const t=e.clientX,n=e.clientY;m.style.transform=`translate3d(${t}px, ${n}px, 0)`}function f(e){v.innerText=e}let y,w,E=[],L={x:0,y:0},I=!1;function x(){return l.get().map((e=>e.i))}function W(){const e=x().slice(-a.get().trailLength);return e.slice(0,e.length-1)}function k(){const e=x();return e[e.length-1]}function U(){const e=l.get(),t=a.get();return c(e[e.length-1].i,t.length)}function H(){const e=l.get(),t=a.get();return r(e[e.length-1].i,t.length)}function b(e){if(g.get()||n.get())return;if(!I)return void T();const t={x:e.clientX,y:e.clientY};if(Math.hypot(t.x-L.x,t.y-L.y)>a.get().threshold){L=t,i();const e={i:a.get().index,...t};l.set([...l.get(),e].slice(-a.get().length))}}function N(){if(n.get())return;g.set(!0),n.set(!0);const e=k(),t=S([e])[0];A(S([e,U(),H()])),M(t);const s=y.timeline(),a=S(W());s.to(a,{y:"+=20",ease:w.easeIn,stagger:.075,duration:.3,delay:.1,opacity:0}),s.to(t,{x:0,y:0,ease:w.easeInOut,duration:.7,delay:.3}),s.to(t,{delay:.1,scale:1,ease:w.easeInOut}),s.then((()=>{n.set(!1)})).catch((e=>{console.log(e)}))}function O(){if(n.get())return;g.set(!1),n.set(!0),o.set("none"),B(S([...W(),k()]));const e=y.timeline(),t=S([k()])[0],s=S(W());e.to(t,{scale:.6,duration:.6,ease:w.easeInOut}),e.to(t,{delay:.3,duration:.7,ease:w.easeInOut,x:l.get()[l.get().length-1].x-window.innerWidth/2,y:l.get()[l.get().length-1].y-window.innerHeight/2}),e.to(s,{y:"-=20",ease:w.easeOut,stagger:-.1,duration:.3,opacity:1}),e.then((()=>{n.set(!1)})).catch((e=>{console.log(e)}))}function S(e){return e.map((e=>E[e]))}function A(e){e.forEach((e=>{e.src!==e.dataset.hiUrl&&(e.src=e.dataset.hiUrl,e.height=parseInt(e.dataset.hiImgH),e.width=parseInt(e.dataset.hiImgW))}))}function B(e){e.forEach((e=>{e.src!==e.dataset.loUrl&&(e.src=e.dataset.loUrl,e.height=parseInt(e.dataset.loImgH),e.width=parseInt(e.dataset.loImgW))}))}function M(e){e.complete?(e.classList.remove("hide"),h.set(!1)):(h.set(!0),e.addEventListener("load",(()=>{h.set(!1),e.classList.remove("hide")}),{once:!0,passive:!0}),e.addEventListener("error",(()=>{h.set(!1)}),{once:!0,passive:!0}))}function T(){s().then((e=>{y=e[0],w=e[1],I=!0})).catch((e=>{console.log(e)}))}const X=[t.dataset.prev,t.dataset.close,t.dataset.next],Y=t.dataset.loading+"...";let $="";function j(e){e===X[0]?F():e===X[1]?O():C()}function z(e){if(!g.get()&&!n.get())switch(e.key){case"ArrowLeft":F();break;case"Escape":O();break;case"ArrowRight":C()}}function C(){n.get()||(o.set("next"),l.set(l.get().map((e=>({...e,i:r(e.i,a.get().length)})))),i())}function F(){n.get()||(o.set("prev"),l.set(l.get().map((e=>({...e,i:c(e.i,a.get().length)})))),d())}function R(e){j(e),h.set(!1)}function q(e){$=e,f(e)}function D(e){h.get()||j(e)}function G(e){$=e,h.get()?f(Y):f(e)}function J(e){m.className="cursor",v.className="cursorInner",m.append(v),t.append(m),window.addEventListener("mousemove",p,{passive:!0}),u.addWatcher((e=>{e?m.classList.add("active"):m.classList.remove("active")})),function(e){!function(e){const n=document.createElement("div");n.className="stage";for(const t of e){const e=document.createElement("img");e.height=t.loImgH,e.width=t.loImgW,e.dataset.hiUrl=t.hiUrl,e.dataset.hiImgH=t.hiImgH.toString(),e.dataset.hiImgW=t.hiImgW.toString(),e.dataset.loUrl=t.loUrl,e.dataset.loImgH=t.loImgH.toString(),e.dataset.loImgW=t.loImgW.toString(),e.alt=t.alt,n.append(e)}t.append(n)}(e);const s=document.getElementsByClassName("stage").item(0);E=Array.from(s.getElementsByTagName("img")),E.forEach(((e,t)=>{t<5&&(e.src=e.dataset.loUrl),function(e,t,n={attributes:!0}){new MutationObserver(((e,n)=>{t(e,n)})).observe(e,n)}(e,((s,a)=>{s.every((s=>!(!g.get()&&!n.get()&&"style"===s.attributeName&&1===parseFloat(e.style.opacity)&&(t+5{N()}),{passive:!0}),s.addEventListener("keydown",(()=>{N()}),{passive:!0}),window.addEventListener("mousemove",b,{passive:!0}),g.addWatcher((e=>{u.set(e&&!n.get())})),n.addWatcher((e=>{u.set(g.get()&&!e)})),l.addWatcher((e=>{!function(){const e=x();if(0===e.length||!I)return;const t=S(e);if(y.set(t,{x:e=>l.get()[e].x-window.innerWidth/2,y:e=>l.get()[e].y-window.innerHeight/2,opacity:e=>e+1+a.get().trailLength<=l.get().length?0:1,zIndex:e=>e,scale:.6}),g.get()){const e=S([k()])[0];e.classList.add("hide");const t=[];switch(o.get()){case"prev":t.push(U());break;case"next":t.push(H())}A(S(t)),M(e),y.set(E,{opacity:0}),y.set(e,{opacity:1,x:0,y:0,scale:1})}else B(t)}()})),window.addEventListener("mousemove",(()=>{T()}),{once:!0,passive:!0})}(e),function(){h.addWatcher((e=>{f(e?Y:$)}));const e=document.createElement("div");e.className="navOverlay";for(const[t,n]of X.entries()){const s=document.createElement("div");s.className="overlay",1===t?(s.addEventListener("click",(()=>{R(n)}),{passive:!0}),s.addEventListener("keydown",(()=>{R(n)}),{passive:!0}),s.addEventListener("mouseover",(()=>{q(n)}),{passive:!0}),s.addEventListener("focus",(()=>{q(n)}),{passive:!0})):(s.addEventListener("click",(()=>{D(n)}),{passive:!0}),s.addEventListener("keydown",(()=>{D(n)}),{passive:!0}),s.addEventListener("mouseover",(()=>{G(n)}),{passive:!0}),s.addEventListener("focus",(()=>{G(n)}),{passive:!0})),e.append(s)}u.addWatcher((()=>{u.get()?e.classList.add("active"):e.classList.remove("active")})),t.append(e),window.addEventListener("keydown",z,{passive:!0})}()}export{J as initDesktop}; \ No newline at end of file diff --git a/static/bundled/js/R3tU0p.js b/static/bundled/js/R3tU0p.js new file mode 100644 index 0000000..5dbb060 --- /dev/null +++ b/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{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",'\n /\n ');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.indexw?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}; \ No newline at end of file diff --git a/static/bundled/js/bNN_m2.js b/static/bundled/js/bNN_m2.js new file mode 100644 index 0000000..c442410 --- /dev/null +++ b/static/bundled/js/bNN_m2.js @@ -0,0 +1 @@ +import{W as e,c as t,i as n,l as s,s as a,a as o,n as i,d as c,b as r,e as d}from"./main.js";const l=new e([]),g=new e(!1),u=new e(!1),h=new e(!1),p=document.createElement("div"),m=document.createElement("div");function v(e){const t=e.clientX,n=e.clientY;p.style.transform=`translate3d(${t}px, ${n}px, 0)`}function f(e){m.innerText=e}let w,y=[],E={x:0,y:0},L=!1;function x(){return l.get().map((e=>e.i))}function I(){const e=x().slice(-a.get().trailLength);return e.slice(0,e.length-1)}function W(){const e=x();return e[e.length-1]}function k(){const e=l.get(),t=a.get();return c(e[e.length-1].i,t.length)}function U(){const e=l.get(),t=a.get();return r(e[e.length-1].i,t.length)}function b(e){if(g.get()||n.get())return;if(!L)return void B();const t={x:e.clientX,y:e.clientY};if(Math.hypot(t.x-E.x,t.y-E.y)>a.get().threshold){E=t,o();const e={i:a.get().index,...t};l.set([...l.get(),e].slice(-a.get().length))}}function H(){if(n.get())return;g.set(!0),n.set(!0);const e=W(),t=O([e])[0];S(O([e,k(),U()])),M(t);const s=w.timeline(),a=O(I());s.to(a,{y:"+=20",ease:"power3.in",stagger:.075,duration:.3,delay:.1,opacity:0}),s.to(t,{x:0,y:0,ease:"power3.inOut",duration:.7,delay:.3}),s.to(t,{delay:.1,scale:1,ease:"power3.inOut"}),s.then((()=>{n.set(!1)})).catch((e=>{console.log(e)}))}function N(){if(n.get())return;g.set(!1),n.set(!0),i.set("none"),A(O([...I(),W()]));const e=w.timeline(),t=O([W()])[0],s=O(I());e.to(t,{scale:.6,duration:.6,ease:"power3.inOut"}),e.to(t,{delay:.3,duration:.7,ease:"power3.inOut",x:l.get()[l.get().length-1].x-window.innerWidth/2,y:l.get()[l.get().length-1].y-window.innerHeight/2}),e.to(s,{y:"-=20",ease:"power3.out",stagger:-.1,duration:.3,opacity:1}),e.then((()=>{n.set(!1)})).catch((e=>{console.log(e)}))}function O(e){return e.map((e=>y[e]))}function S(e){e.forEach((e=>{e.src!==e.dataset.hiUrl&&(e.src=e.dataset.hiUrl,e.height=parseInt(e.dataset.hiImgH),e.width=parseInt(e.dataset.hiImgW))}))}function A(e){e.forEach((e=>{e.src!==e.dataset.loUrl&&(e.src=e.dataset.loUrl,e.height=parseInt(e.dataset.loImgH),e.width=parseInt(e.dataset.loImgW))}))}function M(e){e.complete?w.set(e,{opacity:1}).then((()=>{h.set(!1)})).catch((e=>{console.log(e)})):(h.set(!0),e.addEventListener("load",(()=>{w.to(e,{opacity:1,ease:"power3.out",duration:.5}).then((()=>{h.set(!1)})).catch((e=>{console.log(e)}))}),{once:!0,passive:!0}),e.addEventListener("error",(()=>{w.set(e,{opacity:1}).then((()=>{h.set(!1)})).catch((e=>{console.log(e)}))}),{once:!0,passive:!0}))}function B(){s().then((e=>{w=e,L=!0})).catch((e=>{console.log(e)}))}const T=[t.dataset.prev,t.dataset.close,t.dataset.next],X=t.dataset.loading+"...";let Y="";function $(e){e===T[0]?C():e===T[1]?N():z()}function j(e){if(!g.get()&&!n.get())switch(e.key){case"ArrowLeft":C();break;case"Escape":N();break;case"ArrowRight":z()}}function z(){n.get()||(i.set("next"),l.set(l.get().map((e=>({...e,i:r(e.i,a.get().length)})))),o())}function C(){n.get()||(i.set("prev"),l.set(l.get().map((e=>({...e,i:c(e.i,a.get().length)})))),d())}function F(e){$(e),h.set(!1)}function R(e){Y=e,f(e)}function q(e){h.get()||$(e)}function D(e){Y=e,h.get()?f(X):f(e)}function G(e){p.className="cursor",m.className="cursorInner",p.append(m),t.append(p),window.addEventListener("mousemove",v,{passive:!0}),u.addWatcher((e=>{e?p.classList.add("active"):p.classList.remove("active")})),function(e){!function(e){const n=document.createElement("div");n.className="stage";for(const t of e){const e=document.createElement("img");e.height=t.loImgH,e.width=t.loImgW,e.dataset.hiUrl=t.hiUrl,e.dataset.hiImgH=t.hiImgH.toString(),e.dataset.hiImgW=t.hiImgW.toString(),e.dataset.loUrl=t.loUrl,e.dataset.loImgH=t.loImgH.toString(),e.dataset.loImgW=t.loImgW.toString(),e.alt=t.alt,n.append(e)}t.append(n)}(e);const s=document.getElementsByClassName("stage").item(0);y=Array.from(s.getElementsByTagName("img")),y.forEach(((e,t)=>{t<5&&(e.src=e.dataset.loUrl),function(e,t,n={attributes:!0}){new MutationObserver(((e,n)=>{for(const s of e)if(t(s)){n.disconnect();break}})).observe(e,n)}(e,(s=>!g.get()&&!n.get()&&"style"===s.attributeName&&1===parseFloat(e.style.opacity)&&(t+5{H()}),{passive:!0}),s.addEventListener("keydown",(()=>{H()}),{passive:!0}),window.addEventListener("mousemove",b,{passive:!0}),g.addWatcher((e=>{u.set(e&&!n.get())})),n.addWatcher((e=>{u.set(g.get()&&!e)})),l.addWatcher((e=>{!function(){const e=x();if(0===e.length||!L)return;const t=O(e),n=g.get(),s=l.get(),o=a.get();if(w.set(t,{x:e=>s[e].x-window.innerWidth/2,y:e=>s[e].y-window.innerHeight/2,opacity:e=>Math.max((e+1+o.trailLength<=s.length?0:1)-(n?1:0),0),zIndex:e=>e,scale:.6}),n){const e=O([W()])[0],t=[],n=[];switch(i.get()){case"prev":t.push(k()),n.push(U());break;case"next":t.push(U()),n.push(k())}S(O(t)),w.set(O(n),{opacity:0}),w.set(e,{x:0,y:0,scale:1}),M(e)}else A(t)}()})),window.addEventListener("mousemove",(()=>{B()}),{once:!0,passive:!0})}(e),function(){h.addWatcher((e=>{f(e?X:Y)}));const e=document.createElement("div");e.className="navOverlay";for(const[t,n]of T.entries()){const s=document.createElement("div");s.className="overlay",1===t?(s.addEventListener("click",(()=>{F(n)}),{passive:!0}),s.addEventListener("keydown",(()=>{F(n)}),{passive:!0}),s.addEventListener("mouseover",(()=>{R(n)}),{passive:!0}),s.addEventListener("focus",(()=>{R(n)}),{passive:!0})):(s.addEventListener("click",(()=>{q(n)}),{passive:!0}),s.addEventListener("keydown",(()=>{q(n)}),{passive:!0}),s.addEventListener("mouseover",(()=>{D(n)}),{passive:!0}),s.addEventListener("focus",(()=>{D(n)}),{passive:!0})),e.append(s)}u.addWatcher((()=>{u.get()?e.classList.add("active"):e.classList.remove("active")})),t.append(e),window.addEventListener("keydown",j,{passive:!0})}()}export{G as initDesktop}; \ No newline at end of file diff --git a/static/bundled/js/main.js b/static/bundled/js/main.js index 5d86fbe..8a6bd3f 100644 --- a/static/bundled/js/main.js +++ b/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{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}; \ No newline at end of file +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{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}; \ No newline at end of file diff --git a/static/bundled/js/sr-IH1.js b/static/bundled/js/sr-IH1.js deleted file mode 100644 index e3bbbbd..0000000 --- a/static/bundled/js/sr-IH1.js +++ /dev/null @@ -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{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",'\n /\n ');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.indexf?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}; \ No newline at end of file