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