{"version":3,"file":"elements-about.js","mappings":"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","sources":["webpack://silverstripe-base/./themes/app/src/elements/about.js","webpack://silverstripe-base/./node_modules/@motionone/dom/dist/animate/index.es.js","webpack://silverstripe-base/./node_modules/@motionone/dom/dist/animate/create-animate.es.js","webpack://silverstripe-base/./node_modules/motion/dist/animate.es.js"],"sourcesContent":["import { animate } from \"motion\";\n\nconst generatePath = (el) => {\n  const block1 = el.querySelector(\".about-block-1\");\n  const block2 = el.querySelector(\".about-block-2\");\n  const block3 = el.querySelector(\".about-block-3\");\n\n  if (block1 && block2 && block3) {\n    const holder = el.querySelector(\".about-blocks\");\n    const svg = el.querySelector(\".about-blocks-svg\");\n\n    const holderRect = holder.getBoundingClientRect();\n    const block1Rect = block1.getBoundingClientRect();\n    const block2Rect = block2.getBoundingClientRect();\n\n    svg.setAttribute(\"viewBox\", `-1 -1 ${holderRect.width} ${holderRect.height}`);\n\n    const pathParts = [`M${holderRect.width} 0`];\n\n    let a = 70;\n    let b = 80;\n\n    if (window.matchMedia(\"(min-width: 1280px)\").matches) {\n      a = 80;\n      b = 100;\n    }\n\n    pathParts.push(`H${b}`);\n    pathParts.push(`C${a} 0 0 0 0 ${b}`);\n    pathParts.push(`V${block1Rect.height - b}`);\n    pathParts.push(`C0 ${block1Rect.height - a} 0 ${block1Rect.height} ${b} ${block1Rect.height}`);\n    pathParts.push(`H${holderRect.width - b}`);\n    pathParts.push(\n      `C${holderRect.width - a} ${block1Rect.height} ${holderRect.width} ${block1Rect.height} ${holderRect.width - 2} ${block1Rect.height + b}`,\n    );\n    pathParts.push(`V${block1Rect.height + block2Rect.height - b}`);\n    pathParts.push(\n      `C${holderRect.width - 2} ${block1Rect.height + block2Rect.height - a} ${holderRect.width} ${block1Rect.height + block2Rect.height} ${holderRect.width - b} ${block1Rect.height + block2Rect.height}`,\n    );\n    pathParts.push(`H${b}`);\n    pathParts.push(\n      `C${a} ${block1Rect.height + block2Rect.height} 0 ${block1Rect.height + block2Rect.height} 0 ${block1Rect.height + block2Rect.height + b}`,\n    );\n    pathParts.push(`V${holderRect.height}`);\n\n    const pathData = pathParts.join(\"\");\n\n    if (holder.classList.contains(\"did-animate\")) {\n      svg.innerHTML = `<path d=\"${pathData}\" stroke=\"white\" stroke-width=\"2\" fill=\"none\" />`;\n    } else {\n      svg.innerHTML = `<path d=\"${pathData}\" stroke=\"white\" stroke-width=\"2\" fill=\"none\" class=\"line-path\" />`;\n    }\n  }\n};\n\ndocument.querySelectorAll(\".element-about\").forEach((el) => {\n  window.addEventListener(\"resize\", () => {\n    generatePath(el);\n  });\n\n  generatePath(el);\n\n  const holder = el.querySelector(\".about-blocks\");\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      if (e.isIntersecting) {\n        setTimeout(async () => {\n          await animate(holder.querySelector(\".line-path\"), { strokeDashoffset: 0 }, { duration: 3, easing: \"linear\" })\n            .finished;\n\n          holder.classList.add(\"did-animate\");\n        }, 250);\n\n        observer.disconnect();\n      }\n    },\n    {\n      threshold: 0.1,\n    },\n  );\n\n  observer.observe(holder);\n});\n","import { Animation } from '@motionone/animation';\nimport { createAnimate } from './create-animate.es.js';\n\nconst animate = createAnimate(Animation);\n\nexport { animate };\n","import { invariant } from 'hey-listen';\nimport { animateStyle } from './animate-style.es.js';\nimport { getOptions } from './utils/options.es.js';\nimport { resolveElements } from '../utils/resolve-elements.es.js';\nimport { withControls } from './utils/controls.es.js';\nimport { resolveOption } from '../utils/stagger.es.js';\n\nfunction createAnimate(AnimatePolyfill) {\n    return function animate(elements, keyframes, options = {}) {\n        elements = resolveElements(elements);\n        const numElements = elements.length;\n        invariant(Boolean(numElements), \"No valid element provided.\");\n        invariant(Boolean(keyframes), \"No keyframes defined.\");\n        /**\n         * Create and start new animations\n         */\n        const animationFactories = [];\n        for (let i = 0; i < numElements; i++) {\n            const element = elements[i];\n            for (const key in keyframes) {\n                const valueOptions = getOptions(options, key);\n                valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);\n                const animation = animateStyle(element, key, keyframes[key], valueOptions, AnimatePolyfill);\n                animationFactories.push(animation);\n            }\n        }\n        return withControls(animationFactories, options, \n        /**\n         * TODO:\n         * If easing is set to spring or glide, duration will be dynamically\n         * generated. Ideally we would dynamically generate this from\n         * animation.effect.getComputedTiming().duration but this isn't\n         * supported in iOS13 or our number polyfill. Perhaps it's possible\n         * to Proxy animations returned from animateStyle that has duration\n         * as a getter.\n         */\n        options.duration);\n    };\n}\n\nexport { createAnimate };\n","import { animate as animate$1, withControls } from '@motionone/dom';\nimport { isFunction } from '@motionone/utils';\nimport { Animation } from '@motionone/animation';\n\nfunction animateProgress(target, options = {}) {\n    return withControls([\n        () => {\n            const animation = new Animation(target, [0, 1], options);\n            animation.finished.catch(() => { });\n            return animation;\n        },\n    ], options, options.duration);\n}\nfunction animate(target, keyframesOrOptions, options) {\n    const factory = isFunction(target) ? animateProgress : animate$1;\n    return factory(target, keyframesOrOptions, options);\n}\n\nexport { animate, animateProgress };\n"],"names":["generatePath","el","block1","querySelector","block2","block3","holder","svg","holderRect","getBoundingClientRect","block1Rect","block2Rect","setAttribute","width","height","pathParts","a","b","window","matchMedia","matches","push","pathData","join","classList","contains","innerHTML","document","querySelectorAll","forEach","addEventListener","observer","IntersectionObserver","e","isIntersecting","setTimeout","async","animate","strokeDashoffset","duration","easing","finished","add","disconnect","threshold","observe","AnimatePolyfill","elements","keyframes","options","numElements","length","Boolean","animationFactories","i","element","key","valueOptions","delay","animation","animateProgress","target","catch","keyframesOrOptions"],"sourceRoot":""}