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 } 312
