button.js 5.8 KB

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