You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

193 lines
5.7 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  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 {boolean=} md-no-ink If present, disable ripple ink effects.
  87. * @param {expression=} ng-disabled En/Disable based on the expression
  88. * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
  89. * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
  90. * If no default text is found, a warning will be logged.
  91. *
  92. * @usage
  93. *
  94. * Regular buttons:
  95. *
  96. * <hljs lang="html">
  97. * <md-button> Flat Button </md-button>
  98. * <md-button href="http://google.com"> Flat link </md-button>
  99. * <md-button class="md-raised"> Raised Button </md-button>
  100. * <md-button ng-disabled="true"> Disabled Button </md-button>
  101. * <md-button>
  102. * <md-icon md-svg-src="your/icon.svg"></md-icon>
  103. * Register Now
  104. * </md-button>
  105. * </hljs>
  106. *
  107. * FAB buttons:
  108. *
  109. * <hljs lang="html">
  110. * <md-button class="md-fab" aria-label="FAB">
  111. * <md-icon md-svg-src="your/icon.svg"></md-icon>
  112. * </md-button>
  113. * <!-- mini-FAB -->
  114. * <md-button class="md-fab md-mini" aria-label="Mini FAB">
  115. * <md-icon md-svg-src="your/icon.svg"></md-icon>
  116. * </md-button>
  117. * <!-- Button with SVG Icon -->
  118. * <md-button class="md-icon-button" aria-label="Custom Icon Button">
  119. * <md-icon md-svg-icon="path/to/your.svg"></md-icon>
  120. * </md-button>
  121. * </hljs>
  122. */
  123. function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) {
  124. return {
  125. restrict: 'EA',
  126. replace: true,
  127. transclude: true,
  128. template: getTemplate,
  129. link: postLink
  130. };
  131. function isAnchor(attr) {
  132. return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
  133. }
  134. function getTemplate(element, attr) {
  135. if (isAnchor(attr)) {
  136. return '<a class="md-button" ng-transclude></a>';
  137. } else {
  138. //If buttons don't have type="button", they will submit forms automatically.
  139. var btnType = (typeof attr.type === 'undefined') ? 'button' : attr.type;
  140. return '<button class="md-button" type="' + btnType + '" ng-transclude></button>';
  141. }
  142. }
  143. function postLink(scope, element, attr) {
  144. $mdTheming(element);
  145. $mdButtonInkRipple.attach(scope, element);
  146. // Use async expect to support possible bindings in the button label
  147. $mdAria.expectWithoutText(element, 'aria-label');
  148. // For anchor elements, we have to set tabindex manually when the
  149. // element is disabled
  150. if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
  151. scope.$watch(attr.ngDisabled, function(isDisabled) {
  152. element.attr('tabindex', isDisabled ? -1 : 0);
  153. });
  154. }
  155. // disabling click event when disabled is true
  156. element.on('click', function(e){
  157. if (attr.disabled === true) {
  158. e.preventDefault();
  159. e.stopImmediatePropagation();
  160. }
  161. });
  162. if (!element.hasClass('md-no-focus')) {
  163. element.on('focus', function() {
  164. // Only show the focus effect when being focused through keyboard interaction or programmatically
  165. if (!$mdInteraction.isUserInvoked() || $mdInteraction.getLastInteractionType() === 'keyboard') {
  166. element.addClass('md-focused');
  167. }
  168. });
  169. element.on('blur', function() {
  170. element.removeClass('md-focused');
  171. });
  172. }
  173. }
  174. }
  175. ngmaterial.components.button = angular.module("material.components.button");