{"ast":null,"code":"import { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nvar _jsxFileName = \"/home/gkkdzdg/www/src/components/onBoarding/Strip.js\";\nimport styles from './Strip.module.scss';\nimport cn from 'classnames';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\nimport gsap from 'gsap';\nimport { useMouse } from 'beautiful-react-hooks'; // import FitText from '@kennethormandy/react-fittext'\n\nconst Strip = /*#__PURE__*/forwardRef(({\n  color,\n  title,\n  active,\n  onMouseEvent,\n  noneOpen\n}, ref) => {\n  const {\n    0: mouseIsOver,\n    1: setMouseHover\n  } = useState(false);\n  const [position, {\n    onMouseEnter,\n    onMouseLeave\n  }] = useMouse(ref);\n  const {\n    0: tl\n  } = useState(gsap.timeline({\n    paused: true\n  }));\n  const titleContainerRef = useRef();\n  const contentRef = useRef();\n  const discoverRef = useRef();\n  const discoverArrowRef = useRef();\n  onMouseEnter(() => {\n    if (active) setMouseHover(true);\n  });\n  onMouseLeave(() => {\n    setMouseHover(false);\n  });\n  useEffect(() => {\n    //console.log('Strip.js::26 title, mouseIsOver', title.split(' ')[0], mouseIsOver)\n    //const tl = gsap.timeline()\n    console.log('Strip.js::30 noneOpen', noneOpen);\n    onMouseEvent(mouseIsOver);\n    tl.clear();\n    let delay = 0; // - - - enlarge / shrink\n\n    tl.to(ref.current, {\n      duration: 0.8,\n      ease: 'power3.out',\n      flex: mouseIsOver ? 2 : noneOpen ? 1 : 0 //width: mouseIsOver ? window.innerWidth / 2 : window.innerWidth / 5,\n      //width: mouseIsOver ? window.innerWidth - 300 : (noneOpen ? '25%' : 200),\n\n    });\n    console.log('Strip.js::48 titleContainerRef.current.innerHeight', titleContainerRef.current.offsetHeight); // - - - anim title\n\n    tl.to(titleContainerRef.current, {\n      duration: 0.6,\n      ease: 'power3.out',\n      y: mouseIsOver ? -window.innerHeight * 0.5 + titleContainerRef.current.offsetHeight + 20 : noneOpen ? 0 : -window.innerHeight * 0.5,\n      x: noneOpen || mouseIsOver ? 0 : 20,\n      scale: mouseIsOver ? 1.5 : 1,\n      rotation: noneOpen || mouseIsOver ? 0 : 90,\n      transformOrigin: 'bottom left'\n    }, 0); // - - -\n\n    delay += mouseIsOver ? 0.2 : 0; // - - - show discover button\n\n    tl.to(discoverRef.current, {\n      duration: 0.5,\n      ease: 'power3.out',\n      opacity: mouseIsOver ? 1 : 0,\n      y: mouseIsOver ? 0 : 30\n    }, delay); // - - -\n\n    delay += 0.05; // - - - arrow\n\n    tl.to(discoverArrowRef.current, {\n      duration: 0.5,\n      ease: 'power3.out',\n      y: mouseIsOver ? 0 : 10\n    }, delay); // - - -\n\n    delay = mouseIsOver ? 0.3 : 0; // - - - content\n\n    tl.to(contentRef.current, {\n      duration: mouseIsOver ? 0.6 : 0.2,\n      ease: 'power3.out',\n      y: mouseIsOver ? 0 : 30,\n      opacity: mouseIsOver ? 1 : 0\n    }, delay);\n    tl.play();\n  }, [mouseIsOver, noneOpen]);\n  const titleLines = title.split('\\n'); //const lineHeight = 22\n\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    ref: ref,\n    className: cn(styles.strip),\n    style: {\n      backgroundColor: color\n    },\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      ref: titleContainerRef,\n      className: cn(styles.title),\n      children: titleLines.map((line, i) => /*#__PURE__*/_jsxDEV(\"span\", {\n        className: cn(styles.titleLine),\n        children: line\n      }, i, false, {\n        fileName: _jsxFileName,\n        lineNumber: 123,\n        columnNumber: 6\n      }, this))\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 105,\n      columnNumber: 4\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      ref: contentRef,\n      className: cn(styles.content),\n      children: /*#__PURE__*/_jsxDEV(\"p\", {\n        children: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis vestibulum maecenas aliquam magnis. Ultrices quis venenatis, ultricies tempus commodo commodo ultricies tellus lectus. Fringilla eu duis vel elementum turpis elementum ultricies senectus. Scelerisque ut vel in convallis id aliquet urna. Nibh commodo vel id elementum eu ultrices. Convallis aliquet quis egestas sit integer quam. A, auctor duis et aliquet tellus leo sodales purus. Ut consectetur dignissim commodo sagittis. Aliquam suspendisse sapien, ultricies iaculis. Leo odio pellentesque convallis ullamcorper felis elit. Quam aliquet leo fringilla aliquet convallis dolor, dolor enim, posuere. Dolor non eu sed tincidunt non eu at massa dictumst. Volutpat sed pellentesque massa facilisi sed nam tristique et ridiculus. Luctus tristique lacus, eu nam lobortis. Vel scelerisque.\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 130,\n        columnNumber: 5\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 129,\n      columnNumber: 4\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      ref: discoverRef,\n      className: cn(styles.discover),\n      children: [/*#__PURE__*/_jsxDEV(\"span\", {\n        children: \"d\\xE9couvrir l'\\xE9cosystem\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 134,\n        columnNumber: 5\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        ref: discoverArrowRef,\n        className: cn(styles.arrowDown)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 135,\n        columnNumber: 5\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 133,\n      columnNumber: 4\n    }, this)]\n  }, color, true, {\n    fileName: _jsxFileName,\n    lineNumber: 103,\n    columnNumber: 3\n  }, this);\n});\nexport default Strip;","map":{"version":3,"sources":["/home/gkkdzdg/www/src/components/onBoarding/Strip.js"],"names":["styles","cn","forwardRef","useEffect","useRef","useState","gsap","useMouse","Strip","color","title","active","onMouseEvent","noneOpen","ref","mouseIsOver","setMouseHover","position","onMouseEnter","onMouseLeave","tl","timeline","paused","titleContainerRef","contentRef","discoverRef","discoverArrowRef","console","log","clear","delay","to","current","duration","ease","flex","offsetHeight","y","window","innerHeight","x","scale","rotation","transformOrigin","opacity","play","titleLines","split","strip","backgroundColor","map","line","i","titleLine","content","discover","arrowDown"],"mappings":"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","sourcesContent":["\nimport styles from './Strip.module.scss'\nimport cn from 'classnames'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport gsap from 'gsap'\nimport { useMouse } from 'beautiful-react-hooks'\n// import FitText from '@kennethormandy/react-fittext'\n\n\nconst Strip = forwardRef(({ color, title, active, onMouseEvent, noneOpen, }, ref) => {\n\n\tconst [mouseIsOver, setMouseHover] = useState(false)\n\tconst [position, { onMouseEnter, onMouseLeave }] = useMouse(ref)\n\n\tconst [tl] = useState(gsap.timeline({ paused: true }))\n\n\tconst titleContainerRef = useRef()\n\tconst contentRef = useRef()\n\tconst discoverRef = useRef()\n\tconst discoverArrowRef = useRef()\n\n\tonMouseEnter(() => {\n\t\tif (active) setMouseHover(true)\n\t})\n\tonMouseLeave(() => {\n\t\tsetMouseHover(false)\n\t})\n\n\tuseEffect(() => {\n\t\t//console.log('Strip.js::26 title, mouseIsOver', title.split(' ')[0], mouseIsOver)\n\t\t//const tl = gsap.timeline()\n\t\tconsole.log('Strip.js::30 noneOpen', noneOpen)\n\n\t\tonMouseEvent(mouseIsOver)\n\n\t\ttl.clear()\n\n\t\tlet delay = 0\n\n\t\t// - - - enlarge / shrink\n\t\ttl.to(ref.current, {\n\t\t\tduration: 0.8,\n\t\t\tease: 'power3.out',\n\t\t\tflex: mouseIsOver ? 2 : (noneOpen ? 1 : 0),\n\t\t\t//width: mouseIsOver ? window.innerWidth / 2 : window.innerWidth / 5,\n\t\t\t//width: mouseIsOver ? window.innerWidth - 300 : (noneOpen ? '25%' : 200),\n\t\t})\n\n\t\tconsole.log('Strip.js::48 titleContainerRef.current.innerHeight', titleContainerRef.current.offsetHeight)\n\n\t\t// - - - anim title\n\t\ttl.to(titleContainerRef.current, {\n\t\t\tduration: 0.6,\n\t\t\tease: 'power3.out',\n\t\t\ty: mouseIsOver\n\t\t\t\t? - window.innerHeight * 0.5 + titleContainerRef.current.offsetHeight + 20\n\t\t\t\t: noneOpen\n\t\t\t\t\t? 0\n\t\t\t\t\t: - window.innerHeight * 0.5,\n\t\t\tx: noneOpen || mouseIsOver ? 0 : 20,\n\t\t\tscale: mouseIsOver ? 1.5 : 1,\n\t\t\trotation: noneOpen || mouseIsOver ? 0 : 90,\n\t\t\ttransformOrigin: 'bottom left',\n\t\t}, 0)\n\n\t\t// - - -\n\t\tdelay += mouseIsOver ? 0.2 : 0\n\t\t// - - - show discover button\n\t\ttl.to(discoverRef.current, {\n\t\t\tduration: 0.5,\n\t\t\tease: 'power3.out',\n\t\t\topacity: mouseIsOver ? 1 : 0,\n\t\t\ty: mouseIsOver ? 0 : 30,\n\t\t}, delay)\n\n\t\t// - - -\n\t\tdelay += 0.05\n\t\t// - - - arrow\n\t\ttl.to(discoverArrowRef.current, {\n\t\t\tduration: 0.5,\n\t\t\tease: 'power3.out',\n\t\t\ty: mouseIsOver ? 0 : 10,\n\t\t}, delay)\n\t\t\n\t\t// - - -\n\t\tdelay = mouseIsOver ? 0.3 : 0\n\t\t// - - - content\n\t\ttl.to(contentRef.current, {\n\t\t\tduration: mouseIsOver ? 0.6 : 0.2,\n\t\t\tease: 'power3.out',\n\t\t\ty: mouseIsOver ? 0 : 30,\n\t\t\topacity: mouseIsOver ? 1 : 0,\n\t\t}, delay)\n\n\t\ttl.play()\n\n\t}, [mouseIsOver, noneOpen])\n\n\tconst titleLines = title.split('\\n')\n\t//const lineHeight = 22\n\n\treturn (\n\t\t<div key={color} ref={ref} className={cn(styles.strip)} style={{ backgroundColor: color }}>\n\t\t\t{/* <FitText compressor={1}> */}\n\t\t\t<div ref={titleContainerRef} className={cn(styles.title)}>\n\t\t\t\t{/* <svg\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\theight=\"100%\"\n\t\t\t\t\tviewBox={\"0 0 300 \" + (titleLines.length+1) * lineHeight}\n\t\t\t\t\tpreserveAspectRatio=\"xMinYMid meet\"\n\t\t\t\t>\n\t\t\t\t\t{titleLines.map((line, i) =>\n\t\t\t\t\t\t<text\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tx=\"0\"\n\t\t\t\t\t\t\ty={(i + 1) * lineHeight}\n\t\t\t\t\t\t\tfontSize={lineHeight}\n\t\t\t\t\t\t\tfill=\"black\"\n\t\t\t\t\t\t>{line}</text>\n\t\t\t\t\t)}\n\t\t\t\t</svg> */}\n\t\t\t\t{titleLines.map((line, i) =>\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tclassName={cn(styles.titleLine)}\n\t\t\t\t\t>{line}</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div ref={contentRef} className={cn(styles.content)}>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis vestibulum maecenas aliquam magnis. Ultrices quis venenatis, ultricies tempus commodo commodo ultricies tellus lectus. Fringilla eu duis vel elementum turpis elementum ultricies senectus. Scelerisque ut vel in convallis id aliquet urna.\nNibh commodo vel id elementum eu ultrices. Convallis aliquet quis egestas sit integer quam. A, auctor duis et aliquet tellus leo sodales purus. Ut consectetur dignissim commodo sagittis. Aliquam suspendisse sapien, ultricies iaculis. Leo odio pellentesque convallis ullamcorper felis elit. Quam aliquet leo fringilla aliquet convallis dolor, dolor enim, posuere. Dolor non eu sed tincidunt non eu at massa dictumst. Volutpat sed pellentesque massa facilisi sed nam tristique et ridiculus. Luctus tristique lacus, eu nam lobortis. Vel scelerisque.</p>\n\t\t\t</div>\n\t\t\t<div ref={discoverRef} className={cn(styles.discover)}>\n\t\t\t\t<span>découvrir l'écosystem</span>\n\t\t\t\t<div ref={discoverArrowRef} className={cn(styles.arrowDown)}></div>\n\t\t\t</div>\n\t\t</div >\n\t)\n})\n\nexport default Strip"]},"metadata":{},"sourceType":"module"}