URL widget

- Still needs to get telephony link from server, felamimail not tested because egw.link_registry not populated

etemplate/js/et2_widget_url.js

@@ -0,0 +1,193 @@
+/**
+ * eGroupWare eTemplate2 - JS URL object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Nathan Gray
+ * @copyright Nathan Gray 2011
+ * @version $Id$
+ */
+
+"use strict";
+
+/*egw:uses
+	et2_textbox;
+	et2_valueWidget;
+*/
+
+/**
+ * Class which implements the "url" XET-Tag, which covers URLs, email & phone
+ */ 
+var et2_url = et2_textbox.extend({
+
+	attributes: {
+		"multiline": {
+			"ignore": true
+		}
+	},
+
+	createInputWidget: function() {
+		this.input = $j(document.createElement("input"))
+			.blur(this,this.validate)
+			.blur(this,function(e){e.data.set_value(e.data.getValue());});
+
+		this._button = null;
+
+		console.log(this);
+
+		if(this.size) {
+			this.set_size(this.size);
+		}
+
+		this.setDOMNode(this.input[0]);
+	},
+
+	destroy: function() {
+		if(this.input) {
+			this.input.unbind();
+		}
+		this._button = null;
+	},
+
+	/**
+	 * Override parent to update href of 'button'
+	 */
+	set_value: function(_value) {
+		this.update_button(_value);
+		this._super.apply(this, arguments);
+	},
+
+	update_button: function(_value) {
+		if(this.value == _value) return;
+		if(_value)
+		{
+			// Create button if it doesn't exist yet
+			if(this._button == null)
+			{
+				this._button = $j(document.createElement("a")).addClass("et2_url");
+                                this.getSurroundings().insertDOMNode(this._button[0]);
+				this.getSurroundings().update();
+			}
+			this._button.removeClass("url phone email").removeAttr("href");
+			switch(this._type)
+			{
+				case "url":
+					// Silently use http if no protocol
+					if(_value.indexOf("://") == -1) _value = "http://"+_value;
+					this._button.attr("href", _value).attr("target", "_blank").addClass("url");
+					break;
+				case "url-phone":
+					if(navigator.userAgent.indexOf('AppleWebKit') !== -1 && (
+							navigator.userAgent.indexOf("iPhone") !== -1 ||
+							navigator.userAgent.indexOf("Android") !== -1 
+						) &&
+						 _value.indexOf("tel:") == -1)
+					{
+						 _value = "tel:"+_value;
+						this._button.attr("href", _value).addClass("phone").show();
+					} else if (false) {
+						// TODO: Check for telephony config, use link from server
+						//this._button.attr("href", _value).addClass("phone").show();
+					} else {
+						// Can't make a good handler, hide button
+						this._button.hide();
+					}
+					break;
+				case "url-email":
+					if(egw.link_registry && egw.link_registry.felamimail)
+					{
+						this._button.click(this, function() {
+							egw.open("","felamimail","add","send_to="+_value);
+						}).addClass("email");
+					}
+					else if(_value.indexOf("mailto:") == -1)
+					{
+						_value = "mailto:"+_value;
+						this._button.attr("href", _value).addClass("email");
+					}
+					break;
+			}
+		}
+		else
+		{
+			if(this._button)
+			{
+				this.getSurroundings().deleteDOMNode(this._button[0]);
+			}
+			this._button = null;
+		}
+	},
+
+	validate: function(e) {
+		e.data.hideMessage();
+
+		if(e.data._super) {
+			e.data._super.apply(this, arguments);
+		}
+
+		// Check value, and correct if possible
+		var value = jQuery.trim(e.data.getValue());
+		if(value == "") return;
+		switch(e.data._type) {
+			case "url":
+				if(value.indexOf("://") == -1) {
+					e.data.set_value("http://"+value);
+					e.data.showMessage(egw.lang("Protocol is required"), "hint", true);
+				}
+				break;
+		}
+	}
+});
+
+et2_register_widget(et2_url, ["url", "url-email", "url-phone"]);
+
+/**
+ * et2_url_ro is the readonly implementation of the url, email & phone.
+ * It renders things as links, when possible
+ */
+var et2_url_ro = et2_valueWidget.extend({
+
+	init: function() {
+		this._super.apply(this, arguments);
+
+		this.value = "";
+		this.span = $j(document.createElement("a"))
+			.addClass("et2_textbox readonly");
+
+		this.setDOMNode(this.span[0]);
+	},
+
+	set_value: function(_value) {
+		this.value = _value;
+
+		this.span.text(_value);
+		switch(this._type) {
+			case "url":
+				// Silently use http if no protocol
+				if(_value.indexOf("://") == -1) _value = "http://"+_value;
+				this.span.attr("href", _value).attr("target", "_blank");
+				break;
+			case "url-phone":
+				if(navigator.userAgent.indexOf('AppleWebKit') !== -1 && (
+						navigator.userAgent.indexOf("iPhone") !== -1 ||
+						navigator.userAgent.indexOf("Android") !== -1 
+				) {
+					if(_value.indexOf("tel:") == -1) _value = "tel:"+_value;
+					this.span.attr("href", _value);
+				} else {
+					//TODO: Check for telephony integration, use link from server
+				}
+				break;
+			case "url-email":
+				if(_value.indexOf("mailto:") == -1) _value = "mailto:"+_value;
+				this.span.attr("href", _value);
+				break;
+		}
+	}
+
+});
+
+et2_register_widget(et2_url_ro, ["url_ro", "url-email_ro", "url-phone_ro"]);
+

etemplate/js/etemplate2.js

@@ -20,6 +20,7 @@
 	et2_widget_description;
 	et2_widget_textbox;
 	et2_widget_number;
+	et2_widget_url;
 	et2_widget_selectbox;
 	et2_widget_checkbox;
 	et2_widget_radiobox;

etemplate/js/test/et2_test_text.json

@@ -0,0 +1,7 @@
+var text_data = {
+	content: {
+		"url":	"www.egroupware.org",
+		"email": "",
+		"phone": "(866) 789-RACE"
+	},
+}

etemplate/js/test/et2_test_text.xet

@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<!-- $Id$ -->
+<overlay>
+	<vbox cols="1" rows="3">
+		<textbox label="Plain text" id="text"/>
+		<url label="URL" id="url"/>
+		<url-email label="Email" id="email"/>
+		<url-phone label="Phone" id="phone"/>
+		<url label="URL" id="url" readonly="true"/>
+		<url-email label="Email" id="email" readonly="true"/>
+		<url-phone label="Phone" id="phone" readonly="true"/>
+		<button label="test" onclick="" statustext="button"/>
+	</vbox>
+</overlay>

etemplate/js/test/test.css

@@ -104,6 +104,26 @@ div.et2_hbox_right {
 	font-size: 10pt;
 }
 
+a.et2_url {
+	background-position: center;
+	background-repeat: no-repeat;
+
+	cursor: pointer;
+	margin: -4px;
+	padding: 2px;
+	padding-left: 16px;
+}
+
+a.et2_url.email {
+	background-image: url(gfx/email.png);
+}
+a.et2_url.phone {
+	background-image: url(gfx/phone.png);
+}
+a.et2_url.url {
+	background-image: url(gfx/url.png);
+}
+
 button.et2_button {
 	background-color: #E0E0E0;
 	background-image: url(gfx/gradient01.png);

etemplate/js/test/test.php

@@ -29,6 +29,7 @@ Testing from inside framework, so JS includes work
                         <a href="#" onclick="open_xet('et2_test_template.xet');">Template proxy test</a>
                         <a href="#" onclick="open_xet('et2_test_grid.xet');">Grid test</a>
                         <a href="#" onclick="open_xet('et2_test_tabbox.xet');">Tabs test</a>
+                        <a href="#" onclick="open_xet('et2_test_text.xet');">Text/URL test</a>
                         <a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a>
                         <a href="#" onclick="open_xet('et2_test_input_validator.xet', validation_data);">Validation</a>
                 </div>

etemplate/js/test/test_xml.html

@@ -21,6 +21,7 @@
 		<script src="../et2_widget_box.js"></script>
 		<script src="../et2_widget_hbox.js"></script>
 		<script src="../et2_widget_textbox.js"></script>
+		<script src="../et2_widget_url.js"></script>
 		<script src="../et2_widget_number.js"></script>
 		<script src="../et2_widget_selectbox.js"></script>
 		<script src="../et2_widget_checkbox.js"></script>
@@ -47,6 +48,7 @@
 		<script src="et2_test_tabbox.json"></script>
 		<script src="et2_test_expressions.json"></script>
 		<script src="et2_test_dates.json"></script>
+		<script src="et2_test_text.json"></script>
 		<link rel="StyleSheet" type="text/css" href="./test.css" />
 		<link rel="StyleSheet" type="text/css" href="./grid.css" />
 
@@ -70,6 +72,7 @@
 			<a href="#" onclick="open_xet('et2_test_grid.xet');">Grid test</a>
 			<a href="#" onclick="open_xet('et2_test_tabbox.xet',tabbox_data);">Tabs test</a>
 			<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_date.xet',date_test_data);">Date/Time widgits</a>