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