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

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

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