eric/bridget
1
0
Fork 0
mirror of https://github.com/Sped0n/bridget.git synced 2026-04-21 05:29:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

initial version of transition toward image elements

Browse Source
This commit is contained in:
Spedon
2023-03-24 16:11:00 +08:00
parent ef20aa5963
commit e897561afa
5 changed files with 207 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/ts/elemGen.ts
View File

@@ -1,7 +1,10 @@
import { imagesArray, imagesArrayLen } from './dataFetch'
import { createImgElement } from './utils'
// get components of overlay
export let overlayCursor: HTMLDivElement
export let cursorInnerContent: HTMLDivElement
export let layers: HTMLDivElement[]
export let imagesDivNodes: NodeListOf<HTMLImageElement>
const passDesktopElements = (): void => {
overlayCursor = document
@@ -10,21 +13,8 @@ const passDesktopElements = (): void => {
cursorInnerContent = document
.getElementsByClassName('cursor_innerText')
.item(0) as HTMLDivElement
layers = [
document.getElementById('layer1') as HTMLDivElement,
document.getElementById('layer2') as HTMLDivElement,
document.getElementById('layer3') as HTMLDivElement,
document.getElementById('layer4') as HTMLDivElement,
document.getElementById('layer5') as HTMLDivElement
]
}
const createLayerDiv = (layerID: number): HTMLDivElement => {
const layerDiv: HTMLDivElement = document.createElement('div')
layerDiv.className = 'image_container'
layerDiv.id = `layer${layerID}`
layerDiv.dataset.status = 'null'
return layerDiv
imagesDivNodes = document.getElementsByClassName('images')[0]
.childNodes as NodeListOf<HTMLImageElement>
}
const createCursorDiv = (): HTMLDivElement => {
@@ -39,11 +29,11 @@ const createCursorDiv = (): HTMLDivElement => {
export const createDesktopElements = (): void => {
const mainDiv = document.getElementById('main') as HTMLDivElement
mainDiv.appendChild(createCursorDiv())
const desktopWrapper: HTMLDivElement = document.createElement('div')
desktopWrapper.className = 'desktopWrapper'
for (let i = 0; i < 15; i++) {
desktopWrapper.appendChild(createLayerDiv(i))
const imagesDiv: HTMLDivElement = document.createElement('div')
imagesDiv.className = 'images'
for (let i = 0; i < imagesArrayLen; i++) {
imagesDiv.appendChild(createImgElement(imagesArray[i]))
}
mainDiv.appendChild(desktopWrapper)
mainDiv.appendChild(imagesDiv)
passDesktopElements()
}