atharv-mandlavdiya 1.0.13 → 1.0.16

package/README.md

@@ -18,4 +18,17 @@ import { atharvm } from "atharv-mandlavdiya";
 atharvm();
 ```
 
+The package also provides a self-contained progress card custom element. Import
+the package once; registration and CSS injection happen automatically:
+
+```html
+<script type="module">
+  import "atharv-mandlavdiya";
+</script>
+
+<progress-card data-scroll-length="300">
+  <div></div>
+</progress-card>
+```
+
 MIT © [Atharv Mandlavdiya](https://github.com/AtharvM02222)

package/atharvmandlavdiya.js

@@ -10,6 +10,168 @@ export function atharvm() {
   console.log(atharv_mandlavdiya);
 }
 
+const progressCardStyles = `
+@property --progress {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+.progress-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-height: 300vh;
+  padding: 0 4vw;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+progress-card {
+  display: block;
+  position: sticky;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  top: calc(var(--vh, 1vh) * 15);
+  height: calc(var(--vh, 1vh) * 70);
+  margin-bottom: calc(var(--vh, 1vh) * 15);
+  scale: calc(0.5 + var(--progress) * 0.5);
+  clip-path: rect(
+    calc(20% - var(--progress) * 18%)
+    calc(70% + var(--progress) * 26%)
+    calc(80% + var(--progress) * 18%)
+    calc(30% - var(--progress) * 26%)
+    round calc(2.441rem - var(--progress) * 1.941rem)
+  );
+  transform: translateZ(0);
+  overflow: hidden;
+}
+
+progress-card img,
+progress-card video,
+progress-card > div {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  object-fit: cover;
+}
+`;
+
+function injectProgressCardStyles(root) {
+  if (!root.document || root.document.getElementById('atharv-progress-card-styles')) return;
+
+  const style = root.document.createElement('style');
+  style.id = 'atharv-progress-card-styles';
+  style.textContent = progressCardStyles;
+  (root.document.head || root.document.documentElement).appendChild(style);
+}
+
+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));
+}
+
+function findScrollContainer(element, root) {
+  let parent = element.parentElement;
+  while (parent) {
+    if (isScrollable(parent, root)) return parent;
+    parent = parent.parentElement;
+  }
+  return root;
+}
+
+function getScrollPosition(container, root) {
+  return container === root ? (root.pageYOffset || root.scrollY || 0) : container.scrollTop;
+}
+
+function getViewportHeight(container, root) {
+  return container === root ? root.innerHeight : container.clientHeight;
+}
+
+function getWrapperPosition(wrapper, container, root) {
+  const wrapperRect = wrapper.getBoundingClientRect();
+  if (container === root) return wrapperRect.top + getScrollPosition(container, root);
+
+  const containerRect = container.getBoundingClientRect();
+  return wrapperRect.top - containerRect.top + getScrollPosition(container, root);
+}
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function defineProgressCard(root) {
+  if (!root.document || !root.customElements || root.customElements.get('progress-card')) return;
+
+  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();
+    }
+
+    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.parentNode.insertBefore(wrapper, this);
+        wrapper.appendChild(this);
+        this._wrapper = wrapper;
+      }
+
+      this._scrollContainer = findScrollContainer(this, root);
+      this._scrollContainer.addEventListener('scroll', this._onScroll, { passive: true });
+      root.addEventListener('resize', this._onResize, { passive: true });
+      this._updateProgress();
+    }
+
+    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);
+      }
+      this._wrapper = null;
+    }
+
+    _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 wrapperEnd = wrapperStart + wrapperHeight - viewportHeight;
+      const scrollPosition = getScrollPosition(this._scrollContainer, root);
+      const progress = wrapperEnd <= wrapperStart
+        ? (scrollPosition >= wrapperEnd ? 1 : 0)
+        : clamp((scrollPosition - wrapperStart) / (wrapperEnd - wrapperStart), 0, 1);
+
+      this.style.setProperty('--progress', String(progress));
+    }
+  });
+}
+
+injectProgressCardStyles(globalThis);
+defineProgressCard(globalThis);
+
+// Kept as a compatibility no-op for consumers upgrading from the old API.
+export function progressCard() {
+  injectProgressCardStyles(globalThis);
+  defineProgressCard(globalThis);
+}
+
 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,11 +1,12 @@
 {
   "name": "atharv-mandlavdiya",
-  "version": "1.0.13",
+  "version": "1.0.16",
   "description": "Made With Love By Atharv Mandlavdiya",
   "type": "module",
   "main": "atharvmandlavdiya.js",
   "exports": "./atharvmandlavdiya.js",
   "scripts": {
+    "test": "node --test",
     "postinstall": "node postinstall.js"
   },
   "keywords": [

package/prefabs/progress/progress.css

@@ -7,14 +7,19 @@
 .progress-wrapper {
   position: relative;
   width: 100%;
-  min-height: 1024px;
+  max-width: 100%;
+  min-height: 300vh;
   padding: 0 4vw;
   box-sizing: border-box;
+  overflow: hidden;
 }
 
 progress-card {
   display: block;
   position: sticky;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   top: calc(var(--vh, 1vh) * 15);
   height: calc(var(--vh, 1vh) * 70);
   margin-bottom: calc(var(--vh, 1vh) * 15);
@@ -35,6 +40,8 @@ progress-card video,
 progress-card > div {
   display: block;
   width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   height: 100%;
   object-fit: cover;
 }

package/prefabs/progress/progress.js

@@ -1,65 +1,51 @@
 (function (root) {
   'use strict';
 
-  var _counter = 0;
-  var _started = false;
-  var _instance = null;
-
-  function uid() {
-    _counter += 1;
-    return 'progress-' + _counter;
-  }
-
-  function getStringTune() {
-    if (_instance) return _instance;
-    var ST = root.StringTune;
-    if (!ST) return null;
-    var Ctor = (ST.StringTune && typeof ST.StringTune.getInstance === 'function')
-      ? ST.StringTune
-      : (typeof ST.getInstance === 'function' ? ST : null);
-    if (!Ctor) return null;
-    _instance = Ctor.getInstance();
-    return _instance;
-  }
-
-  function wrapElement(el) {
-    if (el.hasAttribute('data-progress-init')) return;
-    var scrollLen = parseInt(el.dataset.scrollLength, 10) || 1024;
-    var id = uid();
-
-    var wrapper = document.createElement('div');
-    wrapper.className = 'progress-wrapper';
-    wrapper.setAttribute('string', 'progress');
-    wrapper.setAttribute('string-id', id);
-    wrapper.setAttribute('string-enter-vp', 'top');
-    wrapper.setAttribute('string-exit-vp', 'bottom');
-    wrapper.style.minHeight = scrollLen + 'vh';
-
-    el.parentNode.insertBefore(wrapper, el);
-    wrapper.appendChild(el);
-    el.setAttribute('data-progress-init', id);
+  if (!root.document || !root.customElements || root.customElements.get('progress-card')) return;
+
+  function scrollParent(element) {
+    var parent = element.parentElement;
+    while (parent) {
+      var style = root.getComputedStyle(parent);
+      if (/(auto|scroll|overlay)/.test(style.overflow + ' ' + style.overflowY)) return parent;
+      parent = parent.parentElement;
+    }
+    return root;
   }
 
-  function startStringTune() {
-    if (_started) return;
-    var st = getStringTune();
-    if (!st) return;
-    var ST = root.StringTune;
-    if (ST.StringLazy) st.use(ST.StringLazy);
-    if (!ST.StringProgress) return;
-    st.use(ST.StringProgress);
-    st.start(0);
-    _started = true;
-    root.StringTuneContext = st;
+  function scrollPosition(container) {
+    return container === root ? (root.pageYOffset || root.scrollY || 0) : container.scrollTop;
   }
 
-  if (root.customElements) {
-    root.customElements.define('progress-card', class extends HTMLElement {
-      connectedCallback() {
-        wrapElement(this);
-        startStringTune();
-      }
-    });
+  function update(card, wrapper, container) {
+    var viewport = container === root ? root.innerHeight : container.clientHeight;
+    var wrapperRect = wrapper.getBoundingClientRect();
+    var start = container === root
+      ? wrapperRect.top + scrollPosition(container)
+      : wrapperRect.top - container.getBoundingClientRect().top + scrollPosition(container);
+    var end = start + (wrapper.offsetHeight || wrapperRect.height) - viewport;
+    var range = end - start;
+    var progress = range > 0 ? (scrollPosition(container) - start) / range : 0;
+    card.style.setProperty('--progress', String(Math.min(1, Math.max(0, progress))));
   }
 
+  root.customElements.define('progress-card', class extends root.HTMLElement {
+    connectedCallback() {
+      this._wrapper = root.document.createElement('div');
+      this._wrapper.className = 'progress-wrapper';
+      this._wrapper.style.minHeight = (parseFloat(this.dataset.scrollLength) || 300) + 'vh';
+      this.parentNode.insertBefore(this._wrapper, this);
+      this._wrapper.appendChild(this);
+      this._container = scrollParent(this);
+      this._update = () => update(this, this._wrapper, this._container);
+      this._container.addEventListener('scroll', this._update, { passive: true });
+      root.addEventListener('resize', this._update, { passive: true });
+      this._update();
+    }
+
+    disconnectedCallback() {
+      if (this._container) this._container.removeEventListener('scroll', this._update);
+      root.removeEventListener('resize', this._update);
+    }
+  });
 }(typeof globalThis !== 'undefined' ? globalThis : window));

package/test/progress-card.test.js

@@ -0,0 +1,213 @@
+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);
+});