{"code":"import throttle from 'lodash-es/throttle';\r\nimport last from 'lodash-es/last';\r\nimport kebabCase from 'lodash-es/kebabCase';\r\nvar Animator = /** @class */ (function () {\r\n    function Animator() {\r\n    }\r\n    Animator.prototype.bindAnimations = function (animations) {\r\n        for (var _i = 0, animations_1 = animations; _i < animations_1.length; _i++) {\r\n            var animation = animations_1[_i];\r\n            switch (animation.trigger) {\r\n                case 'pageLoad':\r\n                    this.triggerAnimation(animation);\r\n                    break;\r\n                case 'hover':\r\n                    this.bindHoverAnimation(animation);\r\n                    break;\r\n                case 'scrollInView':\r\n                    this.bindScrollInViewAnimation(animation);\r\n                    break;\r\n            }\r\n        }\r\n    };\r\n    Animator.prototype.warnElementNotPresent = function (id) {\r\n        console.warn(\"Cannot animate element: element with ID \" + id + \" not found!\");\r\n    };\r\n    Animator.prototype.augmentAnimation = function (animation, element) {\r\n        var stylesUsed = this.getAllStylesUsed(animation);\r\n        var computedStyle = getComputedStyle(element);\r\n        // const computedStyle = getComputedStyle(element);\r\n        // // FIXME: this will break if original load is in one reponsive size then resize to another hmmm\r\n        // Need to use transform instead of left since left can change on screen sizes\r\n        var firstStyles = animation.steps[0].styles;\r\n        var lastStyles = last(animation.steps).styles;\r\n        var bothStyles = [firstStyles, lastStyles];\r\n        // FIXME: this won't work as expected for augmented animations - may need the editor itself to manage this\r\n        for (var _i = 0, bothStyles_1 = bothStyles; _i < bothStyles_1.length; _i++) {\r\n            var styles = bothStyles_1[_i];\r\n            for (var _a = 0, stylesUsed_1 = stylesUsed; _a < stylesUsed_1.length; _a++) {\r\n                var style = stylesUsed_1[_a];\r\n                if (!(style in styles)) {\r\n                    styles[style] = computedStyle[style];\r\n                }\r\n            }\r\n        }\r\n    };\r\n    Animator.prototype.getAllStylesUsed = function (animation) {\r\n        var properties = [];\r\n        for (var _i = 0, _a = animation.steps; _i < _a.length; _i++) {\r\n            var step = _a[_i];\r\n            for (var key in step.styles) {\r\n                if (properties.indexOf(key) === -1) {\r\n                    properties.push(key);\r\n                }\r\n            }\r\n        }\r\n        return properties;\r\n    };\r\n    Animator.prototype.triggerAnimation = function (animation) {\r\n        var element = document.getElementById(animation.elementId);\r\n        if (!element) {\r\n            this.warnElementNotPresent(animation.elementId);\r\n            return;\r\n        }\r\n        this.augmentAnimation(animation, element);\r\n        // TODO: do this properly, may have other animations of different properties\r\n        // TODO: only override the properties\r\n        // TODO: if there is an entrance and hover animation, the transition duration will get effed\r\n        // element.setAttribute('style', '');\r\n        var styledUsed = this.getAllStylesUsed(animation);\r\n        element.style.transition = 'none';\r\n        element.style.transitionDelay = '0';\r\n        Object.assign(element.style, animation.steps[0].styles);\r\n        setTimeout(function () {\r\n            element.style.transition = \"all \" + animation.duration + \"s \" + kebabCase(animation.easing);\r\n            if (animation.delay) {\r\n                element.style.transitionDelay = animation.delay + 's';\r\n            }\r\n            Object.assign(element.style, animation.steps[1].styles);\r\n            // TODO: maybe remove/reset transitoin property after animation duration\r\n            setTimeout(function () {\r\n                element.style.transition = '';\r\n                element.style.transitionDelay = '';\r\n            }, (animation.delay || 0) * 1000 + animation.duration * 1000);\r\n        });\r\n    };\r\n    Animator.prototype.bindHoverAnimation = function (animation) {\r\n        // TODO: unbind on element remove\r\n        var element = document.getElementById(animation.elementId);\r\n        if (!element) {\r\n            this.warnElementNotPresent(animation.elementId);\r\n            return;\r\n        }\r\n        this.augmentAnimation(animation, element);\r\n        var defaultState = animation.steps[0].styles;\r\n        var hoverState = animation.steps[1].styles;\r\n        function attachDefaultState() {\r\n            Object.assign(element.style, defaultState);\r\n        }\r\n        function attachHoverState() {\r\n            Object.assign(element.style, hoverState);\r\n        }\r\n        attachDefaultState();\r\n        element.addEventListener('mouseenter', attachHoverState);\r\n        element.addEventListener('mouseleave', attachDefaultState);\r\n        setTimeout(function () {\r\n            element.style.transition = \"all \" + animation.duration + \"s \" + kebabCase(animation.easing);\r\n            if (animation.delay) {\r\n                element.style.transitionDelay = animation.delay + 's';\r\n            }\r\n        });\r\n    };\r\n    // TODO: unbind on element remove\r\n    Animator.prototype.bindScrollInViewAnimation = function (animation) {\r\n        var element = document.getElementById(animation.elementId);\r\n        if (!element) {\r\n            this.warnElementNotPresent(animation.elementId);\r\n            return;\r\n        }\r\n        this.augmentAnimation(animation, element);\r\n        var triggered = false;\r\n        // TODO: roll all of these in one for more efficiency of checking all the rects\r\n        var onScroll = throttle(function () {\r\n            if (!triggered && isScrolledIntoView(element)) {\r\n                triggered = true;\r\n                Object.assign(element.style, animation.steps[1].styles);\r\n                document.removeEventListener('scroll', onScroll);\r\n                setTimeout(function () {\r\n                    element.style.transition = '';\r\n                    element.style.transitionDelay = '';\r\n                }, animation.duration * 1000);\r\n            }\r\n        }, 100, { leading: false });\r\n        // TODO: fully in view or partially\r\n        function isScrolledIntoView(elem) {\r\n            var rect = elem.getBoundingClientRect();\r\n            var windowHeight = window.innerHeight;\r\n            var thresholdPrecent = 0.2;\r\n            var threshold = thresholdPrecent * windowHeight;\r\n            // TODO: partial in view? or what if element is larger than screen itself\r\n            return (rect.bottom > threshold && rect.top < windowHeight - threshold // Element is peeking top or bottom\r\n            );\r\n        }\r\n        var defaultState = animation.steps[0].styles;\r\n        function attachDefaultState() {\r\n            Object.assign(element.style, defaultState);\r\n        }\r\n        attachDefaultState();\r\n        setTimeout(function () {\r\n            element.style.transition = \"all \" + animation.duration + \"s \" + kebabCase(animation.easing);\r\n            if (animation.delay) {\r\n                element.style.transitionDelay = animation.delay + 's';\r\n            }\r\n        });\r\n        // TODO: one listener for everything\r\n        document.addEventListener('scroll', onScroll, { capture: true, passive: true });\r\n        element.addEventListener('remove', function () {\r\n            document.removeEventListener('scroll', onScroll);\r\n        });\r\n        // Do an initial check\r\n        onScroll();\r\n    };\r\n    return Animator;\r\n}());\r\nexport { Animator };\r\n","dts":{"name":"/Users/steve/Projects/bridge/builder/clients/js/dist/clients/js/src/classes/animator.class.d.ts","text":"export interface AnimationStep {\r\n    styles: {\r\n        [key: string]: string;\r\n    };\r\n    delay?: number;\r\n}\r\nexport interface Animation {\r\n    elementId: string;\r\n    trigger: string;\r\n    steps: AnimationStep[];\r\n    duration: number;\r\n    delay?: number;\r\n    easing?: string;\r\n}\r\nexport declare class Animator {\r\n    bindAnimations(animations: Animation[]): void;\r\n    private warnElementNotPresent(id);\r\n    private augmentAnimation(animation, element);\r\n    private getAllStylesUsed(animation);\r\n    triggerAnimation(animation: Animation): void;\r\n    bindHoverAnimation(animation: Animation): void;\r\n    bindScrollInViewAnimation(animation: Animation): void;\r\n}\r\n"}}