https://escapetours.com/build/assets/scroll-path-Dw_JeEr8.js

1function e(e={}){let{container:a=`main`,color:o=`#CCCCCC`,strokeWidth:s=7,showDot:c=!1,smoothing:l=.05,dash:u=!0,contrastColor:d=`#FFFFFF`,contrastSelector:f=`[data-path-contrast]`}=e,p=u===!0?`${s*2.5} ${s*2}`:Array.isArray(u)?u.join(` `):u||`none`,m=typeof a==`string`?document.querySelector(a):a;if(!m){console.warn(`[scroll-path] container not found: ${a}`);return}let h=matchMedia(`(prefers-reduced-motion: reduce)`).matches;i(),m.classList.add(`path-host`);let g=r(`path-mask`),_=r(`path-grad`),v=n(`path`,{fill:`none`,stroke:`#fff`,"stroke-linecap":`butt`,"stroke-width":s+2}),y=n(`linearGradient`,{id:_,gradientUnits:`userSpaceOnUse`,x1:0,x2:0,y1:0}),b=n(`path`,{class:`path-draw`,stroke:`url(#${_})`,mask:`url(#${g})`,"stroke-width":s,"stroke-dasharray":p}),x=c?n(`circle`,{class:`path-head`,r:4,fill:o,opacity:0}):null,S=n(`svg`,{class:`path-layer`,"aria-hidden":`true`});S.append(n(`defs`,{},[n(`mask`,{id:g,maskUnits:`userSpaceOnUse`},[v]),y]),b,...x?[x]:[]),m.prepend(S);let C=0,w=0,T=0,E=0,D=null;function O(){let e=m.clientWidth,n=m.scrollHeight;S.setAttribute(`viewBox`,`0 0 ${e} ${n}`);let r=m.getBoundingClientRect(),i=e=>({left:e.left-r.left,top:e.top-r.top,right:e.right-r.left,bottom:e.bottom-r.top}),a=[...m.querySelectorAll(`[data-path]`)].filter(t).map(e=>k(e,i(e.getBoundingClientRect()))).sort((e,t)=>e.y-t.y);if(!a.length)return;w=a[0].y,T=a[a.length-1].y;let o=`M ${a[0].x} ${a[0].y}`;for(let e=0;e<a.length-1;e++){let t=a[e-1]||a[e],n=a[e],r=a[e+1],i=a[e+2]||r,s=n.x+(r.x-t.x)/6,c=n.y+(r.y-t.y)/6,l=r.x-(i.x-n.x)/6,u=r.y-(i.y-n.y)/6;o+=` C ${s} ${c}, ${l} ${u}, ${r.x} ${r.y}`}b.setAttribute(`d`,o),v.setAttribute(`d`,o),C=b.getTotalLength(),v.style.strokeDasharray=C,v.style.strokeDashoffset=h?0:C,A(i,n),h||(E=j(),N(E))}function k(e,t){let n=(t.left+t.right)/2,r=(t.top+t.bottom)/2;switch(e.dataset.path){case`left`:return{x:t.left,y:r};case`right`:return{x:t.right,y:r};case`top`:return{x:n,y:t.top};case`bottom`:return{x:n,y:t.bottom};default:return{x:n,y:r}}}function A(e,r){y.setAttribute(`y2`,r);let i=[...m.querySelectorAll(f)].filter(t).map(t=>{let n=e(t.getBoundingClientRect());return{top:n.top,bottom:n.bottom}}).sort((e,t)=>e.top-t.top).reduce((e,t)=>{let n=e[e.length-1];return n&&t.top<=n.bottom?n.bottom=Math.max(n.bottom,t.bottom):e.push(t),e},[]),a=e=>Math.min(1,Math.max(0,e/r)),s=[[0,o]];for(let e of i)s.push([a(e.top),o],[a(e.top),d],[a(e.bottom),d],[a(e.bottom),o]);s.push([1,o]),y.replaceChildren(...s.map(([e,t])=>n(`stop`,{offset:e,"stop-color":t})))}function j(){let e=m.getBoundingClientRect().top,t=innerHeight/2-e;return t<=w?0:t>=T?C:M(t)}function M(e){let t=0,n=C;for(let r=0;r<20;r++){let r=(t+n)/2;b.getPointAtLength(r).y<e?t=r:n=r}return(t+n)/2}function N(e){if(v.style.strokeDashoffset=C-e,x){let t=b.getPointAtLength(e);x.setAttribute(`cx`,t.x),x.setAttribute(`cy`,t.y),x.setAttribute(`opacity`,+(e>.5&&e<C-.5))}}function P(){let e=j();E+=(e-E)*l,Math.abs(e-E)<.5&&(E=e),N(E),D=E===e?null:requestAnimationFrame(P)}function F(){!h&&C&&D===null&&(D=requestAnimationFrame(P))}addEventListener(`scroll`,F,{passive:!0});let I=new ResizeObserver(O);return I.observe(m),O(),{rebuild:O,destroy(){removeEventListener(`scroll`,F),I.disconnect(),D!==null&&cancelAnimationFrame(D),S.remove(),m.classList.remove(`path-host`)}}}function t(e){return e.offsetWidth>0||e.offsetHeight>0||e.getClientRects().length>0}function n(e,t={},n=[]){let r=document.createElementNS(`http://www.w3.org/2000/svg`,e);for(let[e,n]of Object.entries(t))r.setAttribute(e,n);return r.append(...n),r}function r(e){return e+`-`+Math.random().toString(36).slice(2)}function i(){if(document.getElementById(`scroll-path-styles`))return;let e=document.createElement(`style`);e.id=`scroll-path-styles`,e.textContent=`
2    /* The wrapper is the positioning context for the line. */
3    .path-host{ position: relative; overflow-x: hidden; }
4
5    /* SVG layer fills the host, sits behind content, ignores clicks. */
6    .path-host > .path-layer{
7      position: absolute; inset: 0; width: 100%; height: 100%;
8      pointer-events: none; z-index: 1; overflow: visible;
9    }
10
11    /* The line. Color, width and dashes are set from the options. */
12    .path-draw{
13      fill: none; stroke-linecap: round;
14      vector-effect: non-scaling-stroke; /* constant stroke width when scaled */
15    }
16  `,document.head.appendChild(e)}export{e as initScrollPath};