@linear_non/stellar-libs 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",

package/src/ScrollBar/index.js

@@ -1,98 +1,98 @@
 // Scrollbar.js
-import { kitStore } from "@linear_non/stellar-kit";
-import { emitter, EVENTS, Raf } from "@linear_non/stellar-kit/events";
+import { kitStore } from "@linear_non/stellar-kit"
+import { emitter, EVENTS, Raf } from "@linear_non/stellar-kit/events"
 
 export default class Scrollbar {
   constructor(obj) {
-    this.container = obj.container || document.body;
-    this.el = null;
-    this.handle = null;
-    this.touching = false;
+    this.container = obj.container || document.body
+    this.el = null
+    this.handle = null
+    this.touching = false
 
     this.state = {
       clicked: false,
       scale: 0,
       current: 0,
-    };
-    this.height = 0;
-    this.init();
+    }
+    this.height = 0
+    this.init()
   }
 
   init() {
-    this.create();
-    this.setBounds();
-    this.on();
+    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);
+    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);
+    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";
-    document.body.style.webkitUserSelect = "none";
-    document.body.style.pointerEvents = "none";
-  };
+    this.touching = true
+    document.body.style.userSelect = "none"
+    document.body.style.webkitUserSelect = "none"
+    document.body.style.pointerEvents = "none"
+  }
 
   mouseUp = () => {
-    this.touching = false;
-    document.body.style.userSelect = "inherit";
-    document.body.style.webkitUserSelect = "inherit";
-    document.body.style.pointerEvents = "inherit";
-  };
+    this.touching = false
+    document.body.style.userSelect = "inherit"
+    document.body.style.webkitUserSelect = "inherit"
+    document.body.style.pointerEvents = "inherit"
+  }
 
-  mouseMove = (e) => {
+  mouseMove = e => {
     if (this.touching === true) {
-      const { isLocked } = kitStore.flags;
+      const { isLocked } = kitStore.flags
 
-      if (isLocked) return;
+      if (isLocked) return
 
-      kitStore.raf.scroll.target = e.clientY * this.state.scale;
-      kitStore.raf.clamp();
+      kitStore.raf.scroll.target = e.clientY * this.state.scale
+      kitStore.raf.clamp()
     }
-  };
+  }
 
   setBounds() {
-    const { vh, fh } = kitStore.sizes;
-    const scrollLimit = fh;
-    this.state.scale = (scrollLimit + vh) / vh;
-    this.handle.style.height = `${vh / this.state.scale}px`;
+    const { vh, fh } = kitStore.sizes
+    const scrollLimit = fh
+    this.state.scale = (scrollLimit + vh) / vh
+    this.handle.style.height = `${vh / this.state.scale}px`
   }
 
   tick = ({ current }) => {
-    const scroll = current / this.state.scale;
-    this.state.current = scroll;
-    this.handle.style.transform = `translate3d(0, ${this.state.current}px, 0)`;
-  };
+    const scroll = current / this.state.scale
+    this.state.current = scroll
+    this.handle.style.transform = `translate3d(0, ${this.state.current}px, 0)`
+  }
 
   resize = () => {
-    this.setBounds();
-  };
+    this.setBounds()
+  }
 
   calcScroll(e) {
-    const delta = e.clientY * this.state.scale;
-    Raf.target = delta;
-    Raf.clampTarget();
+    const delta = e.clientY * this.state.scale
+    Raf.target = delta
+    Raf.clampTarget()
   }
 
   create() {
-    this.el = document.createElement("div");
-    this.handle = document.createElement("div");
-    this.el.classList.add("scrollbar");
-    this.handle.classList.add("handle");
+    this.el = document.createElement("div")
+    this.handle = document.createElement("div")
+    this.el.classList.add("scrollbar")
+    this.handle.classList.add("handle")
 
     Object.assign(this.el.style, {
       position: "fixed",
@@ -100,7 +100,7 @@ export default class Scrollbar {
       right: 0,
       height: "100%",
       pointerEvents: "all",
-    });
+    })
 
     Object.assign(this.handle.style, {
       position: "absolute",
@@ -109,17 +109,17 @@ export default class Scrollbar {
       width: "100%",
       cursor: "pointer",
       zIndex: 101,
-    });
+    })
 
-    this.container.appendChild(this.el);
-    this.el.appendChild(this.handle);
+    this.container.appendChild(this.el)
+    this.el.appendChild(this.handle)
   }
 
   update() {
-    this.setBounds();
+    this.setBounds()
   }
 
   destroy() {
-    this.off();
+    this.off()
   }
 }

package/src/Smooth/index.js

@@ -1,36 +1,36 @@
 // Smooth.js
-import Scrollbar from "../ScrollBar";
-import { kitStore } from "@linear_non/stellar-kit";
-import { emitter, EVENTS } from "@linear_non/stellar-kit/events";
-import { qs, qsa, bounds } from "@linear_non/stellar-kit/utils";
+import Scrollbar from "../ScrollBar"
+import { kitStore } from "@linear_non/stellar-kit"
+import { emitter, EVENTS } from "@linear_non/stellar-kit/events"
+import { qs, qsa, bounds } from "@linear_non/stellar-kit/utils"
 
 export default class Smooth {
   constructor(obj) {
-    this.scroll = obj.scroll;
-    this.el = qs("[data-view]");
-    this.elems = null;
-    this.current = 0;
-    this.threshold = 100;
-    this.sections = null;
-    this.scrollbar = null;
-    this.init();
+    this.scroll = obj.scroll
+    this.el = qs("[data-view]")
+    this.elems = null
+    this.current = 0
+    this.threshold = 100
+    this.sections = null
+    this.scrollbar = null
+    this.init()
   }
 
   getSections() {
-    const { isSmooth } = kitStore.flags;
-    if (!this.elems || !isSmooth) return;
+    const { isSmooth } = kitStore.flags
+    if (!this.elems || !isSmooth) return
 
-    this.sections = [];
-    this.elems.forEach((el) => {
-      el.style.transform = "translate3d(0, 0, 0)";
-      const speed = el.dataset.speed || 1;
-      const { top, bottom, offset } = this.getVars(el, speed);
-      let parent = el.parentNode.closest("[data-smooth]");
+    this.sections = []
+    this.elems.forEach(el => {
+      el.style.transform = "translate3d(0, 0, 0)"
+      const speed = el.dataset.speed || 1
+      const { top, bottom, offset } = this.getVars(el, speed)
+      let parent = el.parentNode.closest("[data-smooth]")
 
       if (parent) {
-        this.sections.some((obj) => {
-          if (obj.el === parent) parent = obj;
-        });
+        this.sections.some(obj => {
+          if (obj.el === parent) parent = obj
+        })
       }
 
       this.sections.push({
@@ -42,108 +42,107 @@ export default class Smooth {
         speed,
         out: true,
         transform: 0,
-      });
-    });
+      })
+    })
   }
 
   tick = ({ current }) => {
-    this.current = current;
-    this.transformSections();
-  };
+    this.current = current
+    this.transformSections()
+  }
 
   transformSections() {
-    const { isSmooth, isResizing } = kitStore.flags;
-    if (!this.sections || !isSmooth) return;
+    const { isSmooth, isResizing } = kitStore.flags
+    if (!this.sections || !isSmooth) return
 
-    this.sections.forEach((section) => {
-      const { isVisible, transform } = this.isVisible(section);
+    this.sections.forEach(section => {
+      const { isVisible, transform } = this.isVisible(section)
 
       if (isVisible || isResizing || !section.out) {
-        section.out = !isVisible;
-        section.transform = transform;
-        section.el.style.transform = this.getTransform(transform);
+        section.out = !isVisible
+        section.transform = transform
+        section.el.style.transform = this.getTransform(transform)
       }
-    });
+    })
   }
 
   isVisible(section) {
-    const { vh } = kitStore.sizes;
-    const { top, bottom, offset, speed, parent } = 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 = start < this.threshold + vh && end > -this.threshold;
+    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 = start < this.threshold + vh && end > -this.threshold
 
-    return { isVisible, transform };
+    return { isVisible, transform }
   }
 
   getTransform(transform) {
-    return `translate3d(0, ${-transform}px, 0)`;
+    return `translate3d(0, ${-transform}px, 0)`
   }
 
   getVars(el, speed) {
-    const { vh } = kitStore.sizes;
-    const rect = bounds(el);
-    const centering = vh / 2 - rect.height / 2;
-    const offset =
-      rect.top < vh
-        ? 0
-        : (rect.top - centering) * speed - (rect.top - centering);
+    const { vh } = kitStore.sizes
+    const rect = bounds(el)
+    const centering = vh / 2 - rect.height / 2
+    const offset = rect.top < vh ? 0 : (rect.top - centering) * speed - (rect.top - centering)
 
     return {
       top: rect.top + offset,
       bottom: rect.bottom + offset,
       offset,
-    };
+    }
   }
 
   resize = () => {
-    if (!this.sections) return;
+    if (!this.sections) return
 
-    this.sections.forEach((section) => {
-      section.el.style.transform = "translate3d(0, 0, 0)";
-      const { top, bottom, offset } = this.getVars(section.el, section.speed);
-      Object.assign(section, { top, bottom, offset });
-    });
+    this.sections.forEach(section => {
+      section.el.style.transform = "translate3d(0, 0, 0)"
+      const { top, bottom, offset } = this.getVars(section.el, section.speed)
+      Object.assign(section, { top, bottom, offset })
+    })
 
-    emitter.emit(EVENTS.APP_SMOOTH_RESIZE);
-    this.transformSections();
-  };
+    emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
+    this.transformSections()
+  }
 
   update(elems) {
-    kitStore.flags.isResizing = true;
+    kitStore.flags.isResizing = true
 
-    this.scroll.setScrollBounds();
-    this.elems = elems || qsa("[data-smooth]");
-    this.scrollbar.update();
-    this.getSections();
-    this.transformSections();
+    this.scroll.setScrollBounds()
+    this.elems = elems || qsa("[data-smooth]")
+    this.scrollbar.update()
+    this.getSections()
+    this.transformSections()
 
-    kitStore.flags.isResizing = false;
+    kitStore.flags.isResizing = false
   }
 
   clean() {
-    this.elems = this.sections = null;
+    this.elems = this.sections = null
   }
 
   on() {
-    emitter.on(EVENTS.APP_TICK, this.tick);
-    emitter.on(EVENTS.APP_RESIZE, this.resize);
+    emitter.on(EVENTS.APP_TICK, this.tick)
+    emitter.on(EVENTS.APP_RESIZE, this.resize)
   }
 
   off() {
-    emitter.off(EVENTS.APP_TICK, this.tick);
-    emitter.off(EVENTS.APP_RESIZE, this.resize);
+    emitter.off(EVENTS.APP_TICK, this.tick)
+    emitter.off(EVENTS.APP_RESIZE, this.resize)
   }
 
   init(elems) {
-    this.elems = elems || qsa("[data-smooth]");
-    this.getSections();
-    this.scrollbar = new Scrollbar(this.current);
-    this.on();
-    this.update();
+    this.elems = elems || qsa("[data-smooth]")
+    this.getSections()
+    this.scrollbar = new Scrollbar({
+      container: kitStore.pageContent,
+    })
+    this.on()
+    this.update()
   }
 }

package/src/SplitOnScroll/index.js

@@ -1,6 +1,6 @@
-import { splitText, reverseSplit } from "@linear_non/stellar-kit/utils";
-import { EVENTS } from "@linear_non/stellar-kit/events";
-import { ScrollTrigger } from "@linear_non/stellar-kit/gsap";
+import { splitText, reverseSplit } from "@linear_non/stellar-kit/utils"
+import { EVENTS } from "@linear_non/stellar-kit/events"
+import { ScrollTrigger } from "@linear_non/stellar-kit/gsap"
 
 export default class SplitonScroll {
   constructor({
@@ -13,19 +13,19 @@ export default class SplitonScroll {
     scrub = false,
     once = true,
   }) {
-    this.element = el;
-    this.splitText = splitText;
-    this.splits = [];
-    this.animateCallback = animate || (() => {});
-    this.reverseCallback = reverse || (() => {});
-    this.start = start;
-    this.end = end;
-    this.scrub = scrub;
-    this.once = once;
+    this.element = el
+    this.splitText = splitText
+    this.splits = []
+    this.animateCallback = animate || (() => {})
+    this.reverseCallback = reverse || (() => {})
+    this.start = start
+    this.end = end
+    this.scrub = scrub
+    this.once = once
 
-    if (!this.splitText[0]) return;
+    if (!this.splitText[0]) return
 
-    this.initScrollTrigger();
+    this.initScrollTrigger()
   }
 
   initScrollTrigger() {
@@ -37,20 +37,20 @@ export default class SplitonScroll {
       once: this.once,
       onEnter: () => this.handleEnter(),
       onLeave: () => this.handleLeave(),
-    });
+    })
   }
 
   handleEnter() {
-    const split = splitText(this.splitText);
-    split.on(EVENTS.APP_SPLITTEXT_READY, (splits) => {
-      this.splits = [...splits];
-      this.animateCallback([...splits]);
-    });
+    const split = splitText(this.splitText)
+    split.on(EVENTS.APP_SPLITTEXT_READY, splits => {
+      this.splits = [...splits]
+      this.animateCallback([...splits])
+    })
   }
 
   handleLeave() {
-    reverseSplit(this.splits);
-    this.reverseCallback();
-    this.myScrollTrigger.kill();
+    reverseSplit(this.splits)
+    this.reverseCallback()
+    this.myScrollTrigger.kill()
   }
 }

package/src/Sticky/index.js

@@ -1,22 +1,21 @@
 // Sticky.js
-import { bounds } from "@linear_non/stellar-kit/utils";
-import { gsap, ScrollTrigger } from "@linear_non/stellar-kit/gsap";
+import { bounds } from "@linear_non/stellar-kit/utils"
+import { gsap, ScrollTrigger } from "@linear_non/stellar-kit/gsap"
 
 export default class Sticky {
   constructor(obj) {
-    const { el, sticky, isSmooth, onUpdateCallback } = obj;
-
-    this.el = el;
-    this.sticky = sticky;
-    this.isSticky = false;
-    this.isSmooth = isSmooth;
-    this.progress = 0;
-    this.total = 0;
-    this.positionX = 0;
-    this.positionY = 0;
-    this.scrollTrigger = null;
-    this.onUpdateCallback =
-      typeof onUpdateCallback === "function" ? onUpdateCallback : null;
+    const { el, sticky, isSmooth, onUpdateCallback } = obj
+
+    this.el = el
+    this.sticky = sticky
+    this.isSticky = false
+    this.isSmooth = isSmooth
+    this.progress = 0
+    this.total = 0
+    this.positionX = 0
+    this.positionY = 0
+    this.scrollTrigger = null
+    this.onUpdateCallback = typeof onUpdateCallback === "function" ? onUpdateCallback : null
 
     this.config = {
       width: 0,
@@ -24,13 +23,13 @@ export default class Sticky {
       totalWidth: 0,
       totalHeight: 0,
       totalItems: 0,
-    };
-    if (!isSmooth) sticky.style.pointerEvents = "none";
-    this.init();
+    }
+    if (!isSmooth) sticky.style.pointerEvents = "none"
+    this.init()
   }
 
   observer() {
-    if (this.scrollTrigger) this.scrollTrigger.kill(); // Prevent duplicate listeners
+    if (this.scrollTrigger) this.scrollTrigger.kill() // Prevent duplicate listeners
 
     this.scrollTrigger = ScrollTrigger.create({
       trigger: this.el,
@@ -41,47 +40,41 @@ export default class Sticky {
       onEnterBack: () => this.toggleSticky(true),
       onLeave: () => this.toggleSticky(false, true), // ✅ Ensure totalHeight is passed
       onLeaveBack: () => this.toggleSticky(false),
-      onUpdate: (self) => this.onUpdate(self),
-    });
+      onUpdate: self => this.onUpdate(self),
+    })
   }
 
   toggleSticky(isSticky, hasTotalHeight = false) {
-    this.isSticky = isSticky;
-    isSticky
-      ? this.addSticky()
-      : this.removeSticky(hasTotalHeight ? this.config.totalHeight : 0);
+    this.isSticky = isSticky
+    isSticky ? this.addSticky() : this.removeSticky(hasTotalHeight ? this.config.totalHeight : 0)
   }
 
   addSticky() {
-    if (!this.sticky || this.isSmooth) return;
-    this.sticky.classList.add("-fixed");
-    gsap.set(this.sticky, { top: 0, position: "" });
+    if (!this.sticky || this.isSmooth) return
+    this.sticky.classList.add("-fixed")
+    gsap.set(this.sticky, { top: 0, position: "" })
   }
 
   removeSticky(totalHeight = 0) {
-    if (!this.sticky || this.isSmooth) return;
-    this.sticky.classList.remove("-fixed");
-    gsap.set(this.sticky, { top: `${totalHeight}px`, position: "relative" });
+    if (!this.sticky || this.isSmooth) return
+    this.sticky.classList.remove("-fixed")
+    gsap.set(this.sticky, { top: `${totalHeight}px`, position: "relative" })
   }
 
   onUpdate(self) {
-    const { totalWidth, totalHeight } = this.config;
-    const newProgress = self.progress;
-    const newY = newProgress * totalHeight;
-    const newX = -newProgress * totalWidth;
+    const { totalWidth, totalHeight } = this.config
+    const newProgress = self.progress
+    const newY = newProgress * totalHeight
+    const newX = -newProgress * totalWidth
 
     // Only update if values change to prevent unnecessary calls
-    if (
-      this.progress !== newProgress ||
-      this.positionY !== newY ||
-      this.positionX !== newX
-    ) {
-      this.progress = newProgress;
-      this.positionY = newY;
-      this.positionX = newX;
+    if (this.progress !== newProgress || this.positionY !== newY || this.positionX !== newX) {
+      this.progress = newProgress
+      this.positionY = newY
+      this.positionX = newX
 
       if (this.isSmooth) {
-        gsap.set(this.sticky, { y: this.positionY });
+        gsap.set(this.sticky, { y: this.positionY })
       }
 
       // Call the callback function if provided
@@ -90,34 +83,34 @@ export default class Sticky {
           progress: this.progress,
           positionX: this.positionX,
           positionY: this.positionY,
-        });
+        })
       }
     }
   }
 
   resize() {
-    if (!this.sticky) return;
+    if (!this.sticky) return
 
     // Get the viewport height dynamically instead of using store
-    const vh = window.innerHeight;
-    let stickyRect = bounds(this.el);
+    const vh = window.innerHeight
+    let stickyRect = bounds(this.el)
 
     Object.assign(this.config, {
       totalHeight: stickyRect.height - vh,
-    });
+    })
   }
 
   destroy() {
     if (this.scrollTrigger) {
-      this.scrollTrigger.kill();
-      this.scrollTrigger = null;
+      this.scrollTrigger.kill()
+      this.scrollTrigger = null
     }
-    this.sticky = null;
-    this.el = null;
+    this.sticky = null
+    this.el = null
   }
 
   init() {
-    this.resize();
-    this.observer();
+    this.resize()
+    this.observer()
   }
 }

package/src/index.js

@@ -1,5 +1,5 @@
-import Sticky from "./Sticky";
-import Smooth from "./Smooth";
-import SplitonScroll from "./SplitOnScroll";
+import Sticky from "./Sticky"
+import Smooth from "./Smooth"
+import SplitonScroll from "./SplitOnScroll"
 
-export { Sticky, Smooth, SplitonScroll };
+export { Sticky, Smooth, SplitonScroll }