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 | 6 |
7 /** @const */ var MenuItem = cr.ui.MenuItem; | 7 /** @const */ var MenuItem = cr.ui.MenuItem; |
8 | 8 |
9 /** | 9 /** |
10 * Creates a new menu element. Menu dispatches all commands on the element it | 10 * Creates a new menu element. Menu dispatches all commands on the element it |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
70 */ | 70 */ |
71 addSeparator: function() { | 71 addSeparator: function() { |
72 var separator = this.ownerDocument.createElement('hr'); | 72 var separator = this.ownerDocument.createElement('hr'); |
73 cr.ui.decorate(separator, MenuItem); | 73 cr.ui.decorate(separator, MenuItem); |
74 this.appendChild(separator); | 74 this.appendChild(separator); |
75 }, | 75 }, |
76 | 76 |
77 /** | 77 /** |
78 * Clears menu. | 78 * Clears menu. |
79 */ | 79 */ |
80 clear: function() { this.textContent = ''; }, | 80 clear: function() { |
| 81 this.textContent = ''; |
| 82 }, |
81 | 83 |
82 /** | 84 /** |
83 * Walks up the ancestors of |node| until a menu item belonging to this menu | 85 * Walks up the ancestors of |node| until a menu item belonging to this menu |
84 * is found. | 86 * is found. |
85 * @param {Node} node The node to start searching from. | 87 * @param {Node} node The node to start searching from. |
86 * @return {cr.ui.MenuItem} The found menu item or null. | 88 * @return {cr.ui.MenuItem} The found menu item or null. |
87 * @private | 89 * @private |
88 */ | 90 */ |
89 findMenuItem_: function(node) { | 91 findMenuItem_: function(node) { |
90 while (node && node.parentNode != this && !(node instanceof MenuItem)) { | 92 while (node && node.parentNode != this && !(node instanceof MenuItem)) { |
(...skipping 10 matching lines...) Expand all Loading... |
101 handleMouseOver_: function(e) { | 103 handleMouseOver_: function(e) { |
102 var overItem = this.findMenuItem_(/** @type {Element} */ (e.target)); | 104 var overItem = this.findMenuItem_(/** @type {Element} */ (e.target)); |
103 this.selectedItem = overItem; | 105 this.selectedItem = overItem; |
104 }, | 106 }, |
105 | 107 |
106 /** | 108 /** |
107 * Handles mouseout events and deselects any selected item. | 109 * Handles mouseout events and deselects any selected item. |
108 * @param {Event} e The mouseout event. | 110 * @param {Event} e The mouseout event. |
109 * @private | 111 * @private |
110 */ | 112 */ |
111 handleMouseOut_: function(e) { this.selectedItem = null; }, | 113 handleMouseOut_: function(e) { |
| 114 this.selectedItem = null; |
| 115 }, |
112 | 116 |
113 /** | 117 /** |
114 * If there's a mouseup that happens quickly in about the same position, | 118 * If there's a mouseup that happens quickly in about the same position, |
115 * stop it from propagating to items. This is to prevent accidentally | 119 * stop it from propagating to items. This is to prevent accidentally |
116 * selecting a menu item that's created under the mouse cursor. | 120 * selecting a menu item that's created under the mouse cursor. |
117 * @param {Event} e A mouseup event on the menu (in capturing phase). | 121 * @param {Event} e A mouseup event on the menu (in capturing phase). |
118 * @private | 122 * @private |
119 */ | 123 */ |
120 handleMouseUp_: function(e) { | 124 handleMouseUp_: function(e) { |
121 assert(this.contains(/** @type {Element} */ (e.target))); | 125 assert(this.contains(/** @type {Element} */ (e.target))); |
122 | 126 |
123 if (!this.trustEvent_(e) || Date.now() - this.shown_.time > 200) | 127 if (!this.trustEvent_(e) || Date.now() - this.shown_.time > 200) |
124 return; | 128 return; |
125 | 129 |
126 var pos = this.shown_.mouseDownPos; | 130 var pos = this.shown_.mouseDownPos; |
127 if (!pos || Math.abs(pos.x - e.screenX) + Math.abs(pos.y - e.screenY) > 4) | 131 if (!pos || Math.abs(pos.x - e.screenX) + Math.abs(pos.y - e.screenY) > 4) |
128 return; | 132 return; |
129 | 133 |
130 e.preventDefault(); | 134 e.preventDefault(); |
131 e.stopPropagation(); | 135 e.stopPropagation(); |
132 }, | 136 }, |
133 | 137 |
134 /** | 138 /** |
135 * @param {!Event} e | 139 * @param {!Event} e |
136 * @return {boolean} Whether |e| can be trusted. | 140 * @return {boolean} Whether |e| can be trusted. |
137 * @private | 141 * @private |
138 * @suppress {checkTypes} | 142 * @suppress {checkTypes} |
139 */ | 143 */ |
140 trustEvent_: function(e) { return e.isTrusted || e.isTrustedForTesting; }, | 144 trustEvent_: function(e) { |
| 145 return e.isTrusted || e.isTrustedForTesting; |
| 146 }, |
141 | 147 |
142 get menuItems() { | 148 get menuItems() { |
143 return this.querySelectorAll(this.menuItemSelector || '*'); | 149 return this.querySelectorAll(this.menuItemSelector || '*'); |
144 }, | 150 }, |
145 | 151 |
146 /** | 152 /** |
147 * The selected menu item or null if none. | 153 * The selected menu item or null if none. |
148 * @type {cr.ui.MenuItem} | 154 * @type {cr.ui.MenuItem} |
149 */ | 155 */ |
150 get selectedItem() { return this.menuItems[this.selectedIndex]; }, | 156 get selectedItem() { |
| 157 return this.menuItems[this.selectedIndex]; |
| 158 }, |
151 set selectedItem(item) { | 159 set selectedItem(item) { |
152 var index = Array.prototype.indexOf.call(this.menuItems, item); | 160 var index = Array.prototype.indexOf.call(this.menuItems, item); |
153 this.selectedIndex = index; | 161 this.selectedIndex = index; |
154 }, | 162 }, |
155 | 163 |
156 /** | 164 /** |
157 * Focuses the selected item. If selectedIndex is invalid, set it to 0 | 165 * Focuses the selected item. If selectedIndex is invalid, set it to 0 |
158 * first. | 166 * first. |
159 */ | 167 */ |
160 focusSelectedItem: function() { | 168 focusSelectedItem: function() { |
161 if (this.selectedIndex < 0 || | 169 if (this.selectedIndex < 0 || |
162 this.selectedIndex > this.menuItems.length) { | 170 this.selectedIndex > this.menuItems.length) { |
163 this.selectedIndex = 0; | 171 this.selectedIndex = 0; |
164 } | 172 } |
165 | 173 |
166 if (this.selectedItem) { | 174 if (this.selectedItem) { |
167 this.selectedItem.focus(); | 175 this.selectedItem.focus(); |
168 this.setAttribute('aria-activedescendant', this.selectedItem.id); | 176 this.setAttribute('aria-activedescendant', this.selectedItem.id); |
169 } | 177 } |
170 }, | 178 }, |
171 | 179 |
172 /** | 180 /** |
173 * Menu length | 181 * Menu length |
174 */ | 182 */ |
175 get length() { return this.menuItems.length; }, | 183 get length() { |
| 184 return this.menuItems.length; |
| 185 }, |
176 | 186 |
177 /** | 187 /** |
178 * Returns if the menu has any visible item. | 188 * Returns if the menu has any visible item. |
179 * @return {boolean} True if the menu has visible item. Otherwise, false. | 189 * @return {boolean} True if the menu has visible item. Otherwise, false. |
180 */ | 190 */ |
181 hasVisibleItems: function() { | 191 hasVisibleItems: function() { |
182 var menuItems = this.menuItems; // Cache. | 192 var menuItems = this.menuItems; // Cache. |
183 for (var i = 0, menuItem; menuItem = menuItems[i]; i++) { | 193 for (var i = 0, menuItem; menuItem = menuItems[i]; i++) { |
184 if (!menuItem.hidden) | 194 if (!menuItem.hidden) |
185 return true; | 195 return true; |
(...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
304 Menu, 'selectedIndex', cr.PropertyKind.JS, selectedIndexChanged); | 314 Menu, 'selectedIndex', cr.PropertyKind.JS, selectedIndexChanged); |
305 | 315 |
306 /** | 316 /** |
307 * Selector for children which are menu items. | 317 * Selector for children which are menu items. |
308 */ | 318 */ |
309 cr.defineProperty(Menu, 'menuItemSelector', cr.PropertyKind.ATTR); | 319 cr.defineProperty(Menu, 'menuItemSelector', cr.PropertyKind.ATTR); |
310 | 320 |
311 // Export | 321 // Export |
312 return {Menu: Menu}; | 322 return {Menu: Menu}; |
313 }); | 323 }); |
OLD | NEW |