mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-27 02:14:45 +01:00
5af5594f60
- All attributes of the widgets are now parsed from XML before the widget itself is created. These attributes plus all default values are then added to an associative array. The associative array is passed as second parameter to the init function of et2_widget, but is also available as this.options *after* the constructor of the et2_widget baseclass has been called. The et2_widget constructor also calls a function parseArrayMgrAttrs(_attrs) - in this function widget implementations can read the values from e.g. the content and validation_errors array and merge it into the given _attrs associative array. After the complete internal widgettree is completely loaded and created the "loadingFinished" function gets called and invokes all given setter functions. After that it "glues" the DOM tree together. This should also (I didn't measure it) be a bit faster than before, when the DOM-Tree was created on the fly. Please have a look at the changes of the et2_textbox widget to see how this affects writing widgets. Note: The "id" property is copied to the object scope on the top of the et2_widget constructor. - When widgets are cloned the "options" array gets passed along to the newly created widget. This means that changes made on the widgets during runtime are not automatically copied to the clone - as this didn't happen anyhow it is not a really disadvantage. On the other side there should be no difference between widgets directly inside the "overlay" xet tag and widgets which are inside instanciated templates. - The selbox widget doesn't work anymore - it relied on the loadAttributes function which isn't available anymore. et2_selbox should use the parseArrayMgrAttrs function to access - I've commented out some of the "validator"-code in etemplate2.js as it created some error messages when destroying the widget tree.
169 lines
3.8 KiB
JavaScript
169 lines
3.8 KiB
JavaScript
/**
|
|
* eGroupWare eTemplate2 - JS Box object
|
|
*
|
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
|
* @package etemplate
|
|
* @subpackage api
|
|
* @link http://www.egroupware.org
|
|
* @author Andreas Stöckel
|
|
* @copyright Stylite 2011
|
|
* @version $Id: et2_box.js 36147 2011-08-16 13:12:39Z igel457 $
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
/*egw:uses
|
|
jquery.jquery;
|
|
et2_baseWidget;
|
|
*/
|
|
|
|
/**
|
|
* Class which implements the hbox and vbox tag
|
|
*/
|
|
var et2_hbox = et2_baseWidget.extend({
|
|
|
|
createNamespace: true,
|
|
|
|
init: function(_parent) {
|
|
this._super.apply(this, arguments);
|
|
|
|
this.alignData = {
|
|
"hasAlign": false,
|
|
"hasLeft": false,
|
|
"hasCenter": false,
|
|
"hasRight": false,
|
|
"lastAlign": "left"
|
|
};
|
|
|
|
this.leftDiv = null;
|
|
this.rightDiv = null;
|
|
|
|
this.div = $j(document.createElement("div"))
|
|
.addClass("et2_" + this._type)
|
|
.addClass("et2_box_widget");
|
|
|
|
this.setDOMNode(this.div[0]);
|
|
},
|
|
|
|
_buildAlignCells: function() {
|
|
if (this.alignData.hasAlign)
|
|
{
|
|
// Check whether we have more than one type of align
|
|
var mto = (this.alignData.hasLeft && this.alignData.hasRight) ||
|
|
(this.alignData.hasLeft && this.alignData.hasCenter) ||
|
|
(this.alignData.hasCenter && this.alignData.hasRight);
|
|
|
|
if (!mto)
|
|
{
|
|
// If there is only one type of align, we simply have to set
|
|
// the align of the top container
|
|
if (this.alignData.lastAlign != "left")
|
|
{
|
|
this.div.addClass("et2_hbox_al_" + this.alignData.lastAlign);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// Create an additional container for elements with align type
|
|
// "right"
|
|
if (this.alignData.hasRight)
|
|
{
|
|
this.rightDiv = $j(document.createElement("div"))
|
|
.addClass("et2_hbox_right")
|
|
.appendTo(this.div);
|
|
}
|
|
|
|
// Create an additional container for elements with align type
|
|
// left, as the top container is used for the centered elements
|
|
if (this.alignData.hasCenter)
|
|
{
|
|
// Create the left div if an element is centered
|
|
this.leftDiv = $j(document.createElement("div"))
|
|
.addClass("et2_hbox_left")
|
|
.appendTo(this.div);
|
|
|
|
this.div.addClass("et2_hbox_al_center");
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The overwritten loadFromXML function checks whether any child element has
|
|
* a special align value.
|
|
*/
|
|
loadFromXML: function(_node) {
|
|
// Check whether any child node has an alignment tag
|
|
et2_filteredNodeIterator(_node, function(_node) {
|
|
var align = _node.getAttribute("align");
|
|
|
|
if (!align)
|
|
{
|
|
align = "left";
|
|
}
|
|
|
|
if (align != "left")
|
|
{
|
|
this.alignData.hasAlign = true;
|
|
}
|
|
|
|
this.alignData.lastAlign = align;
|
|
|
|
switch (align)
|
|
{
|
|
case "left":
|
|
this.alignData.hasLeft = true;
|
|
break;
|
|
case "right":
|
|
this.alignData.hasRight = true;
|
|
break;
|
|
case "center":
|
|
this.alignData.hasCenter = true;
|
|
break;
|
|
}
|
|
}, this);
|
|
|
|
// Build the align cells
|
|
this._buildAlignCells();
|
|
|
|
// Load the nodes as usual
|
|
this._super.apply(this, arguments);
|
|
},
|
|
|
|
assign: function(_obj) {
|
|
// Copy the align data and the cells from the object which should be
|
|
// assigned
|
|
this.alignData = et2_cloneObject(_obj.alignData);
|
|
this._buildAlignCells();
|
|
|
|
// Call the inherited assign function
|
|
this._super.call(this, arguments);
|
|
},
|
|
|
|
getDOMNode: function(_sender) {
|
|
// Return a special align container if this hbox needs it
|
|
if (_sender != this && this.alignData.hasAlign)
|
|
{
|
|
// Check whether we've create a special container for the widget
|
|
var align = (_sender.implements(et2_IAligned) ?
|
|
_sender.get_align() : "left");
|
|
|
|
if (align == "left" && this.leftDiv != null)
|
|
{
|
|
return this.leftDiv[0];
|
|
}
|
|
|
|
if (align == "right" && this.rightDiv != null)
|
|
{
|
|
return this.rightDiv[0];
|
|
}
|
|
}
|
|
|
|
// Normally simply return the hbox-div
|
|
return this._super.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
et2_register_widget(et2_hbox, ["hbox"]);
|
|
|