1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.3
  6 */
  7goog.provide('ngmaterial.components.fabToolbar');
  8goog.require('ngmaterial.components.fabActions');
  9goog.require('ngmaterial.components.fabShared');
 10goog.require('ngmaterial.core');
 11(function() {
 12  'use strict';
 13
 14  /**
 15   * @ngdoc module
 16   * @name material.components.fabToolbar
 17   */
 18  angular
 19    // Declare our module
 20    .module('material.components.fabToolbar', [
 21      'material.core',
 22      'material.components.fabShared',
 23      'material.components.fabActions'
 24    ])
 25
 26    // Register our directive
 27    .directive('mdFabToolbar', MdFabToolbarDirective)
 28
 29    // Register our custom animations
 30    .animation('.md-fab-toolbar', MdFabToolbarAnimation)
 31
 32    // Register a service for the animation so that we can easily inject it into unit tests
 33    .service('mdFabToolbarAnimation', MdFabToolbarAnimation);
 34
 35  /**
 36   * @ngdoc directive
 37   * @name mdFabToolbar
 38   * @module material.components.fabToolbar
 39   *
 40   * @restrict E
 41   *
 42   * @description
 43   *
 44   * The `<md-fab-toolbar>` directive is used to present a toolbar of elements (usually `<md-button>`s)
 45   * for quick access to common actions when a floating action button is activated (via click or
 46   * keyboard navigation).
 47   *
 48   * You may also easily position the trigger by applying one one of the following classes to the
 49   * `<md-fab-toolbar>` element:
 50   *  - `md-fab-top-left`
 51   *  - `md-fab-top-right`
 52   *  - `md-fab-bottom-left`
 53   *  - `md-fab-bottom-right`
 54   *
 55   * These CSS classes use `position: absolute`, so you need to ensure that the container element
 56   * also uses `position: absolute` or `position: relative` in order for them to work.
 57   *
 58   * @usage
 59   *
 60   * <hljs lang="html">
 61   * <md-fab-toolbar md-direction='left'>
 62   *   <md-fab-trigger>
 63   *     <md-button aria-label="Add..."><md-icon md-svg-src="/img/icons/plus.svg"></md-icon></md-button>
 64   *   </md-fab-trigger>
 65   *
 66   *   <md-toolbar>
 67   *    <md-fab-actions>
 68   *      <md-button aria-label="Add User">
 69   *        <md-icon md-svg-src="/img/icons/user.svg"></md-icon>
 70   *      </md-button>
 71   *
 72   *      <md-button aria-label="Add Group">
 73   *        <md-icon md-svg-src="/img/icons/group.svg"></md-icon>
 74   *      </md-button>
 75   *    </md-fab-actions>
 76   *   </md-toolbar>
 77   * </md-fab-toolbar>
 78   * </hljs>
 79   *
 80   * @param {string} md-direction From which direction you would like the toolbar items to appear
 81   * relative to the trigger element. Supports `left` and `right` directions.
 82   * @param {expression=} md-open Programmatically control whether or not the toolbar is visible.
 83   */
 84  function MdFabToolbarDirective() {
 85    return {
 86      restrict: 'E',
 87      transclude: true,
 88      template: '<div class="md-fab-toolbar-wrapper">' +
 89      '  <div class="md-fab-toolbar-content" ng-transclude></div>' +
 90      '</div>',
 91
 92      scope: {
 93        direction: '@?mdDirection',
 94        isOpen: '=?mdOpen'
 95      },
 96
 97      bindToController: true,
 98      controller: 'MdFabController',
 99      controllerAs: 'vm',
100
101      link: link
102    };
103
104    function link(scope, element, attributes) {
105      // Add the base class for animations
106      element.addClass('md-fab-toolbar');
107
108      // Prepend the background element to the trigger's button
109      element.find('md-fab-trigger').find('button')
110        .prepend('<div class="md-fab-toolbar-background"></div>');
111    }
112  }
113
114  function MdFabToolbarAnimation() {
115
116    function runAnimation(element, className, done) {
117      // If no className was specified, don't do anything
118      if (!className) {
119        return;
120      }
121
122      var el = element[0];
123      var ctrl = element.controller('mdFabToolbar');
124
125      // Grab the relevant child elements
126      var backgroundElement = el.querySelector('.md-fab-toolbar-background');
127      var triggerElement = el.querySelector('md-fab-trigger button');
128      var toolbarElement = el.querySelector('md-toolbar');
129      var iconElement = el.querySelector('md-fab-trigger button md-icon');
130      var actions = element.find('md-fab-actions').children();
131
132      // If we have both elements, use them to position the new background
133      if (triggerElement && backgroundElement) {
134        // Get our variables
135        var color = window.getComputedStyle(triggerElement).getPropertyValue('background-color');
136        var width = el.offsetWidth;
137        var height = el.offsetHeight;
138
139        // Make it twice as big as it should be since we scale from the center
140        var scale = 2 * (width / triggerElement.offsetWidth);
141
142        // Set some basic styles no matter what animation we're doing
143        backgroundElement.style.backgroundColor = color;
144        backgroundElement.style.borderRadius = width + 'px';
145
146        // If we're open
147        if (ctrl.isOpen) {
148          // Turn on toolbar pointer events when closed
149          toolbarElement.style.pointerEvents = 'inherit';
150
151          backgroundElement.style.width = triggerElement.offsetWidth + 'px';
152          backgroundElement.style.height = triggerElement.offsetHeight + 'px';
153          backgroundElement.style.transform = 'scale(' + scale + ')';
154
155          // Set the next close animation to have the proper delays
156          backgroundElement.style.transitionDelay = '0ms';
157          iconElement && (iconElement.style.transitionDelay = '.3s');
158
159          // Apply a transition delay to actions
160          angular.forEach(actions, function(action, index) {
161            action.style.transitionDelay = (actions.length - index) * 25 + 'ms';
162          });
163        } else {
164          // Turn off toolbar pointer events when closed
165          toolbarElement.style.pointerEvents = 'none';
166
167          // Scale it back down to the trigger's size
168          backgroundElement.style.transform = 'scale(1)';
169
170          // Reset the position
171          backgroundElement.style.top = '0';
172
173          if (element.hasClass('md-right')) {
174            backgroundElement.style.left = '0';
175            backgroundElement.style.right = null;
176          }
177
178          if (element.hasClass('md-left')) {
179            backgroundElement.style.right = '0';
180            backgroundElement.style.left = null;
181          }
182
183          // Set the next open animation to have the proper delays
184          backgroundElement.style.transitionDelay = '200ms';
185          iconElement && (iconElement.style.transitionDelay = '0ms');
186
187          // Apply a transition delay to actions
188          angular.forEach(actions, function(action, index) {
189            action.style.transitionDelay = 200 + (index * 25) + 'ms';
190          });
191        }
192      }
193    }
194
195    return {
196      addClass: function(element, className, done) {
197        runAnimation(element, className, done);
198        done();
199      },
200
201      removeClass: function(element, className, done) {
202        runAnimation(element, className, done);
203        done();
204      }
205    };
206  }
207})();
208
209ngmaterial.components.fabToolbar = angular.module("material.components.fabToolbar");