{"version":3,"file":"js/component-content-parallax.chunk.js","mappings":"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","sources":["webpack:///./assets/common/src/components/utils/Lazyimg.tsx","webpack:///./assets/common/src/components/utils/ThronVideo.tsx","webpack:///./assets/stone/src/components/common/ContentParallax.tsx","webpack:///./assets/stone/src/hooks/useMediaQueries.tsx","webpack:///./assets/stone/src/ui/icon/Icon.tsx","webpack:///./assets/stone/src/ui/image/Image.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nconst Lazyimg = (props) => {\n return (React.createElement(\"img\", { src: \"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\", \"data-src\": props.src, \"data-srcset\": props.srcset, className: classNames('lazyload', props.className, { 'not-draggable': !props.draggable }), alt: props.alt, width: props === null || props === void 0 ? void 0 : props.width, height: props === null || props === void 0 ? void 0 : props.height, draggable: props.draggable, \"aria-hidden\": (props === null || props === void 0 ? void 0 : props.ariaHidden) ? true : false, \"data-sizes\": props.dataSizes }));\n};\nexport default Lazyimg;\n","import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ThronIntegrationComponent from './../../scripts/components/thronIntegrationComponent';\nconst ThronVideo = (props) => {\n const videoRef = useRef();\n const [thronComponent, setThronComponent] = useState(null);\n useEffect(() => {\n if (videoRef.current) {\n if (thronComponent) {\n thronComponent.changeContent(props.thronID);\n }\n else {\n const options = {};\n props.onPauseCallback && (options.onPauseCallback = props.onPauseCallback);\n props.onPlayCallback && (options.onPlayCallback = props.onPlayCallback);\n props.onCompleteCallback && (options.onCompleteCallback = props.onCompleteCallback);\n props.onInitCallback && (options.onInitCallback = props.onInitCallback);\n props.onTimeUpdate && (options.onTimeUpdate = props.onTimeUpdate);\n typeof props.loopTimes === 'number' && (options.loopTimes = props.loopTimes);\n const newThronComponent = new ThronIntegrationComponent(videoRef.current, 'video', options);\n setThronComponent(newThronComponent);\n }\n }\n }, [props.thronID]);\n return (React.createElement(\"div\", { ref: videoRef, \"aria-hidden\": \"true\", className: classNames('video-wrapper', props.className), \"data-option-id\": props.thronID, \"data-option-mobile-id\": props === null || props === void 0 ? void 0 : props.thronMobileID, \"data-option-muted\": props.muted, \"data-option-autoplay\": props.autoplay, \"data-option-loop\": props.loop, \"data-option-lock-bitrate\": props.lockBitrate, \"data-option-no-skin\": props.noskin, \"data-option-sess-id\": props.sessionId }));\n};\nexport default ThronVideo;\n","import React, { useLayoutEffect, useRef, useState } from 'react';\nimport gsap from 'gsap';\nimport ThronVideo from '@components/utils/ThronVideo';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { useTranslation } from 'react-i18next';\nimport Icon from '@stone/ui/icon/Icon';\n// import useReduceMotion from '@common/utils/useReduceMotion';\nimport { useReducedMotion } from 'framer-motion';\nimport cookie from 'react-cookies';\nimport '@stone/scss/components/content-parallax/_content-parallax.scss';\nimport classNames from 'classnames';\nimport Image from '@stone/ui/image/Image';\ngsap.registerPlugin(ScrollTrigger);\nconst markers = cookie.load('gsap_markers');\nconst ContentParallax = (props) => {\n const { t } = useTranslation();\n // * HOOKS ----------------------------------------------------------------------------------------------------------------------------------------\n const [isPlaying, setIsPlaying] = useState();\n const imageRef = useRef(null);\n const contentRef = useRef(null);\n const isReducedMotion = useReducedMotion();\n useLayoutEffect(() => {\n if (!isReducedMotion) {\n if (imageRef.current && contentRef.current) {\n ScrollTrigger.enable();\n // Set sticky behaviour for image/video\n // WHEN ENTER == set stickness for image/video section, set datas (color, transparent) for header\n // WHEN LEAVE BACK == set datas (color, transparent) for header to default\n ScrollTrigger.create({\n trigger: imageRef.current,\n scrub: true,\n pin: true,\n start: () => `100% 100%`,\n endTrigger: contentRef.current,\n end: () => `bottom 100%`,\n markers: markers,\n pinSpacing: false,\n id: 'content-parallax',\n });\n ScrollTrigger.sort();\n ScrollTrigger.refresh();\n }\n }\n else {\n //Deactive scroll behaviours when is in keyboard intent or motion is reduced\n ScrollTrigger.disable();\n }\n return () => { var _a; return (_a = ScrollTrigger.getById('content-parallax')) === null || _a === void 0 ? void 0 : _a.kill(); };\n }, [isReducedMotion]);\n // * RENDER ----------------------------------------------------------------------------------------------------------------------------------------\n return (React.createElement(\"div\", { className: \"content-parallax\" },\n React.createElement(\"div\", { className: \"content-parallax__image\", ref: imageRef }, props.thronMobileId || props.thronId ? (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: \"video-container\" },\n React.createElement(ThronVideo, { thronID: props.thronId, thronMobileID: props.thronMobileId, autoplay: !isReducedMotion, onPauseCallback: () => setIsPlaying(false), onPlayCallback: () => setIsPlaying(true) }),\n React.createElement(\"button\", { className: \"btn--pause btn--pause-white button button--tertiary inverted\", \"aria-label\": t('button.pause'), \"data-pause\": true, \"aria-pressed\": \"false\" },\n React.createElement(Icon, { family: \"16\", name: isPlaying ? 'pause' : 'play', inverted: true }),\n React.createElement(\"span\", null, isPlaying ? t('button.pause') : t('button.play')))))) : (React.createElement(Image, { src: props.imageSrc, srcMobile: props === null || props === void 0 ? void 0 : props.imageMobileSrc, alt: props === null || props === void 0 ? void 0 : props.imgAlt }))),\n React.createElement(\"div\", { className: classNames('content-parallax__content', { 'is-reduced': isReducedMotion }), ref: contentRef },\n React.createElement(\"div\", { className: \"container\" },\n React.createElement(\"div\", { className: \"row content-parallax__content-row\" },\n React.createElement(\"div\", { className: \"col-lg-5 offset-lg-2 col-xxl-4\" },\n React.createElement(\"h2\", { className: \"content-parallax__title font__title\" }, props.title),\n React.createElement(\"span\", null, \"\\u2013\")),\n React.createElement(\"div\", { className: \"col-lg-12 col-xxl-8\" },\n React.createElement(\"p\", null, props.content)))))));\n};\nexport default ContentParallax;\n","import { throttle } from 'lodash';\nimport { useLayoutEffect, useEffect, useRef, useState } from 'react';\nconst REFLOW_CAP = 400;\nconst getInitialBreakpointValue = () => {\n // get initial breakpoint is called before the page is fully loaded and innerWith may be 0. windows.mqObj may not be set\n var _a;\n const mediaQueries = window.mqObj;\n const documentWidth = window.innerWidth || ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width);\n if (documentWidth == 0 || !mediaQueries) {\n return;\n }\n const filtered = Object.keys(mediaQueries).filter((key) => mediaQueries[key] <= documentWidth);\n const initalBr = filtered.length ? mediaQueries[filtered[filtered.length - 1]] : mediaQueries['xs'];\n // console.info('[getInitialBreakpointValue]: ', documentWidth, initalBr);\n return initalBr;\n};\nconst getReflowValue = () => {\n var _a;\n const documentHeight = window.innerHeight || ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height);\n if (documentHeight == 0) {\n return;\n }\n return documentHeight < REFLOW_CAP ? 399 : REFLOW_CAP;\n};\nconst mediaQueries = Object.assign({ ' {\n const [breakpoint, setBreakpoint] = useState(getInitialBreakpointValue());\n const [breakpointHeight, setBreakpointHeight] = useState(getReflowValue());\n const [isTouch, setIsTouch] = useState(false);\n // const [isMotionReduced, setIsMotionReduced] = useState(false);\n const firstRender = useRef(true);\n function detectTouchscreen() {\n if (window.PointerEvent && 'maxTouchPoints' in navigator) {\n // if Pointer Events are supported, just check maxTouchPoints\n if (navigator.maxTouchPoints > 0) {\n setIsTouch(true);\n }\n }\n else {\n // no Pointer Events...\n if (window.matchMedia && window.matchMedia('(any-pointer:coarse)').matches) {\n // check for any-pointer:coarse which mostly means touchscreen\n setIsTouch(true);\n }\n else if (window.TouchEvent || 'ontouchstart' in window) {\n // last resort - check for exposed touch events API / event handler\n setIsTouch(true);\n }\n }\n }\n const getCurrentBreakpoint = () => {\n var _a;\n const documentWidth = window.innerWidth || ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width);\n if (documentWidth == 0) {\n return;\n }\n const filtered = Object.keys(mediaQueries).filter((key) => mediaQueries[key] <= documentWidth);\n return mediaQueries[filtered[filtered.length - 1]];\n };\n useEffect(() => {\n if (firstRender.current) {\n // setBreakpoint(window.innerWidth);\n firstRender.current = false;\n detectTouchscreen();\n }\n }, []);\n useLayoutEffect(() => {\n const handleResize = throttle(() => {\n const currentBr = getCurrentBreakpoint();\n if (currentBr && currentBr !== breakpoint) {\n setBreakpoint(currentBr);\n }\n const currentHBr = getReflowValue();\n if (currentHBr && currentHBr !== breakpointHeight) {\n setBreakpointHeight(currentHBr);\n }\n }, 200);\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [breakpoint, breakpointHeight]);\n return {\n //@ts-ignore disable-next-line\n isTightMobile: breakpoint <= window.mqObj.xs,\n //@ts-ignore disable-next-line\n isMobile: breakpoint < window.mqObj.lg,\n //@ts-ignore disable-next-line\n isTablet: breakpoint >= window.mqObj.sm && breakpoint < window.mqObj.lg,\n //@ts-ignore disable-next-line\n isSmallDesktop: breakpoint >= window.mqObj.md,\n //@ts-ignore disable-next-line\n isDesktop: breakpoint >= window.mqObj.lg,\n //@ts-ignore disable-next-line\n isWideDesktop: breakpoint >= window.mqObj.xxl,\n isTouch: isTouch,\n isReflow: breakpointHeight < REFLOW_CAP,\n };\n};\nexport default useMediaQueries;\n","import React from 'react';\nconst Icon = (props) => {\n const icon = `${props.family}-${props.name}${props.inverted ? '-white' : ''}`;\n return React.createElement(\"span\", { \"aria-label\": props.ariaLabel, \"aria-hidden\": true, className: `icon icon--${icon} ${props.autoSize ? 'auto-size' : ''}` });\n};\nIcon.defaultProps = {\n family: '10',\n inverted: false,\n ariaHidden: false,\n};\nexport default Icon;\n","import Lazyimg from '@components/utils/Lazyimg';\nimport useMediaQueries from '@stone/hooks/useMediaQueries';\nimport React, { useMemo } from 'react';\nconst Image = (props) => {\n const { isMobile } = useMediaQueries();\n const args = useMemo(() => {\n return {\n src: isMobile && props.srcMobile ? props.srcMobile : props.src,\n alt: props.alt || '',\n className: props.className,\n };\n }, [props, isMobile]);\n return props.avoidLazy ? React.createElement(\"img\", Object.assign({ alt: args.alt }, args, { \"aria-hidden\": props.ariaHidden })) : React.createElement(Lazyimg, Object.assign({}, args, { ariaHidden: props.ariaHidden }));\n};\nexport default Image;\n"],"names":["props","src","srcset","className","draggable","alt","width","height","ariaHidden","dataSizes","videoRef","useRef","thronComponent","setThronComponent","useState","useEffect","current","changeContent","thronID","options","onPauseCallback","onPlayCallback","onCompleteCallback","onInitCallback","onTimeUpdate","loopTimes","newThronComponent","ref","thronMobileID","muted","autoplay","loop","lockBitrate","noskin","sessionId","markers","t","isPlaying","setIsPlaying","imageRef","contentRef","isReducedMotion","useLayoutEffect","trigger","scrub","pin","start","endTrigger","end","pinSpacing","id","_a","kill","thronMobileId","thronId","family","name","inverted","imageSrc","srcMobile","imageMobileSrc","imgAlt","title","content","getReflowValue","documentHeight","window","innerHeight","visualViewport","mediaQueries","Object","assign","mqObj","breakpoint","setBreakpoint","documentWidth","innerWidth","filtered","keys","filter","key","length","getInitialBreakpointValue","breakpointHeight","setBreakpointHeight","isTouch","setIsTouch","firstRender","PointerEvent","navigator","maxTouchPoints","matchMedia","matches","TouchEvent","handleResize","throttle","currentBr","getCurrentBreakpoint","currentHBr","addEventListener","removeEventListener","isTightMobile","xs","isMobile","lg","isTablet","sm","isSmallDesktop","md","isDesktop","isWideDesktop","xxl","isReflow","Icon","icon","ariaLabel","autoSize","defaultProps","args","useMemo","avoidLazy"],"sourceRoot":""}