foundation.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /**
  2. * @license
  3. * Copyright 2018 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, strings } from '../constants';
  26. /** MDC Dismissible Drawer Foundation */
  27. var MDCDismissibleDrawerFoundation = /** @class */ (function (_super) {
  28. __extends(MDCDismissibleDrawerFoundation, _super);
  29. function MDCDismissibleDrawerFoundation(adapter) {
  30. var _this = _super.call(this, __assign(__assign({}, MDCDismissibleDrawerFoundation.defaultAdapter), adapter)) || this;
  31. _this.animationFrame = 0;
  32. _this.animationTimer = 0;
  33. return _this;
  34. }
  35. Object.defineProperty(MDCDismissibleDrawerFoundation, "strings", {
  36. get: function () {
  37. return strings;
  38. },
  39. enumerable: false,
  40. configurable: true
  41. });
  42. Object.defineProperty(MDCDismissibleDrawerFoundation, "cssClasses", {
  43. get: function () {
  44. return cssClasses;
  45. },
  46. enumerable: false,
  47. configurable: true
  48. });
  49. Object.defineProperty(MDCDismissibleDrawerFoundation, "defaultAdapter", {
  50. get: function () {
  51. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  52. return {
  53. addClass: function () { return undefined; },
  54. removeClass: function () { return undefined; },
  55. hasClass: function () { return false; },
  56. elementHasClass: function () { return false; },
  57. notifyClose: function () { return undefined; },
  58. notifyOpen: function () { return undefined; },
  59. saveFocus: function () { return undefined; },
  60. restoreFocus: function () { return undefined; },
  61. focusActiveNavigationItem: function () { return undefined; },
  62. trapFocus: function () { return undefined; },
  63. releaseFocus: function () { return undefined; },
  64. };
  65. // tslint:enable:object-literal-sort-keys
  66. },
  67. enumerable: false,
  68. configurable: true
  69. });
  70. MDCDismissibleDrawerFoundation.prototype.destroy = function () {
  71. if (this.animationFrame) {
  72. cancelAnimationFrame(this.animationFrame);
  73. }
  74. if (this.animationTimer) {
  75. clearTimeout(this.animationTimer);
  76. }
  77. };
  78. /**
  79. * Opens the drawer from the closed state.
  80. */
  81. MDCDismissibleDrawerFoundation.prototype.open = function () {
  82. var _this = this;
  83. if (this.isOpen() || this.isOpening() || this.isClosing()) {
  84. return;
  85. }
  86. this.adapter.addClass(cssClasses.OPEN);
  87. this.adapter.addClass(cssClasses.ANIMATE);
  88. // Wait a frame once display is no longer "none", to establish basis for
  89. // animation
  90. this.runNextAnimationFrame(function () {
  91. _this.adapter.addClass(cssClasses.OPENING);
  92. });
  93. this.adapter.saveFocus();
  94. };
  95. /**
  96. * Closes the drawer from the open state.
  97. */
  98. MDCDismissibleDrawerFoundation.prototype.close = function () {
  99. if (!this.isOpen() || this.isOpening() || this.isClosing()) {
  100. return;
  101. }
  102. this.adapter.addClass(cssClasses.CLOSING);
  103. };
  104. /**
  105. * Returns true if the drawer is in the open position.
  106. * @return true if drawer is in open state.
  107. */
  108. MDCDismissibleDrawerFoundation.prototype.isOpen = function () {
  109. return this.adapter.hasClass(cssClasses.OPEN);
  110. };
  111. /**
  112. * Returns true if the drawer is animating open.
  113. * @return true if drawer is animating open.
  114. */
  115. MDCDismissibleDrawerFoundation.prototype.isOpening = function () {
  116. return this.adapter.hasClass(cssClasses.OPENING) ||
  117. this.adapter.hasClass(cssClasses.ANIMATE);
  118. };
  119. /**
  120. * Returns true if the drawer is animating closed.
  121. * @return true if drawer is animating closed.
  122. */
  123. MDCDismissibleDrawerFoundation.prototype.isClosing = function () {
  124. return this.adapter.hasClass(cssClasses.CLOSING);
  125. };
  126. /**
  127. * Keydown handler to close drawer when key is escape.
  128. */
  129. MDCDismissibleDrawerFoundation.prototype.handleKeydown = function (evt) {
  130. var keyCode = evt.keyCode, key = evt.key;
  131. var isEscape = key === 'Escape' || keyCode === 27;
  132. if (isEscape) {
  133. this.close();
  134. }
  135. };
  136. /**
  137. * Handles the `transitionend` event when the drawer finishes opening/closing.
  138. */
  139. MDCDismissibleDrawerFoundation.prototype.handleTransitionEnd = function (evt) {
  140. var OPENING = cssClasses.OPENING, CLOSING = cssClasses.CLOSING, OPEN = cssClasses.OPEN, ANIMATE = cssClasses.ANIMATE, ROOT = cssClasses.ROOT;
  141. // In Edge, transitionend on ripple pseudo-elements yields a target without
  142. // classList, so check for Element first.
  143. var isRootElement = this.isElement(evt.target) &&
  144. this.adapter.elementHasClass(evt.target, ROOT);
  145. if (!isRootElement) {
  146. return;
  147. }
  148. if (this.isClosing()) {
  149. this.adapter.removeClass(OPEN);
  150. this.closed();
  151. this.adapter.restoreFocus();
  152. this.adapter.notifyClose();
  153. }
  154. else {
  155. this.adapter.focusActiveNavigationItem();
  156. this.opened();
  157. this.adapter.notifyOpen();
  158. }
  159. this.adapter.removeClass(ANIMATE);
  160. this.adapter.removeClass(OPENING);
  161. this.adapter.removeClass(CLOSING);
  162. };
  163. /**
  164. * Extension point for when drawer finishes open animation.
  165. */
  166. MDCDismissibleDrawerFoundation.prototype.opened = function () { }; // tslint:disable-line:no-empty
  167. /**
  168. * Extension point for when drawer finishes close animation.
  169. */
  170. MDCDismissibleDrawerFoundation.prototype.closed = function () { }; // tslint:disable-line:no-empty
  171. /**
  172. * Runs the given logic on the next animation frame, using setTimeout to
  173. * factor in Firefox reflow behavior.
  174. */
  175. MDCDismissibleDrawerFoundation.prototype.runNextAnimationFrame = function (callback) {
  176. var _this = this;
  177. cancelAnimationFrame(this.animationFrame);
  178. this.animationFrame = requestAnimationFrame(function () {
  179. _this.animationFrame = 0;
  180. clearTimeout(_this.animationTimer);
  181. _this.animationTimer = setTimeout(callback, 0);
  182. });
  183. };
  184. MDCDismissibleDrawerFoundation.prototype.isElement = function (element) {
  185. // In Edge, transitionend on ripple pseudo-elements yields a target without
  186. // classList.
  187. return Boolean(element.classList);
  188. };
  189. return MDCDismissibleDrawerFoundation;
  190. }(MDCFoundation));
  191. export { MDCDismissibleDrawerFoundation };
  192. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  193. export default MDCDismissibleDrawerFoundation;
  194. //# sourceMappingURL=foundation.js.map