dev

2026-04-14 10:09:31 -07:00 · 2023-03-20 20:19:37 +08:00
parent c445a5776d
commit 1e74555d86
9 changed files with 111 additions and 156 deletions
--- a/assets/css/_partial/_image.scss
+++ b/assets/css/_partial/_image.scss
@@ -1,16 +1,28 @@
 .image_container {
-  max-height: 55vmin;
-  position: absolute;
-  max-width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
  opacity: 1;
  display: flex;
  align-items: center;
-  top: 0;
-  left: 0;
+  will-change: transform;
+  
+  img {
+    max-height: 55vmin;
+    max-width: 100vw;
+    height: auto;
+    width: auto;
+    object-fit: contain;
+  }
  
  &[data-status='t0'] {
    transition: all 0.5s ease-in-out 1.5s;
    max-height: calc(100vh - var(--footer-height));
+  
+    img {
+      transition: all 0.5s ease-in-out 2s;
+      max-height: calc(100vh - var(--footer-height));
+    }
  }
  
  &[data-status='t1'] {
@@ -34,8 +46,13 @@
  }
  
  &[data-status='r0'] {
-    max-height: 55vmin;
    transition: all 0.5s ease-in-out 1s;
+    opacity: 1;
+  
+    img {
+      transition: all 1s ease-in-out 0s;
+      max-height: 55vmin;
+    }
  }
  
  &[data-status='r1'] {
@@ -58,23 +75,36 @@
    opacity: 1;
  }
  
-  #layer5 {
+  &#layer5 {
    z-index: 5;
  }
  
-  #layer4 {
+  &#layer4 {
    z-index: 4;
  }
  
-  #layer3 {
+  &#layer3 {
    z-index: 3;
  }
  
-  #layer2 {
+  &#layer2 {
    z-index: 2;
  }
  
-  #layer1 {
+  &#layer1 {
    z-index: 1;
  }
 }
+
+.images {
+  
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: contain;
+    max-height: 55vmin;
+    max-width: 100vw;
+    transform-origin: center;
+  }
+}
--- a/assets/ts/desktop.ts
+++ b/assets/ts/desktop.ts
@@ -1,33 +1,31 @@
 import { overlayEnable } from './overlay'
 import {
-  styleCache,
-  FIFO,
-  layersStyleSet,
-  center,
  type position,
  createImgElement,
  calcImageIndex,
-  delay
+  delay,
+  mouseToTransform
 } from './utils'
 import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl'
 import { imgIndexSpanUpdate } from './indexDisp'
 import { imagesArrayLen, imagesArray } from './dataFetch'
 import { preloader } from './imageCache'

-// 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
-]
+const imagesDiv = document.getElementsByClassName('images').item(0) as HTMLDivElement
+
+let imagesDivNodes: NodeListOf<HTMLImageElement>
+
+export const desktopImagesInit = (): void => {
+  for (let i = 0; i < imagesArrayLen; i++) {
+    imagesDiv.appendChild(createImgElement(imagesArray[i]))
+  }
+  imagesDivNodes = imagesDiv.childNodes as NodeListOf<HTMLImageElement>
+}
+
+export const trailingImageIndexes: number[] = []

 // layers position caching
-export const layersStyleArray: string[][] = [
-  ['0px', '0px', '0px', '0px', '0px'],
-  ['0px', '0px', '0px', '0px', '0px']
-]
+export const layersStyleArray: number[][] = [[], []]

 // global index for "activated"
 export let globalIndex: number = 0
@@ -35,13 +33,37 @@ 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, x: number, y: number): void => {
-  const imgElem: HTMLImageElement = createImgElement(imagesArray[index])
-  styleCache(x, y, layersStyleArray)
-  layersStyleSet(layersStyleArray, layers)
-  FIFO(imgElem, layers)
-  last = { x, y }
+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 }
 }

 // Compare the current mouse position with the last activated position
@@ -67,16 +89,10 @@ export const handleOnMove = (e: MouseEvent): void => {
 }

 async function enterOverlay(): Promise<void> {
-  layers[4].style.backgroundImage = ''
-  const topLayerImage = layers[4].lastElementChild as HTMLImageElement
-  topLayerImage.style.transition = ''
  // stop images animation
  window.removeEventListener('mousemove', handleOnMove)
  // set top image
-  center(layers[4])
-  for (let i = 4; i >= 0; i--) {
-    layers[i].dataset.status = `t${4 - i}`
-  }
+  alert('center')
  await delay(2500)
  // Offset previous self increment of global index (by handleOnMove)
  globalIndexDec()
@@ -86,16 +102,8 @@ async function enterOverlay(): Promise<void> {

 // initialization
 export const trackMouseInit = (): void => {
-  window.addEventListener('mousemove', handleOnMove)
-  layers[4].addEventListener(
-    'click',
-    () => {
-      void enterOverlay()
-    },
-    {
-      passive: true
-    }
-  )
+  desktopImagesInit()
+  window.addEventListener('mousemove', handleOnMove, { passive: true })
 }

 export const globalIndexDec = (): void => {
--- a/assets/ts/imageCache.ts
+++ b/assets/ts/imageCache.ts
@@ -4,15 +4,5 @@ import { preloadImage, calcImageIndex } from './utils'
 let lastIndex: number = 0

 export const preloader = (index: number): void => {
-  if (lastIndex === index) {
-    for (let i: number = -2; i <= 1; i++)
-      preloadImage(imagesArray[calcImageIndex(index + i, imagesArrayLen)].url)
-  } else if (lastIndex > index) {
-    for (let i: number = 1; i <= 3; i++)
-      preloadImage(imagesArray[calcImageIndex(index - i, imagesArrayLen)].url)
-  } else {
-    for (let i: number = 1; i <= 3; i++)
-      preloadImage(imagesArray[calcImageIndex(index + i, imagesArrayLen)].url)
-  }
  lastIndex = index
 }
--- a/assets/ts/overlay.ts
+++ b/assets/ts/overlay.ts
@@ -1,20 +1,5 @@
-import {
-  delay,
-  layersStyleSet,
-  center,
-  createImgElement,
-  calcImageIndex,
-  FIFO,
-  mouseToTransform
-} from './utils'
-import {
-  layersStyleArray,
-  layers,
-  handleOnMove,
-  globalIndex,
-  globalIndexDec,
-  globalIndexInc
-} from './desktop'
+import { delay, calcImageIndex, mouseToTransform } from './utils'
+import { handleOnMove, globalIndex, globalIndexDec, globalIndexInc } from './desktop'
 import { imagesArray, imagesArrayLen } from './dataFetch'
 import { imgIndexSpanUpdate } from './indexDisp'

@@ -35,12 +20,7 @@ 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}px`,
-    `${e.clientY}px`,
-    false,
-    true
-  )
+  overlayCursor.style.transform = mouseToTransform(e.clientX, e.clientY, false, true)
 }

 // disable listeners
@@ -67,29 +47,19 @@ export const overlayDisable = (): void => {
 // handle close click
 async function handleCloseClick(): Promise<void> {
  overlayDisable()
-  layersStyleSet(layersStyleArray, layers)
-  for (let i: number = 4; i >= 0; i--) {
-    layers[i].dataset.status = `r${4 - i}`
-  }
  await delay(2500)
-  for (let i: number = 4; i >= 0; i--) {
-    layers[i].dataset.status = 'null'
-  }
-  layersStyleSet(layersStyleArray, layers)
  window.addEventListener('mousemove', handleOnMove)
 }

 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)
 }

@@ -139,7 +109,6 @@ 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 }
  )
--- 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[] = [100, 40, 18, 14, 9, 5]
+export const thresholdSensitivityArray: number[] = [200, 40, 18, 14, 9, 5]
 export let thresholdIndex: number = 2

 // update inner text of threshold display element
--- a/assets/ts/utils.ts
+++ b/assets/ts/utils.ts
@@ -18,57 +18,20 @@ 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[]
-): 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))
-    }
-  }
-  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: string, y: string): string => {
-  return `translate(calc(${x} - 50%), calc(${y} - 50%))`
-}
-
-// 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)
-  }
+export const mouseToTransform = (
+  x: number,
+  y: number,
+  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' : ''})`
 }

 // eslint-disable-next-line @typescript-eslint/promise-function-async
@@ -90,7 +53,7 @@ export const center = (e: HTMLDivElement): void => {
  } else {
    y = (window.innerHeight - 31) / 2 + 31
  }
-  e.style.transform = mouseToTransform(`${x}px`, `${y}px`)
+  e.style.transform = mouseToTransform(x, y)
 }

 export const createImgElement = (input: ImageData): HTMLImageElement => {
@@ -99,9 +62,7 @@ export const createImgElement = (input: ImageData): HTMLImageElement => {
  img.setAttribute('alt', '')
  img.setAttribute('height', input.imgH)
  img.setAttribute('width', input.imgW)
-  img.className = 'innerImg'
-  img.style.background = `linear-gradient(15deg, ${input.pColor}, ${input.sColor})`
-  img.style.height = 'auto'
+  img.style.display = 'none'
  return img
 }

--- a/layouts/index.html
+++ b/layouts/index.html
@@ -24,11 +24,12 @@
      {{ if gt (len $colors) 1 }}
        {{ $sColor = index $colors 1 }}
      {{ end }}
+      {{ $resize := .Resize "x2000 webp Lanczos q70" }}
      {{ $.Scratch.Add "img" (dict
          "index" (string $index)
-          "url" (string .RelPermalink)
-          "imgH" (string .Height)
-          "imgW" (string .Width)
+          "url" (string $resize.RelPermalink)
+          "imgH" (string $resize.Height)
+          "imgW" (string $resize.Width)
          "pColor" (string $pColor)
          "sColor" (string $sColor)) }}
    {{ end }}
--- a/layouts/partials/desktop_wrapper.html
+++ b/layouts/partials/desktop_wrapper.html
@@ -1,8 +1,4 @@
 <div class='desktopWrapper'>
  {{ partial "overlay.html" . }}
-  <div class="image_container" id="layer5" data-status="null"></div>
-  <div class="image_container" id="layer4" data-status="null"></div>
-  <div class="image_container" id="layer3" data-status="null"></div>
-  <div class="image_container" id="layer2" data-status="null"></div>
-  <div class="image_container" id="layer1" data-status="null"></div>
+  <div class='images'></div>
 </div>
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
    "build": "hugo -v --source=exampleSite --themesDir ../.. --gc",
    "build:preview": "hugo -v --source=exampleSite --themesDir ../.. -D --gc",
-    "server": "hugo server --source=exampleSite -D --disableFastRender --watch --verbose",
-    "server:production": "hugo server --source=exampleSite --disableFastRender -e production --watch --verbose"
+    "server": "hugo server --source=exampleSite --gc -D --disableFastRender --watch --verbose",
+    "server:production": "hugo server --source=exampleSite --gc --disableFastRender -e production --watch --verbose"
  },
  "repository": {
    "type": "git",