@qooxdoo/framework
Version:
The JS Framework for Coders
270 lines (209 loc) • 5.83 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2008 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Sebastian Werner (wpbasti)
* Andreas Ecker (ecker)
************************************************************************ */
/**
* A button which opens the connected menu when tapping on it.
*/
qx.Class.define("qx.ui.form.MenuButton",
{
extend : qx.ui.form.Button,
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
/**
* @param label {String} Initial label
* @param icon {String?null} Initial icon
* @param menu {qx.ui.menu.Menu} Connect to menu instance
*/
construct : function(label, icon, menu)
{
this.base(arguments, label, icon);
// Initialize properties
if (menu != null) {
this.setMenu(menu);
}
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties :
{
/** The menu instance to show when tapping on the button */
menu :
{
check : "qx.ui.menu.Menu",
nullable : true,
apply : "_applyMenu",
event : "changeMenu"
},
// overridden
appearance :
{
refine : true,
init : "menubutton"
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
/*
---------------------------------------------------------------------------
PROPERTY APPLY ROUTINES
---------------------------------------------------------------------------
*/
// overridden
_applyVisibility : function(value, old) {
this.base(arguments, value, old);
// hide the menu too
var menu = this.getMenu();
if (value != "visible" && menu) {
menu.hide();
}
},
// property apply
_applyMenu : function(value, old)
{
if (old)
{
old.removeListener("changeVisibility", this._onMenuChange, this);
old.resetOpener();
}
if (value)
{
value.addListener("changeVisibility", this._onMenuChange, this);
value.setOpener(this);
value.removeState("submenu");
value.removeState("contextmenu");
}
},
/*
---------------------------------------------------------------------------
HELPER METHODS
---------------------------------------------------------------------------
*/
/**
* Positions and shows the attached menu widget.
*
* @param selectFirst {Boolean?false} Whether the first menu button should be selected
*/
open : function(selectFirst)
{
var menu = this.getMenu();
if (menu)
{
// Hide all menus first
qx.ui.menu.Manager.getInstance().hideAll();
// Open the attached menu
menu.setOpener(this);
menu.open();
// Select first item
if (selectFirst)
{
var first = menu.getSelectables()[0];
if (first) {
menu.setSelectedButton(first);
}
}
}
},
/*
---------------------------------------------------------------------------
EVENT LISTENERS
---------------------------------------------------------------------------
*/
/**
* Listener for visibility property changes of the attached menu
*
* @param e {qx.event.type.Data} Property change event
*/
_onMenuChange : function(e)
{
var menu = this.getMenu();
if (menu.isVisible()) {
this.addState("pressed");
} else {
this.removeState("pressed");
}
},
// overridden
_onPointerDown : function(e) {
// call the base function to get into the capture phase [BUG #4340]
this.base(arguments, e);
// only open on left clicks [BUG #5125]
if(e.getButton() != "left") {
return;
}
var menu = this.getMenu();
if (menu) {
// Toggle sub menu visibility
if (!menu.isVisible()) {
this.open();
} else {
menu.exclude();
}
// Event is processed, stop it for others
e.stopPropagation();
}
},
// overridden
_onPointerUp : function(e) {
// call base for firing the execute event
this.base(arguments, e);
// Just stop propagation to stop menu manager
// from getting the event
e.stopPropagation();
},
// overridden
_onPointerOver : function(e) {
// Add hovered state
this.addState("hovered");
},
// overridden
_onPointerOut : function(e) {
// Just remove the hover state
this.removeState("hovered");
},
// overridden
_onKeyDown : function(e)
{
switch(e.getKeyIdentifier())
{
case "Enter":
this.removeState("abandoned");
this.addState("pressed");
var menu = this.getMenu();
if (menu)
{
// Toggle sub menu visibility
if (!menu.isVisible()) {
this.open();
} else {
menu.exclude();
}
}
e.stopPropagation();
}
},
// overridden
_onKeyUp : function(e) {
// no action required here
}
}
});