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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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, 2 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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';
(...skipping 29 matching lines...) Expand all
40 * @private 40 * @private
41 */ 41 */
42 this.onShow_ = opt_onShow; 42 this.onShow_ = opt_onShow;
43 43
44 /** 44 /**
45 * @type {undefined|function():void} 45 * @type {undefined|function():void}
46 * @private 46 * @private
47 */ 47 */
48 this.onHide_ = opt_onHide; 48 this.onHide_ = opt_onHide;
49 49
50 /**
51 * Create a "click-trap" div covering the entire document, but below the
52 * menu in the z-order. This ensures the the menu can be closed by clicking
53 * anywhere. Note that adding this event handler to <body> is not enough,
54 * because elements can prevent event propagation; specifically, the client
55 * plugin element does this.
Wez 2014/09/25 01:47:17 Great description! Even an idiot like me could mai
56 *
57 * @type {HTMLElement}
58 * @private
59 */
60 this.clickTrap_ = /** @type {HTMLElement} */ (document.createElement('div'));
61 this.clickTrap_.classList.add('menu-button-click-trap');
62
50 /** @type {remoting.MenuButton} */ 63 /** @type {remoting.MenuButton} */
51 var that = this; 64 var that = this;
52 65
53 /** 66 var closeHandler = function() {
54 * @type {function(Event):void}
55 * @private
56 */
57 var closeHandler = function(event) {
58 that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); 67 that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
59 document.body.removeEventListener('click', closeHandler, false); 68 container.removeChild(that.clickTrap_);
60 if (that.onHide_) { 69 if (that.onHide_) {
61 that.onHide_(); 70 that.onHide_();
62 } 71 }
63 }; 72 };
64 73
65 /** 74 var onClick = function() {
66 * @type {function(Event):void}
67 * @private
68 */
69 var onClick = function(event) {
70 if (that.onShow_) { 75 if (that.onShow_) {
71 that.onShow_(); 76 that.onShow_();
72 } 77 }
73 that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); 78 that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
74 document.body.addEventListener('click', closeHandler, false); 79 container.appendChild(that.clickTrap_);
75 event.stopPropagation();
76 }; 80 };
77 81
78 this.button_.addEventListener('click', onClick, false); 82 this.button_.addEventListener('click', onClick, false);
83 this.clickTrap_.addEventListener('click', closeHandler, false);
84 this.menu_.addEventListener('click', closeHandler, false);
79 }; 85 };
80 86
81 /** 87 /**
82 * @return {HTMLElement} The button that activates the menu. 88 * @return {HTMLElement} The button that activates the menu.
83 */ 89 */
84 remoting.MenuButton.prototype.button = function() { 90 remoting.MenuButton.prototype.button = function() {
85 return this.button_; 91 return this.button_;
86 }; 92 };
87 93
88 /** 94 /**
(...skipping 12 matching lines...) Expand all
101 remoting.MenuButton.select = function(item, selected) { 107 remoting.MenuButton.select = function(item, selected) {
102 if (selected) { 108 if (selected) {
103 /** @type {DOMTokenList} */(item.classList).add('selected'); 109 /** @type {DOMTokenList} */(item.classList).add('selected');
104 } else { 110 } else {
105 /** @type {DOMTokenList} */(item.classList).remove('selected'); 111 /** @type {DOMTokenList} */(item.classList).remove('selected');
106 } 112 }
107 }; 113 };
108 114
109 /** @const @private */ 115 /** @const @private */
110 remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active'; 116 remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active';
OLDNEW
« 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