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/scss/_partial/_container.scss

@@ -0,0 +1,19 @@
+.container {
+  position: fixed;
+  top: 0;
+  z-index: 0;
+
+  width: 100vw;
+  height: var(--window-height);
+
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background: white;
+
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: none;
+}
+
+.disableScroll {
+  pointer-events: none;
+}

assets/ts/container.ts

@@ -0,0 +1,14 @@
+import { scrollable } from './mobile/scroll'
+
+export let container: HTMLDivElement
+
+export function initContainer(): void {
+  container = document.getElementsByClassName('container').item(0) as HTMLDivElement
+  scrollable.addWatcher(() => {
+    if (scrollable.get()) {
+      container.classList.remove('disableScroll')
+    } else {
+      container.classList.add('disableScroll')
+    }
+  })
+}

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 }
+    const newHist = { i: state.get().index, ...cord }
-    cordHist.set([...cordHist.get(), newHist].slice(-getState().length))
+    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) }
     })
   )
 

assets/ts/main.ts

@@ -1,13 +1,25 @@
-import { initResources } from './resources'
+import { initContainer } from './container'
-import { initState } from './state'
 import { initCustomCursor } from './desktop/customCursor'
-import { initNav } from './nav'
 import { initStage } from './desktop/stage'
 import { initStageNav } from './desktop/stageNav'
+import { initCollection } from './mobile/collection'
+import { initGallery } from './mobile/gallery'
+import { initNav } from './nav'
+import { initResources } from './resources'
+import { initState } from './state'
+import { isMobile } from './utils'
 
+initContainer()
 initCustomCursor()
 const ijs = initResources()
 initState(ijs.length)
-initStage(ijs)
+
-initStageNav()
 initNav()
+
+if (!isMobile()) {
+  initStage(ijs)
+  initStageNav()
+} else {
+  initCollection(ijs)
+  initGallery(ijs)
+}

assets/ts/nav.ts

@@ -1,4 +1,4 @@
-import { getState, incThreshold, decThreshold } from './state'
+import { decThreshold, incThreshold, state } from './state'
 import { expand } from './utils'
 
 /**
@@ -48,15 +48,15 @@ export function initNav() {
 // helper
 
 export function updateThresholdText(): void {
-  const thresholdValue: string = expand(getState().threshold)
+  const thresholdValue: string = expand(state.get().threshold)
   thresholdDispNums.forEach((e: HTMLSpanElement, i: number) => {
     e.innerText = thresholdValue[i]
   })
 }
 
 export function updateIndexText(): void {
-  const indexValue: string = expand(getState().index + 1)
+  const indexValue: string = expand(state.get().index + 1)
-  const indexLength: string = expand(getState().length)
+  const indexLength: string = expand(state.get().length)
   indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
     if (i < 4) {
       e.innerText = indexValue[i]

layouts/index.html

@@ -37,6 +37,6 @@
     <script id="imagesSource" type="application/json">{{ $.Scratch.Get "img" | jsonify | safeJS }}</script>
       {{ end }}
     </div>
-    {{ partial "nav.html" . }}
+    <div class="container">{{ partial "nav.html" . }}</div>
   </body>
 </html>