OLD | NEW |
(Empty) | |
| 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 */ |
| 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 }); |
OLD | NEW |