https://redirongroup.com/_next/static/chunks/pages/HorizontalScroll-b111cec57bcaa172.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[360],{46769:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/HorizontalScroll",function(){return r(33831)}])},60224:function(e,n,r){"use strict";var t=r(85893),l=r(86010);r(67294);var i=r(20218),o=r.n(i);let SpacerElement=e=>{let{heightInRem:n=0,mobileOnly:r=!1,extraCompactOnMobile:l=!1}=e;return(0,t.jsxs)(t.Fragment,{children:[r?null:(0,t.jsx)("div",{className:"d-none d-lg-block",style:{height:"".concat(n,"rem")}}),r?null:(0,t.jsx)("div",{className:"d-none d-md-block d-lg-none",style:{height:"".concat(n/2,"rem")}}),(0,t.jsx)("div",{className:"d-block d-md-none",style:{height:"".concat(n/(l?3:2),"rem")}})]})};n.Z=e=>{let{className:n="",height:r=0,border:i,mobileOnly:s,extraCompactOnMobile:c,...a}=e;return(0,t.jsxs)("div",{className:(0,l.Z)(n,o().spacer),...a,children:[(0,t.jsx)(SpacerElement,{mobileOnly:s,extraCompactOnMobile:c,heightInRem:r/2}),i?(0,t.jsx)("div",{className:o().divider}):null,(0,t.jsx)(SpacerElement,{mobileOnly:s,extraCompactOnMobile:c,heightInRem:r/2})]})}},38509:function(e,n,r){"use strict";r.d(n,{y:function(){return useResizeObserver}});var t=r(67294),l=r(91033);let useResizeObserver=(e,n)=>{let[r,i]=(0,t.useState)(),[o,s]=(0,t.useState)(),c=(0,t.useCallback)(e=>{if(!Array.isArray(e))return;let r=e[0];i(r.contentRect.width),s(r.contentRect.height),n&&n(r.contentRect)},[n]);return(0,t.useLayoutEffect)(()=>{if(!e.current)return;let n=new l.default(e=>c(e));return n.observe(e.current),()=>{n.disconnect(),n=null}},[e]),[r,o]}},89513:function(e,n,r){"use strict";r.d(n,{Q:function(){return percentageToPixels}});var t=r(67294);n.Z=function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"when-100%-visible",r=arguments.length>2?arguments[2]:void 0,l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:void 0,handleScroll=()=>{if(!e.current)return;let t=e.current.getBoundingClientRect();requestAnimationFrame(()=>{let e=0,l=-(t.top-window.innerHeight);("until-fully-exits-viewport"===n||!0===n)&&(e=window.innerHeight),"until-reaches-center-of-viewport"===n&&(e=window.innerHeight/2-t.height/2),"start-and-end-when-fully-visible"===n&&(l-=window.innerHeight,e-=window.innerHeight);let i=l/(t.height+e)*100;i=(i=i<=0?0:i)>100?100:i,r&&r(i)})};(0,t.useEffect)(()=>{if(!l)return window.addEventListener("scroll",handleScroll,{passive:!0}),window.addEventListener("resize",handleScroll,{passive:!0}),handleScroll(),()=>{window.removeEventListener("scroll",handleScroll),window.removeEventListener("resize",handleScroll)}},[])};let percentageToPixels=(e,n)=>e/100*(n-window.innerWidth)},33831:function(e,n,r){"use strict";r.r(n);var t=r(85893),l=r(86010),i=r(71137),o=r.n(i),s=r(67294),c=r(38509),a=r(89513),d=r(60224),h=r(19231),u=r(27006);let _TemporaryComponent=e=>{let{width:n="1000px",backgroundColor:r="#555",children:l}=e;return(0,t.jsx)("div",{className:o().slide,style:{width:n,backgroundColor:r},children:l})},v=s.forwardRef((e,n)=>{let{children:r,onViewportEnter:i}=e,c=(0,s.useRef)(null),a=(0,u.Z)(c,n),{inViewport:d,...v}=(0,h.NM)(c,{rootMargin:"0px",threshold:.25});return(0,s.useEffect)(()=>{d&&i()},[d]),(0,t.jsx)("div",{ref:a,className:(0,l.Z)(o().slide),children:r})}),HorizontalScroll=e=>{let{nav:n,children:r}=e,i=(0,s.useRef)([]),d=(0,s.useRef)(null),h=(0,s.useRef)(null),[u,f]=(0,s.useState)(0),p=(0,s.useRef)(0),handleScrollPercent=e=>{d.current.style.transform="translate3d(-".concat((0,a.Q)(e,p.current),"px, 0, 0)")};(0,a.Z)(h,"start-and-end-when-fully-visible",handleScrollPercent);let init=()=>{p.current=d.current.offsetWidth,h.current.style.height="".concat(p.current,"px"),handleScrollPercent(0)};(0,c.y)(d,()=>init),(0,s.useEffect)(()=>{init()},[]);let handleNavigation=e=>{i.current[e]&&window.scrollTo({top:h.current.offsetTop+i.current[e].offsetLeft})};return(0,t.jsxs)("div",{ref:h,className:(0,l.Z)(o().horizontalScroll),children:[(0,t.jsx)("div",{ref:d,className:(0,l.Z)(o().slides),children:s.Children.map(r,(e,n)=>(0,t.jsx)(v,{ref:e=>i.current[n]=e,onViewportEnter:()=>f(n),children:e}))}),n?(0,t.jsx)("div",{className:(0,l.Z)(o().navWrap),children:(0,t.jsx)("div",{className:(0,l.Z)(o().nav),children:n.map((e,n)=>(0,t.jsx)("div",{className:(0,l.Z)(u===n&&o().activeNav),onClick:()=>handleNavigation(n),children:e},n))})}):null]})};n.default=()=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(d.Z,{height:50}),(0,t.jsxs)(HorizontalScroll,{nav:["Slide 1","Slide 2","Slide 3","Slide 4"],children:[(0,t.jsx)(_TemporaryComponent,{width:"900px",backgroundColor:"#111",children:(0,t.jsx)("h2",{children:"Slide 1"})}),(0,t.jsx)(_TemporaryComponent,{width:"2500px",backgroundColor:"#333",children:(0,t.jsx)("h2",{children:"Slide 2"})}),(0,t.jsx)(_TemporaryComponent,{width:"1200px",backgroundColor:"#666",children:(0,t.jsx)("h2",{children:"Slide 3"})}),(0,t.jsx)(_TemporaryComponent,{width:"900px",backgroundColor:"#111",children:(0,t.jsx)("h2",{children:"Slide 4"})})]}),(0,t.jsx)(d.Z,{height:50})]})},20218:function(e){e.exports={divider:"Spacer_divider__hs_f2"}},71137:function(e){e.exports={slides:"horizontalScroll_slides__s_fS3",horizontalScroll:"horizontalScroll_horizontalScroll__O9nNj",slide:"horizontalScroll_slide__s7Quz",navWrap:"horizontalScroll_navWrap__0rGbi",nav:"horizontalScroll_nav__M_BJ2",activeNav:"horizontalScroll_activeNav__it_On"}}},function(e){e.O(0,[651,774,888,179],function(){return e(e.s=46769)}),_N_E=e.O()}]);