mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-14 10:09:31 -07:00
bd2354e2f5
- Added a new SCSS partial `_collection.scss` to define styles for the collection component. - Added a new SCSS partial `_gallery.scss` to define styles for the gallery component. The new partials contain styles for the collection and gallery components, including layout, positioning, and animations. --- feat: add support for gallery functionality in mobile - Created a new file `gallery.ts` to handle the gallery functionality in the mobile view. - Added functions `slideUp()` and `slideDown()` to handle the sliding animation of the gallery. - Initialized the gallery with the provided image data in the `initGallery()` function. - Added event listeners to update the active slide and index text when the slide is changed. - Created a helper function `changeSlide()` to change the active slide in the gallery. - Created a helper function `scrollToActive()` to scroll to the active image in the collection. - Created a helper function `updateIndexText()` to update the index text in the navigation. - Created a helper function `createGallery()` to dynamically create the gallery HTML structure. --- feat: add scrollable flag for mobile view - Created a new file `scroll.ts` to handle the scrollable flag for the mobile view. - Added a `scrollable` variable as a Watchable object to control the scrollability of the view. --- fix: change port variable case from lowercase `port` to uppercase `PORT` to improve semantics - Changed the variable name `port` to `PORT` in the `server.ts` file to improve code readability and semantics. - The variable `PORT` is now used to define the port number for the server to listen on.
74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
import { container } from '../container'
|
|
import { ImageJSON } from '../resources'
|
|
import { setIndex } from '../state'
|
|
import { getRandom, Watchable } 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 container = document
|
|
.getElementsByClassName('collection')
|
|
.item(0) as HTMLDivElement
|
|
// add watcher
|
|
mounted.addWatcher(() => {
|
|
if (mounted.get()) {
|
|
container.classList.remove('hidden')
|
|
} else {
|
|
container.classList.add('hidden')
|
|
}
|
|
})
|
|
// get image elements
|
|
imgs = Array.from(container.getElementsByTagName('img'))
|
|
// add event listeners
|
|
imgs.forEach((img, i) => {
|
|
img.addEventListener('click', () => handleClick(i))
|
|
img.addEventListener('keydown', () => handleClick(i))
|
|
})
|
|
}
|
|
|
|
/**
|
|
* helper
|
|
*/
|
|
|
|
function createCollection(ijs: ImageJSON[]): void {
|
|
// create container for images
|
|
const collection: HTMLDivElement = document.createElement('div')
|
|
collection.className = 'collection'
|
|
// append images to container
|
|
for (let [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.src = ij.url
|
|
e.height = ij.imgH
|
|
e.width = ij.imgW
|
|
e.alt = 'image'
|
|
e.style.transform = `translate3d(${x}%, ${y - 50}%, 0)`
|
|
collection.append(e)
|
|
}
|
|
container.append(collection)
|
|
}
|