implemented link attributes for image-widget and added them to xulio, some docu for describtion

etemplate/inc/class.xul_io.inc.php

@@ -91,7 +91,12 @@ class xul_io
 		),
 		'image'   => array(
 			'.name' => 'image',
-			'name' => 'src'
+			'name' => 'src',
+			'size' => 'href,extra_link_target,imagemap,extra_link_popup,id',
+		),
+		'progres'   => array(
+			'.name' => 'progress',
+			'size' => 'href,extra_link_target,,extra_link_popup',
 		),
 		'tab' => array(
 			'.name' => 'tabbox,tabs,tabpanels'

etemplate/js/et2_widget_description.js

@@ -65,7 +65,7 @@ var et2_description = et2_baseWidget.extend([et2_IDetachedDOM], {
 		"extra_link_popup": {
 			"name": "Popup",
 			"type": "string",
-			"description": "???"
+			"description": "widthxheight, if popup should be used, eg. 640x480"
 		},
 		"extra_link_title": {
 			"name": "Link Title",

etemplate/js/et2_widget_image.js

@@ -29,27 +29,41 @@ var et2_image = et2_baseWidget.extend(et2_IDetachedDOM, {
 			"type": "string",
 			"description": "Displayed image"
 		},
-		"link": {
+		"href": {
+			"name": "Link Target",
+			"type": "string",
+			"description": "Link URL, empty if you don't wan't to display a link."
 		},
-		"link_target":{
+		"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"
 		},
 		"imagemap":{
 		},
-		"link_size":{
+		"label": {
 		}
 	},
-
+	legacyOptions: ["href", "link_target", "imagemap", "extra_link_popup", "id"],
-	legacyOptions: ["link", "link_target", "imagemap", "link_size"],
 
 	init: function() {
 		this._super.apply(this, arguments);
 
 		// Create the image or a/image tag
 		var node = this.image = $j(document.createElement("img"));
-		if(this.options.link)
+		if (this.options.label)
 		{
-			this._node = $j(document.createElement("a"));
+			this.image.attr("alt", this.options.label).attr("title", this.options.label);
-			this.image.appendTo(node);
+		}
+		if (this.options.href) 
+		{
+			this.image.addClass('et2_clickable');
 		}
 		if(this.options["class"])
 		{
@@ -57,6 +71,14 @@ var et2_image = et2_baseWidget.extend(et2_IDetachedDOM, {
 		}
 		this.setDOMNode(node[0]);
 	},
+	
+	click: function()
+	{
+		if(this.options.href)
+		{
+			egw.call_link(this.options.href, this.options.extra_link_target, this.options.extra_link_popup);
+		}		
+	},
 
 	transformAttributes: function(_attrs) {
 		this._super.apply(arguments);
@@ -76,8 +98,7 @@ var et2_image = et2_baseWidget.extend(et2_IDetachedDOM, {
 		if(_value == this.options.label) return;
 		this.options.label = _value;
 		// label is NOT the alt attribute in eTemplate, but the title/tooltip
-		this.image.attr("alt", _value);
+		this.image.attr("alt", _value).attr("title", _value);
-		this.set_statustext(_value);
 	},
 
 	setValue: function(_value) {
@@ -85,8 +106,6 @@ var et2_image = et2_baseWidget.extend(et2_IDetachedDOM, {
 		this.set_src(_value);
 	},
 
-	percentagePreg: /^[0-9]+%$/,
-
 	set_src: function(_value) {
 		if(!this.isInTree())
 		{
@@ -101,6 +120,11 @@ var et2_image = et2_baseWidget.extend(et2_IDetachedDOM, {
 		{
 			this.image.attr("src", src).show();
 		}
+		// allow url's too
+		else if (_value[0] == '/' || _value.substr(0,4) == 'http')
+		{
+			this.image.attr('src', _value).show();
+		}
 		else
 		{
 			this.image.css("display","none");

etemplate/js/test/et2_test_basic_widgets.xet

@@ -31,5 +31,8 @@
 				<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%" />
+		<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>
 </overlay>

etemplate/js/test/test.css

@@ -454,4 +454,6 @@ label input, label span, label div, label select, label textarea {
 	background-image: url(gfx/down.png);
 }
 
-
+.et2_clickable {
+	cursor: pointer;
+}

phpgwapi/js/jsapi/egw.js

@@ -500,6 +500,46 @@ else
 		{
 			return typeof _name == 'undefined' || typeof this.userData.apps[_app] == 'undefined' ? 
 				this.userData.apps[_app] : this.userData.apps[_app][_name];
+		},
+		
+		/**
+		 * Call a link, which can be either a menuaction, a EGroupware relative url or a full url
+		 * 
+		 * @param string _link menuaction, EGroupware relative url or a full url (incl. "mailto:" or "javascript:")
+		 * @param string _target optional target
+		 * @param string _popup widthxheight, if a popup should be used
+		 */
+		call_link: function(_link, _target, _popup)
+		{
+			var url = _link;
+			if (url.indexOf('javascript:') == 0)
+			{
+				eval(url.substr(11));
+				return;
+			}
+			// link is not necessary an url, it can also be a menuaction!
+			if (url.indexOf('/') == -1 &&
+				url.split('.').length >= 3 &&
+				url.indexOf('mailto:') == -1 ||
+				url.indexOf('://') == -1)
+			{
+				url = "/index.php?menuaction="+url;
+			}
+			if (url[0] == '/')		// link relative to eGW
+			{
+				url = egw.webserverUrl + url;
+			}
+			if (_popup)
+			{
+				var w_h = _popup.split('x');
+				if (w_h[1] == 'egw_getWindowOuterHeight()') w_h[1] = egw_getWindowOuterHeight();
+				egw_openWindowCentered2(url, _target, w_h[0], w_h[1]);
+			}
+			else
+			{
+				window.open(url, _target);
+			}
+			
 		}
 	};
 }