@qooxdoo/framework
Version:
The JS Framework for Coders
202 lines (170 loc) • 5.74 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() {
super();
// 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(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", () => {
this.__onSyncAppearance();
});
break;
}
return control || super._createChildControlImpl(id);
},
// overridden
getChildrenContainer() {
return this.getChildControl("container");
},
/*
---------------------------------------------------------------------------
PROPERTY APPLY ROUTINES
---------------------------------------------------------------------------
*/
_applySpacing(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() {
// 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() {
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() {
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;
}
}
});