src/ui/webui/resources/js/cr/ui/bubble_button.js

   1 // Copyright (c) 2013 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 cr.define('cr.ui', function() {
   6   /**
   7    * An image button that brings up an informative bubble when activated by
   8    * keyboard or mouse.
   9    * @constructor
  10    * @extends {HTMLSpanElement}
  11    * @implements {EventListener}
  12    */
  13   var BubbleButton = cr.ui.define('span');
  14
  15   BubbleButton.prototype = {
  16     __proto__: HTMLSpanElement.prototype,
  17
  18     /**
  19      * Decorates the base element to show the proper icon.
  20      */
  21     decorate: function() {
  22       this.className = 'bubble-button';
  23       this.location = cr.ui.ArrowLocation.TOP_END;
  24       this.image = document.createElement('div');
  25       this.image.tabIndex = 0;
  26       this.image.setAttribute('role', 'button');
  27       this.image.addEventListener('click', this);
  28       this.image.addEventListener('keydown', this);
  29       this.image.addEventListener('mousedown', this);
  30       this.appendChild(this.image);
  31     },
  32
  33     /**
  34      * Whether the button is currently showing a bubble.
  35      * @type {boolean}
  36      */
  37     get showingBubble() {
  38       return this.image.classList.contains('showing-bubble');
  39     },
  40     set showingBubble(showing) {
  41       this.image.classList.toggle('showing-bubble', showing);
  42     },
  43
  44     /**
  45      * Handle mouse and keyboard events, allowing the user to open and close an
  46      * informative bubble.
  47      * @param {Event} event Mouse or keyboard event.
  48      */
  49     handleEvent: function(event) {
  50       switch (event.type) {
  51         // Toggle the bubble on left click. Let any other clicks propagate.
  52         case 'click':
  53           if (event.button != 0)
  54             return;
  55           break;
  56         // Toggle the bubble when <Return> or <Space> is pressed. Let any other
  57         // key presses propagate.
  58         case 'keydown':
  59           switch (event.keyCode) {
  60             case 13:  // Return.
  61             case 32:  // Space.
  62               break;
  63             default:
  64               return;
  65           }
  66           break;
  67         // Blur focus when a mouse button is pressed, matching the behavior of
  68         // other Web UI elements.
  69         case 'mousedown':
  70           if (document.activeElement)
  71             document.activeElement.blur();
  72           event.preventDefault();
  73           return;
  74       }
  75       this.toggleBubble();
  76       event.preventDefault();
  77       event.stopPropagation();
  78     },
  79
  80     /**
  81      * Abstract method: subclasses should overwrite it. There is no way to mark
  82      *     method as abstract for Closure Compiler, as of
  83      *     https://github.com/google/closure-compiler/issues/104.
  84      * @type {!Function|undefined}
  85      * @protected
  86      */
  87     toggleBubble: assertNotReached,
  88   };
  89
  90   // Export.
  91   return {
  92     BubbleButton: BubbleButton
  93   };
  94 });