mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-18 12:09:29 -07:00
a395513bd6
fix(customCursor.ts): add return type void to onMouse function for clarity fix(customCursor.ts): add passive option to window event listener for mousemove to improve performance fix(stageNav.ts): move import statement for setCustomCursor to the top for better organization fix(stageNav.ts): add return type void to handleClick function for clarity fix(stageNav.ts): add return type void to handleKey function for clarity fix(stageNav.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance fix(stageNav.ts): add passive option to window event listener for keydown to improve performance fix(stageNav.ts): add return type void to nextImage function for clarity fix(stageNav.ts): add return type void to prevImage function for clarity fix(gallery.ts): move import statement for Swiper to the top for better organization fix(gallery.ts): add return type void to slideUp function for clarity fix(gallery.ts): add return type void to initGallery function for clarity fix(gallery.ts): add passive option to window event listener for touchstart to improve performance fix(gallery.ts): add return type void to changeSlide function for clarity fix(gallery.ts): add return type void to scrollToActive function for clarity fix(gallery.ts): add return type void to createGallery function for clarity fix(gallery.ts): add passive option to close event listeners for click and keydown to improve performance fix(gallery.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance fix(gallery.ts): add passive option to window event listener for touchstart to improve performance fix(nav.ts): add return type void to initNav function for clarity fix(utils.ts): add return type number to getRandom function for clarity fix(utils.ts): add return type void to onVisible function for clarity fix(utils.ts): add return type void to addWatcher function in Watchable class for clarity
95 lines
2.1 KiB
TypeScript
95 lines
2.1 KiB
TypeScript
import { container } from '../container'
|
|
import { type ImageJSON } from '../resources'
|
|
import { setIndex } from '../state'
|
|
import { Watchable, getRandom, onVisible } from '../utils'
|
|
|
|
import { slideUp } from './gallery'
|
|
|
|
/**
|
|
* variables
|
|
*/
|
|
|
|
export let imgs: HTMLImageElement[] = []
|
|
export const mounted = new Watchable<boolean>(false)
|
|
|
|
/**
|
|
* 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(() => {
|
|
if (mounted.get()) {
|
|
collection.classList.remove('hidden')
|
|
} else {
|
|
collection.classList.add('hidden')
|
|
}
|
|
})
|
|
// get image elements
|
|
imgs = Array.from(collection.getElementsByTagName('img'))
|
|
// add event listeners
|
|
imgs.forEach((img, i) => {
|
|
img.addEventListener(
|
|
'click',
|
|
() => {
|
|
handleClick(i)
|
|
},
|
|
{ passive: true }
|
|
)
|
|
img.addEventListener(
|
|
'keydown',
|
|
() => {
|
|
handleClick(i)
|
|
},
|
|
{ passive: true }
|
|
)
|
|
// preload
|
|
onVisible(img, () => {
|
|
for (let _i = 0; _i < 5; _i++) {
|
|
const n = i + _i
|
|
if (n < 0 || n > imgs.length - 1) continue
|
|
imgs[n].src = imgs[n].dataset.src as string
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 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')
|
|
e.dataset.src = ij.loUrl
|
|
e.height = ij.loImgH
|
|
e.width = ij.loImgW
|
|
e.alt = 'image'
|
|
e.style.transform = `translate3d(${x}%, ${y - 50}%, 0)`
|
|
_collection.append(e)
|
|
}
|
|
container.append(_collection)
|
|
}
|