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