OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 // <include src="../../assert.js"> | 5 // <include src="../../assert.js"> |
6 | 6 |
7 cr.exportPath('cr.ui'); | 7 cr.exportPath('cr.ui'); |
8 | 8 |
9 /** | 9 /** |
10 * Enum for type of hide. Delayed is used when called by clicking on a | 10 * Enum for type of hide. Delayed is used when called by clicking on a |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
60 this.showingEvents_ = new EventTracker(); | 60 this.showingEvents_ = new EventTracker(); |
61 | 61 |
62 this.anchorType = cr.ui.AnchorType.BELOW; | 62 this.anchorType = cr.ui.AnchorType.BELOW; |
63 this.invertLeftRight = false; | 63 this.invertLeftRight = false; |
64 }, | 64 }, |
65 | 65 |
66 /** | 66 /** |
67 * The menu associated with the menu button. | 67 * The menu associated with the menu button. |
68 * @type {cr.ui.Menu} | 68 * @type {cr.ui.Menu} |
69 */ | 69 */ |
70 get menu() { | 70 get menu() { return this.menu_; }, |
71 return this.menu_; | |
72 }, | |
73 set menu(menu) { | 71 set menu(menu) { |
74 if (typeof menu == 'string' && menu[0] == '#') { | 72 if (typeof menu == 'string' && menu[0] == '#') { |
75 menu = assert(this.ownerDocument.getElementById(menu.slice(1))); | 73 menu = assert(this.ownerDocument.getElementById(menu.slice(1))); |
76 cr.ui.decorate(menu, Menu); | 74 cr.ui.decorate(menu, Menu); |
77 } | 75 } |
78 | 76 |
79 this.menu_ = menu; | 77 this.menu_ = menu; |
80 if (menu) { | 78 if (menu) { |
81 if (menu.id) | 79 if (menu.id) |
82 this.setAttribute('menu', '#' + menu.id); | 80 this.setAttribute('menu', '#' + menu.id); |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
136 if (e.target instanceof Node && !this.contains(e.target) && | 134 if (e.target instanceof Node && !this.contains(e.target) && |
137 !this.menu.contains(e.target)) { | 135 !this.menu.contains(e.target)) { |
138 this.hideMenu(); | 136 this.hideMenu(); |
139 // Show the focus ring on focus - if it's come from a mouse event, | 137 // Show the focus ring on focus - if it's come from a mouse event, |
140 // the focus ring will be hidden in the mousedown event handler, | 138 // the focus ring will be hidden in the mousedown event handler, |
141 // executed after this. | 139 // executed after this. |
142 this.classList.remove('using-mouse'); | 140 this.classList.remove('using-mouse'); |
143 } | 141 } |
144 break; | 142 break; |
145 case 'activate': | 143 case 'activate': |
146 var hideDelayed = e.target instanceof cr.ui.MenuItem && | 144 var hideDelayed = |
147 e.target.checkable; | 145 e.target instanceof cr.ui.MenuItem && e.target.checkable; |
148 this.hideMenu(hideDelayed ? HideType.DELAYED : HideType.INSTANT); | 146 this.hideMenu(hideDelayed ? HideType.DELAYED : HideType.INSTANT); |
149 break; | 147 break; |
150 case 'scroll': | 148 case 'scroll': |
151 if (!(e.target == this.menu || this.menu.contains(e.target))) | 149 if (!(e.target == this.menu || this.menu.contains(e.target))) |
152 this.hideMenu(); | 150 this.hideMenu(); |
153 break; | 151 break; |
154 case 'popstate': | 152 case 'popstate': |
155 case 'resize': | 153 case 'resize': |
156 this.hideMenu(); | 154 this.hideMenu(); |
157 break; | 155 break; |
(...skipping 18 matching lines...) Expand all Loading... |
176 * @param {boolean} shouldSetFocus Whether to set focus on the | 174 * @param {boolean} shouldSetFocus Whether to set focus on the |
177 * selected menu item. | 175 * selected menu item. |
178 * @param {{x: number, y: number}=} opt_mousePos The position of the mouse | 176 * @param {{x: number, y: number}=} opt_mousePos The position of the mouse |
179 * when shown (in screen coordinates). | 177 * when shown (in screen coordinates). |
180 */ | 178 */ |
181 showMenu: function(shouldSetFocus, opt_mousePos) { | 179 showMenu: function(shouldSetFocus, opt_mousePos) { |
182 this.hideMenu(); | 180 this.hideMenu(); |
183 | 181 |
184 this.menu.updateCommands(this); | 182 this.menu.updateCommands(this); |
185 | 183 |
186 var event = new UIEvent('menushow',{ | 184 var event = new UIEvent( |
187 bubbles: true, | 185 'menushow', {bubbles: true, cancelable: true, view: window}); |
188 cancelable: true, | |
189 view: window | |
190 }); | |
191 if (!this.dispatchEvent(event)) | 186 if (!this.dispatchEvent(event)) |
192 return; | 187 return; |
193 | 188 |
194 this.menu.show(opt_mousePos); | 189 this.menu.show(opt_mousePos); |
195 | 190 |
196 this.setAttribute('menu-shown', ''); | 191 this.setAttribute('menu-shown', ''); |
197 | 192 |
198 // When the menu is shown we steal all keyboard events. | 193 // When the menu is shown we steal all keyboard events. |
199 var doc = this.ownerDocument; | 194 var doc = this.ownerDocument; |
200 var win = doc.defaultView; | 195 var win = doc.defaultView; |
(...skipping 24 matching lines...) Expand all Loading... |
225 this.removeAttribute('menu-shown'); | 220 this.removeAttribute('menu-shown'); |
226 if (opt_hideType == HideType.DELAYED) | 221 if (opt_hideType == HideType.DELAYED) |
227 this.menu.classList.add('hide-delayed'); | 222 this.menu.classList.add('hide-delayed'); |
228 else | 223 else |
229 this.menu.classList.remove('hide-delayed'); | 224 this.menu.classList.remove('hide-delayed'); |
230 this.menu.hide(); | 225 this.menu.hide(); |
231 | 226 |
232 this.showingEvents_.removeAll(); | 227 this.showingEvents_.removeAll(); |
233 this.focus(); | 228 this.focus(); |
234 | 229 |
235 var event = new UIEvent('menuhide', { | 230 var event = new UIEvent( |
236 bubbles: true, | 231 'menuhide', {bubbles: true, cancelable: false, view: window}); |
237 cancelable: false, | |
238 view: window | |
239 }); | |
240 this.dispatchEvent(event); | 232 this.dispatchEvent(event); |
241 | 233 |
242 // On windows we might hide the menu in a right mouse button up and if | 234 // On windows we might hide the menu in a right mouse button up and if |
243 // that is the case we wait some short period before we allow the menu | 235 // that is the case we wait some short period before we allow the menu |
244 // to be shown again. | 236 // to be shown again. |
245 this.hideTimestamp_ = cr.isWindows ? Date.now() : 0; | 237 this.hideTimestamp_ = cr.isWindows ? Date.now() : 0; |
246 }, | 238 }, |
247 | 239 |
248 /** | 240 /** |
249 * Whether the menu is shown. | 241 * Whether the menu is shown. |
250 */ | 242 */ |
251 isMenuShown: function() { | 243 isMenuShown: function() { return this.hasAttribute('menu-shown'); }, |
252 return this.hasAttribute('menu-shown'); | |
253 }, | |
254 | 244 |
255 /** | 245 /** |
256 * Positions the menu below the menu button. At this point we do not use any | 246 * Positions the menu below the menu button. At this point we do not use any |
257 * advanced positioning logic to ensure the menu fits in the viewport. | 247 * advanced positioning logic to ensure the menu fits in the viewport. |
258 * @private | 248 * @private |
259 */ | 249 */ |
260 positionMenu_: function() { | 250 positionMenu_: function() { |
261 positionPopupAroundElement(this, this.menu, this.anchorType, | 251 positionPopupAroundElement( |
262 this.invertLeftRight); | 252 this, this.menu, this.anchorType, this.invertLeftRight); |
263 }, | 253 }, |
264 | 254 |
265 /** | 255 /** |
266 * Handles the keydown event for the menu button. | 256 * Handles the keydown event for the menu button. |
267 */ | 257 */ |
268 handleKeyDown: function(e) { | 258 handleKeyDown: function(e) { |
269 switch (e.key) { | 259 switch (e.key) { |
270 case 'ArrowDown': | 260 case 'ArrowDown': |
271 case 'ArrowUp': | 261 case 'ArrowUp': |
272 if (!this.respondToArrowKeys) | 262 if (!this.respondToArrowKeys) |
(...skipping 10 matching lines...) Expand all Loading... |
283 break; | 273 break; |
284 } | 274 } |
285 } | 275 } |
286 }; | 276 }; |
287 | 277 |
288 // Export | 278 // Export |
289 return { | 279 return { |
290 MenuButton: MenuButton, | 280 MenuButton: MenuButton, |
291 }; | 281 }; |
292 }); | 282 }); |
OLD | NEW |