| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview | 6 * @fileoverview |
| 7 * Class representing a menu button and its associated menu items. | 7 * Class representing a menu button and its associated menu items. |
| 8 */ | 8 */ |
| 9 | 9 |
| 10 'use strict'; | 10 'use strict'; |
| 11 | 11 |
| 12 /** @suppress {duplicate} */ | 12 /** @suppress {duplicate} */ |
| 13 var remoting = remoting || {}; | 13 var remoting = remoting || {}; |
| 14 | 14 |
| 15 /** | 15 /** |
| 16 * @constructor | 16 * @constructor |
| 17 * @param {Element} container The element containing the <button> and <ul> | 17 * @param {Element} container The element containing the <button> and <ul> |
| 18 * elements comprising the menu. It should have the "menu-button" class. | 18 * elements comprising the menu. It should have the "menu-button" class. |
| 19 * @param {function():void=} opt_onShow Optional callback invoked before the | 19 * @param {function():void=} opt_onShow Optional callback invoked before the |
| 20 * menu is shown. | 20 * menu is shown. |
| 21 * @param {function():void=} opt_onHide Optional callback after before the |
| 22 * menu is hidden. |
| 21 */ | 23 */ |
| 22 remoting.MenuButton = function(container, opt_onShow) { | 24 remoting.MenuButton = function(container, opt_onShow, opt_onHide) { |
| 23 /** | 25 /** |
| 24 * @type {HTMLElement} | 26 * @type {HTMLElement} |
| 25 * @private | 27 * @private |
| 26 */ | 28 */ |
| 27 this.button_ = /** @type {HTMLElement} */ | 29 this.button_ = /** @type {HTMLElement} */ |
| 28 (container.querySelector('button,.menu-button-activator')); | 30 (container.querySelector('button,.menu-button-activator')); |
| 29 | 31 |
| 30 /** | 32 /** |
| 31 * @type {HTMLElement} | 33 * @type {HTMLElement} |
| 32 * @private | 34 * @private |
| 33 */ | 35 */ |
| 34 this.menu_ = /** @type {HTMLElement} */ (container.querySelector('ul')); | 36 this.menu_ = /** @type {HTMLElement} */ (container.querySelector('ul')); |
| 35 | 37 |
| 36 /** | 38 /** |
| 37 * @type {undefined|function():void} | 39 * @type {undefined|function():void} |
| 38 * @private | 40 * @private |
| 39 */ | 41 */ |
| 40 this.onShow_ = opt_onShow; | 42 this.onShow_ = opt_onShow; |
| 41 | 43 |
| 44 /** |
| 45 * @type {undefined|function():void} |
| 46 * @private |
| 47 */ |
| 48 this.onHide_ = opt_onHide; |
| 49 |
| 42 /** @type {remoting.MenuButton} */ | 50 /** @type {remoting.MenuButton} */ |
| 43 var that = this; | 51 var that = this; |
| 44 | 52 |
| 45 /** | 53 /** |
| 46 * @type {function(Event):void} | 54 * @type {function(Event):void} |
| 47 * @private | 55 * @private |
| 48 */ | 56 */ |
| 49 var closeHandler = function(event) { | 57 var closeHandler = function(event) { |
| 50 that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); | 58 that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
| 51 document.body.removeEventListener('click', closeHandler, true); | 59 document.body.removeEventListener('click', closeHandler, false); |
| 60 if (that.onHide_) { |
| 61 that.onHide_(); |
| 62 } |
| 52 }; | 63 }; |
| 53 | 64 |
| 54 /** | 65 /** |
| 55 * @type {function(Event):void} | 66 * @type {function(Event):void} |
| 56 * @private | 67 * @private |
| 57 */ | 68 */ |
| 58 var onClick = function(event) { | 69 var onClick = function(event) { |
| 59 if (that.onShow_) { | 70 if (that.onShow_) { |
| 60 that.onShow_(); | 71 that.onShow_(); |
| 61 } | 72 } |
| (...skipping 14 matching lines...) Expand all Loading... |
| 76 | 87 |
| 77 /** | 88 /** |
| 78 * @return {HTMLElement} The menu. | 89 * @return {HTMLElement} The menu. |
| 79 */ | 90 */ |
| 80 remoting.MenuButton.prototype.menu = function() { | 91 remoting.MenuButton.prototype.menu = function() { |
| 81 return this.menu_; | 92 return this.menu_; |
| 82 }; | 93 }; |
| 83 | 94 |
| 84 /** | 95 /** |
| 85 * Set or unset the selected state of an <li> menu item. | 96 * Set or unset the selected state of an <li> menu item. |
| 86 * @param {HTMLElement} item The menu item to update. | 97 * @param {Element} item The menu item to update. |
| 87 * @param {boolean} selected True to select the item, false to deselect it. | 98 * @param {boolean} selected True to select the item, false to deselect it. |
| 88 * @return {void} Nothing. | 99 * @return {void} Nothing. |
| 89 */ | 100 */ |
| 90 remoting.MenuButton.select = function(item, selected) { | 101 remoting.MenuButton.select = function(item, selected) { |
| 91 if (selected) { | 102 if (selected) { |
| 92 item.classList.add('selected'); | 103 /** @type {DOMTokenList} */(item.classList).add('selected'); |
| 93 } else { | 104 } else { |
| 94 item.classList.remove('selected'); | 105 /** @type {DOMTokenList} */(item.classList).remove('selected'); |
| 95 } | 106 } |
| 96 }; | 107 }; |
| 97 | 108 |
| 98 /** @const @private */ | 109 /** @const @private */ |
| 99 remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active'; | 110 remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active'; |
| OLD | NEW |