source: trip-planner-front/node_modules/angular-material/modules/js/button/button.js@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 5.9 KB
Line 
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/**
11 * @ngdoc module
12 * @name material.components.button
13 * @description
14 *
15 * Button
16 */
17MdButtonDirective['$inject'] = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$mdInteraction"];
18MdAnchorDirective['$inject'] = ["$mdTheming"];
19angular
20 .module('material.components.button', ['material.core'])
21 .directive('mdButton', MdButtonDirective)
22 .directive('a', MdAnchorDirective);
23
24
25/**
26 * @private
27 * @restrict E
28 *
29 * @description
30 * `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.
31 *
32 * @usage
33 *
34 * <hljs lang="html">
35 * <md-content md-theme="myTheme">
36 * <a href="#chapter1" class="md-accent"></a>
37 * </md-content>
38 * </hljs>
39 */
40function MdAnchorDirective($mdTheming) {
41 return {
42 restrict : 'E',
43 link : function postLink(scope, element) {
44 // Make sure to inherit theme so stand-alone anchors
45 // support theme colors for md-primary, md-accent, etc.
46 $mdTheming(element);
47 }
48 };
49}
50
51
52/**
53 * @ngdoc directive
54 * @name mdButton
55 * @module material.components.button
56 *
57 * @restrict E
58 *
59 * @description
60 * `<md-button>` is a button directive with optional ink ripples (default enabled).
61 *
62 * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it
63 * will become a `<button>` element. As per the
64 * [Material Design specifications](https://material.google.com/style/color.html#color-color-palette)
65 * the FAB button background is filled with the accent color [by default]. The primary color palette
66 * may be used with the `md-primary` class.
67 *
68 * Developers can also change the color palette of the button, by using the following classes
69 * - `md-primary`
70 * - `md-accent`
71 * - `md-warn`
72 *
73 * See for example
74 *
75 * <hljs lang="html">
76 * <md-button class="md-primary">Primary Button</md-button>
77 * </hljs>
78 *
79 * Button can be also raised, which means that they will use the current color palette to fill the button.
80 *
81 * <hljs lang="html">
82 * <md-button class="md-accent md-raised">Raised and Accent Button</md-button>
83 * </hljs>
84 *
85 * It is also possible to disable the focus effect on the button, by using the following markup.
86 *
87 * <hljs lang="html">
88 * <md-button class="md-no-focus">No Focus Style</md-button>
89 * </hljs>
90 *
91 * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
92 * If no default text is found, a warning will be logged.
93 * @param {boolean=} md-no-ink If present, disable ink ripple effects.
94 * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`.
95 * @param {expression=} ng-disabled Disable the button when the expression is truthy.
96 * @param {expression=} ng-blur Expression evaluated when focus is removed from the button.
97 *
98 * @usage
99 *
100 * Regular buttons:
101 *
102 * <hljs lang="html">
103 * <md-button> Flat Button </md-button>
104 * <md-button href="http://google.com"> Flat link </md-button>
105 * <md-button class="md-raised"> Raised Button </md-button>
106 * <md-button ng-disabled="true"> Disabled Button </md-button>
107 * <md-button>
108 * <md-icon md-svg-src="your/icon.svg"></md-icon>
109 * Register Now
110 * </md-button>
111 * </hljs>
112 *
113 * FAB buttons:
114 *
115 * <hljs lang="html">
116 * <md-button class="md-fab" aria-label="FAB">
117 * <md-icon md-svg-src="your/icon.svg"></md-icon>
118 * </md-button>
119 * <!-- mini-FAB -->
120 * <md-button class="md-fab md-mini" aria-label="Mini FAB">
121 * <md-icon md-svg-src="your/icon.svg"></md-icon>
122 * </md-button>
123 * <!-- Button with SVG Icon -->
124 * <md-button class="md-icon-button" aria-label="Custom Icon Button">
125 * <md-icon md-svg-icon="path/to/your.svg"></md-icon>
126 * </md-button>
127 * </hljs>
128 */
129function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) {
130
131 return {
132 restrict: 'EA',
133 replace: true,
134 transclude: true,
135 template: getTemplate,
136 link: postLink
137 };
138
139 function isAnchor(attr) {
140 return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
141 }
142
143 function getTemplate(element, attr) {
144 if (isAnchor(attr)) {
145 return '<a class="md-button" ng-transclude></a>';
146 } else {
147 // If buttons don't have type="button", they will submit forms automatically.
148 var btnType = (typeof attr.type === 'undefined') ? 'button' : attr.type;
149 return '<button class="md-button" type="' + btnType + '" ng-transclude></button>';
150 }
151 }
152
153 function postLink(scope, element, attr) {
154 $mdTheming(element);
155 $mdButtonInkRipple.attach(scope, element);
156
157 // Use async expect to support possible bindings in the button label
158 $mdAria.expectWithoutText(element, 'aria-label');
159
160 // For anchor elements, we have to set tabindex manually when the element is disabled.
161 // We don't do this for md-nav-bar anchors as the component manages its own tabindex values.
162 if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) &&
163 !element.hasClass('_md-nav-button')) {
164 scope.$watch(attr.ngDisabled, function(isDisabled) {
165 element.attr('tabindex', isDisabled ? -1 : 0);
166 });
167 }
168
169 // disabling click event when disabled is true
170 element.on('click', function(e){
171 if (attr.disabled === true) {
172 e.preventDefault();
173 e.stopImmediatePropagation();
174 }
175 });
176
177 if (!element.hasClass('md-no-focus')) {
178
179 element.on('focus', function() {
180
181 // Only show the focus effect when being focused through keyboard interaction or programmatically
182 if (!$mdInteraction.isUserInvoked() || $mdInteraction.getLastInteractionType() === 'keyboard') {
183 element.addClass('md-focused');
184 }
185
186 });
187
188 element.on('blur', function() {
189 element.removeClass('md-focused');
190 });
191 }
192
193 }
194
195}
196
197})(window, window.angular);
Note: See TracBrowser for help on using the repository browser.