Merge branch 'dev' into main

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

@@ -0,0 +1,47 @@
+import { active } from './stage'
+import { container } from '../container'
+
+/**
+ * variables
+ */
+
+const cursor = document.createElement('div')
+const cursorInner = document.createElement('div')
+
+/**
+ * main functions
+ */
+
+function onMouse(e: MouseEvent) {
+  const x = e.clientX
+  const y = e.clientY
+  cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`
+}
+
+export function setCustomCursor(text: string): void {
+  cursorInner.innerText = text
+}
+
+/**
+ * init
+ */
+export function initCustomCursor(): void {
+  // cursor class name
+  cursor.className = 'cursor'
+  // cursor inner class name
+  cursorInner.className = 'cursorInner'
+  // append cursor inner to cursor
+  cursor.append(cursorInner)
+  // append cursor to main
+  container.append(cursor)
+  // bind mousemove event to window
+  window.addEventListener('mousemove', onMouse)
+  // add active callback
+  active.addWatcher(() => {
+    if (active.get()) {
+      cursor.classList.add('active')
+    } else {
+      cursor.classList.remove('active')
+    }
+  })
+}

assets/ts/desktop/stage.ts

@@ -0,0 +1,197 @@
+import { incIndex, state } from '../state'
+import { gsap, Power3 } from 'gsap'
+import { ImageJSON } from '../resources'
+import { Watchable } from '../utils'
+import { container } from '../container'
+
+/**
+ * types
+ */
+
+export type HistoryItem = { i: number; x: number; y: number }
+
+/**
+ * variables
+ */
+
+let imgs: HTMLImageElement[] = []
+let last = { x: 0, y: 0 }
+export const cordHist = new Watchable<HistoryItem[]>([])
+export const isOpen = new Watchable<boolean>(false)
+export const isAnimating = new Watchable<boolean>(false)
+export const active = new Watchable<boolean>(false)
+
+/**
+ * getter
+ */
+
+function getElTrail(): HTMLImageElement[] {
+  return cordHist.get().map((item) => imgs[item.i])
+}
+
+function getElTrailCurrent(): HTMLImageElement[] {
+  return getElTrail().slice(-state.get().trailLength)
+}
+
+function getElTrailInactive(): HTMLImageElement[] {
+  const elTrailCurrent = getElTrailCurrent()
+  return elTrailCurrent.slice(0, elTrailCurrent.length - 1)
+}
+
+function getElCurrent(): HTMLImageElement {
+  const elTrail = getElTrail()
+  return elTrail[elTrail.length - 1]
+}
+
+/**
+ * main functions
+ */
+
+// on mouse
+function onMouse(e: MouseEvent): void {
+  if (isOpen.get() || isAnimating.get()) return
+  const cord = { x: e.clientX, y: e.clientY }
+  const travelDist = Math.hypot(cord.x - last.x, cord.y - last.y)
+
+  if (travelDist > state.get().threshold) {
+    last = cord
+    incIndex()
+
+    const newHist = { i: state.get().index, ...cord }
+    cordHist.set([...cordHist.get(), newHist].slice(-state.get().length))
+  }
+}
+
+// set image position with gsap
+function setPositions(): void {
+  const elTrail = getElTrail()
+  if (!elTrail.length) return
+
+  gsap.set(elTrail, {
+    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 + state.get().trailLength <= cordHist.get().length ? 0 : 1,
+    zIndex: (i: number) => i,
+    scale: 0.6
+  })
+
+  if (isOpen.get()) {
+    gsap.set(imgs, { opacity: 0 })
+    gsap.set(getElCurrent(), { opacity: 1, x: 0, y: 0, scale: 1 })
+  }
+}
+
+// open image into navigation
+function expandImage(): void {
+  if (isAnimating.get()) return
+
+  isOpen.set(true)
+  isAnimating.set(true)
+
+  const tl = gsap.timeline()
+  // move down and hide trail inactive
+  tl.to(getElTrailInactive(), {
+    y: '+=20',
+    ease: Power3.easeIn,
+    stagger: 0.075,
+    duration: 0.3,
+    delay: 0.1,
+    opacity: 0
+  })
+  // current move to center
+  tl.to(getElCurrent(), {
+    x: 0,
+    y: 0,
+    ease: Power3.easeInOut,
+    duration: 0.7,
+    delay: 0.3
+  })
+  // current expand
+  tl.to(getElCurrent(), {
+    delay: 0.1,
+    scale: 1,
+    ease: Power3.easeInOut
+  })
+  // finished
+  tl.then(() => {
+    isAnimating.set(false)
+  })
+}
+
+// close navigation and back to stage
+export function minimizeImage(): void {
+  if (isAnimating.get()) return
+
+  isOpen.set(false)
+  isAnimating.set(true)
+
+  const tl = gsap.timeline()
+  // shrink current
+  tl.to(getElCurrent(), {
+    scale: 0.6,
+    duration: 0.6,
+    ease: Power3.easeInOut
+  })
+  // move current to original position
+  tl.to(getElCurrent(), {
+    delay: 0.3,
+    duration: 0.7,
+    ease: Power3.easeInOut,
+    x: cordHist.get()[cordHist.get().length - 1].x - window.innerWidth / 2,
+    y: cordHist.get()[cordHist.get().length - 1].y - window.innerHeight / 2
+  })
+  // show trail inactive
+  tl.to(getElTrailInactive(), {
+    y: '-=20',
+    ease: Power3.easeOut,
+    stagger: -0.1,
+    duration: 0.3,
+    opacity: 1
+  })
+  // finished
+  tl.then(() => {
+    isAnimating.set(false)
+  })
+}
+
+/**
+ * init
+ */
+
+export function initStage(ijs: ImageJSON[]): void {
+  // create stage element
+  createStage(ijs)
+  // get stage
+  const stage = document.getElementsByClassName('stage').item(0) as HTMLDivElement
+  // get image elements
+  imgs = Array.from(stage.getElementsByTagName('img'))
+  // event listeners
+  stage.addEventListener('click', () => expandImage())
+  stage.addEventListener('keydown', () => expandImage())
+  window.addEventListener('mousemove', onMouse)
+  // watchers
+  isOpen.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
+  isAnimating.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
+  cordHist.addWatcher(() => setPositions())
+}
+
+/**
+ * hepler
+ */
+
+function createStage(ijs: ImageJSON[]): void {
+  // create container for images
+  const stage: HTMLDivElement = document.createElement('div')
+  stage.className = 'stage'
+  // append images to container
+  for (let ij of ijs) {
+    const e = document.createElement('img')
+    e.src = ij.url
+    e.height = ij.imgH
+    e.width = ij.imgW
+    e.alt = 'image'
+    stage.append(e)
+  }
+  container.append(stage)
+}

assets/ts/desktop/stageNav.ts

@@ -0,0 +1,103 @@
+import { setCustomCursor } from './customCursor'
+import { decIndex, incIndex, state } from '../state'
+import { increment, decrement } from '../utils'
+import { cordHist, isOpen, isAnimating, active, minimizeImage } from './stage'
+import { container } from '../container'
+
+/**
+ * types
+ */
+
+type NavItem = (typeof navItems)[number]
+
+/**
+ * variables
+ */
+
+const navItems = ['prev', 'close', 'next'] as const
+
+/**
+ * main functions
+ */
+
+function handleClick(type: NavItem) {
+  switch (type) {
+    case 'prev':
+      prevImage()
+      break
+    case 'close':
+      minimizeImage()
+      break
+    case 'next':
+      nextImage()
+      break
+  }
+}
+
+function handleKey(e: KeyboardEvent) {
+  if (isOpen.get() || isAnimating.get()) return
+  switch (e.key) {
+    case 'ArrowLeft':
+      prevImage()
+      break
+    case 'Escape':
+      minimizeImage()
+      break
+    case 'ArrowRight':
+      nextImage()
+      break
+  }
+}
+
+/**
+ * init
+ */
+
+export function initStageNav() {
+  const navOverlay = document.createElement('div')
+  navOverlay.className = 'navOverlay'
+  for (let navItem of navItems) {
+    const overlay = document.createElement('div')
+    overlay.className = 'overlay'
+    overlay.addEventListener('click', () => handleClick(navItem))
+    overlay.addEventListener('keydown', () => handleClick(navItem))
+    overlay.addEventListener('mouseover', () => setCustomCursor(navItem))
+    overlay.addEventListener('focus', () => setCustomCursor(navItem))
+    navOverlay.append(overlay)
+  }
+  active.addWatcher(() => {
+    if (active.get()) {
+      navOverlay.classList.add('active')
+    } else {
+      navOverlay.classList.remove('active')
+    }
+  })
+  container.append(navOverlay)
+  window.addEventListener('keydown', handleKey)
+}
+
+/**
+ * hepler
+ */
+
+function nextImage() {
+  if (isAnimating.get()) return
+  cordHist.set(
+    cordHist.get().map((item) => {
+      return { ...item, i: increment(item.i, state.get().length) }
+    })
+  )
+
+  incIndex()
+}
+
+function prevImage() {
+  if (isAnimating.get()) return
+  cordHist.set(
+    cordHist.get().map((item) => {
+      return { ...item, i: decrement(item.i, state.get().length) }
+    })
+  )
+
+  decIndex()
+}

assets/ts/main.ts

@@ -1,13 +1,25 @@
+import { initContainer } from './container'
+import { initCustomCursor } from './desktop/customCursor'
+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 { initCustomCursor } from './customCursor'
-import { initNav } from './nav'
-import { initStage } from './stage'
-import { initStageNav } from './stageNav'
+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/mobile/collection.ts

@@ -0,0 +1,73 @@
+import { container } from '../container'
+import { ImageJSON } from '../resources'
+import { setIndex } from '../state'
+import { getRandom, Watchable } from '../utils'
+import { slideUp } from './gallery'
+
+/**
+ * variables
+ */
+
+export let imgs: HTMLImageElement[] = []
+export const mounted = new Watchable<boolean>(false)
+
+/**
+ * main functions
+ */
+
+function handleClick(i: number): void {
+  setIndex(i)
+  slideUp()
+}
+
+/**
+ * init
+ */
+
+export function initCollection(ijs: ImageJSON[]): void {
+  createCollection(ijs)
+  // get container
+  const container = document
+    .getElementsByClassName('collection')
+    .item(0) as HTMLDivElement
+  // add watcher
+  mounted.addWatcher(() => {
+    if (mounted.get()) {
+      container.classList.remove('hidden')
+    } else {
+      container.classList.add('hidden')
+    }
+  })
+  // get image elements
+  imgs = Array.from(container.getElementsByTagName('img'))
+  // add event listeners
+  imgs.forEach((img, i) => {
+    img.addEventListener('click', () => handleClick(i))
+    img.addEventListener('keydown', () => handleClick(i))
+  })
+}
+
+/**
+ * helper
+ */
+
+function createCollection(ijs: ImageJSON[]): void {
+  // create container for images
+  const collection: HTMLDivElement = document.createElement('div')
+  collection.className = 'collection'
+  // append images to container
+  for (let [i, ij] of ijs.entries()) {
+    // random x and y
+    const x = i !== 0 ? getRandom(-25, 25) : 0
+    const y = i !== 0 ? getRandom(-30, 30) : 0
+    // element
+    const e = document.createElement('img')
+    e.src = ij.url
+    e.height = ij.imgH
+    e.width = ij.imgW
+    e.alt = 'image'
+    e.style.transform = `translate3d(${x}%, ${y - 50}%, 0)`
+    collection.append(e)
+  }
+  container.append(collection)
+}

assets/ts/mobile/gallery.ts

@@ -0,0 +1,198 @@
+import { Power3, gsap } from 'gsap'
+import Swiper from 'swiper'
+import { container } from '../container'
+import { ImageJSON } from '../resources'
+import { setIndex, state } from '../state'
+import { Watchable, expand } from '../utils'
+import { imgs, mounted } from './collection'
+import { scrollable } from './scroll'
+
+/**
+ * variables
+ */
+
+let swiperNode: HTMLDivElement
+let gallery: HTMLDivElement
+let curtain: HTMLDivElement
+let swiper: Swiper
+const isAnimating = new Watchable<boolean>(false)
+let lastIndex = -1
+let indexDispNums: HTMLSpanElement[] = []
+
+/**
+ * main functions
+ */
+
+export function slideUp(): void {
+  if (isAnimating.get()) return
+  isAnimating.set(true)
+
+  gsap.to(curtain, {
+    opacity: 1,
+    duration: 1
+  })
+
+  gsap.to(gallery, {
+    y: 0,
+    ease: Power3.easeInOut,
+    duration: 1,
+    delay: 0.4
+  })
+
+  setTimeout(() => {
+    scrollable.set(false)
+    isAnimating.set(false)
+  }, 1200)
+}
+
+function slideDown(): void {
+  scrollable.set(true)
+  scrollToActive()
+
+  gsap.to(gallery, {
+    y: '100%',
+    ease: Power3.easeInOut,
+    duration: 1
+  })
+
+  gsap.to(curtain, {
+    opacity: 0,
+    duration: 1.2,
+    delay: 0.4
+  })
+}
+
+/**
+ * init
+ */
+
+export function initGallery(ijs: ImageJSON[]): void {
+  // create gallery
+  createGallery(ijs)
+  // get elements
+  indexDispNums = Array.from(
+    document.getElementsByClassName('nav').item(0)!.getElementsByClassName('num')
+  ) as HTMLSpanElement[]
+  swiperNode = document.getElementsByClassName('galleryInner').item(0) as HTMLDivElement
+  gallery = document.getElementsByClassName('gallery').item(0) as HTMLDivElement
+  curtain = document.getElementsByClassName('curtain').item(0) as HTMLDivElement
+  // state watcher
+  state.addWatcher(() => {
+    const s = state.get()
+    // change slide only when index is changed
+    if (s.index === lastIndex) return
+    changeSlide(s.index)
+    updateIndexText()
+    lastIndex = s.index
+  })
+  // mounted watcher
+  mounted.addWatcher(() => {
+    if (!mounted.get()) return
+    scrollable.set(true)
+    swiper = new Swiper(swiperNode, { spaceBetween: 20 })
+    swiper.on('slideChange', ({ realIndex }) => {
+      setIndex(realIndex)
+    })
+  })
+
+  // mounted
+  mounted.set(true)
+}
+
+/**
+ * helper
+ */
+
+function changeSlide(slide: number): void {
+  console.log(slide)
+  swiper?.slideTo(slide, 0)
+}
+
+function scrollToActive(): void {
+  imgs[state.get().index].scrollIntoView({
+    block: 'center',
+    behavior: 'auto'
+  })
+}
+
+function updateIndexText(): void {
+  const indexValue: string = expand(state.get().index + 1)
+  const indexLength: string = expand(state.get().length)
+  indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
+    if (i < 4) {
+      e.innerText = indexValue[i]
+    } else {
+      e.innerText = indexLength[i - 4]
+    }
+  })
+}
+
+function createGallery(ijs: ImageJSON[]): void {
+  /**
+   * gallery
+   * |- galleryInner
+   *    |- swiper-wrapper
+   *       |- swiper-slide
+   *          |- img
+   *       |- swiper-slide
+   *          |- img
+   *       |- ...
+   * |- nav
+   *    |- index
+   *    |- close
+   */
+  // swiper wrapper
+  const _swiperWrapper = document.createElement('div')
+  _swiperWrapper.className = 'swiper-wrapper'
+  // swiper slide
+  for (let ij of ijs) {
+    const _swiperSlide = document.createElement('div')
+    _swiperSlide.className = 'swiper-slide'
+    // img
+    const e = document.createElement('img')
+    e.src = ij.url
+    e.alt = 'image'
+    // append
+    _swiperSlide.append(e)
+    _swiperWrapper.append(_swiperSlide)
+  }
+  // swiper node
+  const _swiperNode = document.createElement('div')
+  _swiperNode.className = 'galleryInner'
+  _swiperNode.append(_swiperWrapper)
+  // index
+  const _index = document.createElement('div')
+  _index.insertAdjacentHTML(
+    'afterbegin',
+    `<span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>
+    <span>/</span>
+    <span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>`
+  )
+  // close
+  const _close = document.createElement('div')
+  _close.innerText = 'Close'
+  _close.addEventListener('click', () => slideDown())
+  _close.addEventListener('keydown', () => slideDown())
+  // nav
+  const _navDiv = document.createElement('div')
+  _navDiv.className = 'nav'
+  _navDiv.append(_index, _close)
+  // gallery
+  const _gallery = document.createElement('div')
+  _gallery.className = 'gallery'
+  _gallery.append(_swiperNode)
+  _gallery.append(_navDiv)
+
+  /**
+   * curtain
+   */
+  const _curtain = document.createElement('div')
+  _curtain.className = 'curtain'
+
+  /**
+   * container
+   * |- gallery
+   * |- curtain
+   */
+  container.append(_gallery, _curtain)
+}

assets/ts/mobile/scroll.ts

@@ -0,0 +1,3 @@
+import { Watchable } from '../utils'
+
+export const scrollable = new Watchable<boolean>(true)

assets/ts/nav.ts

@@ -1,6 +1,10 @@
-import { getState, incThreshold, decThreshold } from './state'
+import { decThreshold, incThreshold, state } from './state'
 import { expand } from './utils'
 
+/**
+ * variables
+ */
+
 // threshold div
 const thresholdDiv = document
   .getElementsByClassName('threshold')
@@ -27,6 +31,10 @@ const indexDispNums = Array.from(
   indexDiv.getElementsByClassName('num')
 ) as HTMLSpanElement[]
 
+/**
+ * init
+ */
+
 export function initNav() {
   // init threshold text
   updateThresholdText()
@@ -40,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 indexLength: string = expand(getState().length)
+  const indexValue: string = expand(state.get().index + 1)
+  const indexLength: string = expand(state.get().length)
   indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
     if (i < 4) {
       e.innerText = indexValue[i]

assets/ts/state.ts

@@ -1,5 +1,5 @@
-import { increment, decrement } from './utils'
 import { updateIndexText, updateThresholdText } from './nav'
+import { Watchable, decrement, increment } from './utils'
 
 const thresholds = [
   { threshold: 20, trailLength: 20 },
@@ -18,43 +18,46 @@ const defaultState = {
 
 export type State = typeof defaultState
 
-let state = defaultState
-
-export function getState(): State {
-  // return a copy of state
-  return Object.create(
-    Object.getPrototypeOf(state),
-    Object.getOwnPropertyDescriptors(state)
-  )
-}
+export const state = new Watchable<State>(defaultState)
 
 export function initState(length: number): void {
-  state.length = length
+  const s = state.get()
+  s.length = length
+  state.set(s)
+  state.addWatcher(() => {
+    updateIndexText()
+    updateThresholdText()
+  })
 }
 
 export function setIndex(index: number): void {
-  state.index = index
-  updateIndexText()
+  const s = state.get()
+  s.index = index
+  state.set(s)
 }
 
 export function incIndex(): void {
-  state.index = increment(state.index, state.length)
-  updateIndexText()
+  const s = state.get()
+  s.index = increment(s.index, s.length)
+  state.set(s)
 }
 
 export function decIndex(): void {
-  state.index = decrement(state.index, state.length)
-  updateIndexText()
+  const s = state.get()
+  s.index = decrement(s.index, s.length)
+  state.set(s)
 }
 
 export function incThreshold(): void {
-  state = updateThreshold(state, 1)
-  updateThresholdText()
+  let s = state.get()
+  s = updateThreshold(s, 1)
+  state.set(s)
 }
 
 export function decThreshold(): void {
-  state = updateThreshold(state, -1)
-  updateThresholdText()
+  let s = state.get()
+  s = updateThreshold(s, 1)
+  state.set(s)
 }
 
 // helper

assets/ts/utils.ts

@@ -1,3 +1,7 @@
+/**
+ * custom helpers
+ */
+
 export function increment(num: number, length: number): number {
   return (num + 1) % length
 }
@@ -14,6 +18,14 @@ export function isMobile(): boolean {
   return window.matchMedia('(hover: none)').matches
 }
 
+export function getRandom(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+/**
+ * custom types
+ */
+
 export class Watchable<T> {
   constructor(private obj: T) {}
   private watchers: (() => void)[] = []