@linear_non/stellar-kit 1.0.0

package/events/Resize.js

@@ -0,0 +1,70 @@
+// Resize.js
+import { sizes, flags, breakpoints } from "../kitStore"
+import emitter, { EVENTS } from "./Emitter"
+import debounce from "lodash.debounce"
+import { sniffer, getWindowSizes, getViewport, setViewportHeight } from "../utils"
+
+export default class Resize {
+  constructor() {
+    this.wasDesktop = sniffer.isDesktop
+    this.init()
+  }
+
+  onResize = () => {
+    flags.isResizing = true
+
+    const { width, height } = getViewport()
+    const bp = getWindowSizes()
+    sniffer.update() // Update sniffer after viewport read
+
+    Object.assign(sizes, {
+      vw: width,
+      vh: height,
+    })
+
+    Object.assign(breakpoints, {
+      xsmallDown: bp.XS,
+      smallDown: bp.S,
+      smallUp: bp.S_UP,
+      mediumDown: bp.M,
+      mediumUp: bp.M_UP,
+    })
+
+    this.updateBodyClasses()
+    this.updateVH()
+    this.reloadIfBreakpointChanged()
+
+    emitter.emit(EVENTS.APP_RESIZE)
+
+    flags.isResizing = false
+  }
+
+  reloadIfBreakpointChanged() {
+    const isNowDesktop = sniffer.isDesktop
+    if (this.wasDesktop !== isNowDesktop) {
+      location.reload()
+    }
+  }
+
+  updateVH() {
+    setViewportHeight(sizes.vh)
+  }
+
+  updateBodyClasses() {
+    const { vw, vh } = sizes
+    const orientationClass = vw > vh ? "is-landscape" : "is-portrait"
+    const deviceClass = sniffer.isDesktop ? "is-desktop" : "is-device"
+
+    document.body.classList.add(orientationClass)
+    document.body.classList.add(deviceClass)
+  }
+
+  on() {
+    window.addEventListener("resize", debounce(this.onResize, 200))
+  }
+
+  init() {
+    this.on()
+    this.onResize() // Run once on init
+  }
+}

package/events/Scroll.js

@@ -0,0 +1,51 @@
+// Scroll.js
+import { sizes } from "../kitStore"
+import emitter, { EVENTS } from "./Emitter"
+import VirtualScroll from "./VirtualScroll"
+import { bounds, sniffer } from "../utils"
+
+export default class Scroll {
+  constructor({ isSmooth = false } = {}) {
+    this.isSmooth = isSmooth
+
+    if (this.isSmooth) {
+      document.body.classList.add("is-smooth")
+
+      this.virtualScroll = new VirtualScroll({
+        mouseMultiplier: sniffer.isWindows ? 1.1 : 0.45,
+        touchMultiplier: 3.5,
+        firefoxMultiplier: sniffer.isWindows ? 40 : 90,
+        passive: true,
+      })
+
+      this.virtualScroll.on(this.onVirtualScroll)
+    } else {
+      this.onScroll = this.onScroll.bind(this)
+      document.addEventListener("scroll", this.onScroll, true)
+    }
+
+    this.setScrollBounds()
+  }
+
+  setScrollBounds() {
+    const el = document.querySelector("[data-view]") || document.body
+    const height = bounds(el).height
+    sizes.fh = height > sizes.vh ? height - sizes.vh : 0
+  }
+
+  onVirtualScroll = e => {
+    emitter.emit(EVENTS.APP_SCROLL, { y: e.deltaY * -1 })
+  }
+
+  onScroll(e) {
+    emitter.emit(EVENTS.APP_SCROLL, { y: window.scrollY })
+  }
+
+  destroy() {
+    if (this.virtualScroll) {
+      this.virtualScroll.destroy()
+    } else {
+      document.removeEventListener("scroll", this.onScroll, true)
+    }
+  }
+}

package/events/VirtualScroll.js

@@ -0,0 +1,196 @@
+// VirtualScroll.js
+import kitStore from "../kitStore"
+import emitter from "./Emitter"
+import { supportMouseTouch } from "../utils"
+import Lethargy from "lethargy"
+
+const EVT_ID = "virtualscroll"
+
+export default class VirtualScroll {
+  constructor(obj = {}) {
+    this.options = {
+      mouseMultiplier: 1,
+      touchMultiplier: 2,
+      firefoxMultiplier: 15,
+      keyStep: 120,
+      preventTouch: false,
+      unpreventTouchClass: "vs-touchmove-allowed",
+      limitInertia: false,
+      useKeyboard: true,
+      useTouch: true,
+      ...obj,
+    }
+
+    this.el = obj.el || window
+    this.event = { x: 0, y: 0, deltaX: 0, deltaY: 0 }
+    this.touchStartX = null
+    this.touchStartY = null
+    this.bodyTouchAction = null
+    this.focusingInput = false
+
+    if (this.options.limitInertia) this.lethargy = new Lethargy()
+
+    if (this.options.passive !== undefined) {
+      this.listenerOptions = { passive: this.options.passive }
+    }
+
+    document.addEventListener("focusin", () => (this.focusingInput = true))
+    document.addEventListener("focusout", () => (this.focusingInput = false))
+  }
+
+  notify(e) {
+    const evt = this.event
+    evt.x += evt.deltaX
+    evt.y += evt.deltaY
+
+    emitter.emit(EVT_ID, {
+      x: evt.x,
+      y: evt.y,
+      deltaX: evt.deltaX,
+      deltaY: evt.deltaY,
+      originalEvent: e,
+    })
+  }
+
+  onWheel = e => {
+    if (this.lethargy && !this.lethargy.check(e)) return
+
+    const evt = this.event
+    evt.deltaX = e.wheelDeltaX || e.deltaX * -1
+    evt.deltaY = e.wheelDeltaY || e.deltaY * -1
+
+    if (supportMouseTouch().isFirefox && e.deltaMode === 1) {
+      evt.deltaX *= this.options.firefoxMultiplier
+      evt.deltaY *= this.options.firefoxMultiplier
+    }
+
+    evt.deltaX *= this.options.mouseMultiplier
+    evt.deltaY *= this.options.mouseMultiplier
+
+    this.notify(e)
+  }
+
+  onMouseWheel = e => {
+    if (this.options.limitInertia && !this.lethargy.check(e)) return
+
+    const evt = this.event
+    evt.deltaX = e.wheelDeltaX || 0
+    evt.deltaY = e.wheelDeltaY || e.wheelDelta
+
+    this.notify(e)
+  }
+
+  onTouchStart = e => {
+    const t = e.targetTouches ? e.targetTouches[0] : e
+    this.touchStartX = t.pageX
+    this.touchStartY = t.pageY
+  }
+
+  onTouchMove = e => {
+    if (this.options.preventTouch && !e.target.classList.contains(this.options.unpreventTouchClass)) {
+      e.preventDefault()
+    }
+
+    const evt = this.event
+    const t = e.targetTouches ? e.targetTouches[0] : e
+
+    evt.deltaX = (t.pageX - this.touchStartX) * this.options.touchMultiplier
+    evt.deltaY = (t.pageY - this.touchStartY) * this.options.touchMultiplier
+
+    this.touchStartX = t.pageX
+    this.touchStartY = t.pageY
+
+    this.notify(e)
+  }
+
+  onKeyDown = e => {
+    const evt = this.event
+    evt.deltaX = 0
+    evt.deltaY = 0
+
+    const height = window.innerHeight - 40
+
+    if (this.focusingInput || kitStore.flags.isFocus) return
+
+    switch (e.keyCode) {
+      case 37: // LEFT
+      case 38: // UP
+        evt.deltaY = this.options.keyStep
+        break
+      case 39: // RIGHT
+      case 40: // DOWN
+        evt.deltaY = -this.options.keyStep
+        break
+      case 32: // SPACE
+        evt.deltaY = e.shiftKey ? height : -height
+        break
+      default:
+        return
+    }
+
+    this.notify(e)
+  }
+
+  bind = () => {
+    const support = supportMouseTouch()
+
+    if (support.hasWheelEvent) this.el.addEventListener("wheel", this.onWheel, this.listenerOptions)
+
+    if (support.hasMouseWheelEvent)
+      this.el.addEventListener("mousewheel", this.onMouseWheel, this.listenerOptions)
+
+    if (support.hasTouch && this.options.useTouch) {
+      this.el.addEventListener("touchstart", this.onTouchStart, this.listenerOptions)
+      this.el.addEventListener("touchmove", this.onTouchMove, this.listenerOptions)
+    }
+
+    if (support.hasPointer && support.hasTouchWin) {
+      this.bodyTouchAction = document.body.style.msTouchAction
+      document.body.style.msTouchAction = "none"
+      this.el.addEventListener("MSPointerDown", this.onTouchStart, true)
+      this.el.addEventListener("MSPointerMove", this.onTouchMove, true)
+    }
+
+    if (support.hasKeyDown && this.options.useKeyboard) document.addEventListener("keydown", this.onKeyDown)
+  }
+
+  unbind = () => {
+    const support = supportMouseTouch()
+
+    if (support.hasWheelEvent) this.el.removeEventListener("wheel", this.onWheel)
+    if (support.hasMouseWheelEvent) this.el.removeEventListener("mousewheel", this.onMouseWheel)
+    if (support.hasTouch) {
+      this.el.removeEventListener("touchstart", this.onTouchStart)
+      this.el.removeEventListener("touchmove", this.onTouchMove)
+    }
+    if (support.hasPointer && support.hasTouchWin) {
+      document.body.style.msTouchAction = this.bodyTouchAction
+      this.el.removeEventListener("MSPointerDown", this.onTouchStart, true)
+      this.el.removeEventListener("MSPointerMove", this.onTouchMove, true)
+    }
+    if (support.hasKeyDown && this.options.useKeyboard)
+      document.removeEventListener("keydown", this.onKeyDown)
+  }
+
+  on = (cb, priority = 0) => {
+    emitter.on(EVT_ID, cb, priority)
+    const eventCount = emitter.events?.[EVT_ID]?.length || 0
+    if (eventCount === 1) this.bind() // Bind only once
+  }
+
+  off = cb => {
+    emitter.off(EVT_ID, cb)
+    const eventCount = emitter.events?.[EVT_ID]?.length || 0
+    if (eventCount === 0) this.unbind() // Unbind when no listeners left
+  }
+
+  reset = () => {
+    this.event.x = 0
+    this.event.y = 0
+  }
+
+  destroy = () => {
+    this.unbind()
+    emitter.off(EVT_ID, () => {}) // Clear all
+  }
+}

package/events/index.js

@@ -0,0 +1,8 @@
+import emitter, { EVENTS, PRIORITY } from "./Emitter"
+import VirtualScroll from "./VirtualScroll"
+import Scroll from "./Scroll"
+import Resize from "./Resize"
+import Mouse from "./Mouse"
+import Raf from "./Raf"
+
+export { emitter, EVENTS, PRIORITY, Resize, VirtualScroll, Scroll, Mouse, Raf }

package/index.js

@@ -0,0 +1,16 @@
+// stellar-kit/index.js
+import { Mouse, Resize, Raf, Scroll } from "./events"
+import kitStore from "./kitStore"
+import { sniffer } from "./utils"
+
+export function setupKit({ isSmooth = sniffer.isDesktop } = {}) {
+  kitStore.flags.isSmooth = isSmooth
+  kitStore.flags.isLocked = false
+
+  kitStore.resize = new Resize()
+  kitStore.raf = new Raf()
+  kitStore.scroll = new Scroll({ isSmooth })
+  kitStore.mouse = new Mouse()
+}
+
+export { kitStore }

package/kitStore.js

@@ -0,0 +1,35 @@
+//kitStore.js
+export const sizes = {
+  vw: 0,
+  vh: 0,
+  fh: 0,
+}
+
+export const flags = {
+  isFocus: false,
+  isSmooth: false,
+  isResizing: false,
+  // ... optionally others
+}
+
+export const breakpoints = {
+  xsmallDown: false,
+  smallDown: false,
+  smallUp: false,
+  mediumDown: false,
+  mediumUp: false,
+}
+
+export const mouse = {
+  el: null,
+  x: 0,
+  y: 0,
+}
+
+export default {
+  sizes,
+  breakpoints,
+  mouse,
+  flags,
+  pageContent: null, // This should be set to the main content element
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@linear_non/stellar-kit",
+  "version": "1.0.0",
+  "description": "Stellar frontend core for Non-Linear Studio projects.",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "format": "prettier --write .",
+    "check": "vite build --emptyOutDir --watch"
+  },
+  "files": [
+    "classes/",
+    "events/",
+    "utils/",
+    "kitStore.js",
+    "index.js"
+  ],
+  "keywords": [
+    "non-linear",
+    "frontend",
+    "core",
+    "scroll",
+    "raf",
+    "gsap"
+  ],
+  "author": "Non-Linear Studio",
+  "license": "MIT",
+  "dependencies": {
+    "gsap": "^3.12.5",
+    "lethargy": "^1.0.9",
+    "lodash.debounce": "^4.0.8"
+  },
+  "devDependencies": {
+    "@linear_non/prettier-config": "^1.0.5",
+    "vite": "^5.2.0"
+  }
+}

package/utils/bounds.js

@@ -0,0 +1,15 @@
+// bounds.js
+export const bounds = el => {
+  const rect = el.getBoundingClientRect()
+
+  return {
+    bottom: rect.bottom,
+    left: rect.left,
+    height: rect.height,
+    right: rect.right,
+    top: rect.top,
+    width: rect.width,
+    x: rect.x,
+    y: rect.y,
+  }
+}

package/utils/index.js

@@ -0,0 +1,8 @@
+export { qs, qsa, getid, gettag } from "./selector"
+export { bounds } from "./bounds"
+export { getViewport, getWindowSizes, setViewportHeight } from "./window"
+export { sniffer } from "./sniffer"
+export { lerp, clamp, norm, round } from "./math"
+export { supportWebp, supportMouseTouch } from "./support"
+export { listener } from "./listener"
+export { splitText, reverseSplit } from "./splitText"

package/utils/listener.js

@@ -0,0 +1,12 @@
+// listener.js
+export const listener = (el, action, type, cb, p) => {
+  const passive = p === true ? { passive: true } : false
+
+  if (el.length) {
+    for (let i = 0; i < el.length; i++) {
+      el[i][action + "EventListener"](type, cb, passive)
+    }
+  } else {
+    el[action + "EventListener"](type, cb, passive)
+  }
+}

package/utils/math.js

@@ -0,0 +1,17 @@
+// math.js
+export const lerp = (a, b, n) => {
+  return a * (1 - n) + b * n
+}
+
+export const norm = (val, min, max) => {
+  return (val - min) / (max - min)
+}
+
+export const clamp = (val, min, max) => {
+  return Math.min(Math.max(val, min), max)
+}
+
+export const round = (n, p) => {
+  const precision = p !== undefined ? Math.pow(10, p) : 1000
+  return Math.round(n * precision) / precision
+}

package/utils/selector.js

@@ -0,0 +1,5 @@
+// selector.js
+export const qs = (s, o = document) => o.querySelector(s)
+export const qsa = (s, o = document) => Array.from(o.querySelectorAll(s))
+export const getid = (s, o = document) => o.getElementById(s)
+export const gettag = (s, o = document) => o.getElementsByTagName(s)

package/utils/sniffer.js

@@ -0,0 +1,133 @@
+// sniffer.js
+export const sniffer = {
+  uA: navigator.userAgent.toLowerCase(),
+
+  get isWindowsMobile() {
+    return /windows phone|iemobile|wpdesktop/.test(this.uA)
+  },
+
+  get isMobileOpera() {
+    return /opera mini/i.test(this.uA)
+  },
+
+  get isIOS() {
+    return /iphone|ipad|ipod/i.test(this.uA)
+  },
+
+  get isIpad() {
+    return !this.isWindowsMobile && /ipad/i.test(this.uA) && this.isIOS
+  },
+
+  get isLatestIpad() {
+    return /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints && navigator.maxTouchPoints > 1
+  },
+
+  get isIphone() {
+    return !this.isWindowsMobile && /iphone/i.test(this.uA) && this.isIOS
+  },
+
+  get isMobileAndroid() {
+    return !this.isWindowsMobile && /android.*mobile/.test(this.uA)
+  },
+
+  get isTabletAndroid() {
+    return !this.isWindowsMobile && !this.isMobileAndroid && /android/i.test(this.uA)
+  },
+
+  get isAndroid() {
+    return this.isMobileAndroid || this.isTabletAndroid
+  },
+
+  get isPhone() {
+    return this.isMobileAndroid || (this.isIOS && !this.isIpad) || this.isWindowsMobile
+  },
+
+  get isTablet() {
+    return this.isTabletAndroid || this.isIpad || this.isLatestIpad
+  },
+
+  get isDevice() {
+    return this.isPhone || this.isTablet
+  },
+
+  get isFirefox() {
+    return this.uA.includes("firefox")
+  },
+
+  get isSafari() {
+    return !!this.uA.match(/version\/[\d\.]+.*safari/)
+  },
+
+  get isOpera() {
+    return this.uA.includes("opr")
+  },
+
+  get isIE11() {
+    return !window.ActiveXObject && "ActiveXObject" in window
+  },
+
+  get isIE() {
+    return this.uA.includes("msie") || this.isIE11 || this.uA.includes("edge")
+  },
+
+  get isEdge() {
+    return this.uA.includes("edge")
+  },
+
+  get isWindows() {
+    return ["Win32", "Win64", "Windows", "WinCE"].includes(window.navigator.platform)
+  },
+
+  get isChrome() {
+    return (
+      window.chrome !== null &&
+      window.chrome !== undefined &&
+      navigator.vendor.toLowerCase() === "google inc." &&
+      !this.isOpera &&
+      !this.isEdge
+    )
+  },
+
+  get isMac() {
+    return navigator.platform.toLowerCase().includes("mac")
+  },
+
+  get isDesktop() {
+    return !this.isPhone && !this.isTablet
+  },
+
+  get isTouch() {
+    return "ontouchstart" in window
+  },
+
+  get sniff() {
+    return {
+      isWindowsMobile: this.isWindowsMobile,
+      isMobileOpera: this.isMobileOpera,
+      isIOS: this.isIOS,
+      isIpad: this.isIpad,
+      isIphone: this.isIphone,
+      isMobileAndroid: this.isMobileAndroid,
+      isTabletAndroid: this.isTabletAndroid,
+      isAndroid: this.isAndroid,
+      isFirefox: this.isFirefox,
+      isSafari: this.isSafari,
+      isOpera: this.isOpera,
+      isIE11: this.isIE11,
+      isIE: this.isIE,
+      isEdge: this.isEdge,
+      isChrome: this.isChrome,
+      isMac: this.isMac,
+      isPhone: this.isPhone,
+      isTablet: this.isTablet,
+      isDevice: this.isDevice,
+      isDesktop: this.isDesktop,
+      isWindows: this.isWindows,
+      isTouch: this.isTouch,
+    }
+  },
+
+  update() {
+    this.uA = navigator.userAgent.toLowerCase()
+  },
+}

package/utils/splitText.js

@@ -0,0 +1,45 @@
+// splitText.js
+import { emitter, EVENTS } from "../events"
+import { SplitText } from "../libraries/gsap"
+
+// Emits `APP_SPLITTEXT_READY` once all elements are split
+export const splitText = elements => {
+  const splits = []
+  let splitted = 0
+  const totalSplits = elements.length
+
+  elements.forEach(el => {
+    const dataset = el.dataset.split
+    const types = dataset.split(",")
+    const classes = {}
+
+    types.forEach((type, i) => {
+      const t = type.trim()
+      if (t === "lines") classes.linesClass = `line-${i}`
+      if (t === "words") classes.wordsClass = `word-${i}`
+      if (t === "chars") classes.charsClass = `char-${i} chr-++`
+    })
+
+    const splitInstance = new SplitText(el, {
+      type: dataset.toString(),
+      ...classes,
+    })
+
+    splits.push(splitInstance)
+    splitted++
+
+    if (splitted === totalSplits) {
+      setTimeout(() => {
+        emitter.emit(EVENTS.APP_SPLITTEXT_READY, splits)
+      }, 0)
+    }
+  })
+
+  return splits
+}
+
+export const reverseSplit = instances => {
+  instances.forEach(split => {
+    split.revert()
+  })
+}

package/utils/support.js

@@ -0,0 +1,23 @@
+// support.js
+export const supportWebp = () => {
+  const el = document.createElement("canvas")
+  if (el.getContext && el.getContext("2d")) {
+    return el.toDataURL("image/webp").indexOf("data:image/webp") === 0
+  }
+  return false
+}
+
+export const supportMouseTouch = () => {
+  return {
+    hasWheelEvent: "onwheel" in document,
+    hasMouseWheelEvent: "onmousewheel" in document,
+    hasTouch:
+      "ontouchstart" in window ||
+      window.TouchEvent ||
+      (window.DocumentTouch && document instanceof DocumentTouch),
+    hasTouchWin: navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1,
+    hasPointer: !!window.navigator.msPointerEnabled,
+    hasKeyDown: "onkeydown" in document,
+    isFirefox: navigator.userAgent.indexOf("Firefox") > -1,
+  }
+}