mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-14 10:09:31 -07:00
0812a5a6b8
* 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
104 lines
2.3 KiB
TypeScript
104 lines
2.3 KiB
TypeScript
import { container } from '../container'
|
|
import { setIndex } from '../globalState'
|
|
import { type ImageJSON } from '../resources'
|
|
|
|
import { slideUp } from './gallery'
|
|
import { mounted } from './state'
|
|
// eslint-disable-next-line sort-imports
|
|
import { getRandom, onIntersection, type MobileImage } from './utils'
|
|
|
|
/**
|
|
* variables
|
|
*/
|
|
|
|
export let imgs: MobileImage[] = []
|
|
|
|
/**
|
|
* main functions
|
|
*/
|
|
|
|
function handleClick(i: number): void {
|
|
setIndex(i)
|
|
slideUp()
|
|
}
|
|
|
|
/**
|
|
* init
|
|
*/
|
|
|
|
export function initCollection(ijs: ImageJSON[]): void {
|
|
createCollection(ijs)
|
|
// get container
|
|
const collection = document
|
|
.getElementsByClassName('collection')
|
|
.item(0) as HTMLDivElement
|
|
// add watcher
|
|
mounted.addWatcher((o) => {
|
|
if (o) {
|
|
collection.classList.remove('hidden')
|
|
} else {
|
|
collection.classList.add('hidden')
|
|
}
|
|
})
|
|
// get image elements
|
|
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',
|
|
() => {
|
|
handleClick(i)
|
|
},
|
|
{ passive: true }
|
|
)
|
|
img.addEventListener(
|
|
'keydown',
|
|
() => {
|
|
handleClick(i)
|
|
},
|
|
{ passive: true }
|
|
)
|
|
// preload
|
|
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
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* helper
|
|
*/
|
|
|
|
function createCollection(ijs: ImageJSON[]): void {
|
|
// create container for images
|
|
const _collection: HTMLDivElement = document.createElement('div')
|
|
_collection.className = 'collection'
|
|
// append images to container
|
|
for (const [i, ij] of ijs.entries()) {
|
|
// random x and y
|
|
const x = i !== 0 ? getRandom(-25, 25) : 0
|
|
const y = i !== 0 ? getRandom(-30, 30) : 0
|
|
// element
|
|
const e = document.createElement('img') as MobileImage
|
|
e.dataset.src = ij.loUrl
|
|
e.height = ij.loImgH
|
|
e.width = ij.loImgW
|
|
e.alt = ij.alt
|
|
e.style.transform = `translate3d(${x}%, ${y - 50}%, 0)`
|
|
_collection.append(e)
|
|
}
|
|
container.append(_collection)
|
|
}
|