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

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,93 @@
+<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>
+      <h3>Tooltips</h3>
+
+      <p>
+        Each action item supports a tooltip using the standard approach as can be seen above.
+      </p>
+    </div>
+
+    <div>
+      <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>
+  </md-content>
+
+  <md-content class="md-padding" layout="row">
+    <div>
+      <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>
+      <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>
+
+  <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;

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
@@ -73,7 +82,7 @@
       element.prepend('<div class="md-css-variables"></div>');
     }
 
-    function FabSpeedDialController($scope, $element, $animate) {
+    function FabSpeedDialController($scope, $element, $animate, $timeout) {
       var vm = this;
 
       // Define our open/close functions
@@ -103,6 +112,11 @@
       setupListeners();
       setupWatchers();
 
+      // Fire the animations once in a separate digest loop to initialize them
+      $timeout(function() {
+        $animate.addClass($element, 'md-noop');
+      }, 0);
+
       // Set our default variables
       function setupDefaults() {
         // Set the default direction to 'down' if none is specified
@@ -199,10 +213,12 @@
       addClass: function(element, className, done) {
         if (element.hasClass('md-fling')) {
           runAnimation(element);
+          done();
         }
       },
       removeClass: function(element, className, done) {
         runAnimation(element);
+        done();
       }
     }
   }
@@ -229,10 +245,12 @@
     return {
       addClass: function(element, className, done) {
         runAnimation(element);
+        done();
       },
 
       removeClass: function(element, className, done) {
         runAnimation(element);
+        done();
       }
     }
   }