component.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  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 { __extends } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { FocusTrap } from '@material/dom/focus-trap';
  26. import { MDCList } from '@material/list/component';
  27. import { MDCDismissibleDrawerFoundation } from './dismissible/foundation';
  28. import { MDCModalDrawerFoundation } from './modal/foundation';
  29. import * as util from './util';
  30. var cssClasses = MDCDismissibleDrawerFoundation.cssClasses, strings = MDCDismissibleDrawerFoundation.strings;
  31. /**
  32. * @events `MDCDrawer:closed {}` Emits when the navigation drawer has closed.
  33. * @events `MDCDrawer:opened {}` Emits when the navigation drawer has opened.
  34. */
  35. var MDCDrawer = /** @class */ (function (_super) {
  36. __extends(MDCDrawer, _super);
  37. function MDCDrawer() {
  38. return _super !== null && _super.apply(this, arguments) || this;
  39. }
  40. MDCDrawer.attachTo = function (root) {
  41. return new MDCDrawer(root);
  42. };
  43. Object.defineProperty(MDCDrawer.prototype, "open", {
  44. /**
  45. * @return boolean Proxies to the foundation's `open`/`close` methods.
  46. * Also returns true if drawer is in the open position.
  47. */
  48. get: function () {
  49. return this.foundation.isOpen();
  50. },
  51. /**
  52. * Toggles the drawer open and closed.
  53. */
  54. set: function (isOpen) {
  55. if (isOpen) {
  56. this.foundation.open();
  57. }
  58. else {
  59. this.foundation.close();
  60. }
  61. },
  62. enumerable: false,
  63. configurable: true
  64. });
  65. Object.defineProperty(MDCDrawer.prototype, "list", {
  66. // initialSyncWithDOM()
  67. get: function () {
  68. return this.innerList;
  69. },
  70. enumerable: false,
  71. configurable: true
  72. });
  73. MDCDrawer.prototype.initialize = function (focusTrapFactory, listFactory) {
  74. if (focusTrapFactory === void 0) { focusTrapFactory = function (el) { return new FocusTrap(el); }; }
  75. if (listFactory === void 0) { listFactory = function (el) { return new MDCList(el); }; }
  76. var listEl = this.root.querySelector(strings.LIST_SELECTOR);
  77. if (listEl) {
  78. this.innerList = listFactory(listEl);
  79. this.innerList.wrapFocus = true;
  80. }
  81. this.focusTrapFactory = focusTrapFactory;
  82. };
  83. MDCDrawer.prototype.initialSyncWithDOM = function () {
  84. var _this = this;
  85. var MODAL = cssClasses.MODAL;
  86. var SCRIM_SELECTOR = strings.SCRIM_SELECTOR;
  87. this.scrim = this.root.parentNode
  88. .querySelector(SCRIM_SELECTOR);
  89. if (this.scrim && this.root.classList.contains(MODAL)) {
  90. this.handleScrimClick = function () {
  91. _this.foundation.handleScrimClick();
  92. };
  93. this.scrim.addEventListener('click', this.handleScrimClick);
  94. this.focusTrap =
  95. util.createFocusTrapInstance(this.root, this.focusTrapFactory);
  96. }
  97. this.handleKeydown = function (evt) {
  98. _this.foundation.handleKeydown(evt);
  99. };
  100. this.handleTransitionEnd = function (evt) {
  101. _this.foundation.handleTransitionEnd(evt);
  102. };
  103. this.listen('keydown', this.handleKeydown);
  104. this.listen('transitionend', this.handleTransitionEnd);
  105. };
  106. MDCDrawer.prototype.destroy = function () {
  107. this.unlisten('keydown', this.handleKeydown);
  108. this.unlisten('transitionend', this.handleTransitionEnd);
  109. if (this.innerList) {
  110. this.innerList.destroy();
  111. }
  112. var MODAL = cssClasses.MODAL;
  113. if (this.scrim && this.handleScrimClick &&
  114. this.root.classList.contains(MODAL)) {
  115. this.scrim.removeEventListener('click', this.handleScrimClick);
  116. // Ensure drawer is closed to hide scrim and release focus
  117. this.open = false;
  118. }
  119. };
  120. MDCDrawer.prototype.getDefaultFoundation = function () {
  121. var _this = this;
  122. // DO NOT INLINE this variable. For backward compatibility, foundations take
  123. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  124. // methods, we need a separate, strongly typed adapter variable.
  125. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  126. var adapter = {
  127. addClass: function (className) {
  128. _this.root.classList.add(className);
  129. },
  130. removeClass: function (className) {
  131. _this.root.classList.remove(className);
  132. },
  133. hasClass: function (className) { return _this.root.classList.contains(className); },
  134. elementHasClass: function (element, className) {
  135. return element.classList.contains(className);
  136. },
  137. saveFocus: function () {
  138. _this.previousFocus = document.activeElement;
  139. },
  140. restoreFocus: function () {
  141. var previousFocus = _this.previousFocus;
  142. if (previousFocus && previousFocus.focus &&
  143. _this.root.contains(document.activeElement)) {
  144. previousFocus.focus();
  145. }
  146. },
  147. focusActiveNavigationItem: function () {
  148. var activeNavItemEl = _this.root.querySelector(strings.LIST_ITEM_ACTIVATED_SELECTOR);
  149. if (activeNavItemEl) {
  150. activeNavItemEl.focus();
  151. }
  152. },
  153. notifyClose: function () {
  154. _this.emit(strings.CLOSE_EVENT, {}, true /* shouldBubble */);
  155. },
  156. notifyOpen: function () {
  157. _this.emit(strings.OPEN_EVENT, {}, true /* shouldBubble */);
  158. },
  159. trapFocus: function () {
  160. _this.focusTrap.trapFocus();
  161. },
  162. releaseFocus: function () {
  163. _this.focusTrap.releaseFocus();
  164. },
  165. };
  166. // tslint:enable:object-literal-sort-keys
  167. var DISMISSIBLE = cssClasses.DISMISSIBLE, MODAL = cssClasses.MODAL;
  168. if (this.root.classList.contains(DISMISSIBLE)) {
  169. return new MDCDismissibleDrawerFoundation(adapter);
  170. }
  171. else if (this.root.classList.contains(MODAL)) {
  172. return new MDCModalDrawerFoundation(adapter);
  173. }
  174. else {
  175. throw new Error("MDCDrawer: Failed to instantiate component. Supported variants are " + DISMISSIBLE + " and " + MODAL + ".");
  176. }
  177. };
  178. return MDCDrawer;
  179. }(MDCComponent));
  180. export { MDCDrawer };
  181. //# sourceMappingURL=component.js.map