@14islands/r3f-scroll-rig/dist/scrollbar.modern.js

Progressively enhance any React website with WebGL using @react-three/fiber

import e from"zustand";import{useLayoutEffect as t,useEffect as o,forwardRef as r,useRef as n,useImperativeHandle as i,useCallback as l,useState as s,useMemo as c}from"react";import a from"lenis";import{useInView as u}from"react-intersection-observer";import{ResizeObserver as d}from"@juggle/resize-observer";import h from"debounce";import p from"vecn";function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},v.apply(this,arguments)}function m(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var r=o.call(e,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:String(t)}const w=e(e=>({debug:!1,scaleMultiplier:1,globalRender:!0,globalPriority:1e3,globalClearDepth:!1,globalRenderQueue:!1,clearGlobalRenderQueue:()=>e(()=>({globalRenderQueue:!1})),isCanvasAvailable:!1,hasSmoothScrollbar:!1,canvasChildren:{},renderToCanvas:(t,o,r={})=>e(({canvasChildren:e})=>Object.getOwnPropertyDescriptor(e,t)?(e[t].instances+=1,e[t].props.inactive=!1,{canvasChildren:e}):{canvasChildren:v({},e,{[t]:{mesh:o,props:r,instances:1}})}),updateCanvas:(t,o)=>e(({canvasChildren:e})=>{if(!e[t])return;const{[t]:{mesh:r,props:n,instances:i}}=e;return{canvasChildren:v({},e,{[t]:{mesh:r,props:v({},n,o),instances:i}})}}),removeFromCanvas:(t,o=!0)=>e(({canvasChildren:e})=>{var r;return(null==(r=e[t])?void 0:r.instances)>1?(e[t].instances-=1,{canvasChildren:e}):o?{canvasChildren:function(e,t){if(null==e)return{};var o,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(n[o]=e[o]);return n}(e,[t].map(m))}:(e[t].instances=0,e[t].props.inactive=!0,{canvasChildren:v({},e)})}),pageReflow:0,requestReflow:()=>{e(e=>({pageReflow:e.pageReflow+1}))},scroll:{y:0,x:0,limit:0,velocity:0,progress:0,direction:0,scrollDirection:void 0},__lenis:void 0,scrollTo:()=>{},onScroll:()=>()=>{}})),g=()=>({enabled:w(e=>e.hasSmoothScrollbar),scroll:w(e=>e.scroll),scrollTo:w(e=>e.scrollTo),onScroll:w(e=>e.onScroll),__lenis:w(e=>e.__lenis)}),f="undefined"!=typeof window?t:o,b=r(({children:e,enabled:t=!0,locked:r=!1,scrollRestoration:s="auto",disablePointerOnScroll:c=!0,horizontal:u=!1,scrollInContainer:d=!1,updateGlobalState:h=!0,onScroll:p,config:m={},invalidate:g=(()=>{}),addEffect:b},y)=>{const S=n(),E=n(!1),C=w(e=>e.scroll);i(y,()=>({start:()=>{var e;return null==(e=S.current)?void 0:e.start()},stop:()=>{var e;return null==(e=S.current)?void 0:e.stop()},on:(e,t)=>{var o;return null==(o=S.current)?void 0:o.on(e,t)},scrollTo:(e,t)=>{var o;return null==(o=S.current)?void 0:o.scrollTo(e,t)},raf:e=>{var t;return null==(t=S.current)?void 0:t.raf(e)},__lenis:S.current}));const R=l(e=>{c&&E.current!==e&&(E.current=e,document.documentElement.style.pointerEvents=e?"none":"auto")},[c,E]);return f(()=>{"scrollRestoration"in window.history&&(window.history.scrollRestoration=s)},[]),f(()=>{const e=document.documentElement,o=document.body,r=document.body.firstElementChild;let n;if(e.classList.toggle("ScrollRig-scrollHtml",d),o.classList.toggle("ScrollRig-scrollWrapper",d),d&&Object.assign(m,{smoothTouch:!0,wrapper:o,content:r}),S.current=new a(v({orientation:u?"horizontal":"vertical"},m,t?{}:{smoothWheel:!1,syncTouch:!1,smoothTouch:!1})),b)n=b(e=>{var t;return null==(t=S.current)?void 0:t.raf(e)});else{let e;e=requestAnimationFrame(function t(o){var r;null==(r=S.current)||r.raf(o),e=requestAnimationFrame(t)}),n=()=>cancelAnimationFrame(e)}return()=>{var e;n(),null==(e=S.current)||e.destroy()}},[t]),f(()=>{const e=S.current,t=({scroll:e,limit:t,velocity:o,direction:r,progress:n})=>{const i=u?e:0;h&&(C.y=u?0:e,C.x=i,C.limit=t,C.velocity=o,C.direction=r,C.progress=n||0),Math.abs(o)>1.5&&R(!0),Math.abs(o)<1&&R(!1),p&&p({scroll:e,limit:t,velocity:o,direction:r,progress:n}),g()};return null==e||e.on("scroll",t),h&&(C.scrollDirection=u?"horizontal":"vertical",w.setState({__lenis:e,scrollTo:(...t)=>{null==e||e.scrollTo(...t)},onScroll:t=>(null==e||e.on("scroll",t),null==e||e.emit(),()=>null==e?void 0:e.off("scroll",t))}),w.getState().scroll.y=window.scrollY,w.getState().scroll.x=window.scrollX),null==e||e.emit(),()=>{null==e||e.off("scroll",t),h&&w.setState({__lenis:void 0,onScroll:()=>()=>{},scrollTo:()=>{}})}},[t]),f(()=>{const e=()=>g(),t=()=>R(!1);return window.addEventListener("pointermove",t),window.addEventListener("pointerdown",t),window.addEventListener("wheel",e),()=>{window.removeEventListener("pointermove",t),window.removeEventListener("pointerdown",t),window.removeEventListener("wheel",e)}},[]),o(()=>(h&&(document.documentElement.classList.toggle("js-smooth-scrollbar-enabled",t),document.documentElement.classList.toggle("js-smooth-scrollbar-disabled",!t),w.setState({hasSmoothScrollbar:t})),()=>{document.documentElement.classList.remove("js-smooth-scrollbar-enabled"),document.documentElement.classList.remove("js-smooth-scrollbar-disabled")}),[t]),o(()=>{var e,t;r?null==(e=S.current)||e.stop():null==(t=S.current)||t.start()},[r]),e?e({}):null}),y="undefined"!=typeof window;function S(e,t,o,r,n){return r+(e-t)*(n-r)/(o-t)}function E(e,t){const r=function({debounce:e=0}={}){const[t,r]=s({width:y?window.innerWidth:Infinity,height:y?window.innerHeight:Infinity});return o(()=>{const o=document.getElementById("ScrollRig-canvas");function n(){const e=o?o.clientWidth:window.innerWidth,n=o?o.clientHeight:window.innerHeight;e===t.width&&n===t.height||r({width:e,height:n})}const i=h.debounce(n,e),l=window.ResizeObserver||d;let s;return o?(s=new l(i),s.observe(o)):window.addEventListener("resize",i),n(),()=>{var e;window.removeEventListener("resize",i),null==(e=s)||e.disconnect()}},[t,r]),t}(),{scroll:i,onScroll:a}=g(),m=w(e=>e.scaleMultiplier),b=w(e=>e.pageReflow),E=w(e=>e.debug),{rootMargin:C,threshold:R,autoUpdate:T,wrapper:L}=c(()=>{const e={rootMargin:"0%",threshold:0,autoUpdate:!0},o=t||{};return Object.keys(o).map((t,r)=>{void 0!==o[t]&&(e[t]=o[t])}),e},[t]),{ref:j,inView:O}=u({rootMargin:C,threshold:R});f(()=>{j(e.current)},[e,null==e?void 0:e.current]);const[_,x]=s(p.vec3(0,0,0)),z=n({inViewport:!1,progress:-1,visibility:-1,viewport:-1}).current,V=n({top:0,bottom:0,left:0,right:0,width:0,height:0}).current,[I,U]=s(V),M=n({top:0,bottom:0,left:0,right:0,width:0,height:0,x:0,y:0,positiveYUpBottom:0}).current,k=n(p.vec3(0,0,0)).current;f(()=>{var t;const o=null==(t=e.current)?void 0:t.getBoundingClientRect();if(!o)return;const n=L?L.scrollTop:window.scrollY,i=L?L.scrollLeft:window.scrollX;V.top=o.top+n,V.bottom=o.bottom+n,V.left=o.left+i,V.right=o.right+i,V.width=o.width,V.height=o.height,U(v({},V)),x(p.vec3((null==V?void 0:V.width)*m,(null==V?void 0:V.height)*m,1)),E&&console.log("useTracker.getBoundingClientRect:",V,"intialScroll:",{initialY:n,initialX:i},"size:",r,"pageReflow:",b)},[e,r,b,m,E]);const P=l(({onlyUpdateInViewport:t=!1,scroll:o}={})=>{if(!e.current||t&&!z.inViewport)return;const n=o||i;!function(e,t,o,r){e.top=t.top-(o.y||0),e.bottom=t.bottom-(o.y||0),e.left=t.left-(o.x||0),e.right=t.right-(o.x||0),e.width=t.width,e.height=t.height,e.x=e.left+.5*t.width-.5*r.width,e.y=e.top+.5*t.height-.5*r.height,e.positiveYUpBottom=r.height-e.bottom}(M,V,n,r),function(e,t,o){e.x=t.x*o,e.y=-1*t.y*o}(k,M,m);const l="horizontal"===n.scrollDirection,s=l?"width":"height",c=r[s]-M[l?"left":"top"];z.progress=S(c,0,r[s]+M[s],0,1),z.visibility=S(c,0,M[s],0,1),z.viewport=S(c,0,r[s],0,1)},[e,r,m,i]);return f(()=>{z.inViewport=O,P({onlyUpdateInViewport:!1}),E&&console.log("useTracker.inViewport:",O,"update()")},[O]),f(()=>{P({onlyUpdateInViewport:!1}),E&&console.log("useTracker.update on resize/reflow")},[P,b]),o(()=>{if(T)return a(e=>P({onlyUpdateInViewport:!0}))},[T,P,a]),{scale:_,inViewport:O,rect:I,bounds:M,position:k,scrollState:z,update:P}}export{b as SmoothScrollbar,g as useScrollbar,E as useTracker};
//# sourceMappingURL=scrollbar.modern.js.map