- Get email widget working with felamimail if user has access, mailto: otherwise

- Get phone widget working using telephony integration if configured, tel: if user's on an Android or iPhone
- Popup calendar on date widget
This commit is contained in:
Nathan Gray 2011-08-29 21:15:53 +00:00
parent 331cd20bf3
commit c0abff9612
8 changed files with 442 additions and 68 deletions

View File

@ -14,6 +14,10 @@
/*egw:uses
jquery.jquery;
jscalendar.calendar-setup;
jscalendar.calendar;
/phpgwapi/js/jscalendar/lang/calendar-en.js;
lib/date;
et2_core_inputWidget;
et2_core_valueWidget;
*/
@ -46,23 +50,36 @@ var et2_date = et2_inputWidget.extend({
},
createInputWidget: function() {
this.input = $j(document.createElement("input"));
this.button = $j(document.createElement("img"));
this.button.attr("id", this.options.id + "_button");
var type="text";
switch(this.type) {
case "date":
type = "date";
break;
case "date-timeonly":
type = "time";
break;
case "date-time":
type = "datetime-local";
break;
}
this.input.attr("type", type).addClass("et2_date");
this.input.addClass("et2_date").attr("type", type);
this.setDOMNode(this.input[0]);
var this_id = this.options.id;
var this_button_id = this.button.attr("id");
var this_showsTime = this.type == "date-time";
if(this.type == "date" || this.type == "date-time") {
window.setTimeout(function() {
Calendar.setup({
inputField: this_id,
button: this_button_id,
showsTime: this_showsTime,
timeFormat: egw.preference("timeformat")
});
}, 500);
}
},
set_type: function(_type) {
@ -72,24 +89,31 @@ var et2_date = et2_inputWidget.extend({
set_value: function(_value) {
if(typeof _value == 'string' && isNaN(_value)) {
_value = Date.parse(_value);
if(_value.indexOf(":") > 0 && this.type == "date-timeonly") {
return this._super.apply(this, [_value]);
} else {
_value = Date.parse(_value);
// JS dates use milliseconds
this.date.setTime(parseInt(_value)*1000);
}
} else {
// JS dates use milliseconds
this.date.setTime(parseInt(_value)*1000);
}
this.value = _value;
// JS dates use milliseconds
this.date.setTime(parseInt(_value)*1000);
var display = this.date.toString();
// TODO: Use user's preference, not browser's locale
switch(this.type) {
case "date":
display = this.date.toLocaleDateString();
display = date(egw.preference('dateformat'), this.date);
break;
case "date-timeonly":
display = this.date.toLocaleTimeString();
display = date(egw.preference('timeformat') == '24' ? 'H:i' : 'g:i a', this.date);
break;
case "date-time":
display = this.date.toLocaleString();
display = date(egw.preference('dateformat') + " " +
(egw.preference('timeformat') == '24' ? 'H:i' : 'g:i a'), this.date);
break;
}
this._super.apply(this, [display]);
@ -125,7 +149,7 @@ var et2_date_ro = et2_valueWidget.extend({
this.value = "";
this.span = $j(document.createElement("time"))
.addClass("et2_date_ro");
.addClass("et2_date_ro et2_label");
this.setDOMNode(this.span[0]);
},
@ -134,22 +158,25 @@ var et2_date_ro = et2_valueWidget.extend({
this.value = _value;
// JS dates use milliseconds
if(isNaN(_value) && _value.indexOf(":") > 0 && this.type == "date-timeonly") {
this.span.text(_value);
}
this.date.setTime(parseInt(_value)*1000);
var display = this.date.toString();
// TODO: Use user's preference, not browser's locale
switch(this.type) {
case "date":
display = this.date.toLocaleDateString();
display = date(egw.preference('dateformat'), this.date);
break;
case "time":
display = this.date.toLocaleTimeString();
case "date-timeonly":
display = date(egw.preference('timeformat') == '24' ? 'H:i' : 'g:i a', this.date);
break;
case "date-time":
display = this.date.toLocaleString();
break;
display = date(egw.preference('dateformat') + " " +
(egw.preference('timeformat') == '24' ? 'H:i' : 'g:i a'), this.date);
}
this.span.attr("datetime", this.date.toUTCString()).text(display);
this.span.attr("datetime", date("Y-m-d H:i:s",this.date)).text(display);
}
});

View File

@ -15,6 +15,7 @@
/*egw:uses
et2_textbox;
et2_valueWidget;
phpgwapi.jquery.jquery.base64;
*/
/**
@ -71,40 +72,35 @@ var et2_url = et2_textbox.extend({
this.getSurroundings().update();
}
this._button.removeClass("url phone email").removeAttr("href");
_value = this.get_link(this._type, _value);
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 {
if(_value) {
if(typeof _value == 'function')
{
this._button.click(this, _value).addClass("phone").show();
}
else
{
this._button.attr("href", _value).addClass("phone").show();
}
} else if (_value === false) {
// Can't make a good handler, hide button
this._button.hide();
}
break;
case "url-email":
if(egw.link_registry && egw.link_registry.felamimail)
if(typeof _value == 'function')
{
this._button.click(this, function() {
egw.open("","felamimail","add","send_to="+_value);
}).addClass("email");
this._button.click(this, _value).addClass("email");
}
else if(_value.indexOf("mailto:") == -1)
else
{
_value = "mailto:"+_value;
this._button.attr("href", _value).addClass("email");
}
break;
@ -121,6 +117,64 @@ var et2_url = et2_textbox.extend({
}
},
get_link: function(type, value) {
if(!value) return false;
switch(type)
{
case "url":
// Silently use http if no protocol
if(value.indexOf("://") == -1) value = "http://"+value;
break;
case "url-phone":
// Clean number
value = value.replace('♥','').replace('(0)','');
value = value.replace(/[abc]/gi,2).replace(/[def]/gi,3).replace(/[ghi]/gi,4).replace(/[jkl]/gi,5).replace(/[mno]/gi,6);
value = value.replace(/[pqrs]/gi,7).replace(/[tuv]/gi,8).replace(/[wxyz]/gi,9);
if (egw.config("call_link")) {
var link = egw.config("call_link");
var size = [300,200];
var user_id = "";
var user_phone = "";
if(link.indexOf("%t") !== -1)
{
//TODO: get user ID & phone number
}
if(egw.config("call_popup"))
{
size = egw.config("call_popup").split("x");
}
link = link.replace("%1", value).replace("%u",user_id).replace("%t",user_phone);
value = function() {egw_openWindowCentered(link, false,size[0],size[1]);};
}
else if(navigator.userAgent.indexOf('AppleWebKit') !== -1 && (
navigator.userAgent.indexOf("iPhone") !== -1 ||
navigator.userAgent.indexOf("Android") !== -1
) &&
value.indexOf("tel:") == -1)
{
value = "tel:"+value;
} else {
// Can't make a good handler
return false;
}
break;
case "url-email":
if(egw.link_registry && egw.link_registry.felamimail)
{
return function() {egw.open("","felamimail","add","send_to="+jQuery.base64Encode(value));};
}
else if(value.indexOf("mailto:") == -1)
{
value = "mailto:"+value;
}
break;
}
return value;
},
validate: function(e) {
e.data.hideMessage();
@ -156,34 +210,52 @@ var et2_url_ro = et2_valueWidget.extend({
this.value = "";
this.span = $j(document.createElement("a"))
.addClass("et2_textbox readonly");
this.setDOMNode(this.span[0]);
},
set_value: function(_value) {
this.value = _value;
var link = et2_url.prototype.get_link(this._type, _value);
if(link == false && this.getDOMNode().nodeName == "A")
{
this.span = $j(document.createElement("span"));
this.span.text(_value);
this.setDOMNode(this.span[0]);
return;
}
else if (this.getDOMNode().nodeName != "A")
{
this.span = $j(document.createElement("a"));
this.setDOMNode(this.span[0]);
}
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");
this.span.attr("href", link).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
if(typeof link == 'function')
{
this.span.click(this, link);
this.span.attr("href", "javascript:void(0)");
}
else
{
this.span.attr("href", link);
}
break;
case "url-email":
if(_value.indexOf("mailto:") == -1) _value = "mailto:"+_value;
this.span.attr("href", _value);
if(typeof link == 'function')
{
this.span.click(this, link);
this.span.attr("href", "javascript:void(0)");
}
else
{
this.span.attr("href", link);
}
break;
}
}

261
etemplate/js/lib/date.js Normal file
View File

@ -0,0 +1,261 @@
function date (format, timestamp) {
// http://kevin.vanzonneveld.net
// + original by: Carlos R. L. Rodrigues (http://www.jsfromhell.com)
// + parts by: Peter-Paul Koch (http://www.quirksmode.org/js/beat.html)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: MeEtc (http://yass.meetcweb.com)
// + improved by: Brad Touesnard
// + improved by: Tim Wiel
// + improved by: Bryan Elliott
//
// + improved by: Brett Zamir (http://brett-zamir.me)
// + improved by: David Randall
// + input by: Brett Zamir (http://brett-zamir.me)
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Brett Zamir (http://brett-zamir.me)
// + improved by: Brett Zamir (http://brett-zamir.me)
// + improved by: Theriault
// + derived from: gettimeofday
// + input by: majak
// + bugfixed by: majak
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + input by: Alex
// + bugfixed by: Brett Zamir (http://brett-zamir.me)
// + improved by: Theriault
// + improved by: Brett Zamir (http://brett-zamir.me)
// + improved by: Theriault
// + improved by: Thomas Beaucourt (http://www.webapp.fr)
// + improved by: JT
// + improved by: Theriault
// + improved by: Rafał Kukawski (http://blog.kukawski.pl)
// + input by: Martin
// + input by: Alex Wilson
// % note 1: Uses global: php_js to store the default timezone
// % note 2: Although the function potentially allows timezone info (see notes), it currently does not set
// % note 2: per a timezone specified by date_default_timezone_set(). Implementers might use
// % note 2: this.php_js.currentTimezoneOffset and this.php_js.currentTimezoneDST set by that function
// % note 2: in order to adjust the dates in this function (or our other date functions!) accordingly
// * example 1: date('H:m:s \\m \\i\\s \\m\\o\\n\\t\\h', 1062402400);
// * returns 1: '09:09:40 m is month'
// * example 2: date('F j, Y, g:i a', 1062462400);
// * returns 2: 'September 2, 2003, 2:26 am'
// * example 3: date('Y W o', 1062462400);
// * returns 3: '2003 36 2003'
// * example 4: x = date('Y m d', (new Date()).getTime()/1000);
// * example 4: (x+'').length == 10 // 2009 01 09
// * returns 4: true
// * example 5: date('W', 1104534000);
// * returns 5: '53'
// * example 6: date('B t', 1104534000);
// * returns 6: '999 31'
// * example 7: date('W U', 1293750000.82); // 2010-12-31
// * returns 7: '52 1293750000'
// * example 8: date('W', 1293836400); // 2011-01-01
// * returns 8: '52'
// * example 9: date('W Y-m-d', 1293974054); // 2011-01-02
// * returns 9: '52 2011-01-02'
var that = this,
jsdate, f, formatChr = /\\?([a-z])/gi,
formatChrCb,
// Keep this here (works, but for code commented-out
// below for file size reasons)
//, tal= [],
_pad = function (n, c) {
if ((n = n + '').length < c) {
return new Array((++c) - n.length).join('0') + n;
}
return n;
},
txt_words = ["Sun", "Mon", "Tues", "Wednes", "Thurs", "Fri", "Satur", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
formatChrCb = function (t, s) {
return f[t] ? f[t]() : s;
};
f = {
// Day
d: function () { // Day of month w/leading 0; 01..31
return _pad(f.j(), 2);
},
D: function () { // Shorthand day name; Mon...Sun
return f.l().slice(0, 3);
},
j: function () { // Day of month; 1..31
return jsdate.getDate();
},
l: function () { // Full day name; Monday...Sunday
return txt_words[f.w()] + 'day';
},
N: function () { // ISO-8601 day of week; 1[Mon]..7[Sun]
return f.w() || 7;
},
S: function () { // Ordinal suffix for day of month; st, nd, rd, th
var j = f.j();
return j > 4 || j < 21 ? 'th' : {1: 'st', 2: 'nd', 3: 'rd'}[j % 10] || 'th';
},
w: function () { // Day of week; 0[Sun]..6[Sat]
return jsdate.getDay();
},
z: function () { // Day of year; 0..365
var a = new Date(f.Y(), f.n() - 1, f.j()),
b = new Date(f.Y(), 0, 1);
return Math.round((a - b) / 864e5) + 1;
},
// Week
W: function () { // ISO-8601 week number
var a = new Date(f.Y(), f.n() - 1, f.j() - f.N() + 3),
b = new Date(a.getFullYear(), 0, 4);
return _pad(1 + Math.round((a - b) / 864e5 / 7), 2);
},
// Month
F: function () { // Full month name; January...December
return txt_words[6 + f.n()];
},
m: function () { // Month w/leading 0; 01...12
return _pad(f.n(), 2);
},
M: function () { // Shorthand month name; Jan...Dec
return f.F().slice(0, 3);
},
n: function () { // Month; 1...12
return jsdate.getMonth() + 1;
},
t: function () { // Days in month; 28...31
return (new Date(f.Y(), f.n(), 0)).getDate();
},
// Year
L: function () { // Is leap year?; 0 or 1
return new Date(f.Y(), 1, 29).getMonth() === 1 | 0;
},
o: function () { // ISO-8601 year
var n = f.n(),
W = f.W(),
Y = f.Y();
return Y + (n === 12 && W < 9 ? -1 : n === 1 && W > 9);
},
Y: function () { // Full year; e.g. 1980...2010
return jsdate.getFullYear();
},
y: function () { // Last two digits of year; 00...99
return (f.Y() + "").slice(-2);
},
// Time
a: function () { // am or pm
return jsdate.getHours() > 11 ? "pm" : "am";
},
A: function () { // AM or PM
return f.a().toUpperCase();
},
B: function () { // Swatch Internet time; 000..999
var H = jsdate.getUTCHours() * 36e2,
// Hours
i = jsdate.getUTCMinutes() * 60,
// Minutes
s = jsdate.getUTCSeconds(); // Seconds
return _pad(Math.floor((H + i + s + 36e2) / 86.4) % 1e3, 3);
},
g: function () { // 12-Hours; 1..12
return f.G() % 12 || 12;
},
G: function () { // 24-Hours; 0..23
return jsdate.getHours();
},
h: function () { // 12-Hours w/leading 0; 01..12
return _pad(f.g(), 2);
},
H: function () { // 24-Hours w/leading 0; 00..23
return _pad(f.G(), 2);
},
i: function () { // Minutes w/leading 0; 00..59
return _pad(jsdate.getMinutes(), 2);
},
s: function () { // Seconds w/leading 0; 00..59
return _pad(jsdate.getSeconds(), 2);
},
u: function () { // Microseconds; 000000-999000
return _pad(jsdate.getMilliseconds() * 1000, 6);
},
// Timezone
e: function () { // Timezone identifier; e.g. Atlantic/Azores, ...
// The following works, but requires inclusion of the very large
// timezone_abbreviations_list() function.
/* return this.date_default_timezone_get();
*/
throw 'Not supported (see source code of date() for timezone on how to add support)';
},
I: function () { // DST observed?; 0 or 1
// Compares Jan 1 minus Jan 1 UTC to Jul 1 minus Jul 1 UTC.
// If they are not equal, then DST is observed.
var a = new Date(f.Y(), 0),
// Jan 1
c = Date.UTC(f.Y(), 0),
// Jan 1 UTC
b = new Date(f.Y(), 6),
// Jul 1
d = Date.UTC(f.Y(), 6); // Jul 1 UTC
return 0 + ((a - c) !== (b - d));
},
O: function () { // Difference to GMT in hour format; e.g. +0200
var a = jsdate.getTimezoneOffset();
return (a > 0 ? "-" : "+") + _pad(Math.abs(a / 60 * 100), 4);
},
P: function () { // Difference to GMT w/colon; e.g. +02:00
var O = f.O();
return (O.substr(0, 3) + ":" + O.substr(3, 2));
},
T: function () { // Timezone abbreviation; e.g. EST, MDT, ...
// The following works, but requires inclusion of the very
// large timezone_abbreviations_list() function.
/* var abbr = '', i = 0, os = 0, default = 0;
if (!tal.length) {
tal = that.timezone_abbreviations_list();
}
if (that.php_js && that.php_js.default_timezone) {
default = that.php_js.default_timezone;
for (abbr in tal) {
for (i=0; i < tal[abbr].length; i++) {
if (tal[abbr][i].timezone_id === default) {
return abbr.toUpperCase();
}
}
}
}
for (abbr in tal) {
for (i = 0; i < tal[abbr].length; i++) {
os = -jsdate.getTimezoneOffset() * 60;
if (tal[abbr][i].offset === os) {
return abbr.toUpperCase();
}
}
}
*/
return 'UTC';
},
Z: function () { // Timezone offset in seconds (-43200...50400)
return -jsdate.getTimezoneOffset() * 60;
},
// Full Date/Time
c: function () { // ISO-8601 date.
return 'Y-m-d\\Th:i:sP'.replace(formatChr, formatChrCb);
},
r: function () { // RFC 2822
return 'D, d M Y H:i:s O'.replace(formatChr, formatChrCb);
},
U: function () { // Seconds since UNIX epoch
return jsdate.getTime() / 1000 | 0;
}
};
this.date = function (format, timestamp) {
that = this;
jsdate = ((typeof timestamp === 'undefined') ? new Date() : // Not provided
(timestamp instanceof Date) ? new Date(timestamp) : // JS Date()
new Date(timestamp * 1000) // UNIX timestamp (auto-convert to int)
);
return format.replace(formatChr, formatChrCb);
};
return this.date(format, timestamp);
}

View File

@ -1,11 +1,11 @@
var d = new Date();
var date = Math.round(d.valueOf() / 1000);
var _date = Math.round(d.valueOf() / 1000);
var date_test_data = {
content: {
"date": date,
"date_time":date,
"time":date,
"ro_date": date,
"ro_date_time": date
"date": _date,
"date_time":_date,
"time":_date,
"ro_date": _date,
"ro_date_time": _date
}
}

View File

@ -2,6 +2,9 @@ var text_data = {
content: {
"url": "www.egroupware.org",
"email": "",
"phone": "(866) 789-RACE"
"phone": "(866) 789-RACE",
"url_ro": "www.egroupware.org",
"email_ro": "info@egroupware.org",
"phone_ro": "(866) 789-RACE"
}
}

View File

@ -1,14 +1,16 @@
<?xml version="1.0"?>
<!-- $Id$ -->
<overlay>
<vbox cols="1" rows="3">
<vbox cols="1" rows="8">
<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"/>
<url label="URL" id="url_ro" readonly="true"/>
<url-email label="Email" id="email_ro" readonly="true"/>
<url-phone label="Phone" id="phone_ro" readonly="true"/>
<button label="test" onclick="" statustext="button"/>
</vbox>
</overlay>

View File

@ -8,7 +8,8 @@ $GLOBALS['egw_info'] = array(
'currentapp' => 'etemplate',
'noheader' => True,
'nonavbar' => True,
'app_header' => 'eT2 Test'
'app_header' => 'eT2 Test',
'js_link_registry' => True,
)
);
include('../../../header.inc.php');
@ -22,6 +23,7 @@ include('../../../header.inc.php');
?>
<script src="et2_test_timesheet_edit.json"></script>
<script src="et2_test_input_validator.json"></script>
<script src="et2_test_text.json"></script>
Testing from inside framework, so JS includes work
<div class="header">Choose one of the following tests:</div>
<div id="linklist">
@ -29,8 +31,9 @@ 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_text.xet',text_data);">Text/URL 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/time widgits</a>
<a href="#" onclick="open_xet('et2_test_input_validator.xet', validation_data);">Validation</a>
</div>
<div class="header">ETemplate2 container:</div>

View File

@ -38,12 +38,18 @@
<script src="../et2_dataview_view_gridcontainer.js"></script>
<script src="../etemplate2.js"></script>
<script src="../lib/tooltip.js"></script>
<script src="../lib/date.js"></script>
<script src="../../../phpgwapi/js/egw_json.js"></script>
<script src="../../../phpgwapi/js/jsapi/jsapi.js"></script>
<script src="../../../phpgwapi/js/jsapi/egw.js"></script>
<script src="../../../phpgwapi/js/jquery/jquery.tools.min.js"></script>
<script src="../../../phpgwapi/js/jscalendar/calendar.js"></script>
<script src="../../../phpgwapi/js/jscalendar/calendar-setup.js"></script>
<script src="../../../phpgwapi/js/jscalendar/lang/calendar-en.js"></script>
<link rel="StyleSheet" type="text/css" href="../../../phpgwapi/js/jscalendar/calendar-blue.css" />
<script src="et2_test_timesheet_edit.json"></script>
<script src="et2_test_tabbox.json"></script>