Index: remoting/webapp/menu_button.js |
diff --git a/remoting/webapp/menu_button.js b/remoting/webapp/menu_button.js |
index 225e0e79c409bca120bda26aab2607cd763f0af8..ec67b8e57423ff66be3d0fb495c25cf8d5bd62e2 100644 |
--- a/remoting/webapp/menu_button.js |
+++ b/remoting/webapp/menu_button.js |
@@ -20,75 +20,41 @@ var remoting = remoting || {}; |
* menu is shown. |
*/ |
remoting.MenuButton = function(container, opt_onShow) { |
- /** |
- * @type {HTMLElement} |
- * @private |
- */ |
- this.button_ = /** @type {HTMLElement} */ |
+ /** @type {HTMLElement} */ |
+ var button = /** @type {HTMLElement} */ |
(container.querySelector('button,.menu-button-activator')); |
- /** |
- * @type {undefined|function():void} |
- * @private |
- */ |
- this.onShow_ = opt_onShow; |
- |
- /** @type {remoting.MenuButton} */ |
- var that = this; |
- |
- // Create event handlers to show and hide the menu, attached to the button |
- // and the document <html> tag, respectively. These handlers are added and |
- // removed depending on the state of the menu. To prevent both triggering |
- // for one click, they are added by a timer. |
- /** |
- * @type {function(Event):void} |
- * @private |
- */ |
- this.onClick_ = function(event) { |
- if (that.onShow_) { |
- that.onShow_(); |
- } |
- that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
- that.button_.removeEventListener('click', that.onClick_, false); |
- window.setTimeout( |
- function() { |
- // Attach the click handler to the <html> node so that it includes |
- // the document area outside the plugin, which is not covered by |
- // the <body> node. |
- var htmlNode = document.body.parentNode; |
- htmlNode.addEventListener('click', that.closeHandler_, true); |
- }, |
- 100); |
+ /** @param {Event} event */ |
+ var closeHandler = function(event) { |
+ button.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
+ document.body.removeEventListener('click', closeHandler, false); |
}; |
- /** |
- * @type {function(Event):void} |
- * @private |
- */ |
- this.closeHandler_ = function(event) { |
- that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
- document.body.removeEventListener('click', that.closeHandler_, true); |
- window.setTimeout( |
- function() { |
- that.button_.addEventListener('click', that.onClick_, false); |
- }, |
- 100); |
+ /** @param {Event} event */ |
+ var onClick = function(event) { |
+ if (opt_onShow) { |
+ opt_onShow(); |
+ } |
+ button.classList.toggle(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
+ document.body.addEventListener('click', closeHandler, false); |
+ // Make sure that close handler doesn't fire for this event. |
+ event.stopPropagation(); |
}; |
- this.button_.addEventListener('click', this.onClick_, false); |
+ container.addEventListener('click', onClick, false); |
}; |
/** |
* Set or unset the selected state of an <li> menu item. |
- * @param {HTMLElement} item The menu item to update. |
+ * @param {Element} item The menu item to update. |
Jamie
2014/07/17 17:04:03
Previously, this was only ever called with the res
|
* @param {boolean} selected True to select the item, false to deselect it. |
* @return {void} Nothing. |
*/ |
remoting.MenuButton.select = function(item, selected) { |
if (selected) { |
- item.classList.add('selected'); |
+ /** @type {DOMTokenList} */(item.classList).add('selected'); |
} else { |
- item.classList.remove('selected'); |
+ /** @type {DOMTokenList} */(item.classList).remove('selected'); |
} |
}; |