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.

218 lines
7.8 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.checkbox');
  8. goog.require('ngmaterial.core');
  9. /**
  10. * @ngdoc module
  11. * @name material.components.checkbox
  12. * @description Checkbox module!
  13. */
  14. MdCheckboxDirective['$inject'] = ["inputDirective", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$mdInteraction"];
  15. angular
  16. .module('material.components.checkbox', ['material.core'])
  17. .directive('mdCheckbox', MdCheckboxDirective);
  18. /**
  19. * @ngdoc directive
  20. * @name mdCheckbox
  21. * @module material.components.checkbox
  22. * @restrict E
  23. *
  24. * @description
  25. * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
  26. *
  27. * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-color-schemes)
  28. * the checkbox is in the accent color by default. The primary color palette may be used with
  29. * the `md-primary` class.
  30. *
  31. * @param {string} ng-model Assignable angular expression to data-bind to.
  32. * @param {string=} name Property name of the form under which the control is published.
  33. * @param {expression=} ng-true-value The value to which the expression should be set when selected.
  34. * @param {expression=} ng-false-value The value to which the expression should be set when not selected.
  35. * @param {string=} ng-change Angular expression to be executed when input changes due to user interaction with the input element.
  36. * @param {boolean=} md-no-ink Use of attribute indicates use of ripple ink effects
  37. * @param {string=} aria-label Adds label to checkbox for accessibility.
  38. * Defaults to checkbox's text. If no default text is found, a warning will be logged.
  39. * @param {expression=} md-indeterminate This determines when the checkbox should be rendered as 'indeterminate'.
  40. * If a truthy expression or no value is passed in the checkbox renders in the md-indeterminate state.
  41. * If falsy expression is passed in it just looks like a normal unchecked checkbox.
  42. * The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
  43. * Adding the 'md-indeterminate' attribute overrides any checked/unchecked rendering logic.
  44. * When using the 'md-indeterminate' attribute use 'ng-checked' to define rendering logic instead of using 'ng-model'.
  45. * @param {expression=} ng-checked If this expression evaluates as truthy, the 'md-checked' css class is added to the checkbox and it
  46. * will appear checked.
  47. *
  48. * @usage
  49. * <hljs lang="html">
  50. * <md-checkbox ng-model="isChecked" aria-label="Finished?">
  51. * Finished ?
  52. * </md-checkbox>
  53. *
  54. * <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  55. * No Ink Effects
  56. * </md-checkbox>
  57. *
  58. * <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  59. * Disabled
  60. * </md-checkbox>
  61. *
  62. * </hljs>
  63. *
  64. */
  65. function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $mdUtil, $mdInteraction) {
  66. inputDirective = inputDirective[0];
  67. return {
  68. restrict: 'E',
  69. transclude: true,
  70. require: ['^?mdInputContainer', '?ngModel', '?^form'],
  71. priority: $mdConstant.BEFORE_NG_ARIA,
  72. template:
  73. '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
  74. '<div class="md-icon"></div>' +
  75. '</div>' +
  76. '<div ng-transclude class="md-label"></div>',
  77. compile: compile
  78. };
  79. // **********************************************************
  80. // Private Methods
  81. // **********************************************************
  82. function compile (tElement, tAttrs) {
  83. tAttrs.$set('tabindex', tAttrs.tabindex || '0');
  84. tAttrs.$set('type', 'checkbox');
  85. tAttrs.$set('role', tAttrs.type);
  86. return {
  87. pre: function(scope, element) {
  88. // Attach a click handler during preLink, in order to immediately stop propagation
  89. // (especially for ng-click) when the checkbox is disabled.
  90. element.on('click', function(e) {
  91. if (this.hasAttribute('disabled')) {
  92. e.stopImmediatePropagation();
  93. }
  94. });
  95. },
  96. post: postLink
  97. };
  98. function postLink(scope, element, attr, ctrls) {
  99. var isIndeterminate;
  100. var containerCtrl = ctrls[0];
  101. var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
  102. var formCtrl = ctrls[2];
  103. if (containerCtrl) {
  104. var isErrorGetter = containerCtrl.isErrorGetter || function() {
  105. return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (formCtrl && formCtrl.$submitted));
  106. };
  107. containerCtrl.input = element;
  108. scope.$watch(isErrorGetter, containerCtrl.setInvalid);
  109. }
  110. $mdTheming(element);
  111. // Redirect focus events to the root element, because IE11 is always focusing the container element instead
  112. // of the md-checkbox element. This causes issues when using ngModelOptions: `updateOnBlur`
  113. element.children().on('focus', function() {
  114. element.focus();
  115. });
  116. if ($mdUtil.parseAttributeBoolean(attr.mdIndeterminate)) {
  117. setIndeterminateState();
  118. scope.$watch(attr.mdIndeterminate, setIndeterminateState);
  119. }
  120. if (attr.ngChecked) {
  121. scope.$watch(scope.$eval.bind(scope, attr.ngChecked), function(value) {
  122. ngModelCtrl.$setViewValue(value);
  123. ngModelCtrl.$render();
  124. });
  125. }
  126. $$watchExpr('ngDisabled', 'tabindex', {
  127. true: '-1',
  128. false: attr.tabindex
  129. });
  130. $mdAria.expectWithText(element, 'aria-label');
  131. // Reuse the original input[type=checkbox] directive from Angular core.
  132. // This is a bit hacky as we need our own event listener and own render
  133. // function.
  134. inputDirective.link.pre(scope, {
  135. on: angular.noop,
  136. 0: {}
  137. }, attr, [ngModelCtrl]);
  138. element.on('click', listener)
  139. .on('keypress', keypressHandler)
  140. .on('focus', function() {
  141. if ($mdInteraction.getLastInteractionType() === 'keyboard') {
  142. element.addClass('md-focused');
  143. }
  144. })
  145. .on('blur', function() {
  146. element.removeClass('md-focused');
  147. });
  148. ngModelCtrl.$render = render;
  149. function $$watchExpr(expr, htmlAttr, valueOpts) {
  150. if (attr[expr]) {
  151. scope.$watch(attr[expr], function(val) {
  152. if (valueOpts[val]) {
  153. element.attr(htmlAttr, valueOpts[val]);
  154. }
  155. });
  156. }
  157. }
  158. function keypressHandler(ev) {
  159. var keyCode = ev.which || ev.keyCode;
  160. if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
  161. ev.preventDefault();
  162. element.addClass('md-focused');
  163. listener(ev);
  164. }
  165. }
  166. function listener(ev) {
  167. // skipToggle boolean is used by the switch directive to prevent the click event
  168. // when releasing the drag. There will be always a click if releasing the drag over the checkbox
  169. if (element[0].hasAttribute('disabled') || scope.skipToggle) {
  170. return;
  171. }
  172. scope.$apply(function() {
  173. // Toggle the checkbox value...
  174. var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
  175. ngModelCtrl.$setViewValue(viewValue, ev && ev.type);
  176. ngModelCtrl.$render();
  177. });
  178. }
  179. function render() {
  180. // Cast the $viewValue to a boolean since it could be undefined
  181. element.toggleClass('md-checked', !!ngModelCtrl.$viewValue && !isIndeterminate);
  182. }
  183. function setIndeterminateState(newValue) {
  184. isIndeterminate = newValue !== false;
  185. if (isIndeterminate) {
  186. element.attr('aria-checked', 'mixed');
  187. }
  188. element.toggleClass('md-indeterminate', isIndeterminate);
  189. }
  190. }
  191. }
  192. }
  193. ngmaterial.components.checkbox = angular.module("material.components.checkbox");