feat($animator): provide support for custom animation events

2 files changed, 84 insertions, 0 deletions

diff --git a/src/ng/animator.js b/src/ng/animator.js
index 7fc35f3c..2965717b 100644
--- a/src/ng/animator.js
+++ b/src/ng/animator.js
@@ -253,6 +253,20 @@ var $AnimatorProvider = function() {
          * @param {jQuery/jqLite element} element the element that will be rendered visible or hidden
         */
         animator.hide = animateActionFactory('hide', noop, hide);
+
+        /**
+         * @ngdoc function
+         * @name ng.animator#animate
+         * @methodOf ng.$animator
+         *
+         * @description
+         * Triggers a custom animation event to be executed on the given element
+         *
+         * @param {jQuery/jqLite element} element that will be animated
+        */
+        animator.animate = function(event, element) {
+          animateActionFactory(event, noop, noop)(element);
+        }
         return animator;
   
         function animateActionFactory(type, beforeFn, afterFn) {
diff --git a/test/ng/animatorSpec.js b/test/ng/animatorSpec.js
index c9d1227d..d4d7c0ec 100644
--- a/test/ng/animatorSpec.js
+++ b/test/ng/animatorSpec.js
@@ -352,6 +352,18 @@ describe("$animator", function() {
       expect(element.hasClass('animation-cancelled')).toBe(true);
     }));
 
+
+    it("should properly animate custom animation events", inject(function($animator, $rootScope) {
+      $animator.enabled(true);
+      animator = $animator($rootScope, {
+        ngAnimate : '{custom: \'setup-memo\'}'
+      });
+
+      element.text('123');
+      animator.animate('custom',element);
+      window.setTimeout.expect(1).process();
+      expect(element.text()).toBe('memento');
+    }));
   });
 
   describe("with CSS3", function() {
@@ -368,6 +380,64 @@ describe("$animator", function() {
       })
     });
 
+    it("should properly animate custom animations for specific animation events",
+      inject(function($animator, $rootScope, $compile, $sniffer) {
+
+      $animator.enabled(true);
+      var element = $compile(html('<div></div>'))($rootScope);
+
+      animator = $animator($rootScope, {
+        ngAnimate : '{custom: \'special\'}'
+      });
+
+      animator.animate('custom',element);
+      if($sniffer.transitions) {
+        expect(element.hasClass('special')).toBe(true);
+        window.setTimeout.expect(1).process();
+        expect(element.hasClass('special-active')).toBe(true);
+      }
+      else {
+        expect(window.setTimeout.queue.length).toBe(0);
+      }
+    }));
+
+    it("should not animate custom animations if not specifically defined",
+      inject(function($animator, $rootScope, $compile) {
+
+      $animator.enabled(true);
+      var element = $compile(html('<div></div>'))($rootScope);
+
+      animator = $animator($rootScope, {
+        ngAnimate : '{custom: \'special\'}'
+      });
+
+      expect(window.setTimeout.queue.length).toBe(0);
+      animator.animate('custom1',element);
+      expect(element.hasClass('special')).toBe(false);
+      expect(window.setTimeout.queue.length).toBe(0);
+    }));
+
+    it("should properly animate custom animations for general animation events",
+      inject(function($animator, $rootScope, $compile, $sniffer) {
+
+      $animator.enabled(true);
+      var element = $compile(html('<div></div>'))($rootScope);
+
+      animator = $animator($rootScope, {
+        ngAnimate : "'special'"
+      });
+
+      animator.animate('custom',element);
+      if($sniffer.transitions) {
+        expect(element.hasClass('special-custom')).toBe(true);
+        window.setTimeout.expect(1).process();
+        expect(element.hasClass('special-custom-active')).toBe(true);
+      }
+      else {
+        expect(window.setTimeout.queue.length).toBe(0);
+      }
+    }));
+
     describe("Animations", function() {
       it("should properly detect and make use of CSS Animations",
           inject(function($animator, $rootScope, $compile, $sniffer) {