Chromium Code Reviews Chromium Code Reviews
Issue 592793003:
Make pop-up menus more easily dismissable. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: remoting/webapp/menu_button.js |
| diff --git a/remoting/webapp/menu_button.js b/remoting/webapp/menu_button.js |
| index 73c7642d1e12995b339dc54294ea9219f16a66a0..ce09776114a9cd11e58f11df70fba6c45529a78f 100644 |
| --- a/remoting/webapp/menu_button.js |
| +++ b/remoting/webapp/menu_button.js |
| @@ -47,35 +47,41 @@ remoting.MenuButton = function(container, opt_onShow, opt_onHide) { |
| */ |
| this.onHide_ = opt_onHide; |
| - /** @type {remoting.MenuButton} */ |
| - var that = this; |
| - |
| /** |
| - * @type {function(Event):void} |
| + * Create a "click-trap" div covering the entire document, but below the |
| + * menu in the z-order. This ensures the the menu can be closed by clicking |
| + * anywhere. Note that adding this event handler to <body> is not enough, |
| + * because elements can prevent event propagation; specifically, the client |
| + * plugin element does this. |
|
Wez
2014/09/25 01:47:17
Great description! Even an idiot like me could mai
|
| + * |
| + * @type {HTMLElement} |
| * @private |
| */ |
| - var closeHandler = function(event) { |
| + this.clickTrap_ = /** @type {HTMLElement} */ (document.createElement('div')); |
| + this.clickTrap_.classList.add('menu-button-click-trap'); |
| + |
| + /** @type {remoting.MenuButton} */ |
| + var that = this; |
| + |
| + var closeHandler = function() { |
| that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
| - document.body.removeEventListener('click', closeHandler, false); |
| + container.removeChild(that.clickTrap_); |
| if (that.onHide_) { |
| that.onHide_(); |
| } |
| }; |
| - /** |
| - * @type {function(Event):void} |
| - * @private |
| - */ |
| - var onClick = function(event) { |
| + var onClick = function() { |
| if (that.onShow_) { |
| that.onShow_(); |
| } |
| that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
| - document.body.addEventListener('click', closeHandler, false); |
| - event.stopPropagation(); |
| + container.appendChild(that.clickTrap_); |
| }; |
| this.button_.addEventListener('click', onClick, false); |
| + this.clickTrap_.addEventListener('click', closeHandler, false); |
| + this.menu_.addEventListener('click', closeHandler, false); |
| }; |
| /** |
