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
5cr.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   */
12  var BubbleButton = cr.ui.define('span');
13
14  BubbleButton.prototype = {
15    __proto__: HTMLSpanElement.prototype,
16
17    /**
18     * Decorates the base element to show the proper icon.
19     */
20    decorate: function() {
21      this.className = 'bubble-button';
22      this.location = cr.ui.ArrowLocation.TOP_END;
23      this.image = document.createElement('div');
24      this.image.tabIndex = 0;
25      this.image.setAttribute('role', 'button');
26      this.image.addEventListener('click', this);
27      this.image.addEventListener('keydown', this);
28      this.image.addEventListener('mousedown', this);
29      this.appendChild(this.image);
30    },
31
32    /**
33     * Whether the button is currently showing a bubble.
34     * @type {boolean}
35     */
36    get showingBubble() {
37      return this.image.classList.contains('showing-bubble');
38    },
39    set showingBubble(showing) {
40      this.image.classList.toggle('showing-bubble', showing);
41    },
42
43    /**
44     * Handle mouse and keyboard events, allowing the user to open and close an
45     * informative bubble.
46     * @param {Event} event Mouse or keyboard event.
47     */
48    handleEvent: function(event) {
49      switch (event.type) {
50        // Toggle the bubble on left click. Let any other clicks propagate.
51        case 'click':
52          if (event.button != 0)
53            return;
54          break;
55        // Toggle the bubble when <Return> or <Space> is pressed. Let any other
56        // key presses propagate.
57        case 'keydown':
58          switch (event.keyCode) {
59            case 13:  // Return.
60            case 32:  // Space.
61              break;
62            default:
63              return;
64          }
65          break;
66        // Blur focus when a mouse button is pressed, matching the behavior of
67        // other Web UI elements.
68        case 'mousedown':
69          if (document.activeElement)
70            document.activeElement.blur();
71          event.preventDefault();
72          return;
73      }
74      this.toggleBubble_();
75      event.preventDefault();
76      event.stopPropagation();
77    },
78  };
79
80  // Export.
81  return {
82    BubbleButton: BubbleButton
83  };
84});
85