From 7005e2137dc6b6d24e3607a4f929e903c2abcb31 Mon Sep 17 00:00:00 2001 From: Jan Schneider Date: Tue, 26 May 2009 14:17:29 +0200 Subject: [PATCH] Implement agenda view. Resize calendar list if minical height changes. --- kronolith/js/src/kronolith.js | 77 +++++++++++++++++++++++++++++++----- kronolith/lib/Kronolith.php | 1 + kronolith/templates/index/agenda.inc | 18 +++------ kronolith/themes/screen.css | 3 +- 4 files changed, 75 insertions(+), 24 deletions(-) diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js index 65fdb239d..8bf9a835f 100644 --- a/kronolith/js/src/kronolith.js +++ b/kronolith/js/src/kronolith.js @@ -190,6 +190,7 @@ KronolithCore = { switch (loc) { case 'day': + case 'agenda': case 'week': case 'month': case 'year': @@ -204,7 +205,7 @@ KronolithCore = { ((loc == 'year') || (loc == 'month' && date.getMonth() == this.date.getMonth()) || (loc == 'week' && date.getWeek() == this.date.getWeek()) || - (loc == 'day' && date.dateString() == this.date.dateString()))) { + ((loc == 'day' || loc == 'agenda') && date.dateString() == this.date.dateString()))) { return; } @@ -284,7 +285,7 @@ KronolithCore = { case 'month': var tbody = $('kronolithViewMonthBody'), dates = this.viewDates(date, view), - day = dates[0].clone(), rows = 0, row; + day = dates[0].clone(), row; $('kronolithViewMonth').down('caption span').setText(date.toString('MMMM')); @@ -298,13 +299,30 @@ KronolithCore = { // Build new calendar view. while (day.compareTo(dates[1]) < 1) { - row = tbody.insert(this.createWeekRow(day, date.getMonth(), dates).show()); + tbody.insert(this.createWeekRow(day, date.getMonth(), dates).show()); day.next().week(); - rows++; } this._equalRowHeights(tbody); break; + + case 'agenda': + var tbody = $('kronolithViewAgendaBody'); + + $('kronolithViewAgenda').down('caption span').setText(Kronolith.text.agenda); + + // Remove old rows. Maybe we should only rebuild the calendars if + // necessary. + tbody.childElements().each(function(row) { + if (row.identify() != 'kronolithAgendaTemplate') { + row.remove(); + } + }); + + // Build new calendar view. + tbody.insert(this.createAgendaDay(date, 0).show()); + + break; } }, @@ -388,6 +406,31 @@ KronolithCore = { return row; }, + /** + * Creates a table row for a single day in the agenda view. + * + * @param Date date The first day to show in the row. + * @param integer num The number of the row. + * + * @return Element The element rendering a week row. + */ + createAgendaDay: function(date, num) + { + // Create a copy of the row template. + var row = $('kronolithAgendaTemplate').cloneNode(true); + row.removeAttribute('id'); + + // Fill week number and day cells. + row.addClassName('kronolithRow' + (num % 2 ? 'Odd' : 'Even')) + .down() + .setText(date.toString('D')) + .next() + .writeAttribute('id', 'kronolithAgendaDay' + date.dateString()); + //.writeAttribute('date', date.dateString()) + + return row; + }, + _equalRowHeights: function(tbody) { var children = tbody.childElements(); @@ -462,13 +505,15 @@ KronolithCore = { if (view && (view == 'month' || (view == 'week' && date.between(weekStart, weekEnd)) || - (view == 'day' && date.compareTo(day) == 0))) { + ((view == 'day' || view == 'agenda') && date.compareTo(day) == 0))) { td.addClassName('kronolithSelected'); } td.setText(day.getDate()); tr.insert(td); day.next().day(); } + + $('kronolithMenuCalendars').setStyle({ 'bottom': $('kronolithMenuBottom').getHeight() + 'px' }); }, /** @@ -714,12 +759,13 @@ KronolithCore = { switch (view) { case 'day': case 'week': - var storage = view + 'Sizes'; - this._calculateRowSizes(storage, view == 'day' ? 'kronolithViewDay' : 'kronolithViewWeek'); - var div = _createElement(event), + var storage = view + 'Sizes', + div = _createElement(event), style = { 'backgroundColor': event.value.bg, 'color': event.value.fg }; + this._calculateRowSizes(storage, view == 'day' ? 'kronolithViewDay' : 'kronolithViewWeek'); + if (event.value.al) { if (view == 'day') { $('kronolithViewDayBody').down('td').next('td').insert(div.setStyle(style)); @@ -925,6 +971,17 @@ KronolithCore = { new Drag('kronolithEventmonth' + event.value.calendar + date + event.key, { threshold: 5, parentElement: function() { return $('kronolithViewMonthBody'); }, snapToParent: true }); } break; + + case 'agenda': + var div = _createElement(event) + .setStyle({ 'backgroundColor': event.value.bg, + 'color': event.value.fg }) + .update(new Element('SPAN', { 'class': 'kronolithDate' }).update(event.value.start.toString('t'))) + .insert(' ') + .insert(new Element('SPAN', { 'class': 'kronolithSep' }).update('·')) + .insert(' ') + $('kronolithAgendaDay' + date).insert(div); + break; } this._setEventText(div, event.value) @@ -934,7 +991,7 @@ KronolithCore = { _setEventText: function(div, event) { - div.update(event.t); + div.insert(event.t); if (event.a) { div.insert(' ') .insert(new Element('IMG', { 'src': Kronolith.conf.URI_IMG + 'alarm-' + event.fg.substr(1) + '.png', 'title': Kronolith.text.alarm + ' ' + event.a })); @@ -1375,13 +1432,13 @@ KronolithCore = { offset = elt.className == 'kronolithPrev' ? -1 : 1; switch (this.view) { case 'day': + case 'agenda': newDate.add(offset).day(); break; case 'week': newDate.add(offset).week(); break; case 'month': - case 'agenda': newDate.add(offset).month(); break; case 'year': diff --git a/kronolith/lib/Kronolith.php b/kronolith/lib/Kronolith.php index 1ecd0b29f..5955235fc 100644 --- a/kronolith/lib/Kronolith.php +++ b/kronolith/lib/Kronolith.php @@ -201,6 +201,7 @@ class Kronolith 'alarm' => _("Alarm:"), 'noalerts' => _("No Alerts"), 'week' => str_replace('%d', '#{week}', _("Week %d")), + 'agenda' => _("Agenda"), )); for ($i = 1; $i <= 12; ++$i) { $code['text']['month'][$i - 1] = NLS::getLangInfo(constant('MON_' . $i)); diff --git a/kronolith/templates/index/agenda.inc b/kronolith/templates/index/agenda.inc index b47778e8d..36db85b03 100644 --- a/kronolith/templates/index/agenda.inc +++ b/kronolith/templates/index/agenda.inc @@ -1,26 +1,20 @@ - diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css index 5ff13de40..425de5aa2 100644 --- a/kronolith/themes/screen.css +++ b/kronolith/themes/screen.css @@ -534,8 +534,7 @@ body.kronolithAjax { #kronolithMenuCalendars { position: absolute; top: 34px; - bottom: 280px; - padding-top: -15px; + margin-bottom: 20px; overflow: auto; } #kronolithMenuBottom { -- 2.11.0