Added align property and working hbox/vbox implementation

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;
 	}
 
 });

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"]);
 

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"]);
+

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
+		if (this.styleNode.styleSheet)
-		this.textNode.data = _content;
+		{
+			// IE
+			this.styleNode.styleSheet.cssText += _content;
+		}
+		else
+		{
+			this.styleNode.appendChild(document.createTextNode(_content));
+		}
 	}
 
 });

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();
 

etemplate/js/etemplate2.js

@@ -15,6 +15,7 @@
 	et2_template;
 	et2_grid;
 	et2_box;
+	et2_hbox;
 	et2_button;
 	et2_description;
 	et2_textbox;

etemplate/js/test/et2_test_hbox.xet

@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<overlay>
+	<vbox>
+		<description value="Simple hbox behaviour" />
+		<hbox>
+			<button label="btn1" />
+			<button label="btn2" />
+			<button label="btn3" />
+			<button label="btn4" />
+		</hbox>
+
+		<description value="Float right" />
+		<hbox>
+			<hbox>
+				<button label="btn1" />
+				<button label="btn2" />
+				<button label="btn3" />
+			</hbox>
+			<button align="right" label="btn4" />
+			<button label="btn5" />
+		</hbox>
+
+		<description value="Float center" />
+		<hbox>
+			<hbox>
+				<button label="btn1" />
+				<button label="btn2" />
+				<button label="btn3" />
+			</hbox>
+			<button align="center" label="btn4" />
+			<button label="btn5" />
+		</hbox>
+
+
+		<description value="Only right" />
+		<hbox>
+			<button align="right" label="btn" />
+		</hbox>
+
+		<description value="Only center" />
+		<hbox>
+			<button align="center" label="btn" />
+		</hbox>
+	</vbox>
+</overlay>
+

etemplate/js/test/test.css

@@ -3,6 +3,9 @@
  *
  * @version: $Id$
  */
+
+/* Stuff for the standalone test webpage */
+
 body {
 	font-family: Lucida Grande, sans-serif;
 	font-size: 10pt;
@@ -33,6 +36,42 @@ body {
 	border-bottom: 1px solid #111;
 }
 
+/**
+ * VBox widget
+ */
+div.et2_vbox>* {
+	display: block;
+}
+
+/**
+ * HBox widget
+ */
+
+div.et2_hbox div.et2_hbox {
+	display: inline;
+}
+
+div.et2_hbox>* {
+	text-align: left;
+}
+
+div.et2_hbox_left {
+	float: left;
+}
+
+div.et2_hbox_al_center {
+	text-align: center;
+}
+
+div.et2_hbox_al_right {
+	text-align: right;
+}
+
+div.et2_hbox_right {
+	float: right;
+	clear: right;
+}
+
 .et2_placeholder {
 	display: inline-block;
 	border: 1px solid cornflowerblue;
@@ -101,10 +140,6 @@ button.et2_button:focus {
 	outline: none;
 }
 
-div.et2_hbox {
-	display: inline;
-}
-
 .et2_tabflag {
 	display: inline-block;
 	margin-right: 5px;
@@ -132,10 +167,6 @@ div.et2_hbox {
 	font-style: italic;
 }
 
-.et2_vbox div, .et2_vbox span {
-	display: block;
-}
-
 .egw_tooltip
 {
 	position: fixed;
@@ -145,3 +176,6 @@ div.et2_hbox {
 	max-width: 300px;
 	color: black;
 }
+
+
+

etemplate/js/test/test_xml.html

@@ -17,6 +17,7 @@
 		<script src="../et2_grid.js"></script>
 		<script src="../et2_button.js"></script>
 		<script src="../et2_box.js"></script>
+		<script src="../et2_hbox.js"></script>
 		<script src="../et2_textbox.js"></script>
 		<script src="../et2_styles.js"></script>
 		<script src="../et2_html.js"></script>
@@ -43,9 +44,9 @@
 			<a href="#" onclick="open_xet('et2_test_textbox.xet');">Textbox test</a>
 			<a href="#" onclick="open_xet('et2_test_description.xet');">Description test</a>
 			<a href="#" onclick="open_xet('et2_test_expressions.xet', expression_test_data);">Expression test</a>
+			<a href="#" onclick="open_xet('et2_test_hbox.xet');">HBox test</a>
 		</div>
 		<div class="header">ETemplate2 container:</div>
-		<div id="time"></div>
 		<div id="container"></div>
 		<script>
 			var et2 = new etemplate2(document.getElementById("container"), "");