From 9e93cd9613e53e1d0f7386a91529109968585fa3 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Thu, 16 Jun 2011 16:21:14 -0600 Subject: [PATCH] More config options for list views; some code cleanup: save frequently used jquery objects in local vars --- plugins/calendar/calendar.js | 39 ++++---- plugins/calendar/lib/js/fullcalendar.js | 98 +++++++++---------- plugins/calendar/skins/default/calendar.css | 4 + .../calendar/skins/default/fullcalendar.css | 5 - 4 files changed, 72 insertions(+), 74 deletions(-) diff --git a/plugins/calendar/calendar.js b/plugins/calendar/calendar.js index 351ac6a3..911b7f64 100644 --- a/plugins/calendar/calendar.js +++ b/plugins/calendar/calendar.js @@ -40,7 +40,6 @@ function rcube_calendar(settings) /*** private vars ***/ var me = this; - var fcselector = '#calendar'; var day_clicked = day_clicked_ts = 0; var ignore_click = false; @@ -468,7 +467,7 @@ function rcube_calendar(settings) ], close: function(){ $dialog.dialog("destroy").hide(); - $(fcselector).fullCalendar('refetchEvents'); + fc.fullCalendar('refetchEvents'); } }).show(); @@ -482,7 +481,7 @@ function rcube_calendar(settings) this.add_event = function() { if (this.selected_calendar) { var now = new Date(); - var date = $(fcselector).fullCalendar('getDate') || now; + var date = fc.fullCalendar('getDate') || now; date.setHours(now.getHours()+1); date.setMinutes(0); var end = new Date(date.getTime()); @@ -679,7 +678,7 @@ function rcube_calendar(settings) this.calendar_destroy_source = function(id) { if (this.calendars[id]) { - $(fcselector).fullCalendar('removeEventSource', this.calendars[id]); + fc.fullCalendar('removeEventSource', this.calendars[id]); $(rcmail.get_folder_li(id, 'rcmlical')).remove(); $('#edit-calendar option[value="'+id+'"]').remove(); delete this.calendars[id]; @@ -696,7 +695,6 @@ function rcube_calendar(settings) var q = rcmail.gui_objects.qsearchbox.value; if (q != '') { var id = 'search-'+q; - var fc = $(fcselector); var sources = []; if (this._search_message) @@ -730,7 +728,7 @@ function rcube_calendar(settings) editable: false }; - fc.fullCalendar('option', 'listSections', 'day'); + fc.fullCalendar('option', 'listSections', 'month'); fc.fullCalendar('addEventSource', this.search_source); fc.fullCalendar('changeView', 'table'); } @@ -749,7 +747,6 @@ function rcube_calendar(settings) if (this.search_request) { // restore original event sources and view mode from fullcalendar - var fc = $(fcselector); fc.fullCalendar('option', 'listSections', 'smart'); fc.fullCalendar('removeEventSource', this.search_source); for (var sid in this.calendars) { @@ -811,7 +808,7 @@ function rcube_calendar(settings) me.quicksearch(); } 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(',') }); } } @@ -832,7 +829,7 @@ function rcube_calendar(settings) } // initalize the fullCalendar plugin - $(fcselector).fullCalendar({ + var fc = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', @@ -871,6 +868,8 @@ function rcube_calendar(settings) table: settings['date_long'] }, listSections: 'smart', + listRange: 60, // show 60 days in list view + tableCols: ['handle', 'date', 'time', 'title', 'location'], defaultView: settings['default_view'], allDayText: rcmail.gettext('all-day', 'calendar'), buttonText: { @@ -989,7 +988,7 @@ function rcube_calendar(settings) // event handler for clicks on calendar week cell of the datepicker widget var init_week_events = function(){ $('#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; if (day_off < 0) day_off = 6; var base_kw = $.datepicker.iso8601Week(base_date); @@ -997,39 +996,39 @@ function rcube_calendar(settings) var diff = (kw - base_kw) * 7 * 86400000; // select monday of the chosen calendar week var date = new Date(base_date.getTime() - day_off * 86400000 + diff); - $(fcselector).fullCalendar('gotoDate', date).fullCalendar('setDate', date).fullCalendar('changeView', 'agendaWeek'); - $("#datepicker").datepicker('setDate', date); + fc.fullCalendar('gotoDate', date).fullCalendar('setDate', date).fullCalendar('changeView', 'agendaWeek'); + minical.datepicker('setDate', date); window.setTimeout(init_week_events, 10); }).css('cursor', 'pointer'); }; // initialize small calendar widget using jQuery UI datepicker - $('#datepicker').datepicker($.extend(datepicker_settings, { + var minical = $('#datepicker').datepicker($.extend(datepicker_settings, { inline: true, showWeek: true, changeMonth: false, // maybe enable? changeYear: false, // maybe enable? onSelect: function(dateText, inst) { ignore_click = true; - var d = $("#datepicker").datepicker('getDate'); //parse_datetime('0:0', dateText); - $(fcselector).fullCalendar('gotoDate', d).fullCalendar('select', d, d, true); + var d = minical.datepicker('getDate'); //parse_datetime('0:0', dateText); + fc.fullCalendar('gotoDate', d).fullCalendar('select', d, d, true); window.setTimeout(init_week_events, 10); }, onChangeMonthYear: function(year, month, inst) { window.setTimeout(init_week_events, 10); - var d = $("#datepicker").datepicker('getDate'); + var d = minical.datepicker('getDate'); d.setYear(year); d.setMonth(month - 1); - $("#datepicker").data('year', year).data('month', month); - //$(fcselector).fullCalendar('gotoDate', d).fullCalendar('setDate', d); + minical.data('year', year).data('month', month); + //fc.fullCalendar('gotoDate', d).fullCalendar('setDate', d); }, })); window.setTimeout(init_week_events, 10); // react on fullcalendar buttons var fullcalendar_update = function() { - var d = $(fcselector).fullCalendar('getDate'); - $("#datepicker").datepicker('setDate', d); + var d = fc.fullCalendar('getDate'); + minical.datepicker('setDate', d); window.setTimeout(init_week_events, 10); }; $("#calendar .fc-button-prev").click(fullcalendar_update); diff --git a/plugins/calendar/lib/js/fullcalendar.js b/plugins/calendar/lib/js/fullcalendar.js index 4d27d103..dc0cdea1 100644 --- a/plugins/calendar/lib/js/fullcalendar.js +++ b/plugins/calendar/lib/js/fullcalendar.js @@ -95,8 +95,11 @@ var defaults = { week: 'W' }, - // list options + // list/table options 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 theme: false, @@ -651,9 +654,11 @@ function Calendar(element, options, eventSources) { if (value === undefined) { return options[name]; } - options[name] = value; if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') { + options[name] = value; 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) { var v = options[name]; - if (typeof v == 'object') { + if (typeof v == 'object' && !v.length) { return smartProperty(v, viewNameOverride || viewName); } return v; @@ -5356,13 +5361,14 @@ function ListEventRenderer() { var tm = opt('theme') ? 'ui' : 'fc'; var headerClass = tm + "-widget-header"; 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++) { seg = segs[j]; - if (seg.title) - segHeader = $('
' + htmlEscape(seg.title) + '
').appendTo(getListContainer()); + if (seg.title) { + $('
' + htmlEscape(seg.title) + '
').appendTo(getListContainer()); + } segContainer = $('
').addClass('fc-list-section ' + contentClass).appendTo(getListContainer()); s = ''; @@ -5516,15 +5522,12 @@ function ListView(element, calendar) { function render(date, delta) { if (delta) { - addDays(date, delta); - if (!opt('weekends')) { - skipWeekend(date, delta < 0 ? -1 : 1); - } + addDays(date, opt('listPage') * delta); } t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat')); t.start = t.visStart = cloneDate(date, true); - t.end = addDays(cloneDate(t.start), 1); - t.visEnd = addMonths(cloneDate(t.start), 1); // show events one month ahead. Enough? + t.end = addDays(cloneDate(t.start), opt('listPage')); + t.visEnd = addDays(cloneDate(t.start), opt('listRange')); updateOptions(); @@ -5613,13 +5616,16 @@ function TableEventRenderer() { var table = getListContainer(); var headerClass = tm + "-widget-header"; 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++) { seg = segs[j]; - if (seg.title) - segHeader = $('' + htmlEscape(seg.title) + '').appendTo(table); + if (seg.title) { + $('' + htmlEscape(seg.title) + '').appendTo(table); + } segContainer = $('').addClass('fc-list-section ' + contentClass).appendTo(table); s = ''; @@ -5637,27 +5643,25 @@ function TableEventRenderer() { rowClasses.push('fc-today'); } - s += - "" + - "" + - "
" + - "" + - "
" + - "" + - htmlEscape(times[0]) + - "" + - (times[1] ? - "" + - htmlEscape(times[1]) + - "" - : "") + - "" + - htmlEscape(event.title) + - "" + - "" + - htmlEscape(event.location) + - "" + - ""; + s += ""; + for (var col, c=0; c < tableCols.length; c++) { + col = tableCols[c]; + if (col == 'handle') { + s += "" + + "
" + + "" + + "
"; + } else if (col == 'date') { + s += "" + htmlEscape(times[0]) + ""; + } else if (col == 'time') { + if (times[1]) { + s += "" + htmlEscape(times[1]) + ""; + } + } else { + s += "" + htmlEscape(event[col] || '') + ""; + } + } + s += ""; } segContainer[0].innerHTML = s; @@ -5731,15 +5735,12 @@ function TableView(element, calendar) { function render(date, delta) { if (delta) { - addDays(date, delta); - if (!opt('weekends')) { - skipWeekend(date, delta < 0 ? -1 : 1); - } + addDays(date, opt('listPage') * delta); } t.title = opt('listTexts', 'from') + ' ' + formatDate(date, opt('titleFormat')); t.start = t.visStart = cloneDate(date, true); - t.end = addDays(cloneDate(t.start), 1); - t.visEnd = addMonths(cloneDate(t.start), 1); // show events one month ahead. Enough? + t.end = addDays(cloneDate(t.start), opt('listPage')); + t.visEnd = addDays(cloneDate(t.start), opt('listRange')); updateOptions(); @@ -5760,15 +5761,14 @@ function TableView(element, calendar) { function buildSkeleton() { + var tableCols = opt('tableCols'); var s = "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + + ""; + for (var c=0; c < tableCols.length; c++) { + s += ""; + } + s += "" + "
"; div = $('
').addClass('fc-list-content').appendTo(element); table = $(s).appendTo(div); diff --git a/plugins/calendar/skins/default/calendar.css b/plugins/calendar/skins/default/calendar.css index cb1670c3..51d8c603 100644 --- a/plugins/calendar/skins/default/calendar.css +++ b/plugins/calendar/skins/default/calendar.css @@ -530,6 +530,10 @@ div.fc-event-location { color: #333; } +.fc-view-table col.fc-event-location { + width: 20%; +} + /* Settings section */ fieldset #calendarcategories div { diff --git a/plugins/calendar/skins/default/fullcalendar.css b/plugins/calendar/skins/default/fullcalendar.css index 42df934c..b3529ec1 100644 --- a/plugins/calendar/skins/default/fullcalendar.css +++ b/plugins/calendar/skins/default/fullcalendar.css @@ -690,15 +690,10 @@ table.fc-border-separate { width: 1px; } - .fc-view-table col.fc-event-time { width: 8em; } -.fc-view-table col.fc-event-location { - width: 20%; -} - .fc-view-table td.fc-event-date, .fc-view-table td.fc-event-time { white-space: nowrap;