chrome/browser/resources/chromeos/wrench_menu.js

   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 }