foundation.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /**
  2. * @license
  3. * Copyright 2016 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import { __assign, __extends } from "tslib";
  24. import { MDCFoundation } from '@material/base/foundation';
  25. import { cssClasses, numbers, strings } from './constants';
  26. /** MDC Checkbox Foundation */
  27. var MDCCheckboxFoundation = /** @class */ (function (_super) {
  28. __extends(MDCCheckboxFoundation, _super);
  29. function MDCCheckboxFoundation(adapter) {
  30. var _this = _super.call(this, __assign(__assign({}, MDCCheckboxFoundation.defaultAdapter), adapter)) || this;
  31. _this.currentCheckState = strings.TRANSITION_STATE_INIT;
  32. _this.currentAnimationClass = '';
  33. _this.animEndLatchTimer = 0;
  34. _this.enableAnimationEndHandler = false;
  35. return _this;
  36. }
  37. Object.defineProperty(MDCCheckboxFoundation, "cssClasses", {
  38. get: function () {
  39. return cssClasses;
  40. },
  41. enumerable: false,
  42. configurable: true
  43. });
  44. Object.defineProperty(MDCCheckboxFoundation, "strings", {
  45. get: function () {
  46. return strings;
  47. },
  48. enumerable: false,
  49. configurable: true
  50. });
  51. Object.defineProperty(MDCCheckboxFoundation, "numbers", {
  52. get: function () {
  53. return numbers;
  54. },
  55. enumerable: false,
  56. configurable: true
  57. });
  58. Object.defineProperty(MDCCheckboxFoundation, "defaultAdapter", {
  59. get: function () {
  60. return {
  61. addClass: function () { return undefined; },
  62. forceLayout: function () { return undefined; },
  63. hasNativeControl: function () { return false; },
  64. isAttachedToDOM: function () { return false; },
  65. isChecked: function () { return false; },
  66. isIndeterminate: function () { return false; },
  67. removeClass: function () { return undefined; },
  68. removeNativeControlAttr: function () { return undefined; },
  69. setNativeControlAttr: function () { return undefined; },
  70. setNativeControlDisabled: function () { return undefined; },
  71. };
  72. },
  73. enumerable: false,
  74. configurable: true
  75. });
  76. MDCCheckboxFoundation.prototype.init = function () {
  77. this.currentCheckState = this.determineCheckState();
  78. this.updateAriaChecked();
  79. this.adapter.addClass(cssClasses.UPGRADED);
  80. };
  81. MDCCheckboxFoundation.prototype.destroy = function () {
  82. clearTimeout(this.animEndLatchTimer);
  83. };
  84. MDCCheckboxFoundation.prototype.setDisabled = function (disabled) {
  85. this.adapter.setNativeControlDisabled(disabled);
  86. if (disabled) {
  87. this.adapter.addClass(cssClasses.DISABLED);
  88. }
  89. else {
  90. this.adapter.removeClass(cssClasses.DISABLED);
  91. }
  92. };
  93. /**
  94. * Handles the animationend event for the checkbox
  95. */
  96. MDCCheckboxFoundation.prototype.handleAnimationEnd = function () {
  97. var _this = this;
  98. if (!this.enableAnimationEndHandler) {
  99. return;
  100. }
  101. clearTimeout(this.animEndLatchTimer);
  102. this.animEndLatchTimer = setTimeout(function () {
  103. _this.adapter.removeClass(_this.currentAnimationClass);
  104. _this.enableAnimationEndHandler = false;
  105. }, numbers.ANIM_END_LATCH_MS);
  106. };
  107. /**
  108. * Handles the change event for the checkbox
  109. */
  110. MDCCheckboxFoundation.prototype.handleChange = function () {
  111. this.transitionCheckState();
  112. };
  113. MDCCheckboxFoundation.prototype.transitionCheckState = function () {
  114. if (!this.adapter.hasNativeControl()) {
  115. return;
  116. }
  117. var oldState = this.currentCheckState;
  118. var newState = this.determineCheckState();
  119. if (oldState === newState) {
  120. return;
  121. }
  122. this.updateAriaChecked();
  123. var TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
  124. var SELECTED = cssClasses.SELECTED;
  125. if (newState === TRANSITION_STATE_UNCHECKED) {
  126. this.adapter.removeClass(SELECTED);
  127. }
  128. else {
  129. this.adapter.addClass(SELECTED);
  130. }
  131. // Check to ensure that there isn't a previously existing animation class,
  132. // in case for example the user interacted with the checkbox before the
  133. // animation was finished.
  134. if (this.currentAnimationClass.length > 0) {
  135. clearTimeout(this.animEndLatchTimer);
  136. this.adapter.forceLayout();
  137. this.adapter.removeClass(this.currentAnimationClass);
  138. }
  139. this.currentAnimationClass =
  140. this.getTransitionAnimationClass(oldState, newState);
  141. this.currentCheckState = newState;
  142. // Check for parentNode so that animations are only run when the element is
  143. // attached to the DOM.
  144. if (this.adapter.isAttachedToDOM() &&
  145. this.currentAnimationClass.length > 0) {
  146. this.adapter.addClass(this.currentAnimationClass);
  147. this.enableAnimationEndHandler = true;
  148. }
  149. };
  150. MDCCheckboxFoundation.prototype.determineCheckState = function () {
  151. var TRANSITION_STATE_INDETERMINATE = strings.TRANSITION_STATE_INDETERMINATE, TRANSITION_STATE_CHECKED = strings.TRANSITION_STATE_CHECKED, TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
  152. if (this.adapter.isIndeterminate()) {
  153. return TRANSITION_STATE_INDETERMINATE;
  154. }
  155. return this.adapter.isChecked() ? TRANSITION_STATE_CHECKED :
  156. TRANSITION_STATE_UNCHECKED;
  157. };
  158. MDCCheckboxFoundation.prototype.getTransitionAnimationClass = function (oldState, newState) {
  159. var TRANSITION_STATE_INIT = strings.TRANSITION_STATE_INIT, TRANSITION_STATE_CHECKED = strings.TRANSITION_STATE_CHECKED, TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
  160. var _a = MDCCheckboxFoundation.cssClasses, ANIM_UNCHECKED_CHECKED = _a.ANIM_UNCHECKED_CHECKED, ANIM_UNCHECKED_INDETERMINATE = _a.ANIM_UNCHECKED_INDETERMINATE, ANIM_CHECKED_UNCHECKED = _a.ANIM_CHECKED_UNCHECKED, ANIM_CHECKED_INDETERMINATE = _a.ANIM_CHECKED_INDETERMINATE, ANIM_INDETERMINATE_CHECKED = _a.ANIM_INDETERMINATE_CHECKED, ANIM_INDETERMINATE_UNCHECKED = _a.ANIM_INDETERMINATE_UNCHECKED;
  161. switch (oldState) {
  162. case TRANSITION_STATE_INIT:
  163. if (newState === TRANSITION_STATE_UNCHECKED) {
  164. return '';
  165. }
  166. return newState === TRANSITION_STATE_CHECKED ?
  167. ANIM_INDETERMINATE_CHECKED :
  168. ANIM_INDETERMINATE_UNCHECKED;
  169. case TRANSITION_STATE_UNCHECKED:
  170. return newState === TRANSITION_STATE_CHECKED ?
  171. ANIM_UNCHECKED_CHECKED :
  172. ANIM_UNCHECKED_INDETERMINATE;
  173. case TRANSITION_STATE_CHECKED:
  174. return newState === TRANSITION_STATE_UNCHECKED ?
  175. ANIM_CHECKED_UNCHECKED :
  176. ANIM_CHECKED_INDETERMINATE;
  177. default: // TRANSITION_STATE_INDETERMINATE
  178. return newState === TRANSITION_STATE_CHECKED ?
  179. ANIM_INDETERMINATE_CHECKED :
  180. ANIM_INDETERMINATE_UNCHECKED;
  181. }
  182. };
  183. MDCCheckboxFoundation.prototype.updateAriaChecked = function () {
  184. // Ensure aria-checked is set to mixed if checkbox is in indeterminate
  185. // state.
  186. if (this.adapter.isIndeterminate()) {
  187. this.adapter.setNativeControlAttr(strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
  188. }
  189. else {
  190. // The on/off state does not need to keep track of aria-checked, since
  191. // the screenreader uses the checked property on the checkbox element.
  192. this.adapter.removeNativeControlAttr(strings.ARIA_CHECKED_ATTR);
  193. }
  194. };
  195. return MDCCheckboxFoundation;
  196. }(MDCFoundation));
  197. export { MDCCheckboxFoundation };
  198. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  199. export default MDCCheckboxFoundation;
  200. //# sourceMappingURL=foundation.js.map