{"ast":null,"code":"import _objectDestructuringEmpty from \"@babel/runtime/helpers/esm/objectDestructuringEmpty\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useEffect, useState, useRef } from 'react';\nimport cn from 'classnames';\nimport gsap from 'gsap';\nimport Logo from 'components/header/Logo';\nimport styles from './OnBoarding.module.scss';\nimport Strip from './Strip';\nimport { useMouse } from 'beautiful-react-hooks';\nvar ease = 'power3';\n\nvar OnBoarding = function OnBoarding(_ref) {\n  _objectDestructuringEmpty(_ref);\n\n  // TODO: guess user's language, default to FR\n  // let user switch language??\n  // show onBoarding only once? determined by, cookie?\n  var logoRef = useRef();\n  var baselineRef = useRef();\n  var pics = [{\n    ref: useRef(),\n    delta: 0.1,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/2.png'\n  }, {\n    ref: useRef(),\n    delta: 0.37,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/3.png'\n  }, {\n    ref: useRef(),\n    delta: 0.14,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/4.png'\n  }, {\n    ref: useRef(),\n    delta: 0.05,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/5.png'\n  }, {\n    ref: useRef(),\n    delta: 0.3,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/6.png'\n  }, {\n    ref: useRef(),\n    delta: 0.23,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/7.png'\n  }];\n  var stripsRef = useRef();\n  var strips = [{\n    ref: useRef(),\n    delta: 0.55,\n    color: '#DD4F13',\n    title: \"Bien aborder et bien vivre\\nles moments de transition.\\n\\xA0\"\n  }, {\n    ref: useRef(),\n    delta: 1,\n    color: '#BCC8CC',\n    title: 'Faciliter et améliorer\\nle quotidien de chaque\\npersonne.'\n  }, {\n    ref: useRef(),\n    delta: 0,\n    color: '#F1CDCD',\n    title: 'Créer des nouveau liens\\npour rompre l’isolement et\\ns’epanouir avec les autres.'\n  }, {\n    ref: useRef(),\n    delta: 0.45,\n    color: '#8E95BD',\n    title: \"Manifeste.\\n\\xA0\\n\\xA0\"\n  }];\n\n  var _useState = useState(false),\n      animInComplete = _useState[0],\n      setAnimInComplete = _useState[1];\n\n  useEffect(function () {\n    baselineRef.current.style.opacity = 0;\n    var stageWidth = window.innerWidth;\n    var stageHeight = window.innerHeight;\n    var duration = 1.5;\n    var tlDelay = 0; // - - - - - - - - - - - - - - - - - - - - - Logo & baseline\n\n    var pause = 0.1;\n    var moveY = 50;\n    var tl = gsap.timeline();\n    tl.to(logoRef.current, {\n      delay: pause,\n      duration: duration,\n      ease: ease + '.in',\n      opacity: 0,\n      y: -moveY\n    });\n    tl.fromTo(baselineRef.current, {\n      opacity: 0,\n      y: moveY\n    }, {\n      duration: duration,\n      ease: ease + '.out',\n      opacity: 1,\n      y: 0\n    });\n    tl.to(baselineRef.current, {\n      delay: pause,\n      duration: duration,\n      ease: ease + '.in',\n      opacity: 0,\n      y: -moveY\n    });\n    tlDelay += tl.duration() - duration * 0.3; // - - - - - - - - - - - - - - - - - - - - - pics\n\n    var tlPics = gsap.timeline({\n      delay: tlDelay\n    });\n\n    for (var i = 0; i < pics.length; i++) {\n      var pic = pics[i];\n      var picEl = pic.ref.current;\n      tlPics.fromTo(picEl, {\n        x: 10 + i / pics.length * (stageWidth - picEl.width) + Math.random() * 50,\n        y: stageHeight + 100 + Math.random() * 250\n      }, {\n        duration: duration * 1.3 + Math.random() * 0.2,\n        ease: ease + '.in',\n        y: -picEl.height - 100 - Math.random() * 250\n      }, pic.delta * 2);\n    }\n\n    tlDelay += tlPics.duration() * 0.78; // - - - - - - - - - - - - - - - - - - - - - 4 strips\n\n    var tlStrips = gsap.timeline({\n      delay: tlDelay,\n      onComplete: function onComplete() {\n        setAnimInComplete(true);\n      }\n    });\n\n    for (var _i = 0; _i < strips.length; _i++) {\n      var strip = strips[_i];\n      var stripEl = strip.ref.current;\n      tlStrips.fromTo(stripEl, {\n        y: 100 + strip.delta * 50 + '%'\n      }, {\n        duration: duration * 0.8,\n        ease: ease + '.out',\n        y: 0\n      }, strip.delta * 0.08);\n    }\n  }, []); // const animStrip = (stripRef, opening) => {\n  // \tgsap.to(stripRef.current, {\n  // \t\tduration: 0.3,\n  // \t\tease: 'power3.out',\n  // \t\tflex: opening ? 2 : 1,\n  // \t})\n  // }\n\n  var _useState2 = useState(-1),\n      stripOverIndex = _useState2[0],\n      setStripOverIndex = _useState2[1];\n\n  var onMouseEventOnStrip = function onMouseEventOnStrip(index, isOver) {\n    console.log('index.js::134 onMouseEventOnStrip index', stripOverIndex, index, isOver);\n\n    if (index == stripOverIndex && !isOver) {\n      setStripOverIndex(-1);\n    } else if (index != stripOverIndex && isOver) {\n      setStripOverIndex(index);\n    } // if (index != stripOverIndex) {\n    // \tif (stripOverIndex != -1) {\n    // \t\tanimStrip(strips[stripOverIndex].ref, false)\n    // \t}\n    // \tanimStrip(strips[index].ref, true)\n    // \tsetStripOverIndex(index)\n    // }\n\n  };\n\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: cn(styles.container),\n    children: /*#__PURE__*/_jsxs(\"section\", {\n      className: cn(styles.onBoarding),\n      children: [/*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.centered),\n        ref: logoRef,\n        children: /*#__PURE__*/_jsx(Logo, {\n          className: styles.logo\n        })\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.centered),\n        ref: baselineRef,\n        children: /*#__PURE__*/_jsx(\"span\", {\n          className: cn(styles.baseline),\n          children: \"un nouveau mode d\\u2019habitat\"\n        })\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.pics),\n        children: pics.map(function (item) {\n          return /*#__PURE__*/_jsx(\"img\", {\n            ref: item.ref,\n            src: item.src,\n            className: cn(styles.pic)\n          }, item.src);\n        })\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.strips),\n        ref: stripsRef,\n        children: strips.map(function (item, i) {\n          return /*#__PURE__*/_jsx(Strip, {\n            ref: item.ref,\n            color: item.color,\n            title: item.title,\n            active: animInComplete //onMouseOver={() => setStripOverIndex(i)}\n            // opened={i == stripOverIndex}\n            ,\n            onMouseEvent: function onMouseEvent(isOver) {\n              return onMouseEventOnStrip(i, isOver);\n            },\n            noneOpen: stripOverIndex == -1\n          }, item.color);\n        })\n      })]\n    })\n  });\n};\n\nexport default OnBoarding;","map":null,"metadata":{},"sourceType":"module"}