@qooxdoo/framework
Version:
The JS Framework for Coders
228 lines (182 loc) • 5.89 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)
* Jonathan Weiß (jonathan_rass)
************************************************************************ */
/**
* A part is a container for multiple toolbar buttons. Each part comes
* with a handle which may be used in later versions to drag the part
* around and move it to another position. Currently mainly used
* for structuring large toolbars beyond the capabilities of the
* {@link Separator}.
*
* @childControl handle {qx.ui.basic.Image} prat handle to visualize the separation
* @childControl container {qx.ui.toolbar.PartContainer} holds the content of the toolbar part
*/
qx.Class.define("qx.ui.toolbar.Part",
{
extend : qx.ui.core.Widget,
include : [qx.ui.core.MRemoteChildrenHandling],
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
construct : function()
{
this.base(arguments);
// Hard coded HBox layout
this._setLayout(new qx.ui.layout.HBox);
// Force creation of the handle
this._createChildControl("handle");
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties :
{
appearance :
{
refine : true,
init : "toolbar/part"
},
/** Whether icons, labels, both or none should be shown. */
show :
{
init : "both",
check : [ "both", "label", "icon" ],
inheritable : true,
event : "changeShow"
},
/** The spacing between every child of the toolbar */
spacing :
{
nullable : true,
check : "Integer",
themeable : true,
apply : "_applySpacing"
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
/*
---------------------------------------------------------------------------
WIDGET API
---------------------------------------------------------------------------
*/
// overridden
_createChildControlImpl : function(id, hash)
{
var control;
switch(id)
{
case "handle":
control = new qx.ui.basic.Image();
control.setAlignY("middle");
this._add(control);
break;
case "container":
control = new qx.ui.toolbar.PartContainer();
control.addListener("syncAppearance", this.__onSyncAppearance, this);
this._add(control);
control.addListener("changeChildren", function() {
this.__onSyncAppearance();
}, this);
break;
}
return control || this.base(arguments, id);
},
// overridden
getChildrenContainer : function() {
return this.getChildControl("container");
},
/*
---------------------------------------------------------------------------
PROPERTY APPLY ROUTINES
---------------------------------------------------------------------------
*/
_applySpacing : function(value, old)
{
var layout = this.getChildControl("container").getLayout();
value == null ? layout.resetSpacing() : layout.setSpacing(value);
},
/*
---------------------------------------------------------------------------
UTILITIES
---------------------------------------------------------------------------
*/
/**
* Helper which applies the left, right and middle states.
*/
__onSyncAppearance : function() {
// check every child
var children = this.getChildrenContainer().getChildren();
children = children.filter(function(child) {
return child.getVisibility() == "visible";
});
for (var i = 0; i < children.length; i++) {
// if its the first child
if (i == 0 && i != children.length - 1) {
children[i].addState("left");
children[i].removeState("right");
children[i].removeState("middle");
// if its the last child
} else if (i == children.length - 1 && i != 0) {
children[i].addState("right");
children[i].removeState("left");
children[i].removeState("middle");
// if there is only one child
} else if (i == 0 && i == children.length - 1) {
children[i].removeState("left");
children[i].removeState("middle");
children[i].removeState("right");
} else {
children[i].addState("middle");
children[i].removeState("right");
children[i].removeState("left");
}
};
},
/**
* Adds a separator to the toolbar part.
*/
addSeparator : function() {
this.add(new qx.ui.toolbar.Separator);
},
/**
* Returns all nested buttons which contains a menu to show. This is mainly
* used for keyboard support.
*
* @return {Array} List of all menu buttons
*/
getMenuButtons : function()
{
var children = this.getChildren();
var buttons = [];
var child;
for (var i=0, l=children.length; i<l; i++)
{
child = children[i];
if (child instanceof qx.ui.menubar.Button) {
buttons.push(child);
}
}
return buttons;
}
}
});