Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright (c) 2010 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 /** | 5 /** |
| 6 * ButtonCommand class for small buttons on menu items. | 6 * ButtonCommand class for small buttons on menu items. |
| 7 * @constructor | |
| 8 * @extends {HTMLDivElement} | |
| 7 */ | 9 */ |
| 8 var ButtonCommand = cr.ui.define('div'); | 10 var ButtonCommand = cr.ui.define('div'); |
| 9 | 11 |
| 10 ButtonCommand.prototype = { | 12 ButtonCommand.prototype = { |
| 11 __proto__: HTMLDivElement.prototype, | 13 __proto__: HTMLDivElement.prototype, |
| 12 | 14 |
| 13 /** | 15 /** |
| 14 * Decorate Button item. | 16 * Decorate Button item. |
| 15 */ | 17 */ |
| 16 decorate: function() { | 18 decorate: function() { |
| 17 }, | 19 }, |
| 18 | 20 |
| 19 /** | 21 /** |
| 20 * Changes the selection state of the menu item. | 22 * Changes the selection state of the menu item. |
| 21 * @param {boolean} selected True to set the selection, or false otherwise. | 23 * @param {boolean} selected True to set the selection, or false otherwise. |
| 24 * @this {ButtonCommand} | |
| 22 */ | 25 */ |
| 23 set selected(selected) { | 26 set selected(selected) { |
| 24 if (selected) { | 27 if (selected) { |
| 25 this.classList.add('selected'); | 28 this.classList.add('selected'); |
| 26 this.menu_.selectedItem = this; | 29 this.menu_.selectedItem = this; |
| 27 } else { | 30 } else { |
| 28 this.classList.remove('selected'); | 31 this.classList.remove('selected'); |
| 29 } | 32 } |
| 30 }, | 33 }, |
| 31 | 34 |
| 32 /** | 35 /** |
| 33 * Activate the menu item. | 36 * Activate the menu item. |
| 37 * @this {ButtonCommand} | |
| 34 */ | 38 */ |
| 35 activate: function() { | 39 activate: function() { |
| 36 sendActivate(this.menu_.getMenuItemIndexOf(this), | 40 sendActivate(this.menu_.getMenuItemIndexOf(this), |
| 37 'close_and_activate'); | 41 'close_and_activate'); |
| 38 }, | 42 }, |
| 39 }; | 43 }; |
| 40 | 44 |
| 41 /** | 45 /** |
| 42 * EditCommand implements Copy and Paste command. | 46 * EditCommand implements Copy and Paste command. |
| 47 * @constructor | |
| 48 * @extends {HTMLDivElement} | |
| 43 */ | 49 */ |
| 44 var EditCommand = cr.ui.define('div'); | 50 var EditCommand = cr.ui.define('div'); |
| 45 | 51 |
| 46 EditCommand.prototype = { | 52 EditCommand.prototype = { |
| 47 __proto__: ButtonCommand.prototype, | 53 __proto__: ButtonCommand.prototype, |
| 48 | 54 |
| 49 /** | 55 /** |
| 50 * Initialize the menu item. | 56 * Initialize the menu item. |
| 57 * @this {EditCommand} | |
| 51 * @override | 58 * @override |
| 52 */ | 59 */ |
| 53 init: function(menu, attrs, model) { | 60 init: function(menu, attrs, model) { |
| 54 this.menu_ = menu; | 61 this.menu_ = menu; |
| 55 this.attrs = attrs; | 62 this.attrs = attrs; |
| 56 if (this.attrs.font) { | 63 if (this.attrs.font) { |
| 57 this.style.font = attrs.font; | 64 this.style.font = attrs.font; |
| 58 } | 65 } |
| 59 menu.addHandlers(this, this); | 66 menu.addHandlers(this, this); |
| 60 if (attrs.command_id == menu.config_.IDC_COPY) { | 67 if (attrs.command_id == menu.config_.IDC_COPY) { |
| 61 menu.addLabelTo(this, menu.config_.IDS_COPY, this, | 68 menu.addLabelTo(this, menu.config_.IDS_COPY, this, |
| 62 false /* no mnemonic */); | 69 false /* no mnemonic */); |
| 63 } else { | 70 } else { |
| 64 menu.addLabelTo(this, menu.config_.IDS_PASTE, this, | 71 menu.addLabelTo(this, menu.config_.IDS_PASTE, this, |
| 65 false /* no mnemonic */); | 72 false /* no mnemonic */); |
| 66 } | 73 } |
| 67 }, | 74 }, |
| 68 }; | 75 }; |
| 69 | 76 |
| 70 /** | 77 /** |
| 71 * EditMenuItem which has Copy and Paste commands inside. | 78 * EditMenuItem which has Copy and Paste commands inside. |
| 79 * @constructor | |
| 80 * @extends {HTMLDivElement} | |
| 72 */ | 81 */ |
| 73 var EditMenuItem = cr.ui.define('div'); | 82 var EditMenuItem = cr.ui.define('div'); |
| 74 | 83 |
| 75 EditMenuItem.prototype = { | 84 EditMenuItem.prototype = { |
| 76 __proto__: MenuItem.prototype, | 85 __proto__: MenuItem.prototype, |
| 77 | 86 |
| 78 /** | 87 /** |
| 79 * Initialize | 88 * Initialize |
| 89 * @this {EditMenuItem} | |
| 80 */ | 90 */ |
| 81 decorate: function() { | 91 decorate: function() { |
| 82 this.className = 'menu-item'; | 92 this.className = 'menu-item'; |
| 83 this.label_ = document.createElement('div'); | 93 this.label_ = document.createElement('div'); |
| 84 this.label_.className = 'menu-label'; | 94 this.label_.className = 'menu-label'; |
| 85 this.cut_ = document.createElement('div'); | 95 this.cut_ = document.createElement('div'); |
| 86 this.cut_.className = 'edit-button left-button'; | 96 this.cut_.className = 'edit-button left-button'; |
| 87 this.copy_ = new EditCommand(); | 97 this.copy_ = new EditCommand(); |
| 88 this.copy_.className = 'edit-button center-button'; | 98 this.copy_.className = 'edit-button center-button'; |
| 89 this.paste_ = new EditCommand(); | 99 this.paste_ = new EditCommand(); |
| 90 this.paste_.className = 'edit-button right-button'; | 100 this.paste_.className = 'edit-button right-button'; |
| 91 | 101 |
| 92 this.appendChild(this.label_); | 102 this.appendChild(this.label_); |
| 93 this.appendChild(this.cut_); | 103 this.appendChild(this.cut_); |
| 94 this.appendChild(this.copy_); | 104 this.appendChild(this.copy_); |
| 95 this.appendChild(this.paste_); | 105 this.appendChild(this.paste_); |
| 96 }, | 106 }, |
| 97 | 107 |
| 98 /** | 108 /** |
| 99 * Activates the command. | 109 * Activates the command. |
| 110 * @this {EditMenuItem} | |
| 100 * @override | 111 * @override |
| 101 */ | 112 */ |
| 102 activate: function() { | 113 activate: function() { |
| 103 sendActivate(this.menu_.getMenuItemIndexOf(this), | 114 sendActivate(this.menu_.getMenuItemIndexOf(this), |
| 104 'close_and_activate'); | 115 'close_and_activate'); |
| 105 }, | 116 }, |
| 106 | 117 |
| 107 /** | 118 /** |
| 108 * @override | 119 * @override |
| 120 * @this {EditMenuItem} | |
| 109 */ | 121 */ |
| 110 set selected(selected) { | 122 set selected(selected) { |
| 111 if (selected) { | 123 if (selected) { |
| 112 this.cut_.classList.add('selected'); | 124 this.cut_.classList.add('selected'); |
| 113 this.menu_.selectedItem = this; | 125 this.menu_.selectedItem = this; |
| 114 } else { | 126 } else { |
| 115 this.cut_.classList.remove('selected'); | 127 this.cut_.classList.remove('selected'); |
| 116 } | 128 } |
| 117 }, | 129 }, |
| 118 | 130 |
| 119 /** | 131 /** |
| 120 * Initialize the edit items with configuration info. | 132 * Initialize the edit items with configuration info. |
| 121 * @override | 133 * @override |
| 134 * @this {EditMenuItem} | |
| 122 */ | 135 */ |
| 123 initMenuItem_: function() { | 136 initMenuItem_: function() { |
| 124 this.label_.textContent = | 137 this.label_.textContent = |
| 125 this.menu_.config_.IDS_EDIT2; | 138 this.menu_.config_.IDS_EDIT2; |
| 126 if (this.attrs.font) { | 139 if (this.attrs.font) { |
| 127 this.label_.style.font = this.attrs.font; | 140 this.label_.style.font = this.attrs.font; |
| 128 this.cut_.style.font = this.attrs.font; | 141 this.cut_.style.font = this.attrs.font; |
| 129 } | 142 } |
| 130 this.menu_.addLabelTo( | 143 this.menu_.addLabelTo( |
| 131 this, this.menu_.config_.IDS_CUT, this.cut_, | 144 this, this.menu_.config_.IDS_CUT, this.cut_, |
| 132 false /* no mnemonic */); | 145 false /* no mnemonic */); |
| 133 this.menu_.addHandlers(this, this.cut_); | 146 this.menu_.addHandlers(this, this.cut_); |
| 134 }, | 147 }, |
| 135 }; | 148 }; |
| 136 | 149 |
| 137 /** | 150 /** |
| 138 * ZoomCommand class implements Zoom plus and fullscreen. | 151 * ZoomCommand class implements Zoom plus and fullscreen. |
| 152 * @constructor | |
| 153 * @extends {HTMLDivElement} | |
|
Dan Beam
2012/05/07 17:43:53
it seems that this actually extends ButtonCommand,
kmadhusu
2012/05/08 20:20:19
Reverted my changes.
| |
| 139 */ | 154 */ |
| 140 var ZoomCommand = cr.ui.define('div'); | 155 var ZoomCommand = cr.ui.define('div'); |
| 141 | 156 |
| 142 ZoomCommand.prototype = { | 157 ZoomCommand.prototype = { |
| 143 __proto__: ButtonCommand.prototype, | 158 __proto__: ButtonCommand.prototype, |
|
Dan Beam
2012/05/07 17:43:53
here's the start of the prototype chain
kmadhusu
2012/05/08 20:20:19
Reverted my changes.
| |
| 144 | 159 |
| 145 /** | 160 /** |
| 146 * Initialize the menu item. | 161 * Initialize the menu item. |
| 162 * @this {ZoomCommand} | |
| 147 * @override | 163 * @override |
| 148 */ | 164 */ |
| 149 init: function(menu, attrs, model) { | 165 init: function(menu, attrs, model) { |
| 150 this.menu_ = menu; | 166 this.menu_ = menu; |
| 151 this.attrs = attrs; | 167 this.attrs = attrs; |
| 152 menu.addHandlers(this, this); | 168 menu.addHandlers(this, this); |
| 153 if (attrs.command_id == menu.config_.IDC_ZOOM_PLUS) { | 169 if (attrs.command_id == menu.config_.IDC_ZOOM_PLUS) { |
| 154 this.textContent = '+'; | 170 this.textContent = '+'; |
| 155 } | 171 } |
| 156 if (this.attrs.font) { | 172 if (this.attrs.font) { |
| 157 this.style.font = attrs.font; | 173 this.style.font = attrs.font; |
| 158 } | 174 } |
| 159 }, | 175 }, |
| 160 | 176 |
| 161 /** | 177 /** |
| 162 * Activate zoom plus and full screen commands. | 178 * Activate zoom plus and full screen commands. |
| 179 * @this {ZoomCommand} | |
| 163 * @override | 180 * @override |
| 164 */ | 181 */ |
| 165 activate: function() { | 182 activate: function() { |
| 166 sendActivate(this.menu_.getMenuItemIndexOf(this), | 183 sendActivate(this.menu_.getMenuItemIndexOf(this), |
| 167 this.attrs.command_id == this.menu_.config_.IDC_ZOOM_PLUS ? | 184 this.attrs.command_id == this.menu_.config_.IDC_ZOOM_PLUS ? |
| 168 'activate_no_close' : 'close_and_activate'); | 185 'activate_no_close' : 'close_and_activate'); |
| 169 }, | 186 }, |
| 170 }; | 187 }; |
| 171 | 188 |
| 172 /** | 189 /** |
| 173 * ZoomMenuItem which has plus and fullscreen buttons inside. | 190 * ZoomMenuItem which has plus and fullscreen buttons inside. |
| 191 * @constructor | |
| 192 * @extends {HTMLDivElement} | |
| 174 */ | 193 */ |
| 175 var ZoomMenuItem = cr.ui.define('div'); | 194 var ZoomMenuItem = cr.ui.define('div'); |
| 176 | 195 |
| 177 ZoomMenuItem.prototype = { | 196 ZoomMenuItem.prototype = { |
| 178 __proto__: MenuItem.prototype, | 197 __proto__: MenuItem.prototype, |
| 179 | 198 |
| 180 /** | 199 /** |
| 181 * Decorate Zoom button item. | 200 * Decorate Zoom button item. |
| 201 * @this {ZoomMenuItem} | |
| 182 */ | 202 */ |
| 183 decorate: function() { | 203 decorate: function() { |
| 184 this.className = 'menu-item'; | 204 this.className = 'menu-item'; |
| 185 | 205 |
| 186 this.label_ = document.createElement('div'); | 206 this.label_ = document.createElement('div'); |
| 187 this.label_.className = 'menu-label'; | 207 this.label_.className = 'menu-label'; |
| 188 this.minus_ = document.createElement('div'); | 208 this.minus_ = document.createElement('div'); |
| 189 this.minus_.className = 'zoom-button left-button'; | 209 this.minus_.className = 'zoom-button left-button'; |
| 190 this.minus_.textContent = '-'; | 210 this.minus_.textContent = '-'; |
| 191 this.plus_ = new ZoomCommand(); | 211 this.plus_ = new ZoomCommand(); |
| 192 this.plus_.className = 'zoom-button right-button'; | 212 this.plus_.className = 'zoom-button right-button'; |
| 193 this.percent_ = document.createElement('div'); | 213 this.percent_ = document.createElement('div'); |
| 194 this.percent_.className = 'zoom-percent center-button'; | 214 this.percent_.className = 'zoom-percent center-button'; |
| 195 this.fullscreen_ = new ZoomCommand(); | 215 this.fullscreen_ = new ZoomCommand(); |
| 196 this.fullscreen_.className = 'fullscreen'; | 216 this.fullscreen_.className = 'fullscreen'; |
| 197 | 217 |
| 198 this.appendChild(this.label_); | 218 this.appendChild(this.label_); |
| 199 this.appendChild(this.minus_); | 219 this.appendChild(this.minus_); |
| 200 this.appendChild(this.percent_); | 220 this.appendChild(this.percent_); |
| 201 this.appendChild(this.plus_); | 221 this.appendChild(this.plus_); |
| 202 this.appendChild(this.fullscreen_); | 222 this.appendChild(this.fullscreen_); |
| 203 }, | 223 }, |
| 204 | 224 |
| 205 /** | 225 /** |
| 206 * Activates the cut command. | 226 * Activates the cut command. |
| 227 * @this {ZoomMenuItem} | |
| 207 * @override | 228 * @override |
| 208 */ | 229 */ |
| 209 activate: function() { | 230 activate: function() { |
| 210 sendActivate(this.menu_.getMenuItemIndexOf(this), | 231 sendActivate(this.menu_.getMenuItemIndexOf(this), |
| 211 'activate_no_close'); | 232 'activate_no_close'); |
| 212 }, | 233 }, |
| 213 | 234 |
| 214 /** | 235 /** |
| 215 * Updates zoom controls. | 236 * Updates zoom controls. |
| 216 * @params {JSON} params JSON object to configure zoom controls. | 237 * @param {JSON} params JSON object to configure zoom controls. |
| 238 * @this {ZoomMenuItem} | |
| 217 */ | 239 */ |
| 218 updateZoomControls: function(params) { | 240 updateZoomControls: function(params) { |
| 219 this.attrs.enabled = params.plus; | 241 this.attrs.enabled = params.plus; |
| 220 if (params.plus) { | 242 if (params.plus) { |
| 221 this.plus_.classList.remove('disabled'); | 243 this.plus_.classList.remove('disabled'); |
| 222 } else { | 244 } else { |
| 223 this.plus_.classList.add('disabled'); | 245 this.plus_.classList.add('disabled'); |
| 224 } | 246 } |
| 225 this.attrs.enabled = params.minus; | 247 this.attrs.enabled = params.minus; |
| 226 if (params.minus) { | 248 if (params.minus) { |
| 227 this.classList.remove('disabled'); | 249 this.classList.remove('disabled'); |
| 228 } else { | 250 } else { |
| 229 this.classList.add('disabled'); | 251 this.classList.add('disabled'); |
| 230 } | 252 } |
| 231 this.percent_.textContent = params.percent; | 253 this.percent_.textContent = params.percent; |
| 232 }, | 254 }, |
| 233 | 255 |
| 234 /** | 256 /** |
| 235 * @override | 257 * @override |
| 258 * @this {ZoomMenuItem} | |
| 236 */ | 259 */ |
| 237 set selected(selected) { | 260 set selected(selected) { |
| 238 if (selected) { | 261 if (selected) { |
| 239 this.minus_.classList.add('selected'); | 262 this.minus_.classList.add('selected'); |
| 240 this.menu_.selectedItem = this; | 263 this.menu_.selectedItem = this; |
| 241 } else { | 264 } else { |
| 242 this.minus_.classList.remove('selected'); | 265 this.minus_.classList.remove('selected'); |
| 243 } | 266 } |
| 244 }, | 267 }, |
| 245 | 268 |
| 246 /** | 269 /** |
| 247 * Initializes the zoom menu item with configuration info. | 270 * Initializes the zoom menu item with configuration info. |
| 248 * @override | 271 * @override |
| 272 * @this {ZoomMenuItem} | |
| 249 */ | 273 */ |
| 250 initMenuItem_: function() { | 274 initMenuItem_: function() { |
| 251 this.label_.textContent = | 275 this.label_.textContent = |
| 252 this.menu_.config_.IDS_ZOOM_MENU2; | 276 this.menu_.config_.IDS_ZOOM_MENU2; |
| 253 this.menu_.addHandlers(this, this.minus_); | 277 this.menu_.addHandlers(this, this.minus_); |
| 254 | 278 |
| 255 if (this.attrs.font) { | 279 if (this.attrs.font) { |
| 256 this.label_.style.font = this.attrs.font; | 280 this.label_.style.font = this.attrs.font; |
| 257 this.minus_.style.font = this.attrs.font; | 281 this.minus_.style.font = this.attrs.font; |
| 258 this.percent_.style.font = this.attrs.font; | 282 this.percent_.style.font = this.attrs.font; |
| 259 } | 283 } |
| 260 }, | 284 }, |
| 261 }; | 285 }; |
| 262 | 286 |
| 263 /** | 287 /** |
| 264 * WrenchMenu | 288 * WrenchMenu |
| 289 * @constructor | |
| 290 * @extends {HTMLDivElement} | |
|
Dan Beam
2012/05/07 17:43:53
same here with this probably extending Menu.
kmadhusu
2012/05/08 20:20:19
Since we are going to remove this file in the near
| |
| 265 */ | 291 */ |
| 266 var WrenchMenu = cr.ui.define('div'); | 292 var WrenchMenu = cr.ui.define('div'); |
| 267 | 293 |
| 268 WrenchMenu.prototype = { | 294 WrenchMenu.prototype = { |
| 269 __proto__: Menu.prototype, | 295 __proto__: Menu.prototype, |
| 270 | 296 |
| 271 /** | 297 /** |
| 272 * Decorate Zoom button item. | 298 * Decorate Zoom button item. |
| 299 * @this {WrenchMenu} | |
| 273 */ | 300 */ |
| 274 decorate: function() { | 301 decorate: function() { |
| 275 Menu.prototype.decorate.call(this); | 302 Menu.prototype.decorate.call(this); |
| 276 this.edit_ = new EditMenuItem(); | 303 this.edit_ = new EditMenuItem(); |
| 277 this.zoom_ = new ZoomMenuItem(); | 304 this.zoom_ = new ZoomMenuItem(); |
| 278 }, | 305 }, |
| 279 | 306 |
| 280 /** | 307 /** |
| 281 * Create a MenuItem for given {@code attrs}. | 308 * Create a MenuItem for given {@code attrs}. |
| 282 * @override | 309 * @override |
| 310 * @this {WrenchMenu} | |
| 283 */ | 311 */ |
| 284 createMenuItem: function(attrs) { | 312 createMenuItem: function(attrs) { |
| 285 switch(attrs.command_id) { | 313 switch (attrs.command_id) { |
| 286 case this.config_.IDC_CUT: | 314 case this.config_.IDC_CUT: |
| 287 return this.edit_; | 315 return this.edit_; |
| 288 case this.config_.IDC_COPY: | 316 case this.config_.IDC_COPY: |
| 289 return this.edit_.copy_; | 317 return this.edit_.copy_; |
| 290 case this.config_.IDC_PASTE: | 318 case this.config_.IDC_PASTE: |
| 291 return this.edit_.paste_; | 319 return this.edit_.paste_; |
| 292 case this.config_.IDC_ZOOM_MINUS: | 320 case this.config_.IDC_ZOOM_MINUS: |
| 293 return this.zoom_; | 321 return this.zoom_; |
| 294 case this.config_.IDC_ZOOM_PLUS: | 322 case this.config_.IDC_ZOOM_PLUS: |
| 295 return this.zoom_.plus_; | 323 return this.zoom_.plus_; |
| 296 case this.config_.IDC_FULLSCREEN: | 324 case this.config_.IDC_FULLSCREEN: |
| 297 return this.zoom_.fullscreen_; | 325 return this.zoom_.fullscreen_; |
| 298 default: | 326 default: |
| 299 return new MenuItem(); | 327 return new MenuItem(); |
| 300 } | 328 } |
| 301 }, | 329 }, |
| 302 | 330 |
| 331 /** | |
| 332 * @this {WrenchMenu} | |
| 333 */ | |
| 303 updateZoomControls: function(params) { | 334 updateZoomControls: function(params) { |
| 304 this.zoom_.updateZoomControls(params); | 335 this.zoom_.updateZoomControls(params); |
| 305 }, | 336 }, |
| 306 }; | 337 }; |
| 307 | 338 |
| 308 function updateZoomControls(params) { | 339 function updateZoomControls(params) { |
| 309 var menu = document.getElementById('viewport'); | 340 var menu = $('viewport'); |
| 310 menu.updateZoomControls(params); | 341 menu.updateZoomControls(params); |
| 311 } | 342 } |
| OLD | NEW |