afb-client/bower_components/foundation-apps/js/angular/services/foundation.core.animation.js

   1 (function() {
   2   'use strict';
   3
   4   angular.module('foundation.core.animation', [])
   5     .service('FoundationAnimation', FoundationAnimation)
   6   ;
   7
   8   function FoundationAnimation() {
   9     var animations = [];
  10     var service = {};
  11
  12     var initClasses        = ['ng-enter', 'ng-leave'];
  13     var activeClasses      = ['ng-enter-active', 'ng-leave-active'];
  14     var activeGenericClass = 'is-active';
  15     var events = [
  16       'webkitAnimationEnd', 'mozAnimationEnd',
  17       'MSAnimationEnd', 'oanimationend',
  18       'animationend', 'webkitTransitionEnd',
  19       'otransitionend', 'transitionend'
  20     ];
  21
  22     service.animate = animate;
  23     service.toggleAnimation = toggleAnimation;
  24
  25     return service;
  26
  27     function toggleAnimation(element, futureState) {
  28       if(futureState) {
  29         element.addClass(activeGenericClass);
  30       } else {
  31         element.removeClass(activeGenericClass);
  32       }
  33     }
  34
  35     function animate(element, futureState, animationIn, animationOut) {
  36       var timedOut = true;
  37       var self = this;
  38       self.cancelAnimation = cancelAnimation;
  39
  40       var animationClass = futureState ? animationIn: animationOut;
  41       var activation = futureState;
  42       var initClass = activation ? initClasses[0] : initClasses[1];
  43       var activeClass = activation ? activeClasses[0] : activeClasses[1];
  44       //stop animation
  45       registerElement(element);
  46       reset();
  47       element.addClass(animationClass);
  48       element.addClass(initClass);
  49
  50       element.addClass(activeGenericClass);
  51
  52       //force a "tick"
  53       reflow();
  54
  55       //activate
  56       element[0].style.transitionDuration = '';
  57       element.addClass(activeClass);
  58
  59       element.one(events.join(' '), function() {
  60         finishAnimation();
  61       });
  62
  63       setTimeout(function() {
  64         if(timedOut) {
  65           finishAnimation();
  66         }
  67       }, 3000);
  68
  69       function finishAnimation() {
  70         deregisterElement(element);
  71         reset(); //reset all classes
  72         element[0].style.transitionDuration = '';
  73         element.removeClass(!activation ? activeGenericClass : ''); //if not active, remove active class
  74         reflow();
  75         timedOut = false;
  76       }
  77
  78
  79       function cancelAnimation(element) {
  80         deregisterElement(element);
  81         angular.element(element).off(events.join(' ')); //kill all animation event handlers
  82         timedOut = false;
  83       }
  84
  85       function registerElement(el) {
  86         var elObj = {
  87           el: el,
  88           animation: self
  89         };
  90
  91         //kill in progress animations
  92         var inProgress = animations.filter(function(obj) {
  93           return obj.el === el;
  94         });
  95         if(inProgress.length > 0) {
  96           var target = inProgress[0].el[0];
  97
  98           inProgress[0].animation.cancelAnimation(target);
  99         }
 100
 101         animations.push(elObj);
 102       }
 103
 104       function deregisterElement(el) {
 105         var index;
 106         var currentAnimation = animations.filter(function(obj, ind) {
 107           if(obj.el === el) {
 108             index = ind;
 109           }
 110         });
 111
 112         if(index >= 0) {
 113           animations.splice(index, 1);
 114         }
 115
 116       }
 117
 118       function reflow() {
 119         return element[0].offsetWidth;
 120       }
 121
 122       function reset() {
 123         element[0].style.transitionDuration = 0;
 124         element.removeClass(initClasses.join(' ') + ' ' + activeClasses.join(' ') + ' ' + animationIn + ' ' + animationOut);
 125       }
 126     }
 127   }
 128
 129 })();