@linear_non/stellar-libs 1.0.42 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",
@@ -25,7 +25,7 @@
   "author": "Non-Linear Studio",
   "license": "MIT",
   "dependencies": {
-    "@linear_non/stellar-kit": "^2.1.11"
+    "@linear_non/stellar-kit": "^2.1.17"
   },
   "devDependencies": {
     "@linear_non/prettier-config": "^1.0.6",

package/src/Smooth/index.js

@@ -12,16 +12,9 @@ export default class Smooth {
     this.sections = null
     this.scrollbar = null
     this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
-
     this.init()
   }
 
-  /**
-   * - top / bottom: virtual layout positions
-   * - offset: parallax centering adjustment
-   * - speed: dataset speed multiplier
-   * - parent: optional reference to another section for nested offsets
-   */
   getSections() {
     const { isSmooth } = kitStore.flags
     if (!this.elems || !isSmooth) return
@@ -31,21 +24,17 @@ export default class Smooth {
 
     this.elems.forEach(el => {
       el.style.transform = "translate3d(0, 0, 0)"
-
-      const speed = el.dataset.speed || 1
+      const raw = el.dataset.speed != null ? parseFloat(el.dataset.speed) : 1
+      const speed = Number.isFinite(raw) ? raw : 1
       const { height, offset } = this.getVars(el, speed)
 
       const top = cursor
       const bottom = top + height
-      cursor = bottom
 
-      let parent = el.parentNode.closest("[data-smooth]")
+      cursor = bottom
 
-      if (parent) {
-        this.sections.some(obj => {
-          if (obj.el === parent) parent = obj
-        })
-      }
+      const parentEl = el.parentElement?.closest?.("[data-smooth]")
+      const parent = parentEl ? this.sections.find(s => s.el === parentEl) || null : null
 
       this.sections.push({
         el,
@@ -56,11 +45,14 @@ export default class Smooth {
         speed,
         out: true,
         transform: 0,
+        _roundedY: 0,
       })
     })
   }
 
   tick = ({ current }) => {
+    const { isSmooth, isResizing } = kitStore.flags
+    if (!isSmooth || isResizing) return
     this.current = current
     this.transformSections()
   }
@@ -71,11 +63,14 @@ export default class Smooth {
 
     this.sections.forEach(section => {
       const { isVisible, transform } = this.isVisible(section)
-
       if (isVisible || isResizing || !section.out) {
+        const { y, css } = this.getTransform(transform)
+        if (y !== section._roundedY) {
+          section.el.style.transform = css
+          section._roundedY = y
+        }
         section.out = !isVisible
         section.transform = transform
-        section.el.style.transform = this.getTransform(transform)
       }
     })
   }
@@ -83,15 +78,11 @@ export default class Smooth {
   isVisible(section) {
     const { vh } = kitStore.sizes
     const { top, bottom, offset, speed, parent } = section
-
     const extra = (parent && parent.transform) || 0
-
     const translate = this.current * speed
     const transform = translate - offset - extra
-
     const start = top - translate
     const end = bottom - translate
-
     const isVisible = end > 0 && start < vh
 
     return { isVisible, transform }
@@ -100,8 +91,7 @@ export default class Smooth {
   getTransform(transform) {
     let y = -transform
     y = Math.round(y * this.dpr) / this.dpr
-
-    return `translate3d(0, ${y}px, 0)`
+    return { y, css: `translate3d(0, ${y}px, 0)` }
   }
 
   getVars(el, speed) {
@@ -119,26 +109,32 @@ export default class Smooth {
 
   resize = () => {
     const { isSmooth } = kitStore.flags
+
     if (!isSmooth) return
 
-    this.update(this.elems)
+    this.scroll?.setScrollBounds()
+
+    const { fh } = kitStore.sizes
+    this.current = Math.min(Math.max(this.current, 0), fh || 0)
+
+    this.getSections()
     emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
+    this.transformSections()
+    this.scrollbar?.update()
   }
 
   update(elems) {
     kitStore.flags.isResizing = true
-
     this.scroll.setScrollBounds()
     this.elems = elems || qsa("[data-smooth]")
     this.scrollbar?.update()
-
     this.getSections()
     this.transformSections()
-
     kitStore.flags.isResizing = false
   }
 
   clean() {
+    if (this.sections) this.sections.forEach(s => (s.el.style.transform = ""))
     this.elems = this.sections = null
   }
 
@@ -154,15 +150,15 @@ export default class Smooth {
 
   destroy() {
     this.off()
+    this.scrollbar?.destroy()
     this.clean()
   }
 
   init(elems) {
     this.elems = elems || qsa("[data-smooth]")
 
-    const container = kitStore.currentPage
     this.scrollbar = new Scrollbar({
-      container,
+      container: kitStore.currentPage,
     })
 
     this.on()

package/src/SplitOnScroll/index.js

@@ -1,4 +1,4 @@
-import { EVENTS, PRIORITY, emitter } from "@linear_non/stellar-kit/events"
+import { EVENTS } from "@linear_non/stellar-kit/events"
 import { Observer, reverseSplit, splitText } from "@linear_non/stellar-kit/plugins"
 
 const NOOP = () => {}
@@ -13,64 +13,62 @@ function normalizeTargets(splitTargets) {
 export default class SplitonScroll {
   constructor({
     el,
-    splitText: splitTargets,
+    splitText,
     isReady,
     reverse,
+    resize,
     start = "top bottom",
     end = "bottom top",
     scrub = false,
     once = true,
   }) {
     this.element = el
-    this.targets = normalizeTargets(splitTargets)
+    this.targets = normalizeTargets(splitText)
 
     this.splits = null
     this.groups = null
 
     this.isReadyCallback = isReady || NOOP
     this.reverseCallback = reverse || NOOP
+    this.isResizeCallback = resize || NOOP
     this.start = start
     this.end = end
     this.scrub = scrub
     this.once = once
 
-    this._readyNotified = false
-    this._resolveReady = null
     this.ready = new Promise(resolve => {
       this._resolveReady = resolve
     })
 
-    this._needsResplit = false
-
-    this._onResizeStart = this._onResizeStart.bind(this)
-    this._onSmoothResize = this._onSmoothResize.bind(this)
-    this._offResizeStart = null
-    this._offSmoothResize = null
+    this._readyFired = false
+    this._rebuilding = false
 
     if (!this.element || !this.targets.length) {
-      const payload = { splits: [], groups: {} }
-      this._notifyReadyOnce(payload)
+      this._notifyReadyOnce([])
       return
     }
 
+    this.init()
+  }
+
+  init() {
+    // Initialize observer
     this.addObserver()
-    this.addResizeListeners()
 
+    // If already in view, handle immediately
     if (this.observer && (this.observer.isActive || this.observer.progress > 0)) {
       this.handleEnter()
     }
   }
 
-  _notifyReadyOnce(payload) {
-    if (this._readyNotified) return
-    this._readyNotified = true
-
-    this.isReadyCallback(payload.splits, payload.groups)
+  // Set is ready only once
+  _notifyReadyOnce(splits, groups) {
+    if (this._readyFired) return
+    this._readyFired = true
 
-    if (this._resolveReady) {
-      this._resolveReady(payload)
-      this._resolveReady = null
-    }
+    this.isReadyCallback(splits, groups)
+    this._resolveReady?.({ splits, groups })
+    this._resolveReady = null
   }
 
   addObserver() {
@@ -86,78 +84,66 @@ export default class SplitonScroll {
     this.observer.on("leave", () => this.handleLeave())
   }
 
-  addResizeListeners() {
-    // Raw resize start, clear split
-    this._offResizeStart = emitter.on(EVENTS.APP_RESIZE, this._onResizeStart, PRIORITY.first)
+  async resize() {
+    // if not built yet, just build once
+    if (!this.splits) return
 
-    // Smooth.update() + setScrollBounds()
-    this._offSmoothResize = emitter.on(EVENTS.APP_SMOOTH_RESIZE, this._onSmoothResize)
-  }
+    // revert then rebuild
+    reverseSplit(this.splits)
+    this.splits = null
+    this.groups = null
 
-  removeResizeListeners() {
-    if (this._offResizeStart) {
-      this._offResizeStart()
-      this._offResizeStart = null
-    }
-    if (this._offSmoothResize) {
-      this._offSmoothResize()
-      this._offSmoothResize = null
-    }
+    // rebuild splits
+    await this.refreshSplits()
   }
 
-  _onResizeStart() {
-    if (!this.element || !this.targets || !this.targets.length) return
-
-    if (this.splits) {
-      reverseSplit(this.splits)
-
-      this.splits = null
-      this.groups = null
-    }
+  async handleEnter() {
+    const splitEmitter = splitText(this.targets)
 
-    this._needsResplit = true
-  }
+    const { splits, groups } = await new Promise(resolve => {
+      const onReady = (readySplits, groupMap) => {
+        // Clean up listener
+        if (splitEmitter.off) {
+          splitEmitter.off(EVENTS.APP_SPLITTEXT_READY, onReady)
+        }
 
-  _onSmoothResize() {
-    if (!this._needsResplit) return
-    if (!this.element || !this.targets || !this.targets.length) return
+        resolve({
+          splits: readySplits || [],
+          groups: groupMap || {},
+        })
+      }
 
-    if (this.observer && typeof this.observer.refresh === "function") {
-      this.observer.refresh()
-    }
+      // Listen for ready event once
+      splitEmitter.once(EVENTS.APP_SPLITTEXT_READY, onReady)
+    })
 
-    if (this.observer && (this.observer.isActive || this.observer.progress > 0)) {
-      this.handleEnter()
-    }
+    this.splits = splits
+    this.groups = groups
 
-    this._needsResplit = false
+    this._notifyReadyOnce(splits, groups)
   }
 
-  async handleEnter() {
-    const splitEmitter = splitText(this.targets)
+  async refreshSplits() {
+    if (this._rebuilding) return
+    this._rebuilding = true
 
+    // (Re)build fresh splits
+    const emitter = splitText(this.targets)
     const { splits, groups } = await new Promise(resolve => {
       const onReady = (readySplits, groupMap) => {
-        if (typeof splitEmitter.off === "function") {
-          splitEmitter.off(EVENTS.APP_SPLITTEXT_READY, onReady)
-        }
         resolve({
           splits: readySplits || [],
           groups: groupMap || {},
         })
       }
-
-      if (typeof splitEmitter.once === "function") {
-        splitEmitter.once(EVENTS.APP_SPLITTEXT_READY, onReady)
-      } else {
-        splitEmitter.on(EVENTS.APP_SPLITTEXT_READY, onReady)
-      }
+      emitter.once(EVENTS.APP_SPLITTEXT_READY, onReady)
     })
 
     this.splits = splits
     this.groups = groups
+    this._rebuilding = false
 
-    this._notifyReadyOnce({ splits, groups })
+    this.isResizeCallback(splits, groups)
   }
 
   handleLeave() {
@@ -179,9 +165,6 @@ export default class SplitonScroll {
   }
 
   destroy() {
-    this.observer?.kill()
-    this.removeResizeListeners()
-
     if (this.splits) {
       reverseSplit(this.splits)
     }