From 7f6cfe43663bd2fb0b9642840715136428fbbd6a Mon Sep 17 00:00:00 2001 From: Spedon Date: Sun, 26 Mar 2023 20:52:29 +0800 Subject: [PATCH] add comments --- assets/ts/overlay.ts | 56 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 46 insertions(+), 10 deletions(-) diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 3b4624b..5fc0e48 100644 --- a/assets/ts/overlay.ts +++ b/assets/ts/overlay.ts @@ -35,37 +35,51 @@ const disableListener = (): void => { // enable overlay export const overlayEnable = (): void => { + // show the overlay components overlayCursor.style.zIndex = '100' + // set overlay event listeners setListener() } // disable overlay export const overlayDisable = (): void => { + // hide the overlay components overlayCursor.style.zIndex = '-1' + // set overlay cursor text content to none setCursorText('') + // disable overlay event listeners disableListener() } // handle close click async function handleCloseClick(): Promise { + // disable overlay overlayDisable() const indexesNum = trailingImageIndexes.length + // empty trail images indexes emptyTrailingImageIndexes() for (let i: number = 0; i < indexesNum; i++) { - const e: HTMLImageElement = images[calcImageIndex(globalIndex - i, imagesArrayLen)] - trailingImageIndexes.unshift(calcImageIndex(globalIndex - i, imagesArrayLen)) + // get element from index and store the index + const index: number = calcImageIndex(globalIndex - i, imagesArrayLen) + const e: HTMLImageElement = images[index] + trailingImageIndexes.unshift(index) + e.style.display = 'block' + e.style.zIndex = `${indexesNum - i - 1}` + // set different style for trailing and top image if (i === 0) { e.style.transitionDelay = '0s, 0.7s' e.dataset.status = 'resumeTop' + e.style.transform = transformCache[indexesNum - i - 1] } else { - e.style.transitionDelay = `${1.2 + 0.1 * i - 0.1}s` - e.style.display = 'block' + e.style.transform = transformCache[indexesNum - i - 1] + // e.style.transitionDelay = `${1.2 + 0.1 * i - 0.1}s` + e.style.transitionDelay = '1.5s' e.dataset.status = 'resume' } - e.style.transform = transformCache[indexesNum - i - 1] - e.style.zIndex = `${indexesNum - i - 1}` } + // halt the function while animation is running await delay(1200 + stackDepth * 100 + 100) + // add back enter overlay event listener to top image addEnterOverlayEL(images[calcImageIndex(globalIndex, imagesArrayLen)]) for (let i: number = 0; i < indexesNum; i++) { images[calcImageIndex(globalIndex - i, imagesArrayLen)].dataset.status = 'null' @@ -77,9 +91,12 @@ async function handleCloseClick(): Promise { } const handlePrevClick = (): void => { + // get last displayed image's index const imgIndex: number = calcImageIndex(globalIndex, imagesArrayLen) + // change global index and get current displayed image's index globalIndexDec() - const prevImgIndex = calcImageIndex(globalIndex, imagesArrayLen) + const prevImgIndex: number = calcImageIndex(globalIndex, imagesArrayLen) + // store current displayed image's index pushIndex( prevImgIndex, trailingImageIndexes, @@ -89,17 +106,24 @@ const handlePrevClick = (): void => { true, false ) + // hide last displayed image images[imgIndex].style.display = 'none' + images[imgIndex].dataset.status = 'trail' center(images[prevImgIndex]) images[prevImgIndex].dataset.status = 'top' + // process complete, show the image images[prevImgIndex].style.display = 'block' + // change index display imgIndexSpanUpdate(prevImgIndex + 1, imagesArrayLen) } const handleNextClick = (): void => { + // get last displayed image's index const imgIndex: number = calcImageIndex(globalIndex, imagesArrayLen) + // change global index and get current displayed image's index globalIndexInc() - const nextImgIndex = calcImageIndex(globalIndex, imagesArrayLen) + const nextImgIndex: number = calcImageIndex(globalIndex, imagesArrayLen) + // store current displayed image's index pushIndex( nextImgIndex, trailingImageIndexes, @@ -109,15 +133,23 @@ const handleNextClick = (): void => { false, false ) + // hide last displayed image images[imgIndex].style.display = 'none' + images[imgIndex].dataset.status = 'trail' + // process the image going to display center(images[nextImgIndex]) images[nextImgIndex].dataset.status = 'top' + // process complete, show the image images[nextImgIndex].style.display = 'block' + // change index display imgIndexSpanUpdate(nextImgIndex + 1, imagesArrayLen) } +// change text and position of overlay cursor const handleOverlayMouseMove = (e: MouseEvent): void => { + // set text position setTextPos(e) + // set text content if (e.clientX < oneThird) { setCursorText('PREV') overlayCursor.dataset.status = 'PREV' @@ -129,6 +161,7 @@ const handleOverlayMouseMove = (e: MouseEvent): void => { overlayCursor.dataset.status = 'NEXT' } } + const handleOverlayClick = (): void => { switch (overlayCursor.dataset.status) { case 'PREV': @@ -145,7 +178,9 @@ const handleOverlayClick = (): void => { // set event listener const setListener = (): void => { + // add mouse move event listener (for overlay text cursor) window.addEventListener('mousemove', handleOverlayMouseMove, { passive: true }) + // add close/prev/next click event listener overlayCursor.addEventListener('click', handleOverlayClick, { passive: true }) } @@ -153,6 +188,7 @@ export const vwRefreshInit = (): void => { window.addEventListener( 'resize', () => { + // refresh value of one third oneThird = Math.round(window.innerWidth / 3) // reset footer height const r = document.querySelector(':root') as HTMLStyleElement @@ -162,8 +198,8 @@ export const vwRefreshInit = (): void => { r.style.setProperty('--footer-height', '31px') } // recenter image (only in overlay) - const i: HTMLImageElement = images[calcImageIndex(globalIndex, imagesArrayLen)] - if (i.dataset.status === 'top') center(i) + if (images[calcImageIndex(globalIndex, imagesArrayLen)].dataset.status === 'top') + center(images[calcImageIndex(globalIndex, imagesArrayLen)]) }, { passive: true } )