OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright (C) 2012 Google Inc. All rights reserved. | 2 * Copyright (C) 2012 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 23 matching lines...) Expand all Loading... | |
34 UI.Dialog = class extends UI.Widget { | 34 UI.Dialog = class extends UI.Widget { |
35 constructor() { | 35 constructor() { |
36 super(true); | 36 super(true); |
37 this.markAsRoot(); | 37 this.markAsRoot(); |
38 this.registerRequiredCSS('ui/dialog.css'); | 38 this.registerRequiredCSS('ui/dialog.css'); |
39 | 39 |
40 this.contentElement.createChild('content'); | 40 this.contentElement.createChild('content'); |
41 this.contentElement.tabIndex = 0; | 41 this.contentElement.tabIndex = 0; |
42 this.contentElement.addEventListener('focus', this._onFocus.bind(this), fals e); | 42 this.contentElement.addEventListener('focus', this._onFocus.bind(this), fals e); |
43 this._keyDownBound = this._onKeyDown.bind(this); | 43 this._keyDownBound = this._onKeyDown.bind(this); |
44 this._onClickBound = this._onGlassPaneClick.bind(this); | |
45 this._dimmed = false; | |
46 this._wrapsContent = false; | |
47 this._maxSize = null; | |
48 /** @type {?number} */ | |
49 this._positionX = null; | |
50 /** @type {?number} */ | |
51 this._positionY = null; | |
44 | 52 |
45 this._wrapsContent = false; | |
46 this._dimmed = false; | |
47 /** @type {!Map<!HTMLElement, number>} */ | 53 /** @type {!Map<!HTMLElement, number>} */ |
48 this._tabIndexMap = new Map(); | 54 this._tabIndexMap = new Map(); |
49 } | 55 } |
50 | 56 |
51 /** | 57 /** |
52 * @return {boolean} | 58 * @return {boolean} |
53 */ | 59 */ |
54 static hasInstance() { | 60 static hasInstance() { |
55 return !!UI.Dialog._instance; | 61 return !!UI.Dialog._instance; |
56 } | 62 } |
57 | 63 |
58 /** | 64 /** |
59 * @param {!UI.Widget} view | |
60 */ | |
61 static setModalHostView(view) { | |
62 UI.Dialog._modalHostView = view; | |
63 } | |
64 | |
65 /** | |
66 * FIXME: make utility method in Dialog, so clients use it instead of this get ter. | |
67 * Method should be like Dialog.showModalElement(position params, reposition c allback). | |
68 * @return {?UI.Widget} | |
69 */ | |
70 static modalHostView() { | |
71 return UI.Dialog._modalHostView; | |
72 } | |
73 | |
74 static modalHostRepositioned() { | |
75 if (UI.Dialog._instance) | |
76 UI.Dialog._instance._position(); | |
77 } | |
78 | |
79 /** | |
80 * @override | 65 * @override |
66 * @suppressGlobalPropertiesCheck | |
67 * TODO(dgozman): pass document in constructor. | |
81 */ | 68 */ |
82 show() { | 69 show() { |
83 if (UI.Dialog._instance) | 70 if (UI.Dialog._instance) |
84 UI.Dialog._instance.detach(); | 71 UI.Dialog._instance.detach(); |
85 UI.Dialog._instance = this; | 72 UI.Dialog._instance = this; |
86 | 73 |
87 var document = /** @type {!Document} */ (UI.Dialog._modalHostView.element.ow nerDocument); | |
88 this._disableTabIndexOnElements(document); | 74 this._disableTabIndexOnElements(document); |
89 | 75 |
90 this._glassPane = new UI.GlassPane(document, this._dimmed); | 76 this._glassPane = new UI.GlassPane(document, this._dimmed, true /* blockPoin terEvents*/); |
91 this._glassPane.element.addEventListener('click', this._onGlassPaneClick.bin d(this), false); | 77 var container = createElement('div'); |
92 this.element.ownerDocument.body.addEventListener('keydown', this._keyDownBou nd, false); | 78 this._glassPane.setContentElement(container); |
79 this._glassPane.show(); | |
80 super.show(container); | |
81 this._glassPane.setMaxContentSize(this._effectiveMaxSize()); | |
82 this._glassPane.setContentPosition(this._positionX, this._positionY); | |
pfeldman
2017/02/01 00:07:18
setContentPosition/setContentAnchorBox would be mu
dgozman
2017/02/01 16:19:44
Done.
| |
83 this._glassPane.positionContent(); | |
93 | 84 |
94 super.show(this._glassPane.element); | 85 this._glassPane.element.addEventListener('click', this._onClickBound, false) ; |
pfeldman
2017/02/01 00:07:18
this._glassPane.on('exit', () => {})
dgozman
2017/02/01 16:19:44
Reworked.
| |
86 this.contentElement.addEventListener('keydown', this._keyDownBound, false); | |
95 | 87 |
96 this._position(); | |
97 this._focusRestorer = new UI.WidgetFocusRestorer(this); | 88 this._focusRestorer = new UI.WidgetFocusRestorer(this); |
98 } | 89 } |
99 | 90 |
100 /** | 91 /** |
101 * @override | 92 * @override |
102 */ | 93 */ |
103 detach() { | 94 detach() { |
104 this._focusRestorer.restore(); | 95 this._focusRestorer.restore(); |
105 | 96 |
106 this.element.ownerDocument.body.removeEventListener('keydown', this._keyDown Bound, false); | 97 this.contentElement.removeEventListener('keydown', this._keyDownBound, false ); |
98 this._glassPane.element.removeEventListener('click', this._onClickBound, fal se); | |
99 | |
107 super.detach(); | 100 super.detach(); |
108 | 101 this._glassPane.hide(); |
109 this._glassPane.dispose(); | |
110 delete this._glassPane; | 102 delete this._glassPane; |
111 | 103 |
112 this._restoreTabIndexOnElements(); | 104 this._restoreTabIndexOnElements(); |
113 | 105 |
114 delete UI.Dialog._instance; | 106 delete UI.Dialog._instance; |
115 } | 107 } |
116 | 108 |
117 addCloseButton() { | 109 addCloseButton() { |
118 var closeButton = this.contentElement.createChild('div', 'dialog-close-butto n', 'dt-close-button'); | 110 var closeButton = this.contentElement.createChild('div', 'dialog-close-butto n', 'dt-close-button'); |
119 closeButton.gray = true; | 111 closeButton.gray = true; |
120 closeButton.addEventListener('click', () => this.detach(), false); | 112 closeButton.addEventListener('click', () => this.detach(), false); |
121 } | 113 } |
122 | 114 |
123 /** | 115 /** |
124 * @param {number=} positionX | 116 * @param {?number} positionX |
125 * @param {number=} positionY | 117 * @param {?number} positionY |
126 */ | 118 */ |
127 setPosition(positionX, positionY) { | 119 setPosition(positionX, positionY) { |
128 this._defaultPositionX = positionX; | 120 this._positionX = positionX; |
129 this._defaultPositionY = positionY; | 121 this._positionY = positionY; |
130 } | 122 } |
131 | 123 |
132 /** | 124 /** |
133 * @param {!UI.Size} size | 125 * @param {!UI.Size} size |
134 */ | 126 */ |
135 setMaxSize(size) { | 127 setMaxSize(size) { |
136 this._maxSize = size; | 128 this._maxSize = size; |
137 } | 129 } |
138 | 130 |
139 /** | 131 /** |
132 * @return {?UI.Size} | |
133 */ | |
134 _effectiveMaxSize() { | |
135 if (!this._wrapsContent) | |
136 return this._maxSize; | |
137 return new UI.Size(this.contentElement.offsetWidth, this.contentElement.offs etHeight).clipTo(this._maxSize); | |
138 } | |
139 | |
140 /** | |
140 * @param {boolean} wraps | 141 * @param {boolean} wraps |
141 */ | 142 */ |
142 setWrapsContent(wraps) { | 143 setWrapsContent(wraps) { |
144 this._wrapsContent = wraps; | |
143 this.element.classList.toggle('wraps-content', wraps); | 145 this.element.classList.toggle('wraps-content', wraps); |
144 this._wrapsContent = wraps; | |
145 } | 146 } |
146 | 147 |
147 /** | 148 /** |
148 * @param {boolean} dimmed | 149 * @param {boolean} dimmed |
149 */ | 150 */ |
150 setDimmed(dimmed) { | 151 setDimmed(dimmed) { |
151 this._dimmed = dimmed; | 152 this._dimmed = dimmed; |
152 } | 153 } |
153 | 154 |
154 contentResized() { | 155 contentResized() { |
155 if (this._wrapsContent) | 156 if (!this._wrapsContent || !this._glassPane) |
156 this._position(); | 157 return; |
158 this._glassPane.setMaxContentSize(this._effectiveMaxSize()); | |
157 } | 159 } |
158 | 160 |
159 /** | 161 /** |
160 * @param {!Document} document | 162 * @param {!Document} document |
161 */ | 163 */ |
162 _disableTabIndexOnElements(document) { | 164 _disableTabIndexOnElements(document) { |
163 this._tabIndexMap.clear(); | 165 this._tabIndexMap.clear(); |
164 for (var node = document; node; node = node.traverseNextNode(document)) { | 166 for (var node = document; node; node = node.traverseNextNode(document)) { |
165 if (node instanceof HTMLElement) { | 167 if (node instanceof HTMLElement) { |
166 var element = /** @type {!HTMLElement} */ (node); | 168 var element = /** @type {!HTMLElement} */ (node); |
(...skipping 20 matching lines...) Expand all Loading... | |
187 } | 189 } |
188 | 190 |
189 /** | 191 /** |
190 * @param {!Event} event | 192 * @param {!Event} event |
191 */ | 193 */ |
192 _onGlassPaneClick(event) { | 194 _onGlassPaneClick(event) { |
193 if (!this.element.isSelfOrAncestor(/** @type {?Node} */ (event.target))) | 195 if (!this.element.isSelfOrAncestor(/** @type {?Node} */ (event.target))) |
194 this.detach(); | 196 this.detach(); |
195 } | 197 } |
196 | 198 |
197 _position() { | |
198 var container = UI.Dialog._modalHostView.element; | |
199 | |
200 var width = container.offsetWidth - 10; | |
201 var height = container.offsetHeight - 10; | |
202 | |
203 if (this._wrapsContent) { | |
204 width = Math.min(width, this.contentElement.offsetWidth); | |
205 height = Math.min(height, this.contentElement.offsetHeight); | |
206 } | |
207 | |
208 if (this._maxSize) { | |
209 width = Math.min(width, this._maxSize.width); | |
210 height = Math.min(height, this._maxSize.height); | |
211 } | |
212 | |
213 var positionX; | |
214 if (typeof this._defaultPositionX === 'number') { | |
215 positionX = this._defaultPositionX; | |
216 } else { | |
217 positionX = (container.offsetWidth - width) / 2; | |
218 positionX = Number.constrain(positionX, 0, container.offsetWidth - width); | |
219 } | |
220 | |
221 var positionY; | |
222 if (typeof this._defaultPositionY === 'number') { | |
223 positionY = this._defaultPositionY; | |
224 } else { | |
225 positionY = (container.offsetHeight - height) / 2; | |
226 positionY = Number.constrain(positionY, 0, container.offsetHeight - height ); | |
227 } | |
228 | |
229 this.element.style.width = width + 'px'; | |
230 this.element.style.height = height + 'px'; | |
231 this.element.positionAt(positionX, positionY, container); | |
232 } | |
233 | |
234 /** | 199 /** |
235 * @param {!Event} event | 200 * @param {!Event} event |
236 */ | 201 */ |
237 _onKeyDown(event) { | 202 _onKeyDown(event) { |
238 if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code) { | 203 if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code) { |
239 event.consume(true); | 204 event.consume(true); |
240 this.detach(); | 205 this.detach(); |
241 } | 206 } |
242 } | 207 } |
243 }; | 208 }; |
244 | |
245 | |
246 /** @type {?Element} */ | |
247 UI.Dialog._previousFocusedElement = null; | |
248 | |
249 /** @type {?UI.Widget} */ | |
250 UI.Dialog._modalHostView = null; | |
OLD | NEW |