Chromium Code Reviews Chromium Code Reviews
Issue 9884001:
Added screen options menu. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| Index: remoting/webapp/menu_button.js |
| diff --git a/remoting/webapp/menu_button.js b/remoting/webapp/menu_button.js |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..dd8fe2548fb91b691c3d5d05c75d753374d2e0a4 |
| --- /dev/null |
| +++ b/remoting/webapp/menu_button.js |
| @@ -0,0 +1,80 @@ |
| +// Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| +// Use of this source code is governed by a BSD-style license that can be |
| +// found in the LICENSE file. |
| + |
| +/** |
| + * @fileoverview |
| + * Class representing a menu button and its associated menu items. |
| + */ |
| + |
| +'use strict'; |
| + |
| +/** @suppress {duplicate} */ |
| +var remoting = remoting || {}; |
| + |
| +/** |
| + * @constructor |
| + * @param {Element} container The element containing the <button> and <ul> |
| + * elements comprising the menu. It should have the "menu-button" class. |
| + * @param {function():void=} opt_onShow Optional callback invoked before the |
| + * menu is shown. |
| + */ |
| +remoting.MenuButton = function(container, opt_onShow) { |
| + /** |
| + * @type {HTMLElement} |
| + * @private |
| + */ |
| + this.button_ = /** @type {HTMLElement} */ (container.querySelector('button')); |
| + |
| + /** |
| + * @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 body, 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. |
|
simonmorris
2012/03/28 22:55:02
Would it be simpler to leave the handlers permanen
Jamie
2012/03/28 23:47:46
I don't want to leave the <html> handler permanent
|
| + /** |
| + * @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() { |
| + document.body.addEventListener('click', that.closeHandler_, false); |
| + }, |
| + 100); |
| + }; |
| + |
| + /** |
| + * @type {function(Event):void} |
| + * @private |
| + */ |
| + this.closeHandler_ = function(event) { |
| + that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); |
| + document.body.removeEventListener('click', that.closeHandler_, false); |
| + window.setTimeout( |
| + function() { |
| + that.button_.addEventListener('click', that.onClick_, false); |
| + }, |
| + 100); |
| + }; |
| + |
| + this.button_.addEventListener('click', this.onClick_, false); |
| +}; |
| + |
| +/** @const @private */ |
| +remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active'; |
| + |
| +/** @const */ |
| +remoting.MenuButton.ITEM_SELECTED_CLASS = 'selected'; |
