Drive/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More config options for list views; some code cleanup: save frequently used jquery objects in local vars

Browse source
This commit is contained in:
Thomas Bruederli 2011-06-16 16:21:14 -06:00
parent a9462f5d0c
commit 9e93cd9613
4 changed files with 72 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
plugins/calendar/calendar.js
View file

@ -40,7 +40,6 @@ function rcube_calendar(settings)
/*** private vars ***/ /*** private vars ***/
var me = this; var me = this;
var fcselector = '#calendar';
var day_clicked = day_clicked_ts = 0; var day_clicked = day_clicked_ts = 0;
var ignore_click = false; var ignore_click = false;
@ -468,7 +467,7 @@ function rcube_calendar(settings)
], ],
close: function(){ close: function(){
$dialog.dialog("destroy").hide(); $dialog.dialog("destroy").hide();
$(fcselector).fullCalendar('refetchEvents'); fc.fullCalendar('refetchEvents');
} }
}).show(); }).show();
@ -482,7 +481,7 @@ function rcube_calendar(settings)
this.add_event = function() { this.add_event = function() {
if (this.selected_calendar) { if (this.selected_calendar) {
var now = new Date(); var now = new Date();
var date = $(fcselector).fullCalendar('getDate') || now; var date = fc.fullCalendar('getDate') || now;
date.setHours(now.getHours()+1); date.setHours(now.getHours()+1);
date.setMinutes(0); date.setMinutes(0);
var end = new Date(date.getTime()); var end = new Date(date.getTime());
@ -679,7 +678,7 @@ function rcube_calendar(settings)
this.calendar_destroy_source = function(id) this.calendar_destroy_source = function(id)
{ {
if (this.calendars[id]) { if (this.calendars[id]) {
$(fcselector).fullCalendar('removeEventSource', this.calendars[id]); fc.fullCalendar('removeEventSource', this.calendars[id]);
$(rcmail.get_folder_li(id, 'rcmlical')).remove(); $(rcmail.get_folder_li(id, 'rcmlical')).remove();
$('#edit-calendar option[value="'+id+'"]').remove(); $('#edit-calendar option[value="'+id+'"]').remove();
delete this.calendars[id]; delete this.calendars[id];
@ -696,7 +695,6 @@ function rcube_calendar(settings)
var q = rcmail.gui_objects.qsearchbox.value; var q = rcmail.gui_objects.qsearchbox.value;
if (q != '') { if (q != '') {
var id = 'search-'+q; var id = 'search-'+q;
var fc = $(fcselector);
var sources = []; var sources = [];
if (this._search_message) if (this._search_message)
@ -730,7 +728,7 @@ function rcube_calendar(settings)
editable: false editable: false
}; };
fc.fullCalendar('option', 'listSections', 'day'); fc.fullCalendar('option', 'listSections', 'month');
fc.fullCalendar('addEventSource', this.search_source); fc.fullCalendar('addEventSource', this.search_source);
fc.fullCalendar('changeView', 'table'); fc.fullCalendar('changeView', 'table');
} }
@ -749,7 +747,6 @@ function rcube_calendar(settings)
if (this.search_request) { if (this.search_request) {
// restore original event sources and view mode from fullcalendar // restore original event sources and view mode from fullcalendar
var fc = $(fcselector);
fc.fullCalendar('option', 'listSections', 'smart'); fc.fullCalendar('option', 'listSections', 'smart');
fc.fullCalendar('removeEventSource', this.search_source); fc.fullCalendar('removeEventSource', this.search_source);
for (var sid in this.calendars) { for (var sid in this.calendars) {
@ -811,7 +808,7 @@ function rcube_calendar(settings)
me.quicksearch(); me.quicksearch();
} }
else { // add/remove event source else { // add/remove event source
$(fcselector).fullCalendar(action, me.calendars[id]); fc.fullCalendar(action, me.calendars[id]);
rcmail.save_pref({ name:'hidden_calendars', value:settings.hidden_calendars.join(',') }); rcmail.save_pref({ name:'hidden_calendars', value:settings.hidden_calendars.join(',') });
} }
} }
@ -832,7 +829,7 @@ function rcube_calendar(settings)
} }
// initalize the fullCalendar plugin // initalize the fullCalendar plugin
$(fcselector).fullCalendar({ var fc = $('#calendar').fullCalendar({
header: { header: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', center: 'title',
@ -871,6 +868,8 @@ function rcube_calendar(settings)
table: settings['date_long'] table: settings['date_long']
}, },
listSections: 'smart', listSections: 'smart',
listRange: 60, // show 60 days in list view
tableCols: ['handle', 'date', 'time', 'title', 'location'],
defaultView: settings['default_view'], defaultView: settings['default_view'],
allDayText: rcmail.gettext('all-day', 'calendar'), allDayText: rcmail.gettext('all-day', 'calendar'),
buttonText: { buttonText: {
@ -989,7 +988,7 @@ function rcube_calendar(settings)
// event handler for clicks on calendar week cell of the datepicker widget // event handler for clicks on calendar week cell of the datepicker widget
var init_week_events = function(){ var init_week_events = function(){
$('#datepicker table.ui-datepicker-calendar td.ui-datepicker-week-col').click(function(e){ $('#datepicker table.ui-datepicker-calendar td.ui-datepicker-week-col').click(function(e){
var base_date = $("#datepicker").datepicker('getDate'); var base_date = minical.datepicker('getDate');
var day_off = base_date.getDay() - 1; var day_off = base_date.getDay() - 1;
if (day_off < 0) day_off = 6; if (day_off < 0) day_off = 6;
var base_kw = $.datepicker.iso8601Week(base_date); var base_kw = $.datepicker.iso8601Week(base_date);
@ -997,39 +996,39 @@ function rcube_calendar(settings)
var diff = (kw - base_kw) * 7 * 86400000; var diff = (kw - base_kw) * 7 * 86400000;
// select monday of the chosen calendar week // select monday of the chosen calendar week
var date = new Date(base_date.getTime() - day_off * 86400000 + diff); var date = new Date(base_date.getTime() - day_off * 86400000 + diff);
$(fcselector).fullCalendar('gotoDate', date).fullCalendar('setDate', date).fullCalendar('changeView', 'agendaWeek'); fc.fullCalendar('gotoDate', date).fullCalendar('setDate', date).fullCalendar('changeView', 'agendaWeek');
$("#datepicker").datepicker('setDate', date); minical.datepicker('setDate', date);
window.setTimeout(init_week_events, 10); window.setTimeout(init_week_events, 10);
}).css('cursor', 'pointer'); }).css('cursor', 'pointer');
}; };
// initialize small calendar widget using jQuery UI datepicker // initialize small calendar widget using jQuery UI datepicker
$('#datepicker').datepicker($.extend(datepicker_settings, { var minical = $('#datepicker').datepicker($.extend(datepicker_settings, {
inline: true, inline: true,
showWeek: true, showWeek: true,
changeMonth: false, // maybe enable? changeMonth: false, // maybe enable?
changeYear: false, // maybe enable? changeYear: false, // maybe enable?
onSelect: function(dateText, inst) { onSelect: function(dateText, inst) {
ignore_click = true; ignore_click = true;
var d = $("#datepicker").datepicker('getDate'); //parse_datetime('0:0', dateText); var d = minical.datepicker('getDate'); //parse_datetime('0:0', dateText);
$(fcselector).fullCalendar('gotoDate', d).fullCalendar('select', d, d, true); fc.fullCalendar('gotoDate', d).fullCalendar('select', d, d, true);
window.setTimeout(init_week_events, 10); window.setTimeout(init_week_events, 10);
}, },
onChangeMonthYear: function(year, month, inst) { onChangeMonthYear: function(year, month, inst) {
window.setTimeout(init_week_events, 10); window.setTimeout(init_week_events, 10);
var d = $("#datepicker").datepicker('getDate'); var d = minical.datepicker('getDate');
d.setYear(year); d.setYear(year);
d.setMonth(month - 1); d.setMonth(month - 1);
$("#datepicker").data('year', year).data('month', month); minical.data('year', year).data('month', month);
//$(fcselector).fullCalendar('gotoDate', d).fullCalendar('setDate', d); //fc.fullCalendar('gotoDate', d).fullCalendar('setDate', d);
}, },
})); }));
window.setTimeout(init_week_events, 10); window.setTimeout(init_week_events, 10);
// react on fullcalendar buttons // react on fullcalendar buttons
var fullcalendar_update = function() { var fullcalendar_update = function() {
var d = $(fcselector).fullCalendar('getDate'); var d = fc.fullCalendar('getDate');
$("#datepicker").datepicker('setDate', d); minical.datepicker('setDate', d);
window.setTimeout(init_week_events, 10); window.setTimeout(init_week_events, 10);
}; };
$("#calendar .fc-button-prev").click(fullcalendar_update); $("#calendar .fc-button-prev").click(fullcalendar_update);

94
plugins/calendar/lib/js/fullcalendar.js
View file

@ -95,8 +95,11 @@ var defaults = {
week: 'W' week: 'W'
}, },
// list options // list/table options
listSections: 'month', // false|'day'|'week'|'month'|'smart' listSections: 'month', // false|'day'|'week'|'month'|'smart'
listRange: 30, // number of days to be displayed
listPage: 7, // number of days to jump when paging
tableCols: ['handle', 'date', 'time', 'title'],
// jquery-ui theming // jquery-ui theming
theme: false, theme: false,
@ -651,9 +654,11 @@ function Calendar(element, options, eventSources) {
if (value === undefined) { if (value === undefined) {
return options[name]; return options[name];
} }
options[name] = value;
if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') { if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') {
options[name] = value;
updateSize(); updateSize();
} else if (name.indexOf('list') == 0 || name == 'tableCols') {
options[name] = value;
} }
} }
@ -4296,7 +4301,7 @@ function View(element, calendar, viewName) {
function opt(name, viewNameOverride) { function opt(name, viewNameOverride) {
var v = options[name]; var v = options[name];
if (typeof v == 'object') { if (typeof v == 'object' && !v.length) {
return smartProperty(v, viewNameOverride || viewName); return smartProperty(v, viewNameOverride || viewName);
} }
return v; return v;
@ -5356,13 +5361,14 @@ function ListEventRenderer() {
var tm = opt('theme') ? 'ui' : 'fc'; var tm = opt('theme') ? 'ui' : 'fc';
var headerClass = tm + "-widget-header"; var headerClass = tm + "-widget-header";
var contentClass = tm + "-widget-content"; var contentClass = tm + "-widget-content";
var i, j, seg, event, times, s, skinCss, skinCssAttr, classes, segHeader, segContainer, eventElements; var i, j, seg, event, times, s, skinCss, skinCssAttr, classes, segContainer, eventElements;
for (j=0; j < segs.length; j++) { for (j=0; j < segs.length; j++) {
seg = segs[j]; seg = segs[j];
if (seg.title) if (seg.title) {
segHeader = $('<div class="fc-list-header ' + headerClass + '">' + htmlEscape(seg.title) + '</div>').appendTo(getListContainer()); $('<div class="fc-list-header ' + headerClass + '">' + htmlEscape(seg.title) + '</div>').appendTo(getListContainer());
}
segContainer = $('<div>').addClass('fc-list-section ' + contentClass).appendTo(getListContainer()); segContainer = $('<div>').addClass('fc-list-section ' + contentClass).appendTo(getListContainer());
s = ''; s = '';
@ -5516,15 +5522,12 @@ function ListView(element, calendar) {
function render(date, delta) { function render(date, delta) {
if (delta) { if (delta) {
addDays(date, delta); addDays(date, opt('listPage') * delta);
if (!opt('weekends')) {
skipWeekend(date, delta < 0 ? -1 : 1);
}
} }
t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat')); t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat'));
t.start = t.visStart = cloneDate(date, true); t.start = t.visStart = cloneDate(date, true);
t.end = addDays(cloneDate(t.start), 1); t.end = addDays(cloneDate(t.start), opt('listPage'));
t.visEnd = addMonths(cloneDate(t.start), 1); // show events one month ahead. Enough? t.visEnd = addDays(cloneDate(t.start), opt('listRange'));
updateOptions(); updateOptions();
@ -5613,13 +5616,16 @@ function TableEventRenderer() {
var table = getListContainer(); var table = getListContainer();
var headerClass = tm + "-widget-header"; var headerClass = tm + "-widget-header";
var contentClass = tm + "-widget-content"; var contentClass = tm + "-widget-content";
var i, j, seg, event, times, s, skinCss, skinCssAttr, skinClasses, rowClasses, segHeader, segContainer, eventElements; var tableCols = opt('tableCols');
var timecol = $.inArray('time', tableCols) >= 0;
var i, j, seg, event, times, s, skinCss, skinCssAttr, skinClasses, rowClasses, segContainer, eventElements;
for (j=0; j < segs.length; j++) { for (j=0; j < segs.length; j++) {
seg = segs[j]; seg = segs[j];
if (seg.title) if (seg.title) {
segHeader = $('<tbody class="fc-list-header"><tr><td class="fc-list-header ' + headerClass + '" colspan="5">' + htmlEscape(seg.title) + '</td></tr></tbody>').appendTo(table); $('<tbody class="fc-list-header"><tr><td class="fc-list-header ' + headerClass + '" colspan="' + tableCols.length + '">' + htmlEscape(seg.title) + '</td></tr></tbody>').appendTo(table);
}
segContainer = $('<tbody>').addClass('fc-list-section ' + contentClass).appendTo(table); segContainer = $('<tbody>').addClass('fc-list-section ' + contentClass).appendTo(table);
s = ''; s = '';
@ -5637,27 +5643,25 @@ function TableEventRenderer() {
rowClasses.push('fc-today'); rowClasses.push('fc-today');
} }
s += s += "<tr class='" + rowClasses.join(' ') + "'>";
"<tr class='" + rowClasses.join(' ') + "'>" + for (var col, c=0; c < tableCols.length; c++) {
"<td class='fc-event-handle'>" + col = tableCols[c];
if (col == 'handle') {
s += "<td class='fc-event-handle'>" +
"<div class='" + skinClasses.join(' ') + "'" + skinCssAttr + ">" + "<div class='" + skinClasses.join(' ') + "'" + skinCssAttr + ">" +
"<span class='fc-event-inner'></span>" + "<span class='fc-event-inner'></span>" +
"</div></td>" + "</div></td>";
"<td class='fc-event-date' colspan='" + (times[1] ? 1 : 2) + "'>" + } else if (col == 'date') {
htmlEscape(times[0]) + s += "<td class='fc-event-date' colspan='" + (times[1] || !timecol ? 1 : 2) + "'>" + htmlEscape(times[0]) + "</td>";
"</td>" + } else if (col == 'time') {
(times[1] ? if (times[1]) {
"<td class='fc-event-time'>" + s += "<td class='fc-event-time'>" + htmlEscape(times[1]) + "</td>";
htmlEscape(times[1]) + }
"</td>" } else {
: "") + s += "<td class='fc-event-" + col + "'>" + htmlEscape(event[col] || '') + "</td>";
"<td class='fc-event-title'>" + }
htmlEscape(event.title) + }
"</td>" + s += "</tr>";
"<td class='fc-event-location'>" +
htmlEscape(event.location) +
"</td>" +
"</tr>";
} }
segContainer[0].innerHTML = s; segContainer[0].innerHTML = s;
@ -5731,15 +5735,12 @@ function TableView(element, calendar) {
function render(date, delta) { function render(date, delta) {
if (delta) { if (delta) {
addDays(date, delta); addDays(date, opt('listPage') * delta);
if (!opt('weekends')) {
skipWeekend(date, delta < 0 ? -1 : 1);
}
} }
t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat')); t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat'));
t.start = t.visStart = cloneDate(date, true); t.start = t.visStart = cloneDate(date, true);
t.end = addDays(cloneDate(t.start), 1); t.end = addDays(cloneDate(t.start), opt('listPage'));
t.visEnd = addMonths(cloneDate(t.start), 1); // show events one month ahead. Enough? t.visEnd = addDays(cloneDate(t.start), opt('listRange'));
updateOptions(); updateOptions();
@ -5760,15 +5761,14 @@ function TableView(element, calendar) {
function buildSkeleton() { function buildSkeleton() {
var tableCols = opt('tableCols');
var s = var s =
"<table class='fc-border-separate' style='width:100%' cellspacing='0'>" + "<table class='fc-border-separate' style='width:100%' cellspacing='0'>" +
"<colgroup>" + "<colgroup>";
"<col class='fc-event-handle' />" + for (var c=0; c < tableCols.length; c++) {
"<col class='fc-event-date' />" + s += "<col class='fc-event-" + tableCols[c] + "' />";
"<col class='fc-event-time' />" + }
"<col class='fc-event-title' />" + s += "</colgroup>" +
"<col class='fc-event-location' />" +
"</colgroup>" +
"</table>"; "</table>";
div = $('<div>').addClass('fc-list-content').appendTo(element); div = $('<div>').addClass('fc-list-content').appendTo(element);
table = $(s).appendTo(div); table = $(s).appendTo(div);

4
plugins/calendar/skins/default/calendar.css
View file

@ -530,6 +530,10 @@ div.fc-event-location {
color: #333; color: #333;
} }
.fc-view-table col.fc-event-location {
width: 20%;
}
/* Settings section */ /* Settings section */
fieldset #calendarcategories div { fieldset #calendarcategories div {

5
plugins/calendar/skins/default/fullcalendar.css
View file

@ -690,15 +690,10 @@ table.fc-border-separate {
width: 1px; width: 1px;
} }
.fc-view-table col.fc-event-time { .fc-view-table col.fc-event-time {
width: 8em; width: 8em;
} }
.fc-view-table col.fc-event-location {
width: 20%;
}
.fc-view-table td.fc-event-date, .fc-view-table td.fc-event-date,
.fc-view-table td.fc-event-time { .fc-view-table td.fc-event-time {
white-space: nowrap; white-space: nowrap;