diff --git a/etemplate/js/et2_baseWidget.js b/etemplate/js/et2_baseWidget.js index d97aef7a2f..3fe711cd8b 100644 --- a/etemplate/js/et2_baseWidget.js +++ b/etemplate/js/et2_baseWidget.js @@ -18,22 +18,37 @@ et2_DOMWidget; */ +/** + * Interface for widgets which have the align attribute + */ +var et2_IAligned = new Interface({ + get_align: function() {} +}); + /** * Class which manages the DOM node itself. The simpleWidget class is derrived * from et2_DOMWidget and implements the getDOMNode function. A setDOMNode * function is provided, which attatches the given node to the DOM if possible. */ -var et2_baseWidget = et2_DOMWidget.extend({ +var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, { attributes: { "statustext": { "name": "Tooltip", "type": "string", "description": "Tooltip which is shown for this element" + }, + "align": { + "name": "Align", + "type": "string", + "default": "left", + "description": "Position of this element in the parent hbox" } }, init: function() { + this.align = "left"; + this._super.apply(this, arguments); this.node = null; @@ -81,7 +96,7 @@ var et2_baseWidget = et2_DOMWidget.extend({ }, getTooltipElement: function() { - return this.getDOMNode(); + return this.getDOMNode(this); }, set_statustext: function(_value) { @@ -111,6 +126,22 @@ var et2_baseWidget = et2_DOMWidget.extend({ this._tooltipElem = elem; } } + }, + + // XXX I really don't like this - I think I'll move attaching the DOM-Nodes + // to the loadFinished function - this should also be faster... + set_align: function(_value) { + if (_value != this.align) + { + this.align = _value; + + // Reattach this node to the DOM + this.onSetParent(); + } + }, + + get_align: function(_value) { + return this.align; } }); diff --git a/etemplate/js/et2_box.js b/etemplate/js/et2_box.js index 2e849d9f47..17ddcc68c1 100644 --- a/etemplate/js/et2_box.js +++ b/etemplate/js/et2_box.js @@ -26,7 +26,8 @@ var et2_box = et2_baseWidget.extend({ this._super.apply(this, arguments); this.div = $j(document.createElement("div")) - .addClass("et2_" + _type); + .addClass("et2_" + _type) + .addClass("et2_box_widget"); this.setDOMNode(this.div[0]); }, @@ -40,5 +41,5 @@ var et2_box = et2_baseWidget.extend({ }); -et2_register_widget(et2_box, ["hbox", "vbox", "box"]); +et2_register_widget(et2_box, ["vbox", "box"]); diff --git a/etemplate/js/et2_hbox.js b/etemplate/js/et2_hbox.js new file mode 100644 index 0000000000..2c5f3932ad --- /dev/null +++ b/etemplate/js/et2_hbox.js @@ -0,0 +1,174 @@ +/** + * 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({ + + init: function(_parent, _type) { + this.alignData = { + "hasAlign": false, + "hasLeft": false, + "hasCenter": false, + "hasRight": false, + "lastAlign": "left" + }; + + this.leftDiv = null; + this.rightDiv = null; + + this._super.apply(this, arguments); + + this.div = $j(document.createElement("div")) + .addClass("et2_" + _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); + }, + + set_id: function(_value) { + this._super.apply(this, arguments); + + // Check whether a namespace exists for this element + this.checkCreateNamespace(); + } + +}); + +et2_register_widget(et2_hbox, ["hbox"]); + diff --git a/etemplate/js/et2_styles.js b/etemplate/js/et2_styles.js index 793215319d..344fd153c6 100644 --- a/etemplate/js/et2_styles.js +++ b/etemplate/js/et2_styles.js @@ -32,13 +32,9 @@ var et2_styles = et2_widget.extend({ // Allow no child widgets this.supportedWidgetClasses = []; - // Create the textnode which will contain the style data - this.textNode = document.createTextNode(); - // Create the style node and append it to the head node this.styleNode = document.createElement("style"); this.styleNode.setAttribute("type", "text/css"); - this.styleNode.appendChild(this.textNode); (document.getElementsByTagName("head")[0]).appendChild(this.styleNode); }, @@ -52,8 +48,15 @@ var et2_styles = et2_widget.extend({ }, loadContent: function(_content) { - // Set the style data - this.textNode.data = _content; + if (this.styleNode.styleSheet) + { + // IE + this.styleNode.styleSheet.cssText += _content; + } + else + { + this.styleNode.appendChild(document.createTextNode(_content)); + } } }); diff --git a/etemplate/js/et2_widget.js b/etemplate/js/et2_widget.js index 5df26cce43..5a74353883 100644 --- a/etemplate/js/et2_widget.js +++ b/etemplate/js/et2_widget.js @@ -536,6 +536,12 @@ var et2_widget = Class.extend({ // Iterate over the widget tree this.iterateOver(function(_widget) { + // The widget must have an id to be included in the values array + if (_widget.id == "") + { + return; + } + // Get the path to the node we have to store the value at var path = _widget.getArrayMgr("content").getPath(); diff --git a/etemplate/js/etemplate2.js b/etemplate/js/etemplate2.js index 17d28623d3..0cf302d562 100644 --- a/etemplate/js/etemplate2.js +++ b/etemplate/js/etemplate2.js @@ -15,6 +15,7 @@ et2_template; et2_grid; et2_box; + et2_hbox; et2_button; et2_description; et2_textbox; diff --git a/etemplate/js/test/et2_test_hbox.xet b/etemplate/js/test/et2_test_hbox.xet new file mode 100644 index 0000000000..4bed4d0794 --- /dev/null +++ b/etemplate/js/test/et2_test_hbox.xet @@ -0,0 +1,46 @@ + + + + + +