feat(container.scss): add container styles for fixed position and scrolling behavior

feat(container.ts): create container module to handle scrollable behavior and add/remove disableScroll class

fix(customCursor.ts): update append target for cursor element to use container instead of main

fix(stage.ts): update append target for stage element to use container instead of main

fix(stageNav.ts): update append target for navOverlay element to use container instead of main

feat(main.ts): initialize container module and conditionally initialize stage and stageNav modules based on device type

fix(nav.ts): update references to state module functions to use state.get() instead of getState()

assets/ts/desktop/customCursor.ts

@@ -1,4 +1,5 @@
 import { active } from './stage'
+import { container } from '../container'
 
 /**
  * variables
@@ -32,7 +33,7 @@ export function initCustomCursor(): void {
   // append cursor inner to cursor
   cursor.append(cursorInner)
   // append cursor to main
-  document.getElementById('main')!.append(cursor)
+  container.append(cursor)
   // bind mousemove event to window
   window.addEventListener('mousemove', onMouse)
   // add active callback

assets/ts/desktop/stage.ts

@@ -1,7 +1,8 @@
-import { incIndex, getState } from '../state'
+import { incIndex, state } from '../state'
 import { gsap, Power3 } from 'gsap'
 import { ImageJSON } from '../resources'
 import { Watchable } from '../utils'
+import { container } from '../container'
 
 /**
  * types
@@ -29,7 +30,7 @@ function getElTrail(): HTMLImageElement[] {
 }
 
 function getElTrailCurrent(): HTMLImageElement[] {
-  return getElTrail().slice(-getState().trailLength)
+  return getElTrail().slice(-state.get().trailLength)
 }
 
 function getElTrailInactive(): HTMLImageElement[] {
@@ -52,12 +53,12 @@ function onMouse(e: MouseEvent): void {
   const cord = { x: e.clientX, y: e.clientY }
   const travelDist = Math.hypot(cord.x - last.x, cord.y - last.y)
 
-  if (travelDist > getState().threshold) {
+  if (travelDist > state.get().threshold) {
     last = cord
     incIndex()
 
-    const newHist = { i: getState().index, ...cord }
-    cordHist.set([...cordHist.get(), newHist].slice(-getState().length))
+    const newHist = { i: state.get().index, ...cord }
+    cordHist.set([...cordHist.get(), newHist].slice(-state.get().length))
   }
 }
 
@@ -70,7 +71,7 @@ function setPositions(): void {
     x: (i: number) => cordHist.get()[i].x - window.innerWidth / 2,
     y: (i: number) => cordHist.get()[i].y - window.innerHeight / 2,
     opacity: (i: number) =>
-      i + 1 + getState().trailLength <= cordHist.get().length ? 0 : 1,
+      i + 1 + state.get().trailLength <= cordHist.get().length ? 0 : 1,
     zIndex: (i: number) => i,
     scale: 0.6
   })
@@ -192,5 +193,5 @@ function createStage(ijs: ImageJSON[]): void {
     e.alt = 'image'
     stage.append(e)
   }
-  document.getElementById('main')!.append(stage)
+  container.append(stage)
 }

assets/ts/desktop/stageNav.ts

@@ -1,7 +1,8 @@
 import { setCustomCursor } from './customCursor'
-import { decIndex, incIndex, getState } from '../state'
+import { decIndex, incIndex, state } from '../state'
 import { increment, decrement } from '../utils'
 import { cordHist, isOpen, isAnimating, active, minimizeImage } from './stage'
+import { container } from '../container'
 
 /**
  * types
@@ -71,7 +72,7 @@ export function initStageNav() {
       navOverlay.classList.remove('active')
     }
   })
-  document.getElementById('main')!.append(navOverlay)
+  container.append(navOverlay)
   window.addEventListener('keydown', handleKey)
 }
 
@@ -83,7 +84,7 @@ function nextImage() {
   if (isAnimating.get()) return
   cordHist.set(
     cordHist.get().map((item) => {
-      return { ...item, i: increment(item.i, getState().length) }
+      return { ...item, i: increment(item.i, state.get().length) }
     })
   )
 
@@ -94,7 +95,7 @@ function prevImage() {
   if (isAnimating.get()) return
   cordHist.set(
     cordHist.get().map((item) => {
-      return { ...item, i: decrement(item.i, getState().length) }
+      return { ...item, i: decrement(item.i, state.get().length) }
     })
   )