chrome/browser/resources/wrench_menu.js

// Copyright (c) 2010 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * ButtonCommand class for small buttons on menu items.
 */
var ButtonCommand = cr.ui.define('div');

ButtonCommand.prototype = {
  __proto__: HTMLDivElement.prototype,

  /**
   * Decorate Button item.
   */
  decorate: function() {
  },

  /**
   * Changes the selection state of the menu item.
   * @param {boolean} selected True to set the selection, or false otherwise.
   */
  set selected(selected) {
    if (selected) {
      this.classList.add('selected');
      this.menu_.selectedItem = this;
    } else {
      this.classList.remove('selected');
    }
  },

  /**
   * Activate the menu item.
   */
  activate: function() {
    sendActivate(this.menu_.getMenuItemIndexOf(this),
                 'close_and_activate');
  },
};

/**
 * EditCommand implements Copy and Paste command.
 */
var EditCommand = cr.ui.define('div');

EditCommand.prototype = {
  __proto__: ButtonCommand.prototype,

  /**
   * Initialize the menu item.
   * @override
   */
  init: function(menu, attrs, model) {
    this.menu_ = menu;
    this.attrs = attrs;
    if (this.attrs.font) {
      this.style.font = attrs.font;
    }
    menu.addHandlers(this, this);
    if (attrs.command_id == menu.config_.IDC_COPY) {
      menu.addLabelTo(this, menu.config_.IDS_COPY, this,
                      false /* no mnemonic */);
    } else {
      menu.addLabelTo(this, menu.config_.IDS_PASTE, this,
                      false /* no mnemonic */);
    }
  },
};

/**
 * EditMenuItem which has Copy and Paste commands inside.
 */
var EditMenuItem = cr.ui.define('div');

EditMenuItem.prototype = {
  __proto__: MenuItem.prototype,

  /**
   * Initialize
   */
  decorate: function() {
    this.className = 'menu-item';
    this.label_ = document.createElement('div');
    this.label_.className = 'menu-label';
    this.cut_ = document.createElement('div');
    this.cut_.className = 'edit-button left-button';
    this.copy_ = new EditCommand();
    this.copy_.className = 'edit-button center-button';
    this.paste_ = new EditCommand();
    this.paste_.className = 'edit-button right-button';

    this.appendChild(this.label_);
    this.appendChild(this.cut_);
    this.appendChild(this.copy_);
    this.appendChild(this.paste_);
  },

  /**
   * Activates the command.
   * @override
   */
  activate: function() {
    sendActivate(this.menu_.getMenuItemIndexOf(this),
                 'close_and_activate');
  },

  /**
   * @override
   */
  set selected(selected) {
    if (selected) {
      this.cut_.classList.add('selected');
      this.menu_.selectedItem = this;
    } else {
      this.cut_.classList.remove('selected');
    }
  },

  /**
   * Initialize the edit items with configuration info.
   * @override
   */
  initMenuItem_: function() {
    this.label_.textContent =
        this.menu_.config_.IDS_EDIT2;
    if (this.attrs.font) {
      this.label_.style.font = this.attrs.font;
      this.cut_.style.font = this.attrs.font;
    }
    this.menu_.addLabelTo(
        this, this.menu_.config_.IDS_CUT, this.cut_,
        false /* no mnemonic */);
    this.menu_.addHandlers(this, this.cut_);
  },
};

/**
 * ZoomCommand class implements Zoom plus and fullscreen.
 */
var ZoomCommand = cr.ui.define('div');

ZoomCommand.prototype = {
  __proto__: ButtonCommand.prototype,

  /**
   * Initialize the menu item.
   * @override
   */
  init: function(menu, attrs, model) {
    this.menu_ = menu;
    this.attrs = attrs;
    menu.addHandlers(this, this);
    if (attrs.command_id == menu.config_.IDC_ZOOM_PLUS) {
      this.textContent = '+';
    }
    if (this.attrs.font) {
      this.style.font = attrs.font;
    }
  },

  /**
   * Activate zoom plus and full screen commands.
   * @override
   */
  activate: function() {
    sendActivate(this.menu_.getMenuItemIndexOf(this),
                 this.attrs.command_id == this.menu_.config_.IDC_ZOOM_PLUS ?
                 'activate_no_close' : 'close_and_activate');
  },
};

/**
 * ZoomMenuItem which has plus and fullscreen buttons inside.
 */
var ZoomMenuItem = cr.ui.define('div');

ZoomMenuItem.prototype = {
  __proto__: MenuItem.prototype,

  /**
   * Decorate Zoom button item.
   */
  decorate: function() {
    this.className = 'menu-item';

    this.label_ = document.createElement('div');
    this.label_.className = 'menu-label';
    this.minus_ = document.createElement('div');
    this.minus_.className = 'zoom-button left-button';
    this.minus_.textContent = '-';
    this.plus_ = new ZoomCommand();
    this.plus_.className = 'zoom-button right-button';
    this.percent_ = document.createElement('div');
    this.percent_.className = 'zoom-percent center-button';
    this.fullscreen_ = new ZoomCommand();
    this.fullscreen_.className = 'fullscreen';

    this.appendChild(this.label_);
    this.appendChild(this.minus_);
    this.appendChild(this.percent_);
    this.appendChild(this.plus_);
    this.appendChild(this.fullscreen_);
  },

  /**
   * Activates the cut command.
   * @override
   */
  activate: function() {
    sendActivate(this.menu_.getMenuItemIndexOf(this),
                 'activate_no_close');
  },

  /**
   * Updates zoom controls.
   * @params {JSON} params JSON object to configure zoom controls.
   */
  updateZoomControls: function(params) {
    this.attrs.enabled = params.plus;
    if (params.plus) {
      this.plus_.classList.remove('disabled');
    } else {
      this.plus_.classList.add('disabled');
    }
    this.attrs.enabled = params.minus;
    if (params.minus) {
      this.classList.remove('disabled');
    } else {
      this.classList.add('disabled');
    }
    this.percent_.textContent = params.percent;
  },

  /**
   * @override
   */
  set selected(selected) {
    if (selected) {
      this.minus_.classList.add('selected');
      this.menu_.selectedItem = this;
    } else {
      this.minus_.classList.remove('selected');
    }
  },

  /**
   * Initializes the zoom menu item with configuration info.
   * @override
   */
  initMenuItem_: function() {
    this.label_.textContent =
        this.menu_.config_.IDS_ZOOM_MENU2;
    this.menu_.addHandlers(this, this.minus_);

    if (this.attrs.font) {
      this.label_.style.font = this.attrs.font;
      this.minus_.style.font = this.attrs.font;
      this.percent_.style.font = this.attrs.font;
    }
  },
};

/**
 * WrenchMenu
 */
var WrenchMenu = cr.ui.define('div');

WrenchMenu.prototype = {
  __proto__: Menu.prototype,

  /**
   * Decorate Zoom button item.
   */
  decorate: function() {
    Menu.prototype.decorate.call(this);
    this.edit_ = new EditMenuItem();
    this.zoom_ = new ZoomMenuItem();
  },

  /**
   * Create a MenuItem for given {@code attrs}.
   * @override
   */
  createMenuItem: function(attrs) {
    switch(attrs.command_id) {
      case this.config_.IDC_CUT:
        return this.edit_;
      case this.config_.IDC_COPY:
        return this.edit_.copy_;
      case this.config_.IDC_PASTE:
        return this.edit_.paste_;
      case this.config_.IDC_ZOOM_MINUS:
        return this.zoom_;
      case this.config_.IDC_ZOOM_PLUS:
        return this.zoom_.plus_;
      case this.config_.IDC_FULLSCREEN:
        return this.zoom_.fullscreen_;
      default:
        return new MenuItem();
    }
  },

  updateZoomControls: function(params) {
    this.zoom_.updateZoomControls(params);
  },
};

function updateZoomControls(params) {
  var menu = document.getElementById('viewport');
  menu.updateZoomControls(params);
}