@linear_non/stellar-libs 1.0.43 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.43",
+  "version": "1.1.0",
   "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.17"
+    "@linear_non/stellar-kit": "^2.1.21"
   },
   "devDependencies": {
     "@linear_non/prettier-config": "^1.0.6",

package/src/ScrollBar/index.js

@@ -17,28 +17,6 @@ export default class Scrollbar {
     this.init()
   }
 
-  init() {
-    this.create()
-    this.setBounds()
-    this.on()
-  }
-
-  on() {
-    emitter.on(EVENTS.APP_TICK, this.tick)
-    emitter.on(EVENTS.APP_RESIZE, this.resize)
-    this.handle.addEventListener("mousedown", this.mouseDown)
-    window.addEventListener("mouseup", this.mouseUp)
-    window.addEventListener("mousemove", this.mouseMove)
-  }
-
-  off() {
-    emitter.off(EVENTS.APP_TICK, this.tick)
-    emitter.off(EVENTS.APP_RESIZE, this.resize)
-    this.handle.removeEventListener("mousedown", this.mouseDown)
-    window.removeEventListener("mouseup", this.mouseUp)
-    window.removeEventListener("mousemove", this.mouseMove)
-  }
-
   mouseDown = () => {
     this.touching = true
     document.body.style.userSelect = "none"
@@ -121,4 +99,26 @@ export default class Scrollbar {
   destroy() {
     this.off()
   }
+
+  on() {
+    emitter.on(EVENTS.APP_TICK, this.tick)
+    emitter.on(EVENTS.APP_RESIZE, this.resize)
+    this.handle.addEventListener("mousedown", this.mouseDown)
+    window.addEventListener("mouseup", this.mouseUp)
+    window.addEventListener("mousemove", this.mouseMove)
+  }
+
+  off() {
+    emitter.off(EVENTS.APP_TICK, this.tick)
+    emitter.off(EVENTS.APP_RESIZE, this.resize)
+    this.handle.removeEventListener("mousedown", this.mouseDown)
+    window.removeEventListener("mouseup", this.mouseUp)
+    window.removeEventListener("mousemove", this.mouseMove)
+  }
+
+  init() {
+    this.create()
+    this.setBounds()
+    this.on()
+  }
 }

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,10 +1,6 @@
 import { EVENTS } from "@linear_non/stellar-kit/events"
 import { Observer, reverseSplit, splitText } from "@linear_non/stellar-kit/plugins"
 
-import { EVENTS } from "../events"
-import Observer from "./_Observer"
-import { reverseSplit, splitText } from "./_SplitText"
-
 const NOOP = () => {}
 
 function normalizeTargets(splitTargets) {
@@ -17,7 +13,7 @@ function normalizeTargets(splitTargets) {
 export default class SplitonScroll {
   constructor({
     el,
-    splitText,
+    splitTargets,
     isReady,
     reverse,
     resize,
@@ -27,7 +23,7 @@ export default class SplitonScroll {
     once = true,
   }) {
     this.element = el
-    this.targets = normalizeTargets(splitText)
+    this.targets = normalizeTargets(splitTargets)
 
     this.splits = null
     this.groups = null