// 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); }