first try of a progress widget, not yet working :-(

etemplate/js/et2_widget_progress.js

@@ -0,0 +1,120 @@
+/**
+ * EGroupware eTemplate2 - JS Progrss object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Ralf Becker
+ * @version $Id$
+ */
+
+"use strict";
+
+/*egw:uses
+	jquery.jquery;
+	et2_core_interfaces;
+	et2_core_baseWidget;
+*/
+
+/**
+ * Class which implements the "image" XET-Tag
+ */ 
+var et2_progress = et2_baseWidget.extend(/*et2_IDetachedDOM,*/ {
+
+	attributes: {
+		"href": {
+			"name": "Link Target",
+			"type": "string",
+			"description": "Link URL, empty if you don't wan't to display a link."
+		},
+		"extra_link_target": {
+			"name": "Link target",
+			"type": "string",
+			"default": "_self",
+			"description": "Link target descriptor"
+		},
+		"extra_link_popup": {
+			"name": "Popup",
+			"type": "string",
+			"description": "widthxheight, if popup should be used, eg. 640x480"
+		},
+		"label": {
+		}
+	},
+	legacyOptions: ["href", "extra_link_target", "imagemap", "extra_link_popup", "id"],
+
+	init: function() 
+	{
+		this._super.apply(this, arguments);
+
+		var outer = $j(document.createElement("div")).addClass("et2_progress");
+		this.node = $j(document.createElement("div")).width(0).appendTo(outer);
+
+		if (this.options.href) 
+		{
+			outer.addClass('et2_clickable');
+		}
+		if(this.options["class"])
+		{
+			outer.addClass(this.options["class"]);
+		}
+		this.setDOMNode(outer[0]);
+// gives error "this.node has no method width"
+// this.set_value(50);
+	},
+	
+	click: function()
+	{
+		if(this.options.href)
+		{
+			egw.call_link(this.options.href, this.options.extra_link_target, this.options.extra_link_popup);
+		}		
+	},
+
+	// tried set_value and setValue, both get never called :-(
+	set_value: function(_value) 
+	{
+		if (_value != "") _value = parseInt(_value)+"%";	// make sure we have percent attached
+		this.node.width(_value);
+		if (!this.options.label) this.set_label(_value);
+	},
+	
+	// set's label as title of this.node
+	set_label: function(_value) 
+	{
+		this.node.attr("title", _value);
+	}
+
+	/**
+	 * Implementation of "et2_IDetachedDOM" for fast viewing in gridview
+	 */
+/*
+	getDetachedAttributes: function(_attrs) {
+		_attrs.push("src", "label");
+	},
+
+	getDetachedNodes: function() {
+		return [this.node[0]];
+	},
+
+	setDetachedAttributes: function(_nodes, _values) {
+		// Set the given DOM-Nodes
+		this.node = $j(_nodes[0]);
+
+		this.transformAttributes(_values);
+
+		// Set the attributes
+		if (_values["src"])
+		{
+			this.set_value(_values["value"]);
+		}
+
+		if (_values["label"])
+		{
+			this.set_label(_values["label"]);
+		}
+	}*/
+});
+
+et2_register_widget(et2_progress, ["progress"]);

etemplate/js/test/et2_test_basic.json

@@ -0,0 +1,5 @@
+var basic_data = {
+	content: {
+		"progress":	"50%",
+	}
+}

etemplate/js/test/et2_test_basic_widgets.xet

@@ -31,7 +31,7 @@
 				<option value="5">Test 5</option>
 				<option value="6" statustext="This is the sixth option">Test 6</option>
 		</listbox>
-		<progress label="Completition" id="progress" value="50%" />
+		<progress id="progress" href="http://www.egroupware.org/" extra_link_target="_blank" />
 		<image label="Image" src="/egroupware/phpgwapi/templates/default/images/logo.png" href="http://www.egroupware.org/" extra_link_target="_blank" />
 		<description value="www.egroupware.org" href="http://www.egroupware.org/" extra_link_target="_blank" />
 	</vbox>

etemplate/js/test/test.css

@@ -496,4 +496,16 @@ label input, label span, label div, label select, label textarea {
 
 .et2_clickable {
 	cursor: pointer;
+}
+
+div.et2_progress {
+	border: 1px solid black;
+	background-color: white;
+	width: 30px;
+	padding: 1px; 
+	text-align: left;
+}
+div.et2_progress > div {
+	background-color: #D00000;
+	height: 5px;
 }

etemplate/js/test/test_xml.html

@@ -33,6 +33,7 @@
 		<script src="../et2_widget_image.js"></script>
 		<script src="../et2_widget_date.js"></script>
 		<script src="../et2_widget_tabs.js"></script>
+		<script src="../et2_widget_progress.js"></script>
 
 		<script src="../et2_extension_nextmatch.js"></script>
 		<script src="../et2_extension_nextmatch_dynheight.js"></script>
@@ -70,6 +71,7 @@
 		<script src="et2_test_expressions.json"></script>
 		<script src="et2_test_dates.json"></script>
 		<script src="et2_test_text.json"></script>
+		<script src="et2_test_basic.json"></script>
 		<link rel="StyleSheet" type="text/css" href="./test.css" />
 		<link rel="StyleSheet" type="text/css" href="./grid.css" />
 
@@ -95,7 +97,7 @@
 			<a href="#" onclick="open_xet('et2_test_textbox.xet');">Textbox test</a>
 			<a href="#" onclick="open_xet('et2_test_text.xet', text_data);">Text/URL test</a>
 			<a href="#" onclick="open_xet('et2_test_description.xet');">Description test</a>
-			<a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a>
+			<a href="#" onclick="open_xet('et2_test_basic_widgets.xet', basic_data);">Basic widgets</a>
 			<a href="#" onclick="open_xet('et2_test_date.xet',date_test_data);">Date/Time widgits</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>