fix(fabSpeedDial): ng-hide, ng-repeat, animation bug

* fixes ability to use ng-hide: the animations were not properly
   calling the `done()` callback, so the `ng-animate` class was
   never being removed

 * you can now use ng-repeat for the speed dial's action items
   also updated docs to have fewer but more complex examples

 * the speed dial was not properly initializing it's transforms,
   so the first time it was opened, it would not animate properly

closes #3313. closes #3224. closes #3349. closes #3600.

src/components/fabActions/fabActions.js

@@ -26,6 +26,19 @@
 
       require: ['^?mdFabSpeedDial', '^?mdFabToolbar'],
 
+      compile: function(element, attributes) {
+        var children = element.children();
+
+        // Support both ng-repat and static content
+        if (children.attr('ng-repeat')) {
+          children.addClass('md-fab-action-item');
+        } else {
+          // After setting up the listeners, wrap every child in a new div and add a class that we can
+          // scale/fling independently
+          children.wrap('<div class="md-fab-action-item">');
+        }
+      },
+
       link: function(scope, element, attributes, controllers) {
         // Grab whichever parent controller is used
         var controller = controllers[0] || controllers[1];
@@ -37,10 +50,6 @@
             angular.element(child).on('blur', controller.close);
           });
         }
-
-        // After setting up the listeners, wrap every child in a new div and add a class that we can
-        // scale/fling independently
-        element.children().wrap('<div class="md-fab-action-item">');
       }
     }
   }

src/components/fabActions/fabActions.spec.js

@@ -0,0 +1,50 @@
+ddescribe('<md-fab-actions> directive', function() {
+
+  beforeEach(module('material.components.fabActions'));
+
+  var pageScope, element, controller;
+
+  function compileAndLink(template) {
+    inject(function($compile, $rootScope) {
+      pageScope = $rootScope.$new();
+      element = $compile(template)(pageScope);
+      controller = element.controller('mdFabActions');
+
+      pageScope.$apply();
+    });
+  }
+
+  it('supports static children', inject(function() {
+    compileAndLink(
+      '<md-fab-speed-dial>' +
+      '  <md-fab-actions>' +
+      '    <md-button>1</md-button>' +
+      '    <md-button>2</md-button>' +
+      '    <md-button>3</md-button>' +
+      '  </md-fab-actions>' +
+      '</md-fab-speed-dial>'
+    );
+
+    expect(element.find("md-fab-actions").children().length).toBe(3);
+    expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
+  }));
+
+  it('supports actions created by ng-repeat', inject(function() {
+    compileAndLink(
+      '<md-fab-speed-dial ng-init="nums=[1,2,3]">' +
+      '  <md-fab-actions>' +
+      '    <div ng-repeat="i in nums"><md-button>{{i}}</md-button></div>' +
+      '  </md-fab-actions>' +
+      '</md-fab-speed-dial>'
+    );
+
+    expect(element.find("md-fab-actions").children().length).toBe(3);
+    expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
+
+    pageScope.$apply('nums=[1,2,3,4]');
+
+    expect(element.find("md-fab-actions").children().length).toBe(4);
+    expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
+  }));
+
+});

src/components/fabSpeedDial/demoBasicUsage/script.js

@@ -1,7 +1,7 @@
 (function() {
   'use strict';
 
-  angular.module('fabSpeedDialBasicUsageDemo', ['ngMaterial'])
+  angular.module('fabSpeedDialDemoBasicUsage', ['ngMaterial'])
     .controller('DemoCtrl', function() {
       this.topDirections = ['left', 'up'];
       this.bottomDirections = ['down', 'right'];

src/components/fabSpeedDial/demoMoreOptions/index.html

@@ -0,0 +1,91 @@
+<div layout="column" ng-controller="DemoCtrl as demo">
+  <md-content class="md-padding" layout="column">
+    <p>
+      The speed dial supports many advanced usage scenarios. This demo shows many of them mixed
+      together.
+    </p>
+
+    <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-tooltip md-direction="top">Menu</md-tooltip>
+            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+          </md-button>
+        </md-fab-trigger>
+
+        <md-fab-actions>
+          <div ng-repeat="item in demo.items">
+            <md-button aria-label="{{item.name}}" class="md-fab md-raised md-mini"
+                       ng-click="demo.openDialog($event, item)">
+              <md-tooltip md-direction="{{item.direction}}">{{item.name}}</md-tooltip>
+              <md-icon md-svg-src="{{item.icon}}"></md-icon>
+            </md-button>
+          </div>
+        </md-fab-actions>
+      </md-fab-speed-dial>
+    </div>
+  </md-content>
+
+  <md-content class="md-padding" layout="row">
+    <div flex="50">
+      <h3>ngRepeat</h3>
+
+      <p>
+        You can easily use <code>ng-repeat</code> with the speed dial, but it requires a slightly
+        different HTML structure in order to support the necessary DOM changes/styling.
+      </p>
+
+      <p>
+        Simply ensure that your <code>ng-repeat</code> is on a <code>div</code> (or any other tag)
+        that wraps your items.
+      </p>
+    </div>
+    <div flex="50">
+      <h3>$mdDialog</h3>
+
+      <p>
+        You can also use the buttons to open a dialog. When clicked, the buttons above will open a
+        dialog showing a message which item was clicked.
+      </p>
+    </div>
+  </md-content>
+
+  <md-content class="md-padding" layout="row">
+    <div flex="50">
+      <h3>ngHide</h3>
+
+      <p>
+        The speed dial also supports hiding using the standard <code>ng-hide</code> attribute.
+
+        <md-checkbox ng-model="demo.hidden">
+          Hide the speed dial.
+        </md-checkbox>
+      </p>
+    </div>
+    <div flex="50">
+      <h3>Tooltips</h3>
+
+      <p>
+        Each action item supports a tooltip using the standard approach as can be seen above.
+      </p>
+    </div>
+  </md-content>
+
+  <script type="text/ng-template" id="dialog.html">
+    <md-dialog>
+      <md-dialog-content>Hello User! You clicked {{dialog.item.name}}.</md-dialog-content>
+
+      <div class="md-actions">
+        <md-button aria-label="Close dialog" ng-click="dialog.close()" class="md-primary">
+          Close Greeting
+        </md-button>
+
+        <md-button aria-label="Submit dialog" ng-click="dialog.submit()" class="md-primary">
+          Submit
+        </md-button>
+      </div>
+    </md-dialog>
+  </script>
+
+</div>

src/components/fabSpeedDial/demoMoreOptions/script.js

@@ -0,0 +1,38 @@
+(function() {
+  'use strict';
+
+  angular.module('fabSpeedDialDemoMoreOptions', ['ngMaterial'])
+    .controller('DemoCtrl', function($mdDialog) {
+      var self = this;
+
+      self.hidden = false;
+
+      self.items = [
+        {name: "Twitter", icon: "img/icons/twitter.svg", direction: "left" },
+        {name: "Facebook", icon: "img/icons/facebook.svg", direction: "right" },
+        {name: "Google Hangout", icon: "img/icons/hangout.svg", direction: "left" }
+      ];
+
+      self.openDialog = function($event, item) {
+        // Show the dialog
+        $mdDialog.show({
+          clickOutsideToClose: true,
+          controller: function($mdDialog) {
+            // Save the clicked item
+            this.item = item;
+
+            // Setup some handlers
+            this.close = function() {
+              $mdDialog.cancel();
+            };
+            this.submit = function() {
+              $mdDialog.hide();
+            };
+          },
+          controllerAs: 'dialog',
+          templateUrl: 'dialog.html',
+          targetEvent: $event
+        });
+      }
+    });
+})();

src/components/fabSpeedDial/demoTooltips/style.scss → src/components/fabSpeedDial/demoMoreOptions/style.scss

@@ -1,15 +1,3 @@
-.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;
@@ -28,3 +16,10 @@ p.note {
 .md-fab.demo-fab.action-fab {
   background-color: #aaa;
 }
+
+
+md-content div {
+  &[flex="50"] {
+    padding: 15px;
+  }
+}