atharv-mandlavdiya 1.2.1 → 1.2.3

package/atharvmandlavdiya.js

@@ -19,10 +19,8 @@ const progressCardStyles = `
 
 .progress-wrapper {
   position: relative;
-  min-height: 1024px;
   width: 100%;
   box-sizing: border-box;
-  overflow: visible;
 }
 
 progress-card {
@@ -31,18 +29,20 @@ progress-card {
   top: 30vh;
   height: 40vh;
   width: 100%;
-  max-width: 100%;
   margin-bottom: 30vh;
+  overflow: hidden;
+  --progress-card-radius-start: 2.441rem;
+  --progress-card-radius-end: 1rem;
   scale: calc(0.5 + var(--progress) * 0.5);
   clip-path: rect(
-    calc(20% - var(--progress) * 20%) 
-    calc(90% + var(--progress) * 10%) 
-    calc(80% + var(--progress) * 20%) 
+    calc(20% - var(--progress) * 20%)
+    calc(90% + var(--progress) * 10%)
+    calc(80% + var(--progress) * 20%)
     calc(10% - var(--progress) * 10%)
-    round calc(2.441rem - var(--progress) * 2.441rem)
+    round calc(var(--progress-card-radius-start) - var(--progress) * (var(--progress-card-radius-start) - var(--progress-card-radius-end)))
   );
   transform: translateZ(0);
-  overflow: hidden;
+  will-change: clip-path, scale;
 }
 
 @media (min-width: 1024px) {
@@ -54,11 +54,11 @@ progress-card {
     margin-right: auto;
     margin-bottom: 15vh;
     clip-path: rect(
-      calc(20% - var(--progress) * 20%) 
-      calc(70% + var(--progress) * 30%) 
+      calc(20% - var(--progress) * 20%)
+      calc(70% + var(--progress) * 30%)
       calc(80% + var(--progress) * 20%)
-      calc(30% - var(--progress) * 30%) 
-      round calc(2.441rem - var(--progress) * 2.441rem)
+      calc(30% - var(--progress) * 30%)
+      round calc(var(--progress-card-radius-start) - var(--progress) * (var(--progress-card-radius-start) - var(--progress-card-radius-end)))
     );
   }
 }
@@ -74,7 +74,8 @@ progress-card > div {
 `;
 
 function injectProgressCardStyles(root) {
-  if (!root.document || root.document.getElementById('atharv-progress-card-styles')) return;
+  if (!root.document) return;
+  if (root.document.getElementById('atharv-progress-card-styles')) return;
 
   const style = root.document.createElement('style');
   style.id = 'atharv-progress-card-styles';
@@ -82,11 +83,14 @@ function injectProgressCardStyles(root) {
   (root.document.head || root.document.documentElement).appendChild(style);
 }
 
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
 function isScrollable(element, root) {
   const style = root.getComputedStyle(element);
   const overflow = `${style.overflow} ${style.overflowY}`;
-  return /(auto|scroll|overlay)/.test(overflow) &&
-    (element.scrollHeight > element.clientHeight || /(auto|scroll|overlay)/.test(overflow));
+  return /(auto|scroll|overlay)/.test(overflow);
 }
 
 function findScrollContainer(element, root) {
@@ -99,84 +103,138 @@ function findScrollContainer(element, root) {
 }
 
 function getScrollPosition(container, root) {
-  return container === root ? (root.pageYOffset || root.scrollY || 0) : container.scrollTop;
+  if (container !== root) return container.scrollTop;
+  return root.scrollY || root.pageYOffset || 0;
 }
 
 function getViewportHeight(container, root) {
-  return container === root ? root.innerHeight : container.clientHeight;
+  if (container !== root) return container.clientHeight;
+  return root.innerHeight;
 }
 
-function getWrapperPosition(wrapper, container, root) {
-  const wrapperRect = wrapper.getBoundingClientRect();
-  if (container === root) return wrapperRect.top + getScrollPosition(container, root);
+const cards = new Set();
+let frameQueued = false;
 
-  const containerRect = container.getBoundingClientRect();
-  return wrapperRect.top - containerRect.top + getScrollPosition(container, root);
+function queueFrame() {
+  if (frameQueued) return;
+  frameQueued = true;
+  requestAnimationFrame(runFrame);
 }
 
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
+function runFrame() {
+  frameQueued = false;
+  for (const card of cards) {
+    if (card.dirty) card.measure();
+  }
+  for (const card of cards) card.render();
+}
+
+function markAllDirty() {
+  for (const card of cards) card.dirty = true;
+  queueFrame();
+}
+
+function releaseContainer(container) {
+  for (const card of cards) {
+    if (card.container === container) return;
+  }
+  container.removeEventListener('scroll', queueFrame);
 }
 
 function defineProgressCard(root) {
-  if (!root.document || !root.customElements || root.customElements.get('progress-card')) return;
+  if (!root.document || !root.customElements) return;
+  if (root.customElements.get('progress-card')) return;
+
+  root.addEventListener('resize', markAllDirty, { passive: true });
 
   root.customElements.define('progress-card', class extends root.HTMLElement {
     constructor() {
       super();
-      this._wrapper = null;
-      this._scrollContainer = null;
-      this._onScroll = () => this._updateProgress();
-      this._onResize = () => this._updateProgress();
+      this.wrapper = null;
+      this.container = null;
+      this.observer = null;
+      this.mounting = false;
+      this.dirty = true;
+      this.start = 0;
+      this.range = 1;
+      this.last = -1;
     }
 
     connectedCallback() {
-      if (!this._wrapper) {
-        const scrollLength = Number.parseFloat(this.dataset.scrollLength) || 300;
-        const wrapper = root.document.createElement('div');
-        wrapper.className = 'progress-wrapper';
-        wrapper.style.minHeight = `${scrollLength}vh`;
-        this._wrapper = wrapper;
-        this.parentNode.insertBefore(wrapper, this);
-        wrapper.appendChild(this);
+      if (this.mounting) return;
+      if (!this.wrapper) this.mount();
+
+      this.container = findScrollContainer(this, root);
+      this.container.addEventListener('scroll', queueFrame, { passive: true });
+
+      if (root.ResizeObserver && !this.observer) {
+        this.observer = new root.ResizeObserver(markAllDirty);
+        this.observer.observe(this.wrapper);
       }
 
-      this._scrollContainer = findScrollContainer(this, root);
-      this._scrollContainer.addEventListener('scroll', this._onScroll, { passive: true });
-      root.addEventListener('resize', this._onResize, { passive: true });
-      this._updateProgress();
+      cards.add(this);
+      this.dirty = true;
+      queueFrame();
     }
 
     disconnectedCallback() {
-      if (this._scrollContainer) {
-        this._scrollContainer.removeEventListener('scroll', this._onScroll);
-        this._scrollContainer = null;
-      }
-      root.removeEventListener('resize', this._onResize);
-      if (this._wrapper && this._wrapper.parentNode && !this._wrapper.contains(this)) {
-        this._wrapper.parentNode.removeChild(this._wrapper);
+      if (this.mounting) return;
+      cards.delete(this);
+
+      if (this.observer) this.observer.disconnect();
+      this.observer = null;
+
+      if (this.container) releaseContainer(this.container);
+      this.container = null;
+
+      const wrapper = this.wrapper;
+      this.wrapper = null;
+      if (!wrapper || !wrapper.parentNode) return;
+      if (wrapper.contains(this)) return;
+      wrapper.parentNode.removeChild(wrapper);
+    }
+
+    mount() {
+      const length = Number.parseFloat(this.dataset.scrollLength) || 300;
+      const wrapper = root.document.createElement('div');
+      wrapper.className = 'progress-wrapper';
+      wrapper.style.minHeight = `${length}vh`;
+
+      this.wrapper = wrapper;
+      this.mounting = true;
+      this.parentNode.insertBefore(wrapper, this);
+      wrapper.appendChild(this);
+      this.mounting = false;
+    }
+
+    measure() {
+      const container = this.container;
+      if (!container || !this.wrapper) return;
+
+      const viewport = getViewportHeight(container, root);
+      const rect = this.wrapper.getBoundingClientRect();
+      const scroll = getScrollPosition(container, root);
+
+      let top = rect.top + scroll;
+      if (container !== root) {
+        top = rect.top - container.getBoundingClientRect().top + scroll;
       }
-      this._wrapper = null;
+
+      this.start = top;
+      this.range = Math.max(1, rect.height - viewport);
+      this.dirty = false;
     }
 
-    _updateProgress() {
-      if (!this._wrapper || !this._scrollContainer) return;
-      const viewportHeight = getViewportHeight(this._scrollContainer, root);
-      const wrapperStart = getWrapperPosition(this._wrapper, this._scrollContainer, root);
-      const wrapperHeight = this._wrapper.offsetHeight ||
-        this._wrapper.getBoundingClientRect().height;
-      const sectionStart = wrapperStart - viewportHeight;
-      const sectionEnd = wrapperStart + wrapperHeight - viewportHeight;
-      const scrollPosition = getScrollPosition(this._scrollContainer, root);
-      const progress = sectionEnd <= sectionStart
-        ? (scrollPosition >= sectionEnd ? 1 : 0)
-        : clamp(
-          (scrollPosition - sectionStart) / (sectionEnd - sectionStart),
-          0,
-          1
-        );
-
-      this.style.setProperty('--progress', String(progress));
+    render() {
+      if (!this.container) return;
+
+      const scroll = getScrollPosition(this.container, root);
+      const raw = (scroll - this.start) / this.range;
+      const value = Math.round(clamp(raw, 0, 1) * 1e4) / 1e4;
+
+      if (value === this.last) return;
+      this.last = value;
+      this.style.setProperty('--progress', String(value));
     }
   });
 }
@@ -190,6 +248,63 @@ export function progressCard() {
   defineProgressCard(globalThis);
 }
 
+export function smoothScroll(options = {}) {
+  const root = globalThis;
+  if (!root.document || !root.matchMedia) return;
+  if (root.matchMedia('(pointer: coarse)').matches) return;
+
+  const speed = options.speed ?? 0.09;
+  const accel = options.accel ?? 0.42;
+  const multiplier = options.multiplier ?? 1.1;
+  const maxDelta = options.maxDelta ?? 2400;
+  const stop = options.stop ?? 0.08;
+
+  let delta = 0;
+  let target = 0;
+  let current = 0;
+  let running = false;
+
+  function limit() {
+    const doc = root.document.documentElement;
+    return Math.max(0, doc.scrollHeight - root.innerHeight);
+  }
+
+  function step() {
+    if (delta === 0) {
+      running = false;
+      return;
+    }
+
+    delta = clamp(delta, -maxDelta, maxDelta);
+    target = clamp(target + delta * accel, 0, limit());
+
+    const lerped = (target - current) * speed;
+    current += lerped;
+    delta *= 1 - accel;
+
+    if (Math.abs(lerped) < stop) {
+      current = Math.round(target);
+      delta = 0;
+    }
+
+    root.scrollTo(0, current);
+    requestAnimationFrame(step);
+  }
+
+  root.addEventListener('wheel', (event) => {
+    event.preventDefault();
+
+    if (!running) {
+      target = getScrollPosition(root, root);
+      current = target;
+      running = true;
+      requestAnimationFrame(step);
+    }
+
+    delta += event.deltaY * multiplier;
+  }, { passive: false });
+}
+
 const _svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 200" width="650" height="200">
   <defs>
     <linearGradient id="pathGradient" x1="0%" y1="0%" x2="100%" y2="0%">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atharv-mandlavdiya",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Made With Love By Atharv Mandlavdiya",
   "type": "module",
   "main": "atharvmandlavdiya.js",

package/test/progress-card.test.js

@@ -1,213 +0,0 @@
-import test, { afterEach } from 'node:test';
-import assert from 'node:assert/strict';
-
-class FakeStyle {
-  setProperty(name, value) {
-    this[name] = value;
-  }
-
-  getPropertyValue(name) {
-    return this[name] || '';
-  }
-}
-
-class FakeElement {
-  constructor() {
-    this.children = [];
-    this.attributes = new Map();
-    this.style = new FakeStyle();
-    this.listeners = new Map();
-    this.parentElement = null;
-    this._rect = { top: 0, height: 0 };
-    this._height = 0;
-    this.clientHeight = 0;
-    this.scrollHeight = 0;
-    this.scrollTop = 0;
-  }
-
-  get parentNode() {
-    return this.parentElement;
-  }
-
-  get dataset() {
-    return Object.fromEntries([...this.attributes]
-      .filter(([name]) => name.startsWith('data-'))
-      .map(([name, value]) => [
-        name.slice(5).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()),
-        value
-      ]));
-  }
-
-  get offsetHeight() {
-    return this._height;
-  }
-
-  set className(value) {
-    this.attributes.set('class', value);
-  }
-
-  get className() {
-    return this.attributes.get('class') || '';
-  }
-
-  setAttribute(name, value) {
-    this.attributes.set(name, String(value));
-  }
-
-  hasAttribute(name) {
-    return this.attributes.has(name);
-  }
-
-  appendChild(child) {
-    child.parentElement = this;
-    this.children.push(child);
-    return child;
-  }
-
-  insertBefore(child, reference) {
-    child.parentElement = this;
-    const index = this.children.indexOf(reference);
-    this.children.splice(index < 0 ? this.children.length : index, 0, child);
-    return child;
-  }
-
-  removeChild(child) {
-    this.children.splice(this.children.indexOf(child), 1);
-    child.parentElement = null;
-    return child;
-  }
-
-  contains(child) {
-    return this.children.includes(child) || this.children.some((item) => item.contains(child));
-  }
-
-  getBoundingClientRect() {
-    return this._rect;
-  }
-
-  addEventListener(type, listener) {
-    if (!this.listeners.has(type)) this.listeners.set(type, new Set());
-    this.listeners.get(type).add(listener);
-  }
-
-  removeEventListener(type, listener) {
-    this.listeners.get(type)?.delete(listener);
-  }
-}
-
-class FakeHTMLElement extends FakeElement {}
-
-const body = new FakeElement();
-const head = new FakeElement();
-const documentElement = new FakeElement();
-globalThis.HTMLElement = FakeHTMLElement;
-globalThis.document = {
-  body,
-  head,
-  documentElement,
-  createElement: () => new FakeElement(),
-  getElementById(id) {
-    return [head, ...head.children].find((element) => element.attributes.get('id') === id) || null;
-  }
-};
-globalThis.customElements = {
-  registry: new Map(),
-  define(name, constructor) {
-    this.registry.set(name, constructor);
-  },
-  get(name) {
-    return this.registry.get(name);
-  }
-};
-globalThis.innerHeight = 1000;
-globalThis.pageYOffset = 0;
-globalThis.scrollY = 0;
-globalThis.listeners = new Map();
-globalThis.addEventListener = (type, listener) => {
-  if (!globalThis.listeners.has(type)) globalThis.listeners.set(type, new Set());
-  globalThis.listeners.get(type).add(listener);
-};
-globalThis.removeEventListener = (type, listener) => globalThis.listeners.get(type)?.delete(listener);
-globalThis.getComputedStyle = (element) => ({
-  overflow: element._overflow || 'visible',
-  overflowY: element._overflowY || 'visible'
-});
-
-await import('../atharvmandlavdiya.js');
-
-const ProgressCard = customElements.get('progress-card');
-const createdCards = [];
-
-afterEach(() => {
-  for (const card of createdCards.splice(0)) {
-    card.parentElement?.removeChild(card);
-    card.disconnectedCallback();
-  }
-  globalThis.pageYOffset = 0;
-});
-
-function createCard(parent = body, scrollLength = '300') {
-  const card = new ProgressCard();
-  card.setAttribute('data-scroll-length', scrollLength);
-  parent.appendChild(card);
-  card.connectedCallback();
-  createdCards.push(card);
-  const wrapper = card.parentElement;
-  wrapper._height = 3000;
-  wrapper._rect = { top: 0, height: 3000 };
-  card._onScroll();
-  return { card, wrapper };
-}
-
-test('registers automatically, injects CSS, and needs no StringTune', () => {
-  assert.equal(typeof ProgressCard, 'function');
-  assert.match(head.children[0].textContent || head.children[0].style?.textContent || '', /progress-wrapper/);
-  assert.equal(globalThis.StringTune, undefined);
-});
-
-test('uses the window scroll range and clamps at both ends', () => {
-  const { card } = createCard();
-  assert.equal(card.style.getPropertyValue('--progress'), '0');
-  globalThis.pageYOffset = 1000;
-  card.parentElement._rect = { top: -1000, height: 3000 };
-  card._onScroll();
-  assert.equal(card.style.getPropertyValue('--progress'), '0.5');
-  globalThis.pageYOffset = 2000;
-  card.parentElement._rect = { top: -2000, height: 3000 };
-  card._onScroll();
-  assert.equal(card.style.getPropertyValue('--progress'), '1');
-  globalThis.pageYOffset = 2500;
-  card.parentElement._rect = { top: -2500, height: 3000 };
-  card._onScroll();
-  assert.equal(card.style.getPropertyValue('--progress'), '1');
-});
-
-test('uses the nearest nested scroll container', () => {
-  globalThis.pageYOffset = 0;
-  const brand = new FakeElement();
-  brand._overflowY = 'auto';
-  brand.clientHeight = 500;
-  brand.scrollHeight = 2000;
-  brand._rect = { top: 10, height: 500 };
-  body.appendChild(brand);
-  const { card, wrapper } = createCard(brand);
-  wrapper._height = 1500;
-  wrapper._rect = { top: 10, height: 1500 };
-  brand.scrollTop = 500;
-  wrapper._rect = { top: -490, height: 1500 };
-  card._onScroll();
-  assert.equal(card.style.getPropertyValue('--progress'), '0.5');
-});
-
-test('keeps cards independent and removes listeners on disconnect', () => {
-  const first = createCard();
-  const second = createCard();
-  assert.notEqual(first.card, second.card);
-  assert.equal(globalThis.listeners.get('resize').size >= 2, true);
-  first.card.parentElement.removeChild(first.card);
-  first.card.disconnectedCallback();
-  assert.equal(globalThis.listeners.get('resize').size >= 1, true);
-  second.card.parentElement.removeChild(second.card);
-  second.card.disconnectedCallback();
-  assert.equal(globalThis.listeners.get('resize').size, 0);
-});