foundation.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /**
  2. * @license
  3. * Copyright 2021 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 { __extends } from "tslib";
  24. import { MDCObserverFoundation } from '@material/base/observer-foundation';
  25. import { CssClasses } from './constants';
  26. /**
  27. * `MDCSwitchFoundation` provides a state-only foundation for a switch
  28. * component.
  29. *
  30. * State observers and event handler entrypoints update a component's adapter's
  31. * state with the logic needed for switch to function.
  32. */
  33. var MDCSwitchFoundation = /** @class */ (function (_super) {
  34. __extends(MDCSwitchFoundation, _super);
  35. function MDCSwitchFoundation(adapter) {
  36. var _this = _super.call(this, adapter) || this;
  37. _this.handleClick = _this.handleClick.bind(_this);
  38. return _this;
  39. }
  40. /**
  41. * Initializes the foundation and starts observing state changes.
  42. */
  43. MDCSwitchFoundation.prototype.init = function () {
  44. this.observe(this.adapter.state, {
  45. disabled: this.stopProcessingIfDisabled,
  46. processing: this.stopProcessingIfDisabled,
  47. });
  48. };
  49. /**
  50. * Event handler for switch click events. Clicking on a switch will toggle its
  51. * selected state.
  52. */
  53. MDCSwitchFoundation.prototype.handleClick = function () {
  54. if (this.adapter.state.disabled) {
  55. return;
  56. }
  57. this.adapter.state.selected = !this.adapter.state.selected;
  58. };
  59. MDCSwitchFoundation.prototype.stopProcessingIfDisabled = function () {
  60. if (this.adapter.state.disabled) {
  61. this.adapter.state.processing = false;
  62. }
  63. };
  64. return MDCSwitchFoundation;
  65. }(MDCObserverFoundation));
  66. export { MDCSwitchFoundation };
  67. /**
  68. * `MDCSwitchRenderFoundation` provides a state and rendering foundation for a
  69. * switch component.
  70. *
  71. * State observers and event handler entrypoints update a component's
  72. * adapter's state with the logic needed for switch to function.
  73. *
  74. * In response to state changes, the rendering foundation uses the component's
  75. * render adapter to keep the component's DOM updated with the state.
  76. */
  77. var MDCSwitchRenderFoundation = /** @class */ (function (_super) {
  78. __extends(MDCSwitchRenderFoundation, _super);
  79. function MDCSwitchRenderFoundation() {
  80. return _super !== null && _super.apply(this, arguments) || this;
  81. }
  82. /**
  83. * Initializes the foundation and starts observing state changes.
  84. */
  85. MDCSwitchRenderFoundation.prototype.init = function () {
  86. _super.prototype.init.call(this);
  87. this.observe(this.adapter.state, {
  88. disabled: this.onDisabledChange,
  89. processing: this.onProcessingChange,
  90. selected: this.onSelectedChange,
  91. });
  92. };
  93. /**
  94. * Initializes the foundation from a server side rendered (SSR) component.
  95. * This will sync the adapter's state with the current state of the DOM.
  96. *
  97. * This method should be called after `init()`.
  98. */
  99. MDCSwitchRenderFoundation.prototype.initFromDOM = function () {
  100. // Turn off observers while setting state
  101. this.setObserversEnabled(this.adapter.state, false);
  102. this.adapter.state.selected = this.adapter.hasClass(CssClasses.SELECTED);
  103. // Ensure aria-checked is set if attribute is not present
  104. this.onSelectedChange();
  105. this.adapter.state.disabled = this.adapter.isDisabled();
  106. this.adapter.state.processing =
  107. this.adapter.hasClass(CssClasses.PROCESSING);
  108. // Re-observe state
  109. this.setObserversEnabled(this.adapter.state, true);
  110. this.stopProcessingIfDisabled();
  111. };
  112. MDCSwitchRenderFoundation.prototype.onDisabledChange = function () {
  113. this.adapter.setDisabled(this.adapter.state.disabled);
  114. };
  115. MDCSwitchRenderFoundation.prototype.onProcessingChange = function () {
  116. this.toggleClass(this.adapter.state.processing, CssClasses.PROCESSING);
  117. };
  118. MDCSwitchRenderFoundation.prototype.onSelectedChange = function () {
  119. this.adapter.setAriaChecked(String(this.adapter.state.selected));
  120. this.toggleClass(this.adapter.state.selected, CssClasses.SELECTED);
  121. this.toggleClass(!this.adapter.state.selected, CssClasses.UNSELECTED);
  122. };
  123. MDCSwitchRenderFoundation.prototype.toggleClass = function (addClass, className) {
  124. if (addClass) {
  125. this.adapter.addClass(className);
  126. }
  127. else {
  128. this.adapter.removeClass(className);
  129. }
  130. };
  131. return MDCSwitchRenderFoundation;
  132. }(MDCSwitchFoundation));
  133. export { MDCSwitchRenderFoundation };
  134. //# sourceMappingURL=foundation.js.map