diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index 3c37156..bf34c78 100644 --- a/assets/ts/desktop.ts +++ b/assets/ts/desktop.ts @@ -1,31 +1,32 @@ import { overlayEnable } from './overlay' import { + styleCache, + FIFO, + layersStyleSet, + center, type position, createImgElement, calcImageIndex, - delay, - mouseToTransform + delay } from './utils' import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl' import { imgIndexSpanUpdate } from './indexDisp' import { imagesArrayLen, imagesArray } from './dataFetch' -import { preloader } from './imageCache' -const imagesDiv = document.getElementsByClassName('images').item(0) as HTMLDivElement - -let imagesDivNodes: NodeListOf - -export const desktopImagesInit = (): void => { - for (let i = 0; i < imagesArrayLen; i++) { - imagesDiv.appendChild(createImgElement(imagesArray[i])) - } - imagesDivNodes = imagesDiv.childNodes as NodeListOf -} - -export const trailingImageIndexes: number[] = [] +// get layer divs +export const layers: HTMLDivElement[] = [ + 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 +] // layers position caching -export const layersStyleArray: number[][] = [[], []] +export const layersStyleArray: string[][] = [ + ['0px', '0px', '0px', '0px', '0px'], + ['0px', '0px', '0px', '0px', '0px'] +] // global index for "activated" export let globalIndex: number = 0 @@ -33,37 +34,13 @@ export let globalIndex: number = 0 // last position set as "activated" let last: position = { x: 0, y: 0 } -let EnterOverlayController = new AbortController() - // activate top image -const activate = (index: number, mouseX: number, mouseY: number): void => { - EnterOverlayController.abort() - EnterOverlayController = new AbortController() - trailingImageIndexes.push(index) - let indexesNum: number = trailingImageIndexes.length - // push the tail index out and hide the image - if (indexesNum > 10) { - imagesDivNodes[trailingImageIndexes.shift() as number].style.display = 'none' - indexesNum = 10 - } - // set img position - imagesDivNodes[index].style.transform = mouseToTransform(mouseX, mouseY, true, true) - // reset z index - for (let i = 0; i < indexesNum; i++) { - imagesDivNodes[trailingImageIndexes[i]].style.zIndex = `${i}` - } - imagesDivNodes[index].style.display = 'block' - imagesDivNodes[index].addEventListener( - 'click', - () => { - void enterOverlay() - }, - { - passive: true, - signal: EnterOverlayController.signal - } - ) - last = { x: mouseX, y: mouseY } +const activate = (index: number, x: number, y: number): void => { + const imgElem: HTMLImageElement = createImgElement(imagesArray[index]) + styleCache(x, y, layersStyleArray) + layersStyleSet(layersStyleArray, layers) + FIFO(imgElem, layers) + last = { x, y } } // Compare the current mouse position with the last activated position @@ -89,11 +66,17 @@ export const handleOnMove = (e: MouseEvent): void => { } async function enterOverlay(): Promise { + layers[4].style.backgroundImage = '' + const topLayerImage = layers[4].lastElementChild as HTMLImageElement + topLayerImage.style.transition = '' // stop images animation window.removeEventListener('mousemove', handleOnMove) // set top image - alert('center') - await delay(2500) + center(layers[4]) + for (let i = 4; i >= 0; i--) { + layers[i].dataset.status = `t${4 - i}` + } + await delay(1600) // Offset previous self increment of global index (by handleOnMove) globalIndexDec() // overlay init @@ -102,16 +85,22 @@ async function enterOverlay(): Promise { // initialization export const trackMouseInit = (): void => { - desktopImagesInit() - window.addEventListener('mousemove', handleOnMove, { passive: true }) + window.addEventListener('mousemove', handleOnMove) + layers[4].addEventListener( + 'click', + () => { + void enterOverlay() + }, + { + passive: true + } + ) } export const globalIndexDec = (): void => { globalIndex-- - preloader(globalIndex) } export const globalIndexInc = (): void => { globalIndex++ - preloader(globalIndex) } diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 53cd078..83db25f 100644 --- a/assets/ts/overlay.ts +++ b/assets/ts/overlay.ts @@ -1,5 +1,20 @@ -import { delay, calcImageIndex, mouseToTransform } from './utils' -import { handleOnMove, globalIndex, globalIndexDec, globalIndexInc } from './desktop' +import { + delay, + layersStyleSet, + center, + createImgElement, + calcImageIndex, + FIFO, + mouseToTransform +} from './utils' +import { + layersStyleArray, + layers, + handleOnMove, + globalIndex, + globalIndexDec, + globalIndexInc +} from './desktop' import { imagesArray, imagesArrayLen } from './dataFetch' import { imgIndexSpanUpdate } from './indexDisp' @@ -20,7 +35,12 @@ const setCursorText = (text: string): void => { const setTextPos = (e: MouseEvent): void => { // overlayCursor.style.left = `${e.clientX}px` // overlayCursor.style.top = `${e.clientY}px` - overlayCursor.style.transform = mouseToTransform(e.clientX, e.clientY, false, true) + overlayCursor.style.transform = mouseToTransform( + `${e.clientX}px`, + `${e.clientY}px`, + false, + true + ) } // disable listeners @@ -47,19 +67,28 @@ export const overlayDisable = (): void => { // handle close click async function handleCloseClick(): Promise { overlayDisable() - await delay(2500) - window.addEventListener('mousemove', handleOnMove) + layersStyleSet(layersStyleArray, layers) + for (let i: number = 4; i >= 0; i--) { + layers[i].dataset.status = `r${4 - i}` + } + await delay(1700) + for (let i: number = 4; i >= 0; i--) { + layers[i].dataset.status = 'null' + } + window.addEventListener('mousemove', handleOnMove, { passive: true }) } const handlePrevClick = (): void => { globalIndexDec() const imgIndex = calcImageIndex(globalIndex, imagesArrayLen) + FIFO(createImgElement(imagesArray[imgIndex]), layers) imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen) } const handleNextClick = (): void => { globalIndexInc() const imgIndex = calcImageIndex(globalIndex, imagesArrayLen) + FIFO(createImgElement(imagesArray[imgIndex]), layers) imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen) } @@ -109,6 +138,7 @@ export const vwRefreshInit = (): void => { r.style.setProperty('--footer-height', '31px') } // recenter image (only in overlay) + if (layers[4].dataset.status === 't0') center(layers[4]) }, { passive: true } ) diff --git a/assets/ts/thresholdCtl.ts b/assets/ts/thresholdCtl.ts index f276727..086ed12 100644 --- a/assets/ts/thresholdCtl.ts +++ b/assets/ts/thresholdCtl.ts @@ -5,7 +5,7 @@ const thresholdDisp = document.getElementsByClassName('thid').item(0) as HTMLSpa // threshold data const threshold: number[] = [0, 40, 80, 120, 160, 200] -export const thresholdSensitivityArray: number[] = [200, 40, 18, 14, 9, 5] +export const thresholdSensitivityArray: number[] = [100, 40, 18, 14, 9, 5] export let thresholdIndex: number = 2 // update inner text of threshold display element diff --git a/assets/ts/utils.ts b/assets/ts/utils.ts index 75f82c0..51181e9 100644 --- a/assets/ts/utils.ts +++ b/assets/ts/utils.ts @@ -18,20 +18,66 @@ export interface deviceType { desktop: boolean } +// cache a xy position to array +export const styleCache = (x: number, y: number, styleArray: string[][]): void => { + // pop element if length surpass limitation + styleArray[0].shift() + styleArray[1].shift() + // push new element + styleArray[0].push(`${x}px`) + styleArray[1].push(`${y}px`) +} + // 0 to 0001, 25 to 0025 export const duper = (num: number): string => { return ('0000' + num.toString()).slice(-4) } +// FIFO data array for image display +export const FIFO = ( + element: HTMLImageElement, + layersArray: HTMLDivElement[], + fifoPosition: boolean = true +): void => { + function layerProcess(layerL: HTMLDivElement, layerH: HTMLDivElement): void { + if (layerL.childElementCount !== 0) + layerL.removeChild(layerL.lastElementChild as HTMLImageElement) + if (layerH.childElementCount !== 0) { + const layerHNode = layerH.lastElementChild as HTMLImageElement + layerL.appendChild(layerHNode.cloneNode(true)) + if (fifoPosition) layerL.style.transform = layerH.style.transform + } + } + for (let i: number = 0; i <= 3; i++) { + layerProcess(layersArray[i], layersArray[i + 1]) + } + if (layersArray[4].childElementCount !== 0) + layersArray[4].removeChild(layersArray[4].lastElementChild as HTMLImageElement) + layersArray[4].appendChild(element) +} + export const mouseToTransform = ( - x: number, - y: number, + x: string, + y: string, centerCorrection: boolean = true, accelerate: boolean = false ): string => { return `translate${accelerate ? '3d' : ''}(${ - centerCorrection ? `calc(${x}px - 50%)` : `${x}px` - }, ${centerCorrection ? `calc(${y}px - 50%)` : `${y}px`}${accelerate ? ', 0' : ''})` + centerCorrection ? `calc(${x} - 50%)` : `${x}` + }, ${centerCorrection ? `calc(${y} - 50%)` : `${y}`}${accelerate ? ', 0' : ''})` +} + +// set position for 5 image display layers +export const layersStyleSet = ( + styleArray: string[][], + layersArray: HTMLDivElement[] +): void => { + function posSet(layer: HTMLDivElement, index: number): void { + layer.style.transform = mouseToTransform(styleArray[0][index], styleArray[1][index]) + } + for (let i = 4; i >= 0; i--) { + posSet(layersArray[i], i) + } } // eslint-disable-next-line @typescript-eslint/promise-function-async @@ -53,7 +99,7 @@ export const center = (e: HTMLDivElement): void => { } else { y = (window.innerHeight - 31) / 2 + 31 } - e.style.transform = mouseToTransform(x, y) + e.style.transform = mouseToTransform(`${x}px`, `${y}px`) } export const createImgElement = (input: ImageData): HTMLImageElement => { @@ -62,7 +108,11 @@ export const createImgElement = (input: ImageData): HTMLImageElement => { img.setAttribute('alt', '') img.setAttribute('height', input.imgH) img.setAttribute('width', input.imgW) - img.style.display = 'none' + img.style.zIndex = '0' + img.style.opacity = '1' + img.style.backgroundImage = `linear-gradient(15deg, ${input.pColor}, ${input.sColor})` + img.style.backgroundSize = `${input.imgW}px ${input.imgH}px` + img.dataset.status = 'null' return img }