| 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 |