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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: remoting/webapp/menu_button.js

Issue 401623004: Add unit-tests for MenuButton and simplify implementation. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 6 years, 5 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 10 matching lines...) Expand all
21 */ 21 */
22 remoting.MenuButton = function(container, opt_onShow) { 22 remoting.MenuButton = function(container, opt_onShow) {
23 /** 23 /**
24 * @type {HTMLElement} 24 * @type {HTMLElement}
25 * @private 25 * @private
26 */ 26 */
27 this.button_ = /** @type {HTMLElement} */ 27 this.button_ = /** @type {HTMLElement} */
28 (container.querySelector('button,.menu-button-activator')); 28 (container.querySelector('button,.menu-button-activator'));
29 29
30 /** 30 /**
31 * @type {HTMLElement}
32 * @private
33 */
34 this.menu_ = /** @type {HTMLElement} */ (container.querySelector('ul'));
35
36 /**
31 * @type {undefined|function():void} 37 * @type {undefined|function():void}
32 * @private 38 * @private
33 */ 39 */
34 this.onShow_ = opt_onShow; 40 this.onShow_ = opt_onShow;
35 41
36 /** @type {remoting.MenuButton} */ 42 /** @type {remoting.MenuButton} */
37 var that = this; 43 var that = this;
38 44
39 // Create event handlers to show and hide the menu, attached to the button
40 // and the document <html> tag, respectively. These handlers are added and
41 // removed depending on the state of the menu. To prevent both triggering
42 // for one click, they are added by a timer.
43 /** 45 /**
44 * @type {function(Event):void} 46 * @type {function(Event):void}
45 * @private 47 * @private
46 */ 48 */
47 this.onClick_ = function(event) { 49 var closeHandler = function(event) {
48 if (that.onShow_) { 50 that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
49 that.onShow_(); 51 document.body.removeEventListener('click', closeHandler, true);
50 }
51 that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
52 that.button_.removeEventListener('click', that.onClick_, false);
53 window.setTimeout(
54 function() {
55 // Attach the click handler to the <html> node so that it includes
56 // the document area outside the plugin, which is not covered by
57 // the <body> node.
58 var htmlNode = document.body.parentNode;
59 htmlNode.addEventListener('click', that.closeHandler_, true);
60 },
61 100);
62 }; 52 };
63 53
64 /** 54 /**
65 * @type {function(Event):void} 55 * @type {function(Event):void}
66 * @private 56 * @private
67 */ 57 */
68 this.closeHandler_ = function(event) { 58 var onClick = function(event) {
69 that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); 59 if (that.onShow_) {
70 document.body.removeEventListener('click', that.closeHandler_, true); 60 that.onShow_();
71 window.setTimeout( 61 }
72 function() { 62 that.button_.classList.toggle(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
73 that.button_.addEventListener('click', that.onClick_, false); 63 document.body.addEventListener('click', closeHandler, false);
74 }, 64 event.stopPropagation();
75 100);
76 }; 65 };
77 66
78 this.button_.addEventListener('click', this.onClick_, false); 67 this.button_.addEventListener('click', onClick, false);
79 }; 68 };
80 69
81 /** 70 /**
71 * @return {HTMLElement} The button that activates the menu.
72 */
73 remoting.MenuButton.prototype.button = function() {
74 return this.button_;
75 };
76
77 /**
78 * @return {HTMLElement} The menu.
79 */
80 remoting.MenuButton.prototype.menu = function() {
81 return this.menu_;
82 };
83
84 /**
82 * Set or unset the selected state of an <li> menu item. 85 * Set or unset the selected state of an <li> menu item.
83 * @param {HTMLElement} item The menu item to update. 86 * @param {HTMLElement} item The menu item to update.
84 * @param {boolean} selected True to select the item, false to deselect it. 87 * @param {boolean} selected True to select the item, false to deselect it.
85 * @return {void} Nothing. 88 * @return {void} Nothing.
86 */ 89 */
87 remoting.MenuButton.select = function(item, selected) { 90 remoting.MenuButton.select = function(item, selected) {
88 if (selected) { 91 if (selected) {
89 item.classList.add('selected'); 92 item.classList.add('selected');
90 } else { 93 } else {
91 item.classList.remove('selected'); 94 item.classList.remove('selected');
92 } 95 }
93 }; 96 };
94 97
95 /** @const @private */ 98 /** @const @private */
96 remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active'; 99 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