{"ast":null,"code":"import _objectDestructuringEmpty from \"@babel/runtime/helpers/esm/objectDestructuringEmpty\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nvar _jsxFileName = \"/home/gkkdzdg/www/src/components/onBoarding/index.js\",\n    _this = this,\n    _s = $RefreshSig$();\n\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  _s();\n\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__*/_jsxDEV(\"div\", {\n    className: cn(styles.container),\n    children: /*#__PURE__*/_jsxDEV(\"section\", {\n      className: cn(styles.onBoarding),\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: cn(styles.centered),\n        ref: logoRef,\n        children: /*#__PURE__*/_jsxDEV(Logo, {\n          className: styles.logo\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 163,\n          columnNumber: 6\n        }, _this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 162,\n        columnNumber: 5\n      }, _this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: cn(styles.centered),\n        ref: baselineRef,\n        children: /*#__PURE__*/_jsxDEV(\"span\", {\n          className: cn(styles.baseline),\n          children: \"un nouveau mode d\\u2019habitat\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 167,\n          columnNumber: 6\n        }, _this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 166,\n        columnNumber: 5\n      }, _this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: cn(styles.pics),\n        children: pics.map(function (item) {\n          return /*#__PURE__*/_jsxDEV(\"img\", {\n            ref: item.ref,\n            src: item.src,\n            className: cn(styles.pic)\n          }, item.src, false, {\n            fileName: _jsxFileName,\n            lineNumber: 172,\n            columnNumber: 7\n          }, _this);\n        })\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 170,\n        columnNumber: 5\n      }, _this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: cn(styles.strips),\n        ref: stripsRef,\n        children: strips.map(function (item, i) {\n          return /*#__PURE__*/_jsxDEV(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, false, {\n            fileName: _jsxFileName,\n            lineNumber: 178,\n            columnNumber: 7\n          }, _this);\n        })\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 176,\n        columnNumber: 5\n      }, _this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 160,\n      columnNumber: 4\n    }, _this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 159,\n    columnNumber: 3\n  }, _this);\n};\n\n_s(OnBoarding, \"JshtBn7b/gaVNtXn856nJEDrCts=\");\n\n_c = OnBoarding;\nexport default OnBoarding;\n\nvar _c;\n\n$RefreshReg$(_c, \"OnBoarding\");","map":{"version":3,"sources":["/home/gkkdzdg/www/src/components/onBoarding/index.js"],"names":["useEffect","useState","useRef","cn","gsap","Logo","styles","Strip","useMouse","ease","OnBoarding","logoRef","baselineRef","pics","ref","delta","src","stripsRef","strips","color","title","animInComplete","setAnimInComplete","current","style","opacity","stageWidth","window","innerWidth","stageHeight","innerHeight","duration","tlDelay","pause","moveY","tl","timeline","to","delay","y","fromTo","tlPics","i","length","pic","picEl","x","width","Math","random","height","tlStrips","onComplete","strip","stripEl","stripOverIndex","setStripOverIndex","onMouseEventOnStrip","index","isOver","console","log","container","onBoarding","centered","logo","baseline","map","item"],"mappings":"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","sourcesContent":["import { useEffect, useState, useRef } from 'react'\n\nimport cn from 'classnames'\nimport gsap from 'gsap'\n\nimport Logo from 'components/header/Logo'\nimport styles from './OnBoarding.module.scss'\nimport Strip from './Strip'\nimport { useMouse } from 'beautiful-react-hooks'\n\n\nconst ease = 'power3'\n\nconst OnBoarding = ({ }) => {\n\n\t// TODO: guess user's language, default to FR\n\t// let user switch language??\n\t// show onBoarding only once? determined by, cookie?\n\n\n\tconst logoRef = useRef()\n\tconst baselineRef = useRef()\n\tconst pics = [\n\t\t{ ref: useRef(), delta: 0.1, src: 'https://www.colivingfactory.com/assets/coresider/images/2.png' },\n\t\t{ ref: useRef(), delta: 0.37, src: 'https://www.colivingfactory.com/assets/coresider/images/3.png' },\n\t\t{ ref: useRef(), delta: 0.14, src: 'https://www.colivingfactory.com/assets/coresider/images/4.png' },\n\t\t{ ref: useRef(), delta: 0.05, src: 'https://www.colivingfactory.com/assets/coresider/images/5.png' },\n\t\t{ ref: useRef(), delta: 0.3, src: 'https://www.colivingfactory.com/assets/coresider/images/6.png' },\n\t\t{ ref: useRef(), delta: 0.23, src: 'https://www.colivingfactory.com/assets/coresider/images/7.png' },\n\t]\n\tconst stripsRef = useRef()\n\tconst strips = [\n\t\t{ ref: useRef(), delta: 0.55, color: '#DD4F13', title: 'Bien aborder et bien vivre\\nles moments de transition.\\n\\u00A0' },\n\t\t{ ref: useRef(), delta: 1, color: '#BCC8CC', title: 'Faciliter et améliorer\\nle quotidien de chaque\\npersonne.' },\n\t\t{ ref: useRef(), delta: 0, color: '#F1CDCD', title: 'Créer des nouveau liens\\npour rompre l’isolement et\\ns’epanouir avec les autres.' },\n\t\t{ ref: useRef(), delta: 0.45, color: '#8E95BD', title: 'Manifeste.\\n\\u00A0\\n\\u00A0' },\n\t]\n\n\n\tconst [animInComplete, setAnimInComplete] = useState(false)\n\n\tuseEffect(() => {\n\t\tbaselineRef.current.style.opacity = 0\n\n\t\tconst stageWidth = window.innerWidth\n\t\tconst stageHeight = window.innerHeight\n\t\tconst duration = 1.5\n\t\tlet tlDelay = 0\n\n\t\t// - - - - - - - - - - - - - - - - - - - - - Logo & baseline\n\n\t\tconst pause = 0.1\n\t\tconst moveY = 50\n\t\tconst tl = gsap.timeline()\n\n\t\ttl.to(logoRef.current, {\n\t\t\tdelay: pause,\n\t\t\tduration,\n\t\t\tease: ease + '.in',\n\t\t\topacity: 0,\n\t\t\ty: -moveY,\n\t\t})\n\n\t\ttl.fromTo(baselineRef.current, {\n\t\t\topacity: 0,\n\t\t\ty: moveY,\n\t\t}, {\n\t\t\tduration,\n\t\t\tease: ease + '.out',\n\t\t\topacity: 1,\n\t\t\ty: 0,\n\t\t})\n\n\t\ttl.to(baselineRef.current, {\n\t\t\tdelay: pause,\n\t\t\tduration,\n\t\t\tease: ease + '.in',\n\t\t\topacity: 0,\n\t\t\ty: -moveY,\n\t\t})\n\n\t\ttlDelay += tl.duration() - duration * 0.3\n\t\t// - - - - - - - - - - - - - - - - - - - - - pics\n\n\t\tconst tlPics = gsap.timeline({ delay: tlDelay })\n\n\t\tfor (let i = 0; i < pics.length; i++) {\n\t\t\tconst pic = pics[i]\n\t\t\tconst picEl = pic.ref.current\n\n\t\t\ttlPics.fromTo(picEl, {\n\t\t\t\tx: 10 + (i / pics.length) * (stageWidth - picEl.width) + Math.random() * 50,\n\t\t\t\ty: stageHeight + 100 + Math.random() * 250,\n\t\t\t}, {\n\t\t\t\tduration: duration * 1.3 + Math.random() * 0.2,\n\t\t\t\tease: ease + '.in',\n\t\t\t\ty: - picEl.height - 100 - Math.random() * 250,\n\t\t\t}, pic.delta * 2)\n\t\t}\n\n\t\ttlDelay += tlPics.duration() * 0.78\n\t\t// - - - - - - - - - - - - - - - - - - - - - 4 strips\n\n\t\tconst tlStrips = gsap.timeline({\n\t\t\tdelay: tlDelay,\n\t\t\tonComplete: () => {\n\t\t\t\tsetAnimInComplete(true)\n\t\t\t},\n\t\t})\n\n\t\tfor (let i = 0; i < strips.length; i++) {\n\t\t\tconst strip = strips[i]\n\t\t\tconst stripEl = strip.ref.current\n\n\t\t\ttlStrips.fromTo(stripEl, {\n\t\t\t\ty: (100 + strip.delta * 50) + '%',\n\t\t\t}, {\n\t\t\t\tduration: duration * 0.8,\n\t\t\t\tease: ease + '.out',\n\t\t\t\ty: 0,\n\t\t\t}, strip.delta * 0.08)\n\t\t}\n\n\t}, [])\n\n\n\t// const animStrip = (stripRef, opening) => {\n\t// \tgsap.to(stripRef.current, {\n\t// \t\tduration: 0.3,\n\t// \t\tease: 'power3.out',\n\t// \t\tflex: opening ? 2 : 1,\n\t// \t})\n\t// }\n\n\tconst [stripOverIndex, setStripOverIndex] = useState(-1)\n\tconst onMouseEventOnStrip = (index, isOver) => {\n\t\tconsole.log('index.js::134 onMouseEventOnStrip index', stripOverIndex, index, isOver)\n\n\t\tif(index == stripOverIndex && !isOver) {\n\t\t\tsetStripOverIndex(-1)\n\t\t}\n\t\telse if (index != stripOverIndex && isOver) {\n\t\t\tsetStripOverIndex(index)\n\t\t}\n\n\t\t// if (index != stripOverIndex) {\n\t\t// \tif (stripOverIndex != -1) {\n\t\t// \t\tanimStrip(strips[stripOverIndex].ref, false)\n\t\t// \t}\n\t\t// \tanimStrip(strips[index].ref, true)\n\n\t\t// \tsetStripOverIndex(index)\n\t\t// }\n\t}\n\t\n\n\n\treturn (\n\t\t<div className={cn(styles.container)}>\n\t\t\t<section className={cn(styles.onBoarding)}>\n\n\t\t\t\t<div className={cn(styles.centered)} ref={logoRef} >\n\t\t\t\t\t<Logo className={styles.logo} />\n\t\t\t\t</div>\n\n\t\t\t\t<div className={cn(styles.centered)} ref={baselineRef}>\n\t\t\t\t\t<span className={cn(styles.baseline)}>un nouveau mode d’habitat</span>\n\t\t\t\t</div>\n\n\t\t\t\t<div className={cn(styles.pics)}>\n\t\t\t\t\t{pics.map(item =>\n\t\t\t\t\t\t<img key={item.src} ref={item.ref} src={item.src} className={cn(styles.pic)} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div className={cn(styles.strips)} ref={stripsRef}>\n\t\t\t\t\t{strips.map((item, i) =>\n\t\t\t\t\t\t<Strip\n\t\t\t\t\t\t\tkey={item.color}\n\t\t\t\t\t\t\tref={item.ref}\n\t\t\t\t\t\t\tcolor={item.color}\n\t\t\t\t\t\t\ttitle={item.title}\n\t\t\t\t\t\t\tactive={animInComplete}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t//onMouseOver={() => setStripOverIndex(i)}\n\t\t\t\t\t\t\t// opened={i == stripOverIndex}\n\t\t\t\t\t\t\tonMouseEvent={isOver => onMouseEventOnStrip(i, isOver)}\n\t\t\t\t\t\t\tnoneOpen={stripOverIndex == -1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t</section>\n\t\t</div>\n\t)\n}\n\nexport default OnBoarding"]},"metadata":{},"sourceType":"module"}