{"version":3,"sources":["webpack:///./src/components/PageBuilder/EcosystemAnimation.vue","webpack:///src/components/PageBuilder/EcosystemAnimation.vue","webpack:///./src/components/PageBuilder/EcosystemAnimation.vue?5969","webpack:///./src/components/PageBuilder/EcosystemAnimation.vue?2cf5","webpack:///./src/components/PageBuilder/EcosystemAnimation.vue?75f7"],"names":["render","_vm","this","_c","_self","staticClass","class","cmsBlock","style","attrs","anchorTag","ref","lottieOptions","on","handleAnimation","_l","logosSorted","el","i","placeLogo","logo","url","target","getImageUrl","image","data","attributes","domProps","_s","md","localize","subline","staticRenderFns","name","anim","totalLogos","logosStep1","length","logosStep2","logosStep3","baseTimeOffset","animationVisible","finishedSorting","props","components","Lottie","then","m","default","computed","animationData","ecosystemAnimationJson","renderer","autoplay","loop","methods","play","showLogos","self","forEach","setTimeout","visible","step","rect","$refs","wrapper","getBoundingClientRect","r","height","phi","Math","PI","polarPosition","VectorPolar","position","cartesian","transform","x","y","linkType","internalUrl","externalUrl","anchor","mounted","longestLogoSet","max","window","innerWidth","Array","fill","map","_","__","n","logoConfig","push","observer","IntersectionObserver","entries","isIntersecting","threshold","observe","addEventListener","$forceUpdate","watch","handler","component"],"mappings":"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","file":"js/chunk-791e13c8.e7fb5e9a.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('section',{staticClass:\"ecosystem\",class:_vm.cmsBlock.style,attrs:{\"id\":_vm.cmsBlock.anchorTag}},[_c('div',{ref:\"wrapper\",staticClass:\"animation\"},[_c('Lottie',{attrs:{\"options\":_vm.lottieOptions},on:{\"animCreated\":_vm.handleAnimation}}),_c('div',{staticClass:\"logos\"},_vm._l((_vm.logosSorted),function(el,i){return _c('a',{class:el.class,style:(_vm.placeLogo(i, el.logo)),attrs:{\"href\":_vm.url(el.logo),\"target\":_vm.target(el.logo)}},[_c('img',{attrs:{\"src\":_vm.getImageUrl(el.logo.image.data.attributes.url)}})])}),0)],1),_c('div',{staticClass:\"cms-content\",domProps:{\"innerHTML\":_vm._s(_vm.md(_vm.localize(_vm.cmsBlock.subline)))}})])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <section :id=\"cmsBlock.anchorTag\" class=\"ecosystem\" :class=\"cmsBlock.style\">\n\n        <div ref=\"wrapper\" class=\"animation\">\n\n            <Lottie :options=\"lottieOptions\" v-on:animCreated=\"handleAnimation\"/>\n\n            <div class=\"logos\">\n                <a\n                    v-for=\"(el, i) in logosSorted\"\n                    :href=\"url(el.logo)\"\n                    :target=\"target(el.logo)\"\n                    :style=\"placeLogo(i, el.logo)\"\n                    :class=\"el.class\"\n                >\n                    <img :src=\"getImageUrl(el.logo.image.data.attributes.url)\">\n                </a>\n            </div>\n\n        </div>\n\n        <div v-html=\"md(localize(cmsBlock.subline))\" class=\"cms-content\"></div>\n\n    </section>\n</template>\n\n<script>\n    import ecosystemAnimationJson from '@/assets/ecosystem.json'\n    import { VectorCartesian, VectorPolar } from '@/helper'\n\n    export default {\n        name: 'EcosystemAnimation',\n\n        data() {\n            return {\n                anim: null,\n\n                totalLogos: this.cmsBlock.logosStep1.length + this.cmsBlock.logosStep2.length + this.cmsBlock.logosStep3.length,\n\n                baseTimeOffset: 3500,\n\n                logosSorted: [],\n\n                animationVisible: false,\n                finishedSorting: false\n            }\n        },\n\n        props: [\n            'cmsBlock'\n        ],\n\n        components: {\n            Lottie: () => import('vue-lottie').then(m => m.default),\n        },\n\n        computed: {\n            lottieOptions() {\n                return {\n                    animationData: ecosystemAnimationJson,\n                    renderer: 'canvas',\n                    autoplay: false,\n                    loop: false\n                }\n            }\n        },\n\n        methods: {\n            handleAnimation(anim) {\n                this.anim = anim\n            },\n\n            play() {\n                this.anim.play()\n                if(this.finishedSorting){\n                    this.showLogos()\n                }\n            },\n            \n            showLogos() {\n                var self = this\n                this.logosSorted.forEach(function(el){\n                    setTimeout(function(){\n                        el.class = {\n                            ...el.class,\n                            visible: true\n                        }\n                    }, (el.step + 1) * self.baseTimeOffset)\n                })\n            },\n\n            placeLogo(i, logo) {\n                var rect = this.$refs.wrapper.getBoundingClientRect()\n                var r = rect.height / 2.5\n                var phi = 2 * Math.PI / this.totalLogos * i\n\n                var polarPosition = new VectorPolar(r, phi)\n                var position = polarPosition.cartesian()\n\n                return {\n                    transform: `translate(${position.x}px, ${position.y}px)`\n                }\n            },\n\n            url(logo) {\n                switch(logo.linkType){\n                    case 'internal':\n                        return logo.internalUrl\n                    case 'external':\n                        return logo.externalUrl\n                    case 'anchor':\n                        return logo.anchor\n                }\n            },\n\n            target(logo) {\n                switch(logo.linkType){\n                    case 'external':\n                        return '_blank'\n                    default:\n                        return '_self'\n                }\n            }\n        },\n\n        mounted() {\n            var self = this\n\n            // get the number of logos from the step with the most logos\n            const longestLogoSet = Math.max(...[\n                this.cmsBlock.logosStep1.length,\n                this.cmsBlock.logosStep2.length,\n                this.cmsBlock.logosStep3.length\n            ])\n\n            if(window.innerWidth >= 825){\n                // Logo sets with [A1, A2, A3], [B1, B2, B3], [C1, C2, C3]\n                // will be mixed into a single array as [A1, B1, C1, A2, B2, C2, A3, B3, C3]\n                // --------------\n                // Iterate through the range of max number of logos per set\n                Array(longestLogoSet).fill(0).map(function(_, i){\n                    // iterate through the 3 logo sets\n                    Array(3).fill(0).map(function(__, n){\n                        // if the current set is inside the range i\n                        if(self.cmsBlock[`logosStep${n+1}`].length > i){\n                            // add the logo to the sorted array\n                            var logoConfig = {\n                                logo: self.cmsBlock[`logosStep${n+1}`][i],\n                                step: n,\n                                class: {}\n                            }\n                            logoConfig.class[`step${n+1}`] = true\n                            self.logosSorted.push(logoConfig)\n                        }\n                    })\n                })\n            } else {\n                Array(3).fill(0).map(function(__, n){\n                    self.cmsBlock[`logosStep${n+1}`].forEach(function(logo){\n                        self.logosSorted.push({\n                            logo: logo,\n                            step: 1,\n                            class: {}\n                        })\n                    })\n                })\n            }\n            this.finishedSorting = true\n\n            var observer = new IntersectionObserver(\n                function(entries) {\n                    if(entries[0].isIntersecting === true){\n                        self.animationVisible = true\n                        self.play()\n                    }\n                },{\n                    threshold: [0.5] \n                }\n            )\n            observer.observe(this.$refs.wrapper)\n\n            window.addEventListener('resize', function(){\n                self.$forceUpdate()\n            })\n        },\n\n        watch: {\n            finishedSorting: {\n                handler() {\n                    if(this.finishedSorting && this.animationVisible){\n                        this.showLogos()\n                    }\n                }\n            },\n\n            animationVisible: {\n                handler() {\n                    if(this.finishedSorting && this.animationVisible){\n                        this.showLogos()\n                    }\n                }\n            }\n        }\n    }\n</script>\n\n<style lang=\"scss\" scoped>\n    .animation {\n        height: calc(66vh - 300px) !important;\n        width: auto !important;\n        padding: 150px;\n        position: relative;\n\n        @include breakpoint('mobile') {\n            padding: 30px;\n            height: auto !important;\n        }\n    }\n\n    .logos {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        @include breakpoint('mobile') {\n            position: relative;\n            flex-wrap: wrap;\n            justify-content: space-around;\n        }\n\n        a {\n            position: absolute;\n            opacity: 0;\n            transition: 2s;\n\n            &.step1 {\n                img {\n                    width: 17vh;\n\n                    @include breakpoint('mobile') {\n                        width: unset;\n                    }\n                }\n            }\n\n            &.visible {\n                opacity: 1;\n            }\n\n            @include breakpoint('mobile') {\n                transform: none !important;\n                position: relative;\n                opacity: 1;\n            }\n\n            img {\n                width: 7vh;\n                height: auto;\n                filter: grayscale(1);\n                transition: .16s;\n\n                @include breakpoint('mobile') {\n                    width: 175px;\n                    padding: 15px;\n                }\n\n                &:hover {\n                    filter: grayscale(0);\n                }\n            }\n        }\n    }\n\n    .cms-content {\n        max-width: 1560px;\n        margin: 0 auto;\n        padding-bottom: 1px;\n\n        @include breakpoint('max-width') {\n            margin: 0 getSpacing('section-left-right', 'desktop');\n        }\n        @include breakpoint('tablet') {\n            margin: 0 getSpacing('section-left-right', 'tablet');\n        }\n        @include breakpoint('mobile') {\n            margin: 0 getSpacing('section-left-right', 'mobile');\n        }\n    }\n\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EcosystemAnimation.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EcosystemAnimation.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./EcosystemAnimation.vue?vue&type=template&id=3ddac311&scoped=true\"\nimport script from \"./EcosystemAnimation.vue?vue&type=script&lang=js\"\nexport * from \"./EcosystemAnimation.vue?vue&type=script&lang=js\"\nimport style0 from \"./EcosystemAnimation.vue?vue&type=style&index=0&id=3ddac311&prod&lang=scss&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3ddac311\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EcosystemAnimation.vue?vue&type=style&index=0&id=3ddac311&prod&lang=scss&scoped=true\""],"sourceRoot":""}