fix(fabSpeedDial): fix ability to use ng-hide

the animations were not properly calling the `done()` callback, so
the `ng-animate` class was never being removed

closes #3313

Author: topherfangio

src/components/fabSpeedDial/demoHiding/index.html

@@ -0,0 +1,35 @@
+<div ng-controller="DemoCtrl as demo" layout="column">
+  <md-content class="md-padding" layout="column">
+    <p>
+      You can also hide the speed dial programmatically.
+    </p>
+
+    <md-checkbox ng-model="demo.hidden">
+      Hide the speed dial.
+    </md-checkbox>
+
+    <div class="lock-size" layout="row" layout-align="center center">
+      <md-fab-speed-dial ng-hide="demo.hidden" md-direction="down" class="md-fling">
+        <md-fab-trigger>
+          <md-button aria-label="menu" class="md-fab md-warn">
+            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+          </md-button>
+        </md-fab-trigger>
+
+        <md-fab-actions>
+          <md-button aria-label="twitter" class="md-fab md-raised md-mini">
+            <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
+          </md-button>
+
+          <md-button aria-label="facebook" class="md-fab md-raised md-mini">
+            <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
+          </md-button>
+
+          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
+            <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
+          </md-button>
+        </md-fab-actions>
+      </md-fab-speed-dial>
+    </div>
+  </md-content>
+</div>

src/components/fabSpeedDial/demoHiding/script.js

@@ -0,0 +1,8 @@
+(function() {
+  'use strict';
+
+  angular.module('fabSpeedDialHidingDemo', ['ngMaterial'])
+    .controller('DemoCtrl', function() {
+      this.hidden = false;
+    });
+})();

src/components/fabSpeedDial/demoHiding/style.scss

@@ -0,0 +1,20 @@
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.md-fab:hover, .md-fab.md-focused {
+  background-color: #000 !important;
+}
+
+p.note {
+  font-size: 1.2rem;
+}
+
+.lock-size {
+  min-width: 300px;
+  min-height: 300px;
+  width: 300px;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}

src/components/fabSpeedDial/fabSpeedDial.js

@@ -2,14 +2,23 @@
   'use strict';
 
   angular
+    // Declare our module
     .module('material.components.fabSpeedDial', [
       'material.core',
       'material.components.fabTrigger',
       'material.components.fabActions'
     ])
+
+    // Register our directive
     .directive('mdFabSpeedDial', MdFabSpeedDialDirective)
+
+    // Register our custom animations
     .animation('.md-fling', MdFabSpeedDialFlingAnimation)
-    .animation('.md-scale', MdFabSpeedDialScaleAnimation);
+    .animation('.md-scale', MdFabSpeedDialScaleAnimation)
+
+    // Register a service for each animation so that we can easily inject them into unit tests
+    .service('mdFabSpeedDialFlingAnimation', MdFabSpeedDialFlingAnimation)
+    .service('mdFabSpeedDialScaleAnimation', MdFabSpeedDialScaleAnimation);
 
   /**
    * @ngdoc directive
@@ -199,10 +208,12 @@
       addClass: function(element, className, done) {
         if (element.hasClass('md-fling')) {
           runAnimation(element);
+          done();
         }
       },
       removeClass: function(element, className, done) {
         runAnimation(element);
+        done();
       }
     }
   }
@@ -229,10 +240,12 @@
     return {
       addClass: function(element, className, done) {
         runAnimation(element);
+        done();
       },
 
       removeClass: function(element, className, done) {
         runAnimation(element);
+        done();
       }
     }
   }

src/components/fabSpeedDial/fabSpeedDial.spec.js

@@ -83,4 +83,40 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(controller.isOpen).toBe(false);
   }));
 
+  it('properly finishes the fling animation', inject(function(mdFabSpeedDialFlingAnimation) {
+    compileAndLink(
+      '<md-fab-speed-dial md-open="isOpen" class="md-fling">' +
+      '  <md-fab-trigger><button></button></md-fab-trigger>' +
+      '  <md-fab-actions><button></button></md-fab-actions>' +
+      '</md-fab-speed-dial>'
+    );
+
+    var addDone = jasmine.createSpy('addDone');
+    var removeDone = jasmine.createSpy('removeDone');
+
+    mdFabSpeedDialFlingAnimation.addClass(element, 'md-is-open', addDone);
+    expect(addDone).toHaveBeenCalled();
+
+    mdFabSpeedDialFlingAnimation.removeClass(element, 'md-is-open', removeDone);
+    expect(removeDone).toHaveBeenCalled();
+  }));
+
+  it('properly finishes the scale animation', inject(function(mdFabSpeedDialScaleAnimation) {
+    compileAndLink(
+      '<md-fab-speed-dial md-open="isOpen" class="md-fling">' +
+      '  <md-fab-trigger><button></button></md-fab-trigger>' +
+      '  <md-fab-actions><button></button></md-fab-actions>' +
+      '</md-fab-speed-dial>'
+    );
+
+    var addDone = jasmine.createSpy('addDone');
+    var removeDone = jasmine.createSpy('removeDone');
+
+    mdFabSpeedDialScaleAnimation.addClass(element, 'md-is-open', addDone);
+    expect(addDone).toHaveBeenCalled();
+
+    mdFabSpeedDialScaleAnimation.removeClass(element, 'md-is-open', removeDone);
+    expect(removeDone).toHaveBeenCalled();
+  }));
+
 });