https://www.nikon.fr/dist-client/ThreeDScrollAnimation-Chunk-409ac46e77373ec4c9c9.js

1"use strict";(globalThis.webpackChunknikon_client=globalThis.webpackChunknikon_client||[]).push([[2330,5763,8198],{16962(e,t,n){n.d(t,{A:()=>r});var i=n(66665),a=n(97500),l=n.n(a);const r=({itemsCount:e,activeSectionIndex:t,bulletBorderWidthClassName:n="border-2",bulletSizeClassName:a="h-3 w-3",dataTestId:r="Scrollable-Container",trackingComponentName:c,onButtonClick:o,onGetTrackingDataLinkText:s})=>React.createElement("div",{className:"flex flex-col gap-y-2"},Array.from(new Array(e).keys()).map(e=>React.createElement("button",{key:e,"aria-label":`Pagination button ${e}`,onClick:()=>{(0,i.A)({event:"carouselScroll",content_type:"carousel_select",link_text:s(e),component_name:c,index:e}),o(e)},className:l()("rounded-full",a,e===t?"bg-yellow":`${n} border-white bg-transparent`),"data-testid":`${r}-Pagination-Button-${e}`})))},54842(e,t,n){n.r(t),n.d(t,{default:()=>b});var i=n(76439),a=n(25707),l=n(47976),r=n(77244),c=n(44528),o=n(16962),s=n(46954),u=n(28885),m=n(48064),d=n(65505),g=n(97500),h=n.n(g),f=n(34629),p=n(32088),v=n(59471),x=n(37690);function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)({}).hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},y.apply(null,arguments)}const b=({video:e,items:t,logo:n,productImageGallery:g,title:b})=>{const S=(0,d.A)(),w=(0,u.A)(1024),N=!(0,u.A)(1024,c.A.Screen)&&w,[C,A]=(0,v.useState)(!1),[E,R]=(0,v.useState)(0),T=!!g,k=t.length+(T?1:0),[H,D]=(0,v.useState)(!0),[P,B]=(0,v.useState)(!1),[I,j]=(0,v.useState)(!1),L=h()("lg:h-[350px] 2xl:h-[470px]",g?.title&&g?.subtitle?"h-[220px] md:h-[400px]":"h-[350px] md:h-[500px]"),$=[...t.map((e,n)=>6*e.videoPercentage+(n<t.length-1||T?0:100)),...T?[120]:[]],{isPreview:_,componentRef:G,mainContainerRef:M,slideContainerRef:O,stickyContainerStyle:U,mainContainerStyle:Z,clickedPaginationBulletIndex:q,activeSectionIndex:F,scrollDirectionRef:W,handleScrollToSection:V}=(0,m.A)({itemsCount:k,optiPreviewViewportHeight:650,slidesHeights:$,trackingComponentName:"3D Scroll Animation",disableTouchEvents:!0,getTrackingDataSlideTitle:e=>T&&e===k-1?g.title:t[e]?.title,onScroll:(e,n,i)=>{const a=n[t.length-1]||0,l=T?0:i,r=Math.min(e/(a-l),1);R(r)}}

1),z=(0,p.W)(G,{once:!0,margin:"100% 0px -15% 0px"}),Y=F>=0&&F<t.length?t[F]:void 0;return(0,v.useEffect)(()=>{z&&setTimeout(()=>{A(!0)},S?0:800)},[z]),(0,v.useEffect)(()=>{const e=G.current?.querySelector("video"),t=()=>{j(!0)};return e?.addEventListener("canplaythrough",t,{once:!0}),()=>e?.removeEventListener("canplaythrough",t)},[]),React.createElement("section",{ref:G,className:h()("component-padding bg-black-100 pt-10 text-white lg:pt-[90px]",{"mr-13 h-[940px] overflow-auto":_}),"data-testid":"CT-175-3D-Scroll-Animation"},(n||b)&&React.createElement("div",{className:"flex items-center justify-center"},React.createElement("div",{className:"mb-5 flex flex-col items-center justify-center gap-y-3 max-lg:w-4/5 max-lg:justify-self-center xl:gap-y-6"},n&&React.createElement(l.A,{variants:{hidden:{opacity:0,y:150},visible:{opacity:1,y:0}},initial:"hidden",animate:z?"visible":"hidden",transition:{ease:[0,0,.2,1],duration:1,delay:.1}},React.createElement(i.A,{image:n,imageClasses:"object-contain w-full h-[22px] lg:h-[44px]",dataTestId:"CT-175-3D-Scroll-Animation-Logo"})),b&&React.createElement(l.A,{tag:"h1",variants:{hidden:{opacity:0,y:70},visible:{opacity:1,y:0}},initial:"hidden",animate:z?"visible":"hidden",transition:{ease:[0,0,.2,1],duration:1,delay:.5},className:"mount text-center max-lg:tracking-[-1px]","data-testid":"CT-175-3D-Scroll-Animation-Title"},b))),React.createElement(l.A,{initial:{opacity:0}

1,animate:{opacity:C?1:0},"data-testid":"CT-175-3D-Scroll-Animation-Zoomed-Container",className:h()("flex flex-col gap-y-24",{hidden:!N})},React.createElement("div",{className:"flex flex-col gap-y-15"},t.map((e,t)=>React.createElement("div",{key:e.title,className:"flex flex-col gap-y-7.5"},React.createElement("div",{className:"flex items-center justify-center"},React.createElement("div",{className:"flex h-[90vh] w-[90vw] items-center justify-center"},React.createElement(i.A,{image:e.fallbackImage,classes:"h-full",imageClasses:"w-full h-full object-contain",dataTestId:`CT-175-3D-Scroll-Animation-Zoomed-Image-${t}`}))),React.createElement("div",{className:"container flex flex-col justify-center gap-y-4"},React.createElement("div",{"aria-hidden":"true",className:"h-[15px] w-[15px] shrink-0 bg-yellow lg:h-7 lg:w-7"}),e.title&&React.createElement("p",{className:"h2 max-sm:pr-10","data-testid":`CT-175-3D-Scroll-Animation-Zoomed-Title-${t}`},e.title),e.body&&React.createElement("div",{className:"h6 max-sm:pr-10","data-testid":`CT-175-3D-Scroll-Animation-Zoomed-Body-${t}`,dangerouslySetInnerHTML:{__html:e.body}}))))),T&&N&&React.createElement("div",{className:"flex w-full min-w-0 grow items-center justify-center","data-testid":"CT-175-3D-Scroll-Animation-Zoomed-Product-Image-Gallery"},React.createElement(s.default,y({},g,{imageClassNames:"h-[220px] lg:h-[240px] xl:h-[280px]",threeDClassNames:L,isMainHero:!1})))),React.createElement("div",{ref:M,style:Z,"data-testid":"CT-175-3D-Scroll-Animation-Scrollable-Container",className:h()({hidden:N})},React.createElement("div",{className:"sticky max-lg:overflow-hidden",style:U},k>1&&React.createElement(l.A,{className:"absolute right-0 z-[1] flex h-full items-center pr-13 max-lg:hidden",initial:{opacity:0}

1,animate:{opacity:C?1:0},"data-testid":"CT-175-3D-Scroll-Animation-Pagination"},React.createElement(o.A,{itemsCount:k,activeSectionIndex:F,dataTestId:"CT-175-3D-Scroll-Animation",trackingComponentName:"3D Scroll Animation",onButtonClick:e=>{q.current=e;const t=T&&e===k-1;V(e,{hasTargetScrollOffset:!t}),B(t)},onGetTrackingDataLinkText:e=>e<t.length?t[e]?.title:g?.title})),React.createElement("div",{ref:O,className:"h-full","data-testid":"CT-175-3D-Scroll-Animation-Sticky-Container"},React.createElement("div",{className:"flex h-full w-full items-center justify-end max-lg:flex-col max-lg:gap-y-7.5 lg:gap-x-20 lg:overflow-hidden"},React.createElement(l.A,{variants:r.Fq,initial:"initial",animate:C?"animate":"initial",className:h()("[&>div>video]:!h-full [&>div>video]:!min-h-full [&>div>video]:!w-full [&>div>video]:!min-w-full relative flex h-[calc(50%-15px)] w-full min-w-0 grow items-center justify-center md:h-[calc(60%-15px)] lg:h-full [&>div>video]:object-cover [&>div]:h-full [&>div]:w-full [&>div]:overflow-hidden",{hidden:!H||S}),"data-testid":"CT-175-3D-Scroll-Animation-Video-Container"},React.createElement(f.N,null,!I&&React.createElement(l.A,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},className:"absolute inset-0 flex items-center justify-center"},React.createElement(a.A,null))),e?.src&&React.createElement(x.A,{src:e.src,useWebCodecs:!1,trackScroll:!1,full:!1,videoPercentage:E}),React.createElement(l.A,{initial:{opacity:0},animate:{opacity:Y&&H&&!P?0:1},transition:{duration:.6,ease:[.4,0,.2,1]},className:"pointer-events-none absolute inset-0 bg-black-100"})),React.createElement(f.N,{mode:"wait",custom:W.current},C&&Y&&React.createElement(React.Fragment,null,React.createElement("div",{className:h()("relative flex h-[calc(50%-15px)] w-full min-w-0 grow items-center justify-center md:h-[calc(60%-15px)] lg:h-full",{hidden:!S})},React.createElement(i.A,{image:Y?.fallbackImage,classes:"h-full",imageClasses:"w-full h-full object-contain"})),React.createElement(l.A,{key:F,className:"flex h-[calc(50%-15px)] flex-col gap-y-4 max-lg:container max-lg:justify-center max-lg:pb-4 md:h-[calc(40%-15px)] lg:h-full lg:w-[45%] lg:shrink-0 lg:justify-center lg:gap-y-6 lg:pr-[90px] xl:w-2/5 xl:pr-[140px]"},React.createElement(l.A,{"aria-hidden":"true",custom:W.current,initial:"initial",animate:"visible",exit:"exit",variants:S?{}:r.G$,className:"h-[15px] w-[15px] shrink-0 bg-yellow lg:h-7 lg:w-7"}),Y?.title&&React.createElement(l.A,{tag:"p",custom:W.current,initial:"initial",animate:"visible",exit:"exit",variants:S?{}:r.G$,className:"h2 max-sm:pr-10","data-testid":"CT-175-3D-Scroll-Animation-Current-Slide-Title"},Y.title),Y?.body&&React.createElement(l.A,{custom:W.current,initial:"initial",animate:"visible",exit:"exit",variants:S?{}:r.Ge,className:"h6 max-sm:pr-10","data-testid":"CT-175-3D-Scroll-Animation-Current-Slide-Body",dangerouslySetInnerHTML:{__html:Y.body}}))),C&&!Y&&T&&React.createElement(l.A,{key:"three-d-scroll-animation-product-image-gallery",className:"flex w-full min-w-0 grow items-center justify-center",variants:r.Fq,initial:"initial",animate:"animate",exit:"exit","data-testid":"CT-175-3D-Scroll-Animation-Product-Image-Gallery",onAnimationStart:()=>{D(!1)},onAnimationComplete:e=>{"exit"===e&&D(!0),B(!1)}},React.createElement(s.default,y({},g,{imageClassNames:"h-[220px] lg:h-[240px] xl:h-[280px]",threeDClassNames:L,isMainHero:!1})))))))))}},77244(e,t,n){n.d(t,{Fq:()=>c,G$:()=>l,Ge:()=>r,am:()=>a});var i=n(22094);const a={transition:{type:"easeinout",duration:.25}},l={initial:e=>({y:e===i.A.Down?150:-150,opacity:0}),visible:{y:0,opacity:1,transition:{ease:[0,0,.2,1],duration:.8}},exit:e=>({y:e===i.A.Down?-150:150,opacity:0,transition:{ease:[0,0,.2,1],duration:.6}})},r={...l,visible:{...l.visible,transition:{...l.visible.transition,delay:.2}}},c={initial:{opacity:0,scale:1.05},animate:{opacity:1,scale:1,transition:{duration:.8,ease:[.4,0,.2,1]}},exit:{opacity:0,scale:.95,transition:{duration:.6,ease:[.4,0,.2,1]}}}},22094(e,t,n){n.d(t,{A:()=>a});var i=function(e){return e.Up="UP",e.Down="DOWN",e}(i||{});const a=i},78195(e,t,n){n.d(t,{A:()=>i});const i=(0,n(44285).A)(e=>({siteNotificationsHeight:0,USPsStripHeight:0,stickyBuyBarHeight:0,tabbedProductNavigationTopHeight:0,tabbedProductNavigationBottomHeight:0,stickyNavigationTopHeight:0,stickyNavigationBottomHeight:0,setSiteNotificationsHeight:t=>e({siteNotificationsHeight:t}),setUSPsStripHeight:t=>e({USPsStripHeight:t}),setStickyBuyBarHeight:t=>e({stickyBuyBarHeight:t}),setTabbedProductNavigationTopHeight:t=>e({tabbedProductNavigationTopHeight:t}),setTabbedProductNavigationBottomHeight:t=>e({tabbedProductNavigationBottomHeight:t}),setStickyNavigationTopHeight:t=>e({stickyNavigationTopHeight:t}),setStickyNavigationBottomHeight:t=>e({stickyNavigationBottomHeight:t})}))},35494(e,t,n){n.d(t,{A:()=>i});const i=(0,n(44285).A)(e=>({intersectingComponent:"",setIntersectingComponent:t=>e({intersectingComponent:t})}))},48064(e,t,n){n.d(t,{A:()=>d});var i=n(22094),a=n(78195),l=n(35494),r=n(66665),c=n(59471);const o=(e,t)=>{const[n,i]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{if(!e.current)return;const n=new IntersectionObserver(([e])=>{const n=e?.intersectionRect.height||0,a=window.innerHeight;i(n/a>t)},{threshold:Array.from({length:51},(e,t)=>t/50)});return n.observe(e.current),()=>n.disconnect()},[]),n};var s=n(2569),u=n(28885),m=n(68194);

1const d=({itemsCount:e,optiPreviewViewportHeight:t,slidesHeights:n,trackingComponentName:d,disableTouchEvents:g,getTrackingDataSlideTitle:h,onScroll:f})=>{const p=(0,m.A)(),v=(0,u.A)(1024),x=(0,s.A)(),y=(0,c.useRef)(null),b=(0,c.useRef)(null),S=(0,c.useRef)(null),[w,N]=(0,c.useState)(!1),[C,A]=(0,c.useState)(-1),E=(0,c.useRef)(-1),R=(0,c.useRef)(-1),T=(0,c.useRef)(null),k=(0,c.useRef)(i.A.Down),H=(0,c.useRef)(null),D=(0,c.useRef)(null),P=o(y,.6),{intersectingComponent:B,setIntersectingComponent:I}=(0,l.A)(e=>({intersectingComponent:e.intersectingComponent,setIntersectingComponent:e.setIntersectingComponent})),{siteNotificationsHeight:j,tabbedProductNavigationTopHeight:L,tabbedProductNavigationBottomHeight:$}=(0,a.A)(e=>({siteNotificationsHeight:e.siteNotificationsHeight,tabbedProductNavigationTopHeight:e.tabbedProductNavigationTopHeight,tabbedProductNavigationBottomHeight:e.tabbedProductNavigationBottomHeight})),_=!1===v?j+L:0,G=x?$:0,M=p?{height:t,top:0}:{height:`calc(100dvh - ${_}px - ${G}px)`,top:_},O=n.reduce((e,n)=>e+n/100*t,0)+t,U=n.reduce((e,t)=>e+t,0),Z={height:p?`${O}px`:`${U}vh`},q=(i,a)=>{if(!b.current)return;const l=b.current.offsetTop,r=p?t:window.innerHeight,c=n[i]||0,o=Math.floor(c*r/100),s=a?.hasTargetScrollOffset&&i>0&&i<e-1?o/2-10:10,u=n.filter((e,t)=>t<i).reduce((e,t)=>e+Math.floor(t*r/100),0),m=a?.customSectionTargetScroll||l+u+s,d=p?y.current:window;d?.scrollTo({top:m,behavior:a?.scrollBehavior||"smooth"})};return(0,c.useEffect)(()=>{const a=p?y.current:window;if(!a)return;const l=()=>{const i=(()=>{if(!b.current)return;const{top:i}=b.current.getBoundingClientRect();if(i>=0)return 0;const a=p?t:window.innerHeight,l=n.reduce((e,t)=>{const n=e.length&&e[e.length-1]||0,i=Math.floor(t*a/100);return e.push(n+i),e},[]),r=l.findIndex(e=>-i<e),c=-1===r?e-1:r;return f?.(-i,l,a),c})();if(void 0!==i)return A(i),i},r=()=>{const e=l();if(void 0!==e&&R.current!==e){const t=R.current>e?i.A.Up:i.A.Down;k.current=t,R.current=e}};return l(),a.addEventListener("scroll",r),()=>{a.removeEventListener("scroll",r)}},[p,e]),(0,c.useEffect)(()=>{const e=()=>{if(!S.current)return;const e=S.current.getBoundingClientRect().top;N(Math.abs(e-_)<5)};return e(),window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[_]),(0,c.useEffect)(()=>{if(!w||g)return;const t=e=>{const t=e.target;t?.closest(".swiper")||(H.current=e.touches[0]?.clientY||null)},n=t=>{if(null===H.current)return;const n=t.touches[0]?.clientY;if(!n)return;const i=n-H.current;D.current=i,0===E.current&&i>0||E.current===e-1&&i<0?D.current=null:t.cancelable&&t.preventDefault()},i=()=>{if(H.current=null,null===D.current||D.current>=-10&&D.current<=10)return;const t=D.current>0?E.current-1:E.current+1;if(D.current=null,t>e-1)return;const n=t===e-1&&b.current&&S.current?b.current.offsetTop+b.current.clientHeight-S.current.clientHeight-_-10:void 0;q(t,{customSectionTargetScroll:n,hasTargetScrollOffset:!0,scrollBehavior:"instant"})};return S.current?.addEventListener("touchstart",t),S.current?.addEventListener("touchmove",n,{passive:!1}),S.current?.addEventListener("touchend",i),()=>{S.current?.removeEventListener("touchstart",t),S.current?.removeEventListener("touchmove",n),S.current?.removeEventListener("touchend",i)}},[w,e]),(0,c.useEffect)(()=>{E.current=C,null===T.current&&C>=0&&(0,r.A)({event:"carouselScroll",content_type:"tab_change",link_text:h(C),component_name:d,index:C}),T.current===C&&(T.current=null)},[C]),(0,c.useEffect)(()=>{P?I(d):B===d&&I("")},[P]),{isPreview:p,componentRef:y,mainContainerRef:b,slideContainerRef:S,stickyContainerStyle:M,mainContainerStyle:Z,clickedPaginationBulletIndex:T,activeSectionIndex:C,scrollDirectionRef:k,viewportBottomOffset:G,handleScrollToSection:q}}}}]);
2//# sourceMappingURL=ThreeDScrollAnimation-Chunk-409ac46e77373ec4c9c9.js.map