update overlay design

assets/css/_partial/_overlay.scss

@@ -1,38 +1,15 @@
-.overlay {
+.overlay_cursor {
-  background-color: transparent;
+  position: fixed;
-  position: absolute;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
-  z-index: -1;
+  mix-blend-mode: difference;
-  display: grid;
+  font-size: 19px;
+  box-sizing: border-box;
   cursor: none;
-  grid-template-columns: repeat(3, 1fr);
+  user-select: none;
   
-  
+  .cursor_innerText {
-  section {
+    color: white;
-    width: 100%;
+    transform: translate3d(-50%, -50%, 0);
-    height: 100%;
-  }
-  
-  .overlay_cursor {
-    position: absolute;
-    translate: -50% -110%;
-    font-size: 24px;
-    letter-spacing: 2px;
-    font-weight: bold;
-    color: greenyellow;
-    -webkit-text-stroke: 1px #fff;
-  }
-  
-  .prev_section:hover > .overlay_cursor::after {
-    content: 'PREV';
-  }
-  .close_section:hover > .overlay_cursor::after {
-    content: 'CLOSE';
-  }
-  .next_section:hover > .overlay_cursor::after {
-    content: 'NEXT';
   }
 }

assets/ts/overlay.ts

@@ -1,11 +1,11 @@
 import {
   delay,
-  removeAllEventListeners,
   layersStyleSet,
   center,
   createImgElement,
   calcImageIndex,
-  FIFO
+  FIFO,
+  mouseToTransform
 } from './utils'
 import {
   layersStyleArray,
@@ -19,42 +19,45 @@ import { imagesArray, imagesArrayLen } from './dataFetch'
 import { imgIndexSpanUpdate } from './indexDisp'
 
 // get components of overlay
-const overlay = document.getElementsByClassName('overlay').item(0) as HTMLDivElement
+const overlayCursor = document
-let closeSection = document.getElementsByClassName('close_section').item(0) as Node
-let prevSection = document.getElementsByClassName('prev_section').item(0) as Node
-let nextSection = document.getElementsByClassName('next_section').item(0) as Node
-const cursor = document
   .getElementsByClassName('overlay_cursor')
   .item(0) as HTMLDivElement
+const innerContent = document
+  .getElementsByClassName('cursor_innerText')
+  .item(0) as HTMLDivElement
 
 // set cursor text
 const setCursorText = (text: string): void => {
-  cursor.innerText = text
+  innerContent.innerText = text
 }
 
 // overlay cursor event handler
-const overlayCursor = (e: MouseEvent): void => {
+const setTextPos = (e: MouseEvent): void => {
-  cursor.style.left = `${e.clientX}px`
+  // overlayCursor.style.left = `${e.clientX}px`
-  cursor.style.top = `${e.clientY}px`
+  // overlayCursor.style.top = `${e.clientY}px`
+  overlayCursor.style.transform = mouseToTransform(
+    `${e.clientX}px`,
+    `${e.clientY}px`,
+    false,
+    true
+  )
 }
 
 // disable listeners
 const disableListener = (): void => {
-  window.removeEventListener('mousemove', overlayCursor)
+  window.removeEventListener('mousemove', handleOverlayMouseMove)
-  closeSection = removeAllEventListeners(closeSection)
+  overlayCursor.removeEventListener('click', handleOverlayClick)
-  prevSection = removeAllEventListeners(prevSection)
-  nextSection = removeAllEventListeners(nextSection)
 }
 
 // enable overlay
 export const overlayEnable = (): void => {
-  overlay.style.zIndex = '7'
+  overlayCursor.style.zIndex = '7'
   setListener()
 }
 
 // disable overlay
 export const overlayDisable = (): void => {
-  overlay.style.zIndex = '-1'
+  overlayCursor.style.zIndex = '-1'
   setCursorText('')
   disableListener()
   // Add back previous self increment of global index (by handleOnMove)
@@ -90,51 +93,38 @@ const handleNextClick = (): void => {
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
+const handleOverlayMouseMove = (e: MouseEvent): void => {
+  setTextPos(e)
+  const oneThird: number = Math.round(window.innerWidth / 3)
+  if (e.clientX < oneThird) {
+    setCursorText('PREV')
+    overlayCursor.dataset.status = 'PREV'
+  } else if (e.clientX < oneThird * 2) {
+    setCursorText('CLOSE')
+    overlayCursor.dataset.status = 'CLOSE'
+  } else {
+    setCursorText('NEXT')
+    overlayCursor.dataset.status = 'NEXT'
+  }
+}
+const handleOverlayClick = (): void => {
+  switch (overlayCursor.dataset.status) {
+    case 'PREV':
+      handlePrevClick()
+      break
+    case 'CLOSE':
+      void handleCloseClick()
+      break
+    case 'NEXT':
+      handleNextClick()
+      break
+  }
+}
+
 // set event listener
 const setListener = (): void => {
-  window.addEventListener('mousemove', overlayCursor, { passive: true })
+  window.addEventListener('mousemove', handleOverlayMouseMove, { passive: true })
-  closeSection.addEventListener(
+  overlayCursor.addEventListener('click', handleOverlayClick, { passive: true })
-    'mouseover',
-    () => {
-      setCursorText('CLOSE')
-    },
-    { passive: true }
-  )
-  closeSection.addEventListener(
-    'click',
-    () => {
-      void handleCloseClick()
-    },
-    { passive: true }
-  )
-  prevSection.addEventListener(
-    'mouseover',
-    () => {
-      setCursorText('PREV')
-    },
-    { passive: true }
-  )
-  prevSection.addEventListener(
-    'click',
-    () => {
-      handlePrevClick()
-    },
-    { passive: true }
-  )
-  nextSection.addEventListener(
-    'mouseover',
-    () => {
-      setCursorText('NEXT')
-    },
-    { passive: true }
-  )
-  nextSection.addEventListener(
-    'click',
-    () => {
-      handleNextClick()
-    },
-    { passive: true }
-  )
 }
 
 export const vwRefreshInit = (): void => {

layouts/partials/overlay.html

@@ -1,6 +1,3 @@
-<div class="overlay">
+<div class="overlay_cursor" data-status='null'>
-  <section class="prev_section"></section>
+    <div class="cursor_innerText"></div>
-  <section class="close_section"></section>
-  <section class="next_section"></section>
-  <div class="overlay_cursor"></div>
 </div>