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, __values } from "tslib";
|
24 | import { MDCComponent } from '@material/base/component';
|
25 | import { FocusTrap } from '@material/dom/focus-trap';
|
26 | import { closest, matches } from '@material/dom/ponyfill';
|
27 | import { MDCRipple } from '@material/ripple/component';
|
28 | import { MDCDialogFoundation } from './foundation';
|
29 | import * as util from './util';
|
30 | var strings = MDCDialogFoundation.strings;
|
31 | var MDCDialog = (function (_super) {
|
32 | __extends(MDCDialog, _super);
|
33 | function MDCDialog() {
|
34 | return _super !== null && _super.apply(this, arguments) || this;
|
35 | }
|
36 | Object.defineProperty(MDCDialog.prototype, "isOpen", {
|
37 | get: function () {
|
38 | return this.foundation.isOpen();
|
39 | },
|
40 | enumerable: false,
|
41 | configurable: true
|
42 | });
|
43 | Object.defineProperty(MDCDialog.prototype, "escapeKeyAction", {
|
44 | get: function () {
|
45 | return this.foundation.getEscapeKeyAction();
|
46 | },
|
47 | set: function (action) {
|
48 | this.foundation.setEscapeKeyAction(action);
|
49 | },
|
50 | enumerable: false,
|
51 | configurable: true
|
52 | });
|
53 | Object.defineProperty(MDCDialog.prototype, "scrimClickAction", {
|
54 | get: function () {
|
55 | return this.foundation.getScrimClickAction();
|
56 | },
|
57 | set: function (action) {
|
58 | this.foundation.setScrimClickAction(action);
|
59 | },
|
60 | enumerable: false,
|
61 | configurable: true
|
62 | });
|
63 | Object.defineProperty(MDCDialog.prototype, "autoStackButtons", {
|
64 | get: function () {
|
65 | return this.foundation.getAutoStackButtons();
|
66 | },
|
67 | set: function (autoStack) {
|
68 | this.foundation.setAutoStackButtons(autoStack);
|
69 | },
|
70 | enumerable: false,
|
71 | configurable: true
|
72 | });
|
73 | MDCDialog.attachTo = function (root) {
|
74 | return new MDCDialog(root);
|
75 | };
|
76 | MDCDialog.prototype.initialize = function (focusTrapFactory) {
|
77 | var e_1, _a;
|
78 | if (focusTrapFactory === void 0) { focusTrapFactory = function (el, focusOptions) {
|
79 | return new FocusTrap(el, focusOptions);
|
80 | }; }
|
81 | var container = this.root.querySelector(strings.CONTAINER_SELECTOR);
|
82 | if (!container) {
|
83 | throw new Error("Dialog component requires a " + strings.CONTAINER_SELECTOR + " container element");
|
84 | }
|
85 | this.container = container;
|
86 | this.content =
|
87 | this.root.querySelector(strings.CONTENT_SELECTOR);
|
88 | this.buttons = [].slice.call(this.root.querySelectorAll(strings.BUTTON_SELECTOR));
|
89 | this.defaultButton = this.root.querySelector("[" + strings.BUTTON_DEFAULT_ATTRIBUTE + "]");
|
90 | this.focusTrapFactory = focusTrapFactory;
|
91 | this.buttonRipples = [];
|
92 | try {
|
93 | for (var _b = __values(this.buttons), _c = _b.next(); !_c.done; _c = _b.next()) {
|
94 | var buttonEl = _c.value;
|
95 | this.buttonRipples.push(new MDCRipple(buttonEl));
|
96 | }
|
97 | }
|
98 | catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
99 | finally {
|
100 | try {
|
101 | if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
102 | }
|
103 | finally { if (e_1) throw e_1.error; }
|
104 | }
|
105 | };
|
106 | MDCDialog.prototype.initialSyncWithDOM = function () {
|
107 | var _this = this;
|
108 | this.focusTrap = util.createFocusTrapInstance(this.container, this.focusTrapFactory, this.getInitialFocusEl() || undefined);
|
109 | this.handleClick = this.foundation.handleClick.bind(this.foundation);
|
110 | this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation);
|
111 | this.handleDocumentKeydown =
|
112 | this.foundation.handleDocumentKeydown.bind(this.foundation);
|
113 |
|
114 | this.handleOpening = function () {
|
115 | document.addEventListener('keydown', _this.handleDocumentKeydown);
|
116 | };
|
117 | this.handleClosing = function () {
|
118 | document.removeEventListener('keydown', _this.handleDocumentKeydown);
|
119 | };
|
120 | this.listen('click', this.handleClick);
|
121 | this.listen('keydown', this.handleKeydown);
|
122 | this.listen(strings.OPENING_EVENT, this.handleOpening);
|
123 | this.listen(strings.CLOSING_EVENT, this.handleClosing);
|
124 | };
|
125 | MDCDialog.prototype.destroy = function () {
|
126 | this.unlisten('click', this.handleClick);
|
127 | this.unlisten('keydown', this.handleKeydown);
|
128 | this.unlisten(strings.OPENING_EVENT, this.handleOpening);
|
129 | this.unlisten(strings.CLOSING_EVENT, this.handleClosing);
|
130 | this.handleClosing();
|
131 | this.buttonRipples.forEach(function (ripple) {
|
132 | ripple.destroy();
|
133 | });
|
134 | _super.prototype.destroy.call(this);
|
135 | };
|
136 | MDCDialog.prototype.layout = function () {
|
137 | this.foundation.layout();
|
138 | };
|
139 | MDCDialog.prototype.open = function () {
|
140 | this.foundation.open();
|
141 | };
|
142 | MDCDialog.prototype.close = function (action) {
|
143 | if (action === void 0) { action = ''; }
|
144 | this.foundation.close(action);
|
145 | };
|
146 | MDCDialog.prototype.getDefaultFoundation = function () {
|
147 | var _this = this;
|
148 |
|
149 |
|
150 | var adapter = {
|
151 | addBodyClass: function (className) { return document.body.classList.add(className); },
|
152 | addClass: function (className) { return _this.root.classList.add(className); },
|
153 | areButtonsStacked: function () { return util.areTopsMisaligned(_this.buttons); },
|
154 | clickDefaultButton: function () {
|
155 | if (_this.defaultButton && !_this.defaultButton.disabled) {
|
156 | _this.defaultButton.click();
|
157 | }
|
158 | },
|
159 | eventTargetMatches: function (target, selector) {
|
160 | return target ? matches(target, selector) : false;
|
161 | },
|
162 | getActionFromEvent: function (evt) {
|
163 | if (!evt.target) {
|
164 | return '';
|
165 | }
|
166 | var element = closest(evt.target, "[" + strings.ACTION_ATTRIBUTE + "]");
|
167 | return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
|
168 | },
|
169 | getInitialFocusEl: function () { return _this.getInitialFocusEl(); },
|
170 | hasClass: function (className) { return _this.root.classList.contains(className); },
|
171 | isContentScrollable: function () { return util.isScrollable(_this.content); },
|
172 | notifyClosed: function (action) { return _this.emit(strings.CLOSED_EVENT, action ? { action: action } : {}); },
|
173 | notifyClosing: function (action) { return _this.emit(strings.CLOSING_EVENT, action ? { action: action } : {}); },
|
174 | notifyOpened: function () { return _this.emit(strings.OPENED_EVENT, {}); },
|
175 | notifyOpening: function () { return _this.emit(strings.OPENING_EVENT, {}); },
|
176 | releaseFocus: function () {
|
177 | _this.focusTrap.releaseFocus();
|
178 | },
|
179 | removeBodyClass: function (className) { return document.body.classList.remove(className); },
|
180 | removeClass: function (className) { return _this.root.classList.remove(className); },
|
181 | reverseButtons: function () {
|
182 | _this.buttons.reverse();
|
183 | _this.buttons.forEach(function (button) {
|
184 | button.parentElement.appendChild(button);
|
185 | });
|
186 | },
|
187 | trapFocus: function () {
|
188 | _this.focusTrap.trapFocus();
|
189 | },
|
190 | registerContentEventHandler: function (evt, handler) {
|
191 | if (_this.content instanceof HTMLElement) {
|
192 | _this.content.addEventListener(evt, handler);
|
193 | }
|
194 | },
|
195 | deregisterContentEventHandler: function (evt, handler) {
|
196 | if (_this.content instanceof HTMLElement) {
|
197 | _this.content.removeEventListener(evt, handler);
|
198 | }
|
199 | },
|
200 | isScrollableContentAtTop: function () {
|
201 | return util.isScrollAtTop(_this.content);
|
202 | },
|
203 | isScrollableContentAtBottom: function () {
|
204 | return util.isScrollAtBottom(_this.content);
|
205 | },
|
206 | registerWindowEventHandler: function (evt, handler) {
|
207 | window.addEventListener(evt, handler);
|
208 | },
|
209 | deregisterWindowEventHandler: function (evt, handler) {
|
210 | window.removeEventListener(evt, handler);
|
211 | },
|
212 | };
|
213 | return new MDCDialogFoundation(adapter);
|
214 | };
|
215 | MDCDialog.prototype.getInitialFocusEl = function () {
|
216 | return this.root.querySelector("[" + strings.INITIAL_FOCUS_ATTRIBUTE + "]");
|
217 | };
|
218 | return MDCDialog;
|
219 | }(MDCComponent));
|
220 | export { MDCDialog };
|
221 |
|
\ | No newline at end of file |