highlight-scroll/dist/highlight-scroll.cjs.js

A lightweight and efficient Scroll Highlight plugin for Alpine.js, helping you track active sections on scroll.

var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var b=(c,s)=>{for(var f in s)h(c,f,{get:s[f],enumerable:!0})},v=(c,s,f,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let g of G(s))!H.call(c,g)&&g!==f&&h(c,g,{get:()=>s[g],enumerable:!(a=w(s,g))||a.enumerable});return c};var E=c=>v(h({},"__esModule",{value:!0}),c);var C={};b(C,{default:()=>y});module.exports=E(C);function d(c={}){return function(s){let f=c.offset??50,a=c.highlightClasses??"ease-in-out text-blue-500 scale-110 dark:text-blue-500 transition-all";s.store("HighlightScroll",{groups:{},getGroup(t){return t||(t="default"),this.groups[t]||(this.groups[t]={scrollEl:window,offset:c.offset??50,highlightClasses:c.highlightClasses??"ease-in-out text-blue-500 scale-110 dark:text-blue-500 transition-all",items:[],sections:[]}),this.groups[t]},setGroupOptions({group:t="default",offset:o,highlightClasses:e}){let l=this.getGroup(t);typeof o<"u"&&(l.offset=o),typeof e<"u"&&(l.highlightClasses=e)},setScrollable({group:t="default",el:o}){let e=this.getGroup(t);e.scrollEl=o},registerItem({group:t="default",el:o,target:e}){this.getGroup(t).items.push({el:o,target:e})},registerSection({group:t="default",el:o,id:e}){this.getGroup(t).sections.push({el:o,id:e})},onScroll(t="default"){let o=this.getGroup(t),e=o.scrollEl;if(!e)return;let l=e===window?window.scrollY:e.scrollTop,i="";for(let r=0;r<o.sections.length;r++){let u=o.sections[r],p=o.sections[r+1],S=u.el.offsetTop-o.offset,m=p?p.el.offsetTop-o.offset:1/0;if(l>=S&&l<m){i=u.id;break}}for(let r of o.items)r.el.classList.remove(...o.highlightClasses.split(" "));if(i){let r=o.items.find(u=>u.target===i);r&&r.el.classList.add(...o.highlightClasses.split(" "))}},smoothScrollTo({group:t="default",target:o}){let e=this.getGroup(t),l=e.scrollEl,i=document.getElementById(o);if(!i)return;let r=i.offsetTop-e.offset;l===window?window.scrollTo({top:r,behavior:"smooth"}):l.scrollTo({top:r,behavior:"smooth"})}});function g({expression:t,evaluate:o,defaultProp:e}){if(!t||!t.trim())return{};try{let l=o(t);return typeof l=="string"?{[e]:l}:l&&typeof l=="object"?l:{[e]:t}}catch{return{[e]:t}}}s.directive("scroll-group",(t,{expression:o},{evaluate:e})=>{let l=g({expression:o,evaluate:e,defaultProp:"group"}),i=l.group||"default";s.store("HighlightScroll").setGroupOptions({group:i,offset:l.offset,highlightClasses:l.highlightClasses}),t.dataset.scrollGroup=i}),s.directive("scroll-container",(t,{expression:o},{evaluate:e})=>{let i=g({expression:o,evaluate:e,defaultProp:"group"}).group||n(t)||"default";s.store("HighlightScroll").setScrollable({group:i,el:t}),t.addEventListener("scroll",()=>{s.store("HighlightScroll").onScroll(i)}),s.store("HighlightScroll").onScroll(i)}),s.directive("scroll-item",(t,{expression:o},{evaluate:e})=>{let l;typeof o=="string"?l=g({expression:o,evaluate:e,defaultProp:"target"}):l=o;let i=l.group||n(t),r=l.target||l.id;r&&(s.store("HighlightScroll").registerItem({group:i,el:t,target:r}),t.addEventListener("click",()=>{s.store("HighlightScroll").smoothScrollTo({group:i,target:r})}))}),s.directive("scroll-section",(t,{expression:o},{evaluate:e})=>{let l;typeof o=="string"?l=g({expression:o,evaluate:e,defaultProp:"id"}):l=o;let i=l.group||n(t),r=l.id;r&&(t.id||(t.id=r),s.store("HighlightScroll").registerSection({group:i,el:t,id:r}))}),window.addEventListener("scroll",()=>{s.store("HighlightScroll").getGroup("default").scrollEl===window&&s.store("HighlightScroll").onScroll("default")}),s.store("HighlightScroll").getGroup("default").scrollEl===window&&s.store("HighlightScroll").onScroll("default");function n(t){let o=t.closest("[data-scroll-group]");return o?o.dataset.scrollGroup:"default"}}}var y=d;