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

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();
  }
  }
  }