transition from javascript to typescript

assets/ts/overlay.ts

@@ -0,0 +1,85 @@
+import { delay, removeAllEventListeners, layersPosSet } from './utils'
+import { posArray, layers, handleOnMove } from './trackMouse'
+
+// get components of overlay
+const overlay = document.getElementsByClassName('overlay').item(0) as HTMLDivElement
+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
+
+// set cursor text
+function setCursorText(text: string): void {
+  cursor.innerText = text
+}
+
+// overlay cursor event handler
+const overlayCursor = (e: MouseEvent): void => {
+  cursor.style.left = `${e.clientX}px`
+  cursor.style.top = `${e.clientY}px`
+}
+
+function disableListener(): void {
+  window.removeEventListener('mousemove', overlayCursor)
+  closeSection = removeAllEventListeners(closeSection)
+  prevSection = removeAllEventListeners(prevSection)
+  nextSection = removeAllEventListeners(nextSection)
+}
+
+export function overlayEnable(): void {
+  overlay.style.zIndex = '7'
+  setListener()
+}
+
+export function overlayDisable(): void {
+  overlay.style.zIndex = '-1'
+  disableListener()
+}
+
+async function handleCloseClick(): Promise<void> {
+  overlayDisable()
+  layersPosSet(posArray, 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'
+  }
+  window.addEventListener('mousemove', handleOnMove)
+}
+
+// set hover event listener
+function setListener(): void {
+  window.addEventListener('mousemove', overlayCursor, { passive: true })
+  closeSection.addEventListener(
+    'mouseover',
+    () => {
+      setCursorText('CLOSE')
+    },
+    { passive: true }
+  )
+  closeSection.addEventListener(
+    'click',
+    () => {
+      void handleCloseClick()
+    },
+    { passive: true }
+  )
+  prevSection.addEventListener(
+    'mouseover',
+    () => {
+      setCursorText('PREV')
+    },
+    { passive: true }
+  )
+  nextSection.addEventListener(
+    'mouseover',
+    () => {
+      setCursorText('NEXT')
+    },
+    { passive: true }
+  )
+}