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