src/ui/webui/resources/js/cr/ui/context_menu_button.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 /**
   6  * @fileoverview This implements a special button that is useful for showing a
   7  * context menu.
   8  */
   9
  10 cr.define('cr.ui', function() {
  11   /** @const */ var MenuButton = cr.ui.MenuButton;
  12
  13   /**
  14    * Helper function for ContextMenuButton to find the first ancestor of the
  15    * button that has a context menu.
  16    * @param {!cr.ui.MenuButton} button The button to start the search from.
  17    * @return {HTMLElement} The found element or null if not found.
  18    */
  19   function getContextMenuTarget(button) {
  20     var el = button;
  21     do {
  22       el = el.parentNode;
  23     } while (el && !('contextMenu' in el));
  24     return el ? assertInstanceof(el, HTMLElement) : null;
  25   }
  26
  27   /**
  28    * Creates a new menu button which is used to show the context menu for an
  29    * ancestor that has a {@code contextMenu} property.
  30    * @param {Object=} opt_propertyBag Optional properties.
  31    * @constructor
  32    * @extends {cr.ui.MenuButton}
  33    */
  34   var ContextMenuButton = cr.ui.define('button');
  35
  36   ContextMenuButton.prototype = {
  37     __proto__: MenuButton.prototype,
  38
  39     /**
  40      * Override to return the contextMenu for the ancestor.
  41      * @override
  42      * @type {cr.ui.Menu}
  43      */
  44     get menu() {
  45       var target = getContextMenuTarget(this);
  46       return target && target.contextMenu;
  47     },
  48
  49     /** @override */
  50     decorate: function() {
  51       this.tabIndex = -1;
  52       this.addEventListener('mouseup', this);
  53       MenuButton.prototype.decorate.call(this);
  54     },
  55
  56     /** @override */
  57     handleEvent: function(e) {
  58       switch (e.type) {
  59         case 'mousedown':
  60           // Menu buttons prevent focus changes.
  61           var target = getContextMenuTarget(this);
  62           if (target)
  63             target.focus();
  64           break;
  65         case 'mouseup':
  66           // Stop mouseup to prevent selection changes.
  67           e.stopPropagation();
  68           break;
  69       }
  70       MenuButton.prototype.handleEvent.call(this, e);
  71     },
  72
  73     /**
  74      * Override MenuButton showMenu to allow the mousedown to be fully handled
  75      * before the menu is shown. This is important in case the mousedown
  76      * triggers command changes.
  77      * @param {boolean} shouldSetFocus Whether the menu should be focused after
  78      *     the menu is shown.
  79      */
  80     showMenu: function(shouldSetFocus) {
  81       var self = this;
  82       window.setTimeout(function() {
  83         MenuButton.prototype.showMenu.call(self, shouldSetFocus);
  84       }, 0);
  85     }
  86   };
  87
  88   // Export
  89   return {
  90     ContextMenuButton: ContextMenuButton
  91   };
  92 });