From 60a2fd9855d59e9613bd100dca0625f7d14a2f98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20St=C3=B6ckel?= Date: Thu, 8 Mar 2012 11:29:46 +0000 Subject: [PATCH] Added calendar module for the client side api, roughly working, needs some further work (currently not shown as popup but at the bottom of the page, months etc. are displayed as 'undefined', year number is screwed up) --- phpgwapi/js/jsapi/egw.js | 1 + phpgwapi/js/jsapi/egw_calendar.js | 136 +++++++++++++++++++++ phpgwapi/js/jscalendar/calendar.js | 19 ++- phpgwapi/js/jscalendar/lang/calendar-en.js | 9 ++ 4 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 phpgwapi/js/jsapi/egw_calendar.js diff --git a/phpgwapi/js/jsapi/egw.js b/phpgwapi/js/jsapi/egw.js index 52df3bc439..28294be500 100644 --- a/phpgwapi/js/jsapi/egw.js +++ b/phpgwapi/js/jsapi/egw.js @@ -26,5 +26,6 @@ egw_json; egw_tooltip; egw_css; + egw_calendar; */ diff --git a/phpgwapi/js/jsapi/egw_calendar.js b/phpgwapi/js/jsapi/egw_calendar.js new file mode 100644 index 0000000000..9210e8da66 --- /dev/null +++ b/phpgwapi/js/jsapi/egw_calendar.js @@ -0,0 +1,136 @@ +/** + * EGroupware clientside API 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 (as AT stylite.de) + * @author Ralf Becker + * @version $Id$ + */ + +"use strict"; + +/*egw:uses + egw_core; + egw_preferences; + + jscalendar.calendar; + /phpgwapi/js/jscalendar/lang/calendar-en.js; + +*/ + +egw.extend('calendar', egw.MODULE_WND_LOCAL, function(_app, _wnd) { + + // Instanciate the calendar for this window + calendar_closure(_wnd, _wnd.document); + + // Load the translation + calendar_lang_closure(_wnd); + + function calendarPreferences() + { + // Load the date format from the preferences + var dateformat = egw.preference("dateformat"); + if (!dateformat) + { + dateformat = "Y-m-d"; + } + + // Transform the given format to the correct date format + dateformat = dateformat + .replace("Y","%Y") + .replace("d","%d") + .replace("m","%m") + .replace("M", "%b"); + + // Load the first weekday from the calendar application preferences + var firstDay = egw.preference("weekdaystarts","calendar"); + + return { + "format": dateformat, + "firstDay": firstDay, + "ifFormat": "%Y/%m/%d", + "daFormat": "%Y/%m/%d", + "titleFormat": "%B, %Y" + } + } + + function calendarPopup(_input, _button, _callback, _context) + { + + function calendarUpdate(_cal) + { + // Update the input value + _input.value = _cal.date.print(_cal.params.format); + + // Close the popup if a date has been clicked + if (_cal.dateClicked) + { + cal.callCloseHandler(); + } + + // Call the callback + _callback.call(_context, _cal); + } + + function calendarHide(_cal) + { + _cal.hide(); + } + + // Read the calendar parameters + var params = calendarPreferences(); + + // Destroy any existing calendar + if (_wnd.calendar) + { + _wnd.calendar.destroy(); + } + + // Create a new calendar instance + _wnd.calendar = new Calendar( + params.firstDay, + null, + calendarUpdate, + calendarHide + ); + _wnd.calendar.showsTime = false; + _wnd.calendar.weekNumbers = true; + _wnd.calendar.yearStep = 2; + _wnd.calendar.setRange(1900, 2999); + _wnd.calendar.params = params; + + _wnd.calendar.create(); + + _wnd.calendar.setDateFormat(params.format); + _wnd.calendar.parseDate($j(_input).val()); + + _wnd.calendar.refresh(); + _wnd.calendar.showAtElement(_button || _input); + } + + return { + + /** + * Transforms either the given input element into a date input or + * displays the calendar when clicking on the given input button. When + * the date changes, the given callback function is called. + */ + calendar: function(_input, _button, _callback, _context) { +/* $j([_input, _button]).bind('click.calendar', function() { + calendarPopup(_input, _button, _callback, _context); + })*/ + $j(_input).bind('click', function() { + calendarPopup(_input, _button, _callback, _context); + }); + $j(_button).bind('click', function() { + calendarPopup(_input, _button, _callback, _context); + }); + } + + } + +}); + diff --git a/phpgwapi/js/jscalendar/calendar.js b/phpgwapi/js/jscalendar/calendar.js index 032c77933b..17840e9c1e 100644 --- a/phpgwapi/js/jscalendar/calendar.js +++ b/phpgwapi/js/jscalendar/calendar.js @@ -12,6 +12,10 @@ // $Id$ +var calendar_closure = function(window, document) { + +var Date = window.Date; + /** The Calendar object constructor. */ Calendar = function (firstDayOfWeek, dateStr, onSelected, onClose) { // member variables @@ -1279,7 +1283,10 @@ Calendar.prototype.callCloseHandler = function () { /** Removes the calendar object from the DOM tree and destroys it. */ Calendar.prototype.destroy = function () { var el = this.element.parentNode; - el.removeChild(this.element); + if (el) + { + el.removeChild(this.element); + } Calendar._C = null; window.calendar = null; }; @@ -1302,7 +1309,7 @@ Calendar._checkCalendar = function(ev) { return false; } var el = Calendar.is_ie ? Calendar.getElement(ev) : Calendar.getTargetElement(ev); - for (; el != null && el != calendar.element; el = el.parentNode); + for (; el != null && el != window.calendar.element; el = el.parentNode); if (el == null) { // calls closeHandler which should hide the calendar. window.calendar.callCloseHandler(); @@ -1815,3 +1822,11 @@ if ( !Date.prototype.__msh_oldSetFullYear ) { // global object that remembers the calendar window.calendar = null; + +// Export the calendar constructor +window.Calendar = Calendar; + +}; + +calendar_closure(window, document); + diff --git a/phpgwapi/js/jscalendar/lang/calendar-en.js b/phpgwapi/js/jscalendar/lang/calendar-en.js index e9d6a222eb..4944a274c8 100644 --- a/phpgwapi/js/jscalendar/lang/calendar-en.js +++ b/phpgwapi/js/jscalendar/lang/calendar-en.js @@ -9,6 +9,11 @@ // Unicode is the answer to a real internationalized world. Also please // include your contact information in the header, as can be seen above. + +function calendar_lang_closure(window) { + +var Calendar = window.Calendar; + // full day names Calendar._DN = new Array ("Sunday", @@ -121,3 +126,7 @@ Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e"; Calendar._TT["WK"] = "wk"; Calendar._TT["TIME"] = "Time:"; + +}; + +calendar_lang_closure(window);