1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
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 |
|
33 |
|
34 |
|
35 | var MDCDrawer = (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 |
|
46 |
|
47 |
|
48 | get: function () {
|
49 | return this.foundation.isOpen();
|
50 | },
|
51 | |
52 |
|
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 |
|
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 | return _this.foundation.handleScrimClick();
|
92 | };
|
93 | this.scrim.addEventListener('click', this.handleScrimClick);
|
94 | this.focusTrap = util.createFocusTrapInstance(this.root, this.focusTrapFactory);
|
95 | }
|
96 | this.handleKeydown = function (evt) {
|
97 | _this.foundation.handleKeydown(evt);
|
98 | };
|
99 | this.handleTransitionEnd = function (evt) {
|
100 | _this.foundation.handleTransitionEnd(evt);
|
101 | };
|
102 | this.listen('keydown', this.handleKeydown);
|
103 | this.listen('transitionend', this.handleTransitionEnd);
|
104 | };
|
105 | MDCDrawer.prototype.destroy = function () {
|
106 | this.unlisten('keydown', this.handleKeydown);
|
107 | this.unlisten('transitionend', this.handleTransitionEnd);
|
108 | if (this.innerList) {
|
109 | this.innerList.destroy();
|
110 | }
|
111 | var MODAL = cssClasses.MODAL;
|
112 | if (this.scrim && this.handleScrimClick &&
|
113 | this.root.classList.contains(MODAL)) {
|
114 | this.scrim.removeEventListener('click', this.handleScrimClick);
|
115 |
|
116 | this.open = false;
|
117 | }
|
118 | };
|
119 | MDCDrawer.prototype.getDefaultFoundation = function () {
|
120 | var _this = this;
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | var adapter = {
|
126 | addClass: function (className) {
|
127 | _this.root.classList.add(className);
|
128 | },
|
129 | removeClass: function (className) {
|
130 | _this.root.classList.remove(className);
|
131 | },
|
132 | hasClass: function (className) { return _this.root.classList.contains(className); },
|
133 | elementHasClass: function (element, className) {
|
134 | return element.classList.contains(className);
|
135 | },
|
136 | saveFocus: function () {
|
137 | _this.previousFocus = document.activeElement;
|
138 | },
|
139 | restoreFocus: function () {
|
140 | var previousFocus = _this.previousFocus;
|
141 | if (previousFocus && previousFocus.focus &&
|
142 | _this.root.contains(document.activeElement)) {
|
143 | previousFocus.focus();
|
144 | }
|
145 | },
|
146 | focusActiveNavigationItem: function () {
|
147 | var activeNavItemEl = _this.root.querySelector(strings.LIST_ITEM_ACTIVATED_SELECTOR);
|
148 | if (activeNavItemEl) {
|
149 | activeNavItemEl.focus();
|
150 | }
|
151 | },
|
152 | notifyClose: function () {
|
153 | _this.emit(strings.CLOSE_EVENT, {}, true );
|
154 | },
|
155 | notifyOpen: function () {
|
156 | _this.emit(strings.OPEN_EVENT, {}, true );
|
157 | },
|
158 | trapFocus: function () {
|
159 | _this.focusTrap.trapFocus();
|
160 | },
|
161 | releaseFocus: function () {
|
162 | _this.focusTrap.releaseFocus();
|
163 | },
|
164 | };
|
165 |
|
166 | var DISMISSIBLE = cssClasses.DISMISSIBLE, MODAL = cssClasses.MODAL;
|
167 | if (this.root.classList.contains(DISMISSIBLE)) {
|
168 | return new MDCDismissibleDrawerFoundation(adapter);
|
169 | }
|
170 | else if (this.root.classList.contains(MODAL)) {
|
171 | return new MDCModalDrawerFoundation(adapter);
|
172 | }
|
173 | else {
|
174 | throw new Error("MDCDrawer: Failed to instantiate component. Supported variants are " + DISMISSIBLE + " and " + MODAL + ".");
|
175 | }
|
176 | };
|
177 | return MDCDrawer;
|
178 | }(MDCComponent));
|
179 | export { MDCDrawer };
|
180 |
|
\ | No newline at end of file |