@linear_non/stellar-kit 1.1.2 → 1.1.4

package/classes/FontLoader.js

@@ -0,0 +1,47 @@
+// FontLoader.js
+import { emitter, EVENTS } from "../events"
+
+export default class FontLoader {
+  static type = "fonts"
+  static events = { PROGRESS: EVENTS.APP_FONTS_PROGRESS, LOADED: EVENTS.APP_FONTS_LOADED }
+  constructor({ fonts = [] }) {
+    // fonts = [{ family: "Inter", url: "/fonts/Inter.woff2" }, ...]
+
+    this.fonts = fonts
+    this.loaded = 0
+    this.total = fonts.length
+    this.isLoaded = false
+    this.items = []
+  }
+
+  async load() {
+    const promises = this.fonts.map(font => this.loadSingle(font))
+    await Promise.all(promises)
+
+    this.isLoaded = true
+    emitter.emit(EVENTS.APP_FONTS_LOADED, this.items)
+    return this.items
+  }
+
+  async loadSingle({ family, url, descriptors = {} }) {
+    const font = new FontFace(family, `url(${url})`, descriptors)
+
+    try {
+      const loadedFace = await font.load()
+      document.fonts.add(loadedFace)
+      this.items.push(loadedFace)
+      this.loaded++
+
+      emitter.emit(EVENTS.APP_FONTS_PROGRESS, {
+        loaded: this.loaded,
+        total: this.total,
+        percent: Math.round((this.loaded / this.total) * 100),
+      })
+
+      return loadedFace
+    } catch (err) {
+      console.error("FontLoader error:", err)
+      return null
+    }
+  }
+}

package/classes/ImageLoader.js

@@ -0,0 +1,63 @@
+// ImageLoader.js
+import { emitter, EVENTS } from "../events"
+
+export default class ImageLoader {
+  static type = "images"
+  static events = { PROGRESS: EVENTS.APP_IMAGES_PROGRESS, LOADED: EVENTS.APP_IMAGES_LOADED }
+  constructor({ origin, fileName, extension, total, urls = [] }) {
+    this.origin = origin
+    this.fileName = fileName
+    this.extension = extension
+    this.total = total
+    this.urls = urls
+
+    this.images = []
+    this.loaded = 0
+    this.isLoaded = false
+  }
+
+  async load() {
+    // If explicit URLs are passed, use them
+    const urls = this.urls.length
+      ? this.urls
+      : Array.from({ length: this.total }, (_, i) => `${this.origin}/${this.fileName}${i}.${this.extension}`)
+
+    this.total = urls.length
+
+    const promises = urls.map((url, i) => this.loadSingle(url, i))
+    await Promise.all(promises)
+
+    this.isLoaded = true
+    emitter.emit(EVENTS.APP_IMAGES_LOADED, this.images)
+  }
+
+  loadSingle(url, index) {
+    return new Promise(resolve => {
+      const worker = new Worker(
+        new URL("../workers/image-loader.js", import.meta.url),
+        { type: "module" } // important
+      )
+      worker.postMessage({ url, index })
+
+      worker.addEventListener("message", e => {
+        const { blob, index } = e.data
+        const img = new Image()
+        img.src = URL.createObjectURL(blob)
+
+        img.onload = () => {
+          this.images[index] = img
+          this.loaded++
+
+          emitter.emit(EVENTS.APP_IMAGES_PROGRESS, {
+            loaded: this.loaded,
+            total: this.total,
+            percent: Math.round((this.loaded / this.total) * 100),
+          })
+
+          resolve(img)
+          worker.terminate()
+        }
+      })
+    })
+  }
+}

package/classes/MasterLoader.js

@@ -0,0 +1,50 @@
+//MasterLoader.js
+import { emitter, EVENTS } from "../events"
+
+export default class MasterLoader {
+  constructor() {
+    this.loaders = []
+    this.results = {}
+    this.total = 0
+    this.loaded = 0
+  }
+
+  add(loaderClass, options) {
+    const loader = new loaderClass(options)
+    this.loaders.push({ loaderClass, loader })
+    this.total += loader.total || 0
+    return loader
+  }
+
+  async loadAll() {
+    const promises = this.loaders.map(({ loaderClass, loader }) => {
+      return new Promise(resolve => {
+        const onProgress = () => {
+          this.loaded++
+          emitter.emit(EVENTS.APP_MASTER_PROGRESS, {
+            loaded: this.loaded,
+            total: this.total,
+            percent: Math.round((this.loaded / this.total) * 100),
+          })
+        }
+
+        const onLoaded = items => {
+          const type = loaderClass.type
+          this.results[type] = (this.results[type] || []).concat(items)
+          // cleanup
+          emitter.off?.(loaderClass.events.PROGRESS, onProgress)
+          emitter.off?.(loaderClass.events.LOADED, onLoaded)
+          resolve()
+        }
+
+        emitter.on(loaderClass.events.PROGRESS, onProgress)
+        emitter.on(loaderClass.events.LOADED, onLoaded)
+
+        loader.load()
+      })
+    })
+
+    await Promise.all(promises)
+    emitter.emit(EVENTS.APP_MASTER_LOADED, this.results)
+  }
+}

package/classes/index.js

@@ -1,4 +1,7 @@
 import Component from "./Component"
 import Manager from "./Manager"
+import MasterLoader from "./MasterLoader"
+import ImageLoader from "./ImageLoader"
+import FontLoader from "./FontLoader"
 
-export { Component, Manager }
+export { Component, Manager, MasterLoader, ImageLoader, FontLoader }

package/events/Emitter.js

@@ -53,6 +53,12 @@ const EVENTS = {
   APP_MOUSEDOWN: "mousedown",
   APP_MOUSEUP: "mouseup",
   APP_SPLITTEXT_READY: "splittext:ready",
+  APP_IMAGES_LOADED: "images:loaded",
+  APP_IMAGES_PROGRESS: "images:progress",
+  APP_MASTER_LOADED: "master:loaded",
+  APP_MASTER_PROGRESS: "master:progress",
+  APP_FONTS_PROGRESS: "fonts:progress",
+  APP_FONTS_LOADED: "fonts:loaded",
 }
 
 const PRIORITY = {

package/index.js

@@ -13,4 +13,14 @@ export function setupKit({ isSmooth = sniffer.isDesktop } = {}) {
   kitStore.mouse = new Mouse()
 }
 
+export function setSizes(d = kitStore.sizes.d, m = kitStore.sizes.m) {
+  // update store if values are provided
+  kitStore.sizes.d = d
+  kitStore.sizes.m = m
+
+  // set css vars
+  document.documentElement.style.setProperty("--desktop", d)
+  document.documentElement.style.setProperty("--mobile", m)
+}
+
 export { kitStore }

package/kitStore.js

@@ -3,6 +3,8 @@ export const sizes = {
   vw: 0,
   vh: 0,
   fh: 0,
+  d: 1440, // design width
+  m: 390, // mobile width
 }
 
 export const flags = {

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@linear_non/stellar-kit",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Stellar frontend core for Non-Linear Studio projects.",
   "main": "index.js",
   "exports": {
     ".": "./index.js",
     "./utils": "./utils/index.js",
     "./classes": "./classes/index.js",
+    "./workers": "./workers/*",
     "./events": "./events/index.js",
     "./gsap": "./libraries/gsap/index.js"
   },
@@ -22,6 +23,7 @@
     "utils/",
     "libraries/",
     "libraries/gsap/",
+    "workers/",
     "kitStore.js",
     "index.js"
   ],

package/utils/grid.js

@@ -0,0 +1,154 @@
+import kitStore from "../kitStore"
+import { getWindowSizes } from "./window"
+import { emitter, EVENTS } from "../events"
+import { gsap } from "../libraries/gsap"
+
+export default class Grid {
+  constructor(obj) {
+    this.d = obj.desktop
+    this.m = obj.mobile
+    this.state = { toggle: false }
+    this.sizes = getWindowSizes()
+
+    this.handleKeyDown = e => this.onVisibilityToggle(e)
+
+    this.build()
+    this.on()
+  }
+
+  build() {
+    this.el = document.createElement("div")
+    this.el.classList.add("-grid")
+    Object.assign(this.el.style, {
+      position: "fixed",
+      zIndex: "99999",
+      height: "100%",
+      inset: "0",
+      pointerEvents: "none",
+      width: "100%",
+      opacity: "0",
+      visibility: "hidden",
+    })
+
+    this.dContainer = document.createElement("div")
+    this.dContainer.classList.add("-grid-desktop")
+    this.el.appendChild(this.dContainer)
+
+    this.mContainer = document.createElement("div")
+    this.mContainer.classList.add("-grid-mobile")
+    this.el.appendChild(this.mContainer)
+
+    const flexFull = {
+      justifyContent: "center",
+      alignItems: "stretch",
+      boxSizing: "border-box",
+      height: "100%",
+      width: "100%",
+      gap: "0",
+      display: "flex",
+    }
+    Object.assign(this.dContainer.style, flexFull)
+    Object.assign(this.mContainer.style, flexFull)
+
+    this.gridSetup(this.dContainer, true)
+    this.gridSetup(this.mContainer, false)
+    this.applyBreakpointVisibility()
+  }
+
+  attach() {
+    if (!this.el.isConnected) document.body.appendChild(this.el)
+  }
+  detach() {
+    if (this.el?.isConnected) this.el.remove()
+  }
+
+  gridSetup(container, isDesktop = true) {
+    const { wrap, gap, count } = isDesktop ? this.d : this.m
+    const col = this.checkCols(wrap, gap, count, isDesktop)
+
+    container.innerHTML = ""
+    if (wrap > 0) {
+      container.style.setProperty("padding-left", `${wrap / 10}rem`)
+      container.style.setProperty("padding-right", `${wrap / 10}rem`)
+    }
+    container.style.setProperty("gap", gap > 0 ? `${gap / 10}rem` : "0")
+
+    const frag = document.createDocumentFragment()
+    for (let i = 0; i < count; i++) {
+      const child = document.createElement("div")
+      child.classList.add("row")
+      Object.assign(child.style, {
+        background: "red",
+        width: `${col / 10}rem`,
+        height: "100%",
+        opacity: i % 2 === 0 ? "0.4" : "0.6",
+      })
+      frag.appendChild(child)
+    }
+    container.appendChild(frag)
+  }
+
+  checkCols(wrap, gap, count, isDesktop = true) {
+    const { sizes } = kitStore
+    const base = isDesktop ? sizes.d : sizes.m
+    const w = wrap * 2
+    const g = (count - 1) * gap
+    return (base - w - g) / count
+  }
+
+  applyBreakpointVisibility() {
+    const isDesktop = this.sizes.M_UP
+    this.dContainer.style.display = isDesktop ? "flex" : "none"
+    this.mContainer.style.display = isDesktop ? "none" : "flex"
+  }
+
+  rebuildForBreakpoint() {
+    this.applyBreakpointVisibility()
+    if (this.sizes.M_UP) {
+      this.gridSetup(this.dContainer, true)
+    } else {
+      this.gridSetup(this.mContainer, false)
+    }
+  }
+
+  resize = () => {
+    this.sizes = getWindowSizes()
+    this.rebuildForBreakpoint()
+  }
+
+  onVisibilityToggle(e) {
+    const isCtrlPressed = e.metaKey || e.ctrlKey
+    if (e.type !== "keydown" || e.repeat) return
+    if (isCtrlPressed && (e.key?.toLowerCase() === "g" || e.code === "KeyG")) {
+      if (!this.state.toggle) {
+        this.attach()
+        gsap.to(this.el, { duration: 0.35, autoAlpha: 1 })
+      } else {
+        gsap.to(this.el, {
+          duration: 0.35,
+          autoAlpha: 0,
+          onComplete: () => this.detach(),
+        })
+      }
+      this.state.toggle = !this.state.toggle
+    }
+  }
+
+  on() {
+    document.addEventListener("keydown", this.handleKeyDown)
+    emitter.on(EVENTS.APP_RESIZE, this.resize)
+  }
+
+  off() {
+    document.removeEventListener("keydown", this.handleKeyDown)
+    emitter.off(EVENTS.APP_RESIZE, this.resize)
+  }
+
+  destroy() {
+    this.off()
+    this.detach()
+    this.el = null
+    this.dContainer = null
+    this.mContainer = null
+  }
+}

package/utils/index.js

@@ -1,3 +1,4 @@
+import Grid from "./grid"
 export { qs, qsa, getid, gettag } from "./selector"
 export { bounds } from "./bounds"
 export { offset } from "./offset"
@@ -7,3 +8,4 @@ export { lerp, clamp, norm, round } from "./math"
 export { supportWebp, supportMouseTouch } from "./support"
 export { listener } from "./listener"
 export { splitText, reverseSplit } from "./splitText"
+export { Grid }

package/workers/image-loader.js

@@ -0,0 +1,10 @@
+self.addEventListener("message", async e => {
+  const { url, index } = e.data
+  try {
+    const res = await fetch(url)
+    const blob = await res.blob()
+    self.postMessage({ url, blob, index })
+  } catch (err) {
+    console.error("Image worker error:", err)
+  }
+})