Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(275)

Unified Diff: remoting/webapp/menu_button.js

Issue 592793003: Make pop-up menus more easily dismissable. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Added comment and fixed unit tests. Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « remoting/webapp/menu_button.css ('k') | remoting/webapp/unittests/menu_button_unittest.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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);
};
/**
« no previous file with comments | « remoting/webapp/menu_button.css ('k') | remoting/webapp/unittests/menu_button_unittest.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698