button.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  9. /**
  10. * @ngdoc module
  11. * @name material.components.button
  12. * @description
  13. *
  14. * Button
  15. */
  16. angular
  17. .module('material.components.button', [ 'material.core' ])
  18. .directive('mdButton', MdButtonDirective);
  19. /**
  20. * @ngdoc directive
  21. * @name mdButton
  22. * @module material.components.button
  23. *
  24. * @restrict E
  25. *
  26. * @description
  27. * `<md-button>` is a button directive with optional ink ripples (default enabled).
  28. *
  29. * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
  30. * become a `<button>` element. As per the [Material Design specifications](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
  31. * the FAB button background is filled with the accent color [by default]. The primary color palette may be used with
  32. * the `md-primary` class.
  33. *
  34. * @param {boolean=} md-no-ink If present, disable ripple ink effects.
  35. * @param {expression=} ng-disabled En/Disable based on the expression
  36. * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
  37. * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
  38. * If no default text is found, a warning will be logged.
  39. *
  40. * @usage
  41. *
  42. * Regular buttons:
  43. *
  44. * <hljs lang="html">
  45. * <md-button> Flat Button </md-button>
  46. * <md-button href="http://google.com"> Flat link </md-button>
  47. * <md-button class="md-raised"> Raised Button </md-button>
  48. * <md-button ng-disabled="true"> Disabled Button </md-button>
  49. * <md-button>
  50. * <md-icon md-svg-src="your/icon.svg"></md-icon>
  51. * Register Now
  52. * </md-button>
  53. * </hljs>
  54. *
  55. * FAB buttons:
  56. *
  57. * <hljs lang="html">
  58. * <md-button class="md-fab" aria-label="FAB">
  59. * <md-icon md-svg-src="your/icon.svg"></md-icon>
  60. * </md-button>
  61. * <!-- mini-FAB -->
  62. * <md-button class="md-fab md-mini" aria-label="Mini FAB">
  63. * <md-icon md-svg-src="your/icon.svg"></md-icon>
  64. * </md-button>
  65. * <!-- Button with SVG Icon -->
  66. * <md-button class="md-icon-button" aria-label="Custom Icon Button">
  67. * <md-icon md-svg-icon="path/to/your.svg"></md-icon>
  68. * </md-button>
  69. * </hljs>
  70. */
  71. function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
  72. return {
  73. restrict: 'EA',
  74. replace: true,
  75. transclude: true,
  76. template: getTemplate,
  77. link: postLink
  78. };
  79. function isAnchor(attr) {
  80. return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
  81. }
  82. function getTemplate(element, attr) {
  83. return isAnchor(attr) ?
  84. '<a class="md-button" ng-transclude></a>' :
  85. '<button class="md-button" ng-transclude></button>';
  86. }
  87. function postLink(scope, element, attr) {
  88. var node = element[0];
  89. $mdTheming(element);
  90. $mdButtonInkRipple.attach(scope, element);
  91. var elementHasText = node.textContent.trim();
  92. if (!elementHasText) {
  93. $mdAria.expect(element, 'aria-label');
  94. }
  95. // For anchor elements, we have to set tabindex manually when the
  96. // element is disabled
  97. if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
  98. scope.$watch(attr.ngDisabled, function(isDisabled) {
  99. element.attr('tabindex', isDisabled ? -1 : 0);
  100. });
  101. }
  102. // disabling click event when disabled is true
  103. element.on('click', function(e){
  104. if (attr.disabled === true) {
  105. e.preventDefault();
  106. e.stopImmediatePropagation();
  107. }
  108. });
  109. // restrict focus styles to the keyboard
  110. scope.mouseActive = false;
  111. element.on('mousedown', function() {
  112. scope.mouseActive = true;
  113. $timeout(function(){
  114. scope.mouseActive = false;
  115. }, 100);
  116. })
  117. .on('focus', function() {
  118. if (scope.mouseActive === false) {
  119. element.addClass('md-focused');
  120. }
  121. })
  122. .on('blur', function(ev) {
  123. element.removeClass('md-focused');
  124. });
  125. }
  126. }
  127. MdButtonDirective.$inject = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$timeout"];
  128. })(window, window.angular);