diff --git a/assets/ts/mobile/collection.ts b/assets/ts/mobile/collection.ts index 84d224a..e8cae54 100644 --- a/assets/ts/mobile/collection.ts +++ b/assets/ts/mobile/collection.ts @@ -1,16 +1,16 @@ import { container } from '../container' import { type ImageJSON } from '../resources' import { setIndex } from '../state' -import { Watchable, getRandom, onVisible } from '../utils' +import { getRandom, onVisible } from '../utils' import { slideUp } from './gallery' +import { mounted } from './mounted' /** * variables */ export let imgs: HTMLImageElement[] = [] -export const mounted = new Watchable(false) /** * main functions @@ -32,8 +32,8 @@ export function initCollection(ijs: ImageJSON[]): void { .getElementsByClassName('collection') .item(0) as HTMLDivElement // add watcher - mounted.addWatcher(() => { - if (mounted.get()) { + mounted.addWatcher((o) => { + if (o) { collection.classList.remove('hidden') } else { collection.classList.add('hidden') diff --git a/assets/ts/mobile/gallery.ts b/assets/ts/mobile/gallery.ts index 9b36174..2ab7a86 100644 --- a/assets/ts/mobile/gallery.ts +++ b/assets/ts/mobile/gallery.ts @@ -6,7 +6,7 @@ import { type ImageJSON } from '../resources' import { setIndex, state } from '../state' import { Watchable, expand } from '../utils' -import { imgs, mounted } from './collection' +import { mounted } from './mounted' import { scrollable } from './scroll' /** @@ -21,6 +21,7 @@ const isAnimating = new Watchable(false) let lastIndex = -1 let indexDispNums: HTMLSpanElement[] = [] let galleryImages: HTMLImageElement[] = [] +let collectionImages: HTMLImageElement[] = [] /** * main functions @@ -83,6 +84,12 @@ export function initGallery(ijs: ImageJSON[]): void { gallery = document.getElementsByClassName('gallery').item(0) as HTMLDivElement curtain = document.getElementsByClassName('curtain').item(0) as HTMLDivElement galleryImages = Array.from(gallery.getElementsByTagName('img')) + collectionImages = Array.from( + document + .getElementsByClassName('collection') + .item(0) + ?.getElementsByTagName('img') ?? [] + ) // state watcher state.addWatcher(() => { const s = state.get() @@ -117,7 +124,7 @@ function changeSlide(slide: number): void { } function scrollToActive(): void { - imgs[state.get().index].scrollIntoView({ + collectionImages[state.get().index].scrollIntoView({ block: 'center', behavior: 'auto' }) diff --git a/assets/ts/mobile/mounted.ts b/assets/ts/mobile/mounted.ts new file mode 100644 index 0000000..461e9d3 --- /dev/null +++ b/assets/ts/mobile/mounted.ts @@ -0,0 +1,3 @@ +import { Watchable } from '../utils' + +export const mounted = new Watchable(false)