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
3 // found in the LICENSE file.
8 * @fileoverview This implements a combobutton control.
11 cr.define('cr.ui', function() {
13 * Creates a new combobutton element.
14 * @param {Object=} opt_propertyBag Optional properties.
16 * @extends {HTMLUListElement}
18 var ComboButton = cr.ui.define(cr.ui.MenuButton);
21 ComboButton.prototype = {
22 __proto__: cr.ui.MenuButton.prototype,
27 * Truncates drop-down list.
31 this.multiple = false;
34 addDropDownItem: function(item) {
36 var menuitem = this.menu.addMenuItem(item);
39 menuitem.style.backgroundImage = '';
40 menuitem.setAttribute('file-type-icon', item.iconType);
43 menuitem.style.fontWeight = 'bold';
49 * Adds separator to drop-down list.
51 addSeparator: function() {
52 this.menu.addSeparator();
56 * Default item to fire on combobox click
59 return this.defaultItem_;
61 set defaultItem(defaultItem) {
62 this.defaultItem_ = defaultItem;
64 this.actionNode_.textContent = defaultItem.label || '';
66 if (defaultItem.iconType) {
67 this.actionNode_.style.backgroundImage = '';
68 this.actionNode_.setAttribute('file-type-icon', defaultItem.iconType);
69 } else if (defaultItem.iconUrl) {
70 this.actionNode_.style.backgroundImage =
71 'url(' + defaultItem.iconUrl + ')';
73 this.actionNode_.style.backgroundImage = '';
78 * Initializes the element.
80 decorate: function() {
81 cr.ui.MenuButton.prototype.decorate.call(this);
83 this.classList.add('combobutton');
85 this.actionNode_ = this.ownerDocument.createElement('div');
86 this.actionNode_.classList.add('action');
87 this.appendChild(this.actionNode_);
89 var triggerIcon = this.ownerDocument.createElement('span');
90 triggerIcon.className = 'disclosureindicator';
91 this.trigger_ = this.ownerDocument.createElement('div');
92 this.trigger_.classList.add('trigger');
93 this.trigger_.appendChild(triggerIcon);
95 this.appendChild(this.trigger_);
97 this.addEventListener('click', this.handleButtonClick_.bind(this));
99 this.trigger_.addEventListener('click',
100 this.handleTriggerClicked_.bind(this));
102 this.menu.addEventListener('activate',
103 this.handleMenuActivate_.bind(this));
105 // Remove mousedown event listener created by MenuButton::decorate,
106 // and move it down to trigger_.
107 this.removeEventListener('mousedown', this);
108 this.trigger_.addEventListener('mousedown', this);
112 * Handles the keydown event for the menu button.
114 handleKeyDown: function(e) {
115 switch (e.keyIdentifier) {
118 if (!this.isMenuShown())
123 case 'U+001B': // Maybe this is remote desktop playing a prank?
129 handleTriggerClicked_: function(event) {
130 event.stopPropagation();
133 handleMenuActivate_: function(event) {
134 this.dispatchSelectEvent(event.target.data);
137 handleButtonClick_: function() {
138 this.dispatchSelectEvent(this.defaultItem_);
141 dispatchSelectEvent: function(item) {
142 var selectEvent = new Event('select');
143 selectEvent.item = item;
144 this.dispatchEvent(selectEvent);
148 cr.defineProperty(ComboButton, 'disabled', cr.PropertyKind.BOOL_ATTR);
149 cr.defineProperty(ComboButton, 'multiple', cr.PropertyKind.BOOL_ATTR);
152 ComboButton: ComboButton