OLD | NEW |
1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2010 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 MenuItem = cr.ui.MenuItem; | 7 const MenuItem = cr.ui.MenuItem; |
8 | 8 |
9 /** | 9 /** |
10 * Creates a new menu element. | 10 * Creates a new menu element. |
11 * @param {Object=} opt_propertyBag Optional properties. | 11 * @param {Object=} opt_propertyBag Optional properties. |
12 * @constructor | 12 * @constructor |
13 * @extends {HTMLMenuElement} | 13 * @extends {HTMLMenuElement} |
14 */ | 14 */ |
15 var Menu = cr.ui.define('menu'); | 15 var Menu = cr.ui.define('menu'); |
16 | 16 |
17 Menu.prototype = { | 17 Menu.prototype = { |
18 __proto__: HTMLMenuElement.prototype, | 18 __proto__: HTMLMenuElement.prototype, |
19 | 19 |
| 20 selectedIndex_: -1, |
| 21 |
20 /** | 22 /** |
21 * Initializes the menu element. | 23 * Initializes the menu element. |
22 */ | 24 */ |
23 decorate: function() { | 25 decorate: function() { |
24 this.addEventListener('mouseover', this.handleMouseOver_); | 26 this.addEventListener('mouseover', this.handleMouseOver_); |
25 this.addEventListener('mouseout', this.handleMouseOut_); | 27 this.addEventListener('mouseout', this.handleMouseOut_); |
26 | 28 |
27 // Decorate the children as menu items. | 29 // Decorate the children as menu items. |
28 var children = this.children; | 30 var children = this.children; |
29 for (var i = 0, child; child = children[i]; i++) { | 31 for (var i = 0, child; child = children[i]; i++) { |
(...skipping 27 matching lines...) Expand all Loading... |
57 /** | 59 /** |
58 * Handles mouseout events and deselects any selected item. | 60 * Handles mouseout events and deselects any selected item. |
59 * @param {Event} e The mouseout event. | 61 * @param {Event} e The mouseout event. |
60 * @private | 62 * @private |
61 */ | 63 */ |
62 handleMouseOut_: function(e) { | 64 handleMouseOut_: function(e) { |
63 this.selectedItem = null; | 65 this.selectedItem = null; |
64 }, | 66 }, |
65 | 67 |
66 /** | 68 /** |
67 * The index of the selected item. | |
68 * @type {boolean} | |
69 */ | |
70 // getter and default value is defined using cr.defineProperty. | |
71 set selectedIndex(selectedIndex) { | |
72 if (this.selectedIndex_ != selectedIndex) { | |
73 var oldSelectedItem = this.selectedItem; | |
74 this.selectedIndex_ = selectedIndex; | |
75 if (oldSelectedItem) | |
76 oldSelectedItem.selected = false; | |
77 var item = this.selectedItem; | |
78 if (item) | |
79 item.selected = true; | |
80 | |
81 cr.dispatchSimpleEvent(this, 'change'); | |
82 } | |
83 }, | |
84 | |
85 /** | |
86 * The selected menu item or null if none. | 69 * The selected menu item or null if none. |
87 * @type {cr.ui.MenuItem} | 70 * @type {cr.ui.MenuItem} |
88 */ | 71 */ |
89 get selectedItem() { | 72 get selectedItem() { |
90 return this.children[this.selectedIndex]; | 73 return this.children[this.selectedIndex]; |
91 }, | 74 }, |
92 set selectedItem(item) { | 75 set selectedItem(item) { |
93 var index = Array.prototype.indexOf.call(this.children, item); | 76 var index = Array.prototype.indexOf.call(this.children, item); |
94 this.selectedIndex = index; | 77 this.selectedIndex = index; |
95 }, | 78 }, |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
137 item.command.execute(); | 120 item.command.execute(); |
138 } | 121 } |
139 } | 122 } |
140 return true; | 123 return true; |
141 } | 124 } |
142 | 125 |
143 return false; | 126 return false; |
144 } | 127 } |
145 }; | 128 }; |
146 | 129 |
| 130 function selectedIndexChanged(selectedIndex, oldSelectedIndex) { |
| 131 var oldSelectedItem = this.chidren[oldSelectedIndex]; |
| 132 if (oldSelectedItem) |
| 133 oldSelectedItem.selected = false; |
| 134 var item = this.selectedItem; |
| 135 if (item) |
| 136 item.selected = true; |
| 137 } |
147 /** | 138 /** |
148 * The selected menu item. | 139 * The selected menu item. |
149 * @type {number} | 140 * @type {number} |
150 */ | 141 */ |
151 cr.defineProperty(Menu, 'selectedIndex', cr.PropertyKind.JS, -1); | 142 cr.defineProperty(Menu, 'selectedIndex', cr.PropertyKind.JS, |
| 143 selectedIndexChanged); |
152 | 144 |
153 // Export | 145 // Export |
154 return { | 146 return { |
155 Menu: Menu | 147 Menu: Menu |
156 }; | 148 }; |
157 }); | 149 }); |
OLD | NEW |