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