OLD | NEW |
| (Empty) |
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. | |
4 | |
5 'use strict'; | |
6 | |
7 /** | |
8 * @fileoverview This implements a common button control, bound to command. | |
9 */ | |
10 | |
11 /** | |
12 * Creates a new button element. | |
13 * @param {Object=} opt_propertyBag Optional properties. | |
14 * @constructor | |
15 * @extends {HTMLDivElement} | |
16 */ | |
17 var CommandButton = cr.ui.define('button'); | |
18 | |
19 /** @override */ | |
20 CommandButton.prototype.__proto__ = HTMLButtonElement.prototype; | |
21 | |
22 /** | |
23 * Associated command. | |
24 * @type {Command} | |
25 * @private | |
26 */ | |
27 CommandButton.prototype.command_ = null; | |
28 | |
29 /** | |
30 * Initializes the menu item. | |
31 */ | |
32 CommandButton.prototype.decorate = function() { | |
33 var commandId; | |
34 if ((commandId = this.getAttribute('command'))) | |
35 this.setCommand(commandId); | |
36 | |
37 this.addEventListener('click', this.handleClick_.bind(this)); | |
38 this.addEventListener('keypress', this.handleKeyPress_.bind(this)); | |
39 }; | |
40 | |
41 /** | |
42 * Returns associated command. | |
43 * @return {cr.ui.Command} associated command. | |
44 */ | |
45 CommandButton.prototype.getCommand = function() { | |
46 return this.command_; | |
47 }; | |
48 | |
49 /** | |
50 * Associates command with this button. | |
51 * @param {string|cr.ui.Command} command Command id, or command object to | |
52 * associate with this button. | |
53 */ | |
54 CommandButton.prototype.setCommand = function(command) { | |
55 if (this.command_) { | |
56 this.command_.removeEventListener('labelChange', this); | |
57 this.command_.removeEventListener('disabledChange', this); | |
58 this.command_.removeEventListener('hiddenChange', this); | |
59 } | |
60 | |
61 if (typeof command == 'string' && command[0] == '#') { | |
62 command = this.ownerDocument.getElementById(command.slice(1)); | |
63 cr.ui.decorate(command, cr.ui.Command); | |
64 } | |
65 | |
66 this.command_ = command; | |
67 if (command) { | |
68 if (command.id) | |
69 this.setAttribute('command', '#' + command.id); | |
70 | |
71 this.setLabel(command.label); | |
72 this.disabled = command.disabled; | |
73 this.hidden = command.hidden; | |
74 | |
75 this.command_.addEventListener('labelChange', this); | |
76 this.command_.addEventListener('disabledChange', this); | |
77 this.command_.addEventListener('hiddenChange', this); | |
78 } | |
79 }; | |
80 | |
81 /** | |
82 * Returns button label | |
83 * @return {string} Button label. | |
84 */ | |
85 CommandButton.prototype.getLabel = function() { | |
86 return this.textContent; | |
87 }; | |
88 | |
89 /** | |
90 * Sets button label. | |
91 * @param {string} label New button label. | |
92 */ | |
93 CommandButton.prototype.setLabel = function(label) { | |
94 this.textContent = label; | |
95 }; | |
96 | |
97 /** | |
98 * Handles click event and dispatches associated command. | |
99 * @param {Event} e The mouseup event object. | |
100 * @private | |
101 */ | |
102 CommandButton.prototype.handleClick_ = function(e) { | |
103 if (!this.disabled && this.command_) | |
104 this.command_.execute(this); | |
105 }; | |
106 | |
107 /** | |
108 * Handles keypress event and dispatches associated command. | |
109 * @param {Event} e The mouseup event object. | |
110 * @private | |
111 */ | |
112 CommandButton.prototype.handleKeyPress_ = function(e) { | |
113 if (!this.command_) return; | |
114 | |
115 switch (util.getKeyModifiers(e) + e.keyCode) { | |
116 case '13': // Enter | |
117 case '32': // Space | |
118 this.command_.execute(this); | |
119 break; | |
120 } | |
121 }; | |
122 | |
123 /** | |
124 * Handles changes to the associated command. | |
125 * @param {Event} e The event object. | |
126 */ | |
127 CommandButton.prototype.handleEvent = function(e) { | |
128 switch (e.type) { | |
129 case 'disabledChange': | |
130 this.disabled = this.command_.disabled; | |
131 break; | |
132 case 'hiddenChange': | |
133 this.hidden = this.command_.hidden; | |
134 break; | |
135 case 'labelChange': | |
136 this.setLabel(this.command_.label); | |
137 break; | |
138 } | |
139 }; | |
140 | |
141 /** | |
142 * Whether the button is disabled or not. | |
143 * @type {boolean} | |
144 */ | |
145 cr.defineProperty(CommandButton, 'disabled', | |
146 cr.PropertyKind.BOOL_ATTR); | |
147 | |
148 /** | |
149 * Whether the button is hidden or not. | |
150 * @type {boolean} | |
151 */ | |
152 cr.defineProperty(CommandButton, 'hidden', | |
153 cr.PropertyKind.BOOL_ATTR); | |
OLD | NEW |