2 * Angular Material Design
3 * https://github.com/angular/material
7 goog.provide('ng.material.components.button');
8 goog.require('ng.material.core');
11 * @name material.components.button
17 .module('material.components.button', [ 'material.core' ])
18 .directive('mdButton', MdButtonDirective);
23 * @module material.components.button
28 * `<md-button>` is a button directive with optional ink ripples (default enabled).
30 * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
31 * become a `<button>` element. As per the [Material Design specifications](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
32 * the FAB button background is filled with the accent color [by default]. The primary color palette may be used with
33 * the `md-primary` class.
35 * @param {boolean=} md-no-ink If present, disable ripple ink effects.
36 * @param {expression=} ng-disabled En/Disable based on the expression
37 * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
38 * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
39 * If no default text is found, a warning will be logged.
46 * <md-button> Flat Button </md-button>
47 * <md-button href="http://google.com"> Flat link </md-button>
48 * <md-button class="md-raised"> Raised Button </md-button>
49 * <md-button ng-disabled="true"> Disabled Button </md-button>
51 * <md-icon md-svg-src="your/icon.svg"></md-icon>
59 * <md-button class="md-fab" aria-label="FAB">
60 * <md-icon md-svg-src="your/icon.svg"></md-icon>
63 * <md-button class="md-fab md-mini" aria-label="Mini FAB">
64 * <md-icon md-svg-src="your/icon.svg"></md-icon>
66 * <!-- Button with SVG Icon -->
67 * <md-button class="md-icon-button" aria-label="Custom Icon Button">
68 * <md-icon md-svg-icon="path/to/your.svg"></md-icon>
72 function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
78 template: getTemplate,
82 function isAnchor(attr) {
83 return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
86 function getTemplate(element, attr) {
87 return isAnchor(attr) ?
88 '<a class="md-button" ng-transclude></a>' :
89 '<button class="md-button" ng-transclude></button>';
92 function postLink(scope, element, attr) {
93 var node = element[0];
95 $mdButtonInkRipple.attach(scope, element);
97 var elementHasText = node.textContent.trim();
98 if (!elementHasText) {
99 $mdAria.expect(element, 'aria-label');
102 // For anchor elements, we have to set tabindex manually when the
103 // element is disabled
104 if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
105 scope.$watch(attr.ngDisabled, function(isDisabled) {
106 element.attr('tabindex', isDisabled ? -1 : 0);
110 // disabling click event when disabled is true
111 element.on('click', function(e){
112 if (attr.disabled === true) {
114 e.stopImmediatePropagation();
118 // restrict focus styles to the keyboard
119 scope.mouseActive = false;
120 element.on('mousedown', function() {
121 scope.mouseActive = true;
123 scope.mouseActive = false;
126 .on('focus', function() {
127 if(scope.mouseActive === false) { element.addClass('md-focused'); }
129 .on('blur', function() { element.removeClass('md-focused'); });
133 MdButtonDirective.$inject = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$timeout"];
135 ng.material.components.button = angular.module("material.components.button");