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 |