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 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
86 this.showMenu(); | 86 this.showMenu(); |
87 // Prevent the button from stealing focus on mousedown. | 87 // Prevent the button from stealing focus on mousedown. |
88 e.preventDefault(); | 88 e.preventDefault(); |
89 } | 89 } |
90 } | 90 } |
91 break; | 91 break; |
92 case 'keydown': | 92 case 'keydown': |
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 if (this.menu.handleKeyDown(e)) { |
97 e.preventDefault(); | 97 e.preventDefault(); |
98 e.stopPropagation(); | 98 e.stopPropagation(); |
| 99 } |
99 } | 100 } |
100 break; | 101 break; |
101 | 102 |
| 103 case 'focusin': |
| 104 if (!this.contains(e.target) && !this.menu.contains(e.target)) |
| 105 this.hideMenu(); |
| 106 break; |
| 107 |
102 case 'activate': | 108 case 'activate': |
103 case 'blur': | |
104 case 'resize': | 109 case 'resize': |
105 this.hideMenu(); | 110 this.hideMenu(); |
106 break; | 111 break; |
107 } | 112 } |
108 }, | 113 }, |
109 | 114 |
110 /** | 115 /** |
111 * Shows the menu. | 116 * Shows the menu. |
112 */ | 117 */ |
113 showMenu: function() { | 118 showMenu: function() { |
114 this.hideMenu(); | 119 this.hideMenu(); |
115 | 120 |
116 var event = document.createEvent('UIEvents'); | 121 var event = document.createEvent('UIEvents'); |
117 event.initUIEvent('menushow', true, true, window, null); | 122 event.initUIEvent('menushow', true, true, window, null); |
118 | 123 |
119 if (this.dispatchEvent(event)) { | 124 if (this.dispatchEvent(event)) { |
120 this.menu.hidden = false; | 125 this.menu.hidden = false; |
121 | 126 |
122 this.setAttribute('menu-shown', ''); | 127 this.setAttribute('menu-shown', ''); |
| 128 this.menu.focusSelectedItem(); |
123 | 129 |
124 // when the menu is shown we steal all keyboard events. | 130 // when the menu is shown we steal all keyboard events. |
125 var doc = this.ownerDocument; | 131 var doc = this.ownerDocument; |
126 var win = doc.defaultView; | 132 var win = doc.defaultView; |
127 this.showingEvents_.add(doc, 'keydown', this, true); | 133 this.showingEvents_.add(doc, 'keydown', this, true); |
128 this.showingEvents_.add(doc, 'mousedown', this, true); | 134 this.showingEvents_.add(doc, 'mousedown', this, true); |
129 this.showingEvents_.add(doc, 'blur', this, true); | 135 this.showingEvents_.add(doc, 'focusin', this, true); |
130 this.showingEvents_.add(win, 'resize', this); | 136 this.showingEvents_.add(win, 'resize', this); |
131 this.showingEvents_.add(this.menu, 'activate', this); | 137 this.showingEvents_.add(this.menu, 'activate', this); |
132 this.positionMenu_(); | 138 this.positionMenu_(); |
133 } | 139 } |
134 }, | 140 }, |
135 | 141 |
136 /** | 142 /** |
137 * Hides the menu. If your menu can go out of scope, make sure to call this | 143 * Hides the menu. If your menu can go out of scope, make sure to call this |
138 * first. | 144 * first. |
139 */ | 145 */ |
140 hideMenu: function() { | 146 hideMenu: function() { |
141 if (!this.isMenuShown()) | 147 if (!this.isMenuShown()) |
142 return; | 148 return; |
143 | 149 |
144 this.removeAttribute('menu-shown'); | 150 this.removeAttribute('menu-shown'); |
145 this.menu.hidden = true; | 151 this.menu.hidden = true; |
146 | 152 |
147 this.showingEvents_.removeAll(); | 153 this.showingEvents_.removeAll(); |
148 this.menu.selectedIndex = -1; | 154 this.focus(); |
149 }, | 155 }, |
150 | 156 |
151 /** | 157 /** |
152 * Whether the menu is shown. | 158 * Whether the menu is shown. |
153 */ | 159 */ |
154 isMenuShown: function() { | 160 isMenuShown: function() { |
155 return this.hasAttribute('menu-shown'); | 161 return this.hasAttribute('menu-shown'); |
156 }, | 162 }, |
157 | 163 |
158 /** | 164 /** |
(...skipping 14 matching lines...) Expand all Loading... |
173 case 'Down': | 179 case 'Down': |
174 case 'Up': | 180 case 'Up': |
175 case 'Enter': | 181 case 'Enter': |
176 case 'U+0020': // Space | 182 case 'U+0020': // Space |
177 if (!this.isMenuShown()) | 183 if (!this.isMenuShown()) |
178 this.showMenu(); | 184 this.showMenu(); |
179 e.preventDefault(); | 185 e.preventDefault(); |
180 break; | 186 break; |
181 case 'Esc': | 187 case 'Esc': |
182 case 'U+001B': // Maybe this is remote desktop playing a prank? | 188 case 'U+001B': // Maybe this is remote desktop playing a prank? |
| 189 case 'U+0009': // Tab |
183 this.hideMenu(); | 190 this.hideMenu(); |
184 break; | 191 break; |
185 } | 192 } |
186 } | 193 } |
187 }; | 194 }; |
188 | 195 |
189 /** | 196 /** |
190 * Helper for styling a menu button with a drop-down arrow indicator. | 197 * 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. | 198 * Creates a new 2D canvas context and draws a downward-facing arrow into it. |
192 * @param {string} canvasName The name of the canvas. The canvas can be | 199 * @param {string} canvasName The name of the canvas. The canvas can be |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
230 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor); | 237 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor); |
231 createDropDownArrowCanvas( | 238 createDropDownArrowCanvas( |
232 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); | 239 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); |
233 }; | 240 }; |
234 | 241 |
235 // Export | 242 // Export |
236 return { | 243 return { |
237 MenuButton: MenuButton | 244 MenuButton: MenuButton |
238 }; | 245 }; |
239 }); | 246 }); |
OLD | NEW |