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 cr.define('cr.ui', function() { | 5 cr.define('cr.ui', function() { |
6 /** @const */ | 6 /** @const */ |
7 var Menu = cr.ui.Menu; | 7 var Menu = cr.ui.Menu; |
8 /** @const */ | 8 /** @const */ |
9 var positionPopupAroundElement = cr.ui.positionPopupAroundElement; | 9 var positionPopupAroundElement = cr.ui.positionPopupAroundElement; |
10 | 10 |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
93 this.handleKeyDown(e); | 93 this.handleKeyDown(e); |
94 // If the menu is visible we let it handle all the keyboard events. | 94 // If the menu is visible we let it handle all the keyboard events. |
95 if (this.isMenuShown() && e.currentTarget == this.ownerDocument) { | 95 if (this.isMenuShown() && e.currentTarget == this.ownerDocument) { |
96 this.menu.handleKeyDown(e); | 96 this.menu.handleKeyDown(e); |
97 e.preventDefault(); | 97 e.preventDefault(); |
98 e.stopPropagation(); | 98 e.stopPropagation(); |
99 } | 99 } |
100 break; | 100 break; |
101 | 101 |
102 case 'activate': | 102 case 'activate': |
103 case 'blur': | |
104 case 'resize': | 103 case 'resize': |
105 this.hideMenu(); | 104 this.hideMenu(); |
106 break; | 105 break; |
107 } | 106 } |
108 }, | 107 }, |
109 | 108 |
110 /** | 109 /** |
111 * Shows the menu. | 110 * Shows the menu. |
112 */ | 111 */ |
113 showMenu: function() { | 112 showMenu: function() { |
114 this.hideMenu(); | 113 this.hideMenu(); |
115 | 114 |
116 var event = document.createEvent('UIEvents'); | 115 var event = document.createEvent('UIEvents'); |
117 event.initUIEvent('menushow', true, true, window, null); | 116 event.initUIEvent('menushow', true, true, window, null); |
118 | 117 |
119 if (this.dispatchEvent(event)) { | 118 if (this.dispatchEvent(event)) { |
120 this.menu.hidden = false; | 119 this.menu.hidden = false; |
121 | 120 |
122 this.setAttribute('menu-shown', ''); | 121 this.setAttribute('menu-shown', ''); |
122 this.menu.selectedIndex = 0; | |
Dan Beam
2012/09/21 03:44:50
should the first item always be selected when show
aboxhall
2012/09/21 06:46:00
The selectedIndex is set back to -1 below, so it s
Dan Beam
2012/09/21 10:23:48
Where is it set to -1? Either way I guess this met
aboxhall
2012/09/24 00:48:52
It's set to -1 in the hideMenu() method below.
I
| |
123 | 123 |
124 // when the menu is shown we steal all keyboard events. | 124 // when the menu is shown we steal all keyboard events. |
125 var doc = this.ownerDocument; | 125 var doc = this.ownerDocument; |
126 var win = doc.defaultView; | 126 var win = doc.defaultView; |
127 this.showingEvents_.add(doc, 'keydown', this, true); | 127 this.showingEvents_.add(doc, 'keydown', this, true); |
128 this.showingEvents_.add(doc, 'mousedown', this, true); | 128 this.showingEvents_.add(doc, 'mousedown', this, true); |
129 this.showingEvents_.add(doc, 'blur', this, true); | 129 this.showingEvents_.add(doc, 'blur', this, true); |
130 this.showingEvents_.add(win, 'resize', this); | 130 this.showingEvents_.add(win, 'resize', this); |
131 this.showingEvents_.add(this.menu, 'activate', this); | 131 this.showingEvents_.add(this.menu, 'activate', this); |
132 this.positionMenu_(); | 132 this.positionMenu_(); |
133 } | 133 } |
134 }, | 134 }, |
135 | 135 |
136 /** | 136 /** |
137 * Hides the menu. If your menu can go out of scope, make sure to call this | 137 * Hides the menu. If your menu can go out of scope, make sure to call this |
138 * first. | 138 * first. |
139 */ | 139 */ |
140 hideMenu: function() { | 140 hideMenu: function() { |
141 if (!this.isMenuShown()) | 141 if (!this.isMenuShown()) |
142 return; | 142 return; |
143 | 143 |
144 this.removeAttribute('menu-shown'); | 144 this.removeAttribute('menu-shown'); |
145 this.menu.hidden = true; | 145 this.menu.hidden = true; |
146 | 146 |
147 this.showingEvents_.removeAll(); | 147 this.showingEvents_.removeAll(); |
148 this.menu.selectedIndex = -1; | 148 this.menu.selectedIndex = -1; |
149 this.focus(); | |
Dan Beam
2012/09/21 03:44:50
I'm confused by this ^
aboxhall
2012/09/21 06:46:00
It puts the focus back on the menu button when the
Dan Beam
2012/09/21 10:23:48
How does focus()ing a hidden element put the focus
aboxhall
2012/09/24 00:48:52
It's not focusing a hidden element, it's focusing
| |
149 }, | 150 }, |
150 | 151 |
151 /** | 152 /** |
152 * Whether the menu is shown. | 153 * Whether the menu is shown. |
153 */ | 154 */ |
154 isMenuShown: function() { | 155 isMenuShown: function() { |
155 return this.hasAttribute('menu-shown'); | 156 return this.hasAttribute('menu-shown'); |
156 }, | 157 }, |
157 | 158 |
158 /** | 159 /** |
(...skipping 13 matching lines...) Expand all Loading... | |
172 switch (e.keyIdentifier) { | 173 switch (e.keyIdentifier) { |
173 case 'Down': | 174 case 'Down': |
174 case 'Up': | 175 case 'Up': |
175 case 'Enter': | 176 case 'Enter': |
176 case 'U+0020': // Space | 177 case 'U+0020': // Space |
177 if (!this.isMenuShown()) | 178 if (!this.isMenuShown()) |
178 this.showMenu(); | 179 this.showMenu(); |
179 e.preventDefault(); | 180 e.preventDefault(); |
180 break; | 181 break; |
181 case 'Esc': | 182 case 'Esc': |
183 case 'U+0009': | |
Dan Beam
2012/09/21 03:44:50
case 'U+0009': // Whatever the heck this key is.
Dan Beam
2012/09/21 10:23:48
Ping
aboxhall
2012/09/24 00:48:52
Oopsies. It's 'Tab'. Fixed.
| |
182 case 'U+001B': // Maybe this is remote desktop playing a prank? | 184 case 'U+001B': // Maybe this is remote desktop playing a prank? |
183 this.hideMenu(); | 185 this.hideMenu(); |
184 break; | 186 break; |
185 } | 187 } |
186 } | 188 } |
187 }; | 189 }; |
188 | 190 |
189 /** | 191 /** |
190 * Helper for styling a menu button with a drop-down arrow indicator. | 192 * Helper for styling a menu button with a drop-down arrow indicator. |
191 * Creates a new 2D canvas context and draws a downward-facing arrow into it. | 193 * Creates a new 2D canvas context and draws a downward-facing arrow into it. |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
230 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor); | 232 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor); |
231 createDropDownArrowCanvas( | 233 createDropDownArrowCanvas( |
232 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); | 234 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); |
233 }; | 235 }; |
234 | 236 |
235 // Export | 237 // Export |
236 return { | 238 return { |
237 MenuButton: MenuButton | 239 MenuButton: MenuButton |
238 }; | 240 }; |
239 }); | 241 }); |
OLD | NEW |