fix: fix mobile loading issue (#267)

* fix: update navigateVector reset behavior

* fix: remove unnecessary function call

* fix: update loading text to include ellipsis
This commit is contained in:
Spedon
2024-02-04 00:45:09 +08:00
committed by GitHub
parent 22b81a8e1d
commit c1414bbfc5

View File

@@ -37,9 +37,6 @@ export function slideUp(): void {
if (isAnimating.get() || !libLoaded) return if (isAnimating.get() || !libLoaded) return
isAnimating.set(true) isAnimating.set(true)
// load active image
galleryLoadImages()
_gsap.to(curtain, { _gsap.to(curtain, {
opacity: 1, opacity: 1,
duration: 1 duration: 1
@@ -61,6 +58,7 @@ export function slideUp(): void {
function slideDown(): void { function slideDown(): void {
if (isAnimating.get()) return if (isAnimating.get()) return
isAnimating.set(true) isAnimating.set(true)
lastIndex = -1 // cleanup
scrollToActive() scrollToActive()
_gsap.to(gallery, { _gsap.to(gallery, {
@@ -103,17 +101,17 @@ export function initGallery(ijs: ImageJSON[]): void {
?.getElementsByTagName('img') ?? [] ?.getElementsByTagName('img') ?? []
) as MobileImage[] ) as MobileImage[]
// state watcher // 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) else if (lastIndex === -1)
navigateVector.set('none') // lastIndex before first set navigateVector.set('none') // lastIndex before set
else if (s.index < lastIndex) navigateVector.set('prev') else if (o.index < lastIndex) navigateVector.set('prev')
else navigateVector.set('next') else if (o.index > lastIndex) navigateVector.set('next')
changeSlide(s.index) else navigateVector.set('none')
changeSlide(o.index)
updateIndexText() updateIndexText()
lastIndex = s.index lastIndex = o.index
}) })
// mounted watcher // mounted watcher
mounted.addWatcher((o) => { mounted.addWatcher((o) => {
@@ -220,7 +218,7 @@ function createGallery(ijs: ImageJSON[]): void {
const _swiperWrapper = document.createElement('div') const _swiperWrapper = document.createElement('div')
_swiperWrapper.className = 'swiper-wrapper' _swiperWrapper.className = 'swiper-wrapper'
// loading text // loading text
const loadingText = container.dataset.loading const loadingText = container.dataset.loading + '...'
for (const ij of ijs) { for (const ij of ijs) {
// swiper slide // swiper slide
const _swiperSlide = document.createElement('div') const _swiperSlide = document.createElement('div')