Home | History | Annotate | Download | only in js 
      1 // Copyright (c) 2012 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 'use strict';
      6 
      7 /**
      8  * @fileoverview This implements a common button control, bound to command.
      9  */
     10 
     11 /**
     12  * Creates a new button element.
     13  * @param {Object=} opt_propertyBag Optional properties.
     14  * @constructor
     15  * @extends {HTMLDivElement}
     16  */
     17  var CommandButton = cr.ui.define('button');
     18 
     19 /** @override */
     20 CommandButton.prototype.__proto__ = HTMLButtonElement.prototype;
     21 
     22 /**
     23  * Associated command.
     24  * @type {Command}
     25  * @private
     26  */
     27 CommandButton.prototype.command_ = null;
     28 
     29 /**
     30  * Initializes the menu item.
     31  */
     32 CommandButton.prototype.decorate = function() {
     33   var commandId;
     34   if ((commandId = this.getAttribute('command')))
     35     this.setCommand(commandId);
     36 
     37   this.addEventListener('click', this.handleClick_.bind(this));
     38   this.addEventListener('keypress', this.handleKeyPress_.bind(this));
     39 };
     40 
     41 /**
     42  * Returns associated command.
     43  * @return {cr.ui.Command} associated command.
     44  */
     45 CommandButton.prototype.getCommand = function() {
     46   return this.command_;
     47 };
     48 
     49 /**
     50  * Associates command with this button.
     51  * @param {string|cr.ui.Command} command Command id, or command object to
     52  * associate with this button.
     53  */
     54 CommandButton.prototype.setCommand = function(command) {
     55   if (this.command_) {
     56     this.command_.removeEventListener('labelChange', this);
     57     this.command_.removeEventListener('disabledChange', this);
     58     this.command_.removeEventListener('hiddenChange', this);
     59   }
     60 
     61   if (typeof command == 'string' && command[0] == '#') {
     62     command = this.ownerDocument.getElementById(command.slice(1));
     63     cr.ui.decorate(command, cr.ui.Command);
     64   }
     65 
     66   this.command_ = command;
     67   if (command) {
     68     if (command.id)
     69       this.setAttribute('command', '#' + command.id);
     70 
     71     this.setLabel(command.label);
     72     this.disabled = command.disabled;
     73     this.hidden = command.hidden;
     74 
     75     this.command_.addEventListener('labelChange', this);
     76     this.command_.addEventListener('disabledChange', this);
     77     this.command_.addEventListener('hiddenChange', this);
     78   }
     79 };
     80 
     81 /**
     82  * Returns button label
     83  * @return {string} Button label.
     84  */
     85 CommandButton.prototype.getLabel = function() {
     86   return this.textContent;
     87 };
     88 
     89 /**
     90  * Sets button label.
     91  * @param {string} label New button label.
     92  */
     93 CommandButton.prototype.setLabel = function(label) {
     94   this.textContent = label;
     95 };
     96 
     97 /**
     98  * Handles click event and dispatches associated command.
     99  * @param {Event} e The mouseup event object.
    100  * @private
    101  */
    102 CommandButton.prototype.handleClick_ = function(e) {
    103   if (!this.disabled && this.command_)
    104     this.command_.execute(this);
    105 };
    106 
    107 /**
    108  * Handles keypress event and dispatches associated command.
    109  * @param {Event} e The mouseup event object.
    110  * @private
    111  */
    112 CommandButton.prototype.handleKeyPress_ = function(e) {
    113   if (!this.command_) return;
    114 
    115   switch (util.getKeyModifiers(e) + e.keyCode) {
    116     case '13':  // Enter
    117     case '32':  // Space
    118       this.command_.execute(this);
    119       break;
    120   }
    121 };
    122 
    123 /**
    124  * Handles changes to the associated command.
    125  * @param {Event} e The event object.
    126  */
    127 CommandButton.prototype.handleEvent = function(e) {
    128   switch (e.type) {
    129     case 'disabledChange':
    130       this.disabled = this.command_.disabled;
    131       break;
    132     case 'hiddenChange':
    133       this.hidden = this.command_.hidden;
    134       break;
    135     case 'labelChange':
    136       this.setLabel(this.command_.label);
    137       break;
    138   }
    139 };
    140 
    141 /**
    142  * Whether the button is disabled or not.
    143  * @type {boolean}
    144  */
    145 cr.defineProperty(CommandButton, 'disabled',
    146                   cr.PropertyKind.BOOL_ATTR);
    147 
    148 /**
    149  * Whether the button is hidden or not.
    150  * @type {boolean}
    151  */
    152 cr.defineProperty(CommandButton, 'hidden',
    153                   cr.PropertyKind.BOOL_ATTR);
    154