Add year view.
authorJan Schneider <jan@horde.org>
Wed, 3 Jun 2009 17:02:14 +0000 (19:02 +0200)
committerJan Schneider <jan@horde.org>
Wed, 3 Jun 2009 17:02:14 +0000 (19:02 +0200)
kronolith/js/src/kronolith.js
kronolith/lib/Kronolith.php
kronolith/templates/index/year.inc
kronolith/themes/screen.css

index e7ba0dc..a546245 100644 (file)
@@ -361,7 +361,15 @@ KronolithCore = {
             break;
 
         case 'year':
-            $('kronolithViewYear').down('caption span').setText(this.setTitle(date.toString('yyyy')));
+            var viewBody = $('kronolithViewYear'), month;
+
+            viewBody.down('caption span').setText(this.setTitle(date.toString('yyyy')));
+
+            // Build new calendar view.
+            for (month = 0; month < 12; month++) {
+                $('kronolithYear' + month).update(this.createYearMonth(date.getFullYear(), month).show());
+            }
+
             break;
 
         case 'agenda':
@@ -500,6 +508,32 @@ KronolithCore = {
         return row;
     },
 
+    /**
+     * Creates a table for a single month in the year view.
+     *
+     * @param integer year   The year.
+     * @param integer month  The month.
+     *
+     * @return Element  The element rendering a month table.
+     */
+    createYearMonth: function(year, month)
+    {
+        // Create a copy of the month template.
+        var table = $('kronolithYearTemplate').cloneNode(true),
+            tbody = table.down('tbody');
+        table.removeAttribute('id');
+        tbody.writeAttribute('id', 'kronolithYearTable' + month)
+
+        // Set month name.
+        table.down('SPAN')
+            .setText(Date.CultureInfo.monthNames[month]);
+
+        // Build month table.
+        this.buildMinical(tbody, new Date(year, month, 1));
+
+        return table;
+    },
+
     _equalRowHeights: function(tbody)
     {
         var children = tbody.childElements();
@@ -543,14 +577,29 @@ KronolithCore = {
      */
     updateMinical: function(date, view)
     {
-        var tbody = $('kronolithMinical').down('tbody'),
-            dates = this.viewDates(date, 'month'), day = dates[0].clone(),
-            date7 = date.clone().add(1).week(),
-            weekStart, weekEnd, weekEndDay, td, tr;
-
         // Update header.
         $('kronolithMinicalDate').setText(date.toString('MMMM yyyy')).setAttribute('date', date.dateString());
 
+        this.buildMinical($('kronolithMinical').down('tbody'), date, view);
+
+        $('kronolithMenuCalendars').setStyle({ 'bottom': $('kronolithMenuBottom').getHeight() + 'px' });
+    },
+
+    /**
+     * Creates a mini calendar suitable for the navigation calendar and the
+     * year view.
+     *
+     * @param Element tbody  The table body to add the days to.
+     * @param Date date      The date to show in the calendar.
+     * @param string view    The view that's displayed, determines which days in
+     *                       the mini calendar are highlighted.
+     */
+    buildMinical: function(tbody, date, view)
+    {
+        var dates = this.viewDates(date, 'month'), day = dates[0].clone(),
+            date7 = date.clone().add(1).week(),
+            weekStart, weekEnd, weekEndDay, td, tr;
+
         // Remove old calendar rows. Maybe we should only rebuild the minical
         // if necessary.
         tbody.childElements().invoke('remove');
@@ -560,7 +609,7 @@ KronolithCore = {
             if (day.getDay() == Kronolith.conf.week_start) {
                 tr = new Element('tr');
                 tbody.insert(tr);
-                td = new Element('td', { 'class': 'kronolithMinicalWeek', date: day.dateString() }).setText(day.getWeek());;
+                td = new Element('td', { 'class': 'kronolithMinicalWeek', 'weekdate': day.dateString() }).setText(day.getWeek());;
                 tr.insert(td);
                 weekStart = day.clone();
                 weekEnd = day.clone();
@@ -583,8 +632,6 @@ KronolithCore = {
             tr.insert(td);
             day.next().day();
         }
-
-        $('kronolithMenuCalendars').setStyle({ 'bottom': $('kronolithMenuBottom').getHeight() + 'px' });
     },
 
     /**
@@ -766,6 +813,36 @@ KronolithCore = {
                 return;
             }
             break;
+
+        case 'year':
+            var year = dates[0].getFullYear(),
+                month, day, dateString, monthLength, events, title;
+            this.ecache.each(function(types) {
+                types.value.each(function(calendars) {
+                    for (month = 0; month < 12; month++) {
+                        monthLength = Date.getDaysInMonth(year, month);
+                        for (day = 1; day <= monthLength; day++) {
+                            dateString = year + (month + 1).toPaddedString(2) + day.toPaddedString(2);
+                            events = calendars.value.get(dateString);
+                            if (events) {
+                                title = '';
+                                events.each(function(event) {
+                                    if (event.value.al) {
+                                        title += Kronolith.text.allday;
+                                    } else {
+                                        title += event.value.start.toString('t') + '-' + event.value.end.toString('t');
+                                    }
+                                    title += ': ' + event.value.t;
+                                });
+                                if (title) {
+                                   $('kronolithYearTable' + month).down('td[date=' + dateString + ']').writeAttribute('title', title).addClassName('kronolithHasEvents');
+                                }
+                            }
+                        }
+                    }
+                });
+            });
+            return;
         }
 
         var day = dates[0].clone(), date;
@@ -1171,6 +1248,12 @@ KronolithCore = {
             end.moveToLastDayOfMonth();
             end.moveToEndOfWeek();
             break;
+        case 'year':
+            start.setDate(1);
+            start.setMonth(0);
+            end.setMonth(11);
+            end.moveToLastDayOfMonth();
+            break;
         case 'agenda':
             end.add(6).days();
             break;
@@ -1456,10 +1539,12 @@ KronolithCore = {
                 if (tmp.tagName != 'td') {
                     tmp.up('td');
                 }
-                if (tmp && tmp.readAttribute('date')) {
-                    if (tmp.hasClassName('kronolithMinicalWeek')) {
-                        this.go('week:' + tmp.readAttribute('date'));
-                    } else if (!tmp.hasClassName('empty')) {
+                if (tmp) {
+                    if (tmp.readAttribute('weekdate') &&
+                        tmp.hasClassName('kronolithMinicalWeek')) {
+                        this.go('week:' + tmp.readAttribute('weekdate'));
+                    } else if (tmp.readAttribute('date') &&
+                               !tmp.hasClassName('empty')) {
                         this.go('day:' + tmp.readAttribute('date'));
                     }
                 }
index 93ad7a1..2588297 100644 (file)
@@ -203,6 +203,7 @@ class Kronolith
             'week' => str_replace('%d', '#{week}', _("Week %d")),
             'agenda' => _("Agenda"),
             'searching' => str_replace('%s', '#{term}', _("Events matching \"%s\"")),
+            'allday' => _("All-day"),
         );
         for ($i = 1; $i <= 12; ++$i) {
             $code['text']['month'][$i - 1] = NLS::getLangInfo(constant('MON_' . $i));
index 3b76e99..42383c1 100644 (file)
   </caption>
 </table>
 
-<?php foreach (array("January", "February","March","April","May","June","July","August","September","October","November","December") as $month): ?>
-<div class="kronolithMinical">
-<table cellspacing="1" cellpadding="0" border="0">
+<div id="kronolithYear0" class="kronolithMinical"></div>
+<div id="kronolithYear1" class="kronolithMinical"></div>
+<div id="kronolithYear2" class="kronolithMinical"></div>
+<div id="kronolithYear3" class="kronolithMinical"></div>
+<div id="kronolithYear4" class="kronolithMinical"></div>
+<div id="kronolithYear5" class="kronolithMinical"></div>
+<div id="kronolithYear6" class="kronolithMinical"></div>
+<div id="kronolithYear7" class="kronolithMinical"></div>
+<div id="kronolithYear8" class="kronolithMinical"></div>
+<div id="kronolithYear9" class="kronolithMinical"></div>
+<div id="kronolithYear10" class="kronolithMinical"></div>
+<div id="kronolithYear11" class="kronolithMinical"></div>
+
+<table id="kronolithYearTemplate" style="display:none" cellspacing="1" cellpadding="0" border="0">
   <caption>
-    <span date="20090401"><?php echo $month ?></span>
+    <span></span>
   </caption>
   <thead><tr>
     <th class="kronolithMinicalEmpty">&nbsp;</th>
-    <th title="<?php echo _("Sunday") ?>"><?php echo substr(_("Sunday"),0,1) ?></th>
-    <th title="<?php echo _("Monday") ?>"><?php echo substr(_("Monday"),0,1) ?></th>
-    <th title="<?php echo _("Tuesday") ?>"><?php echo substr(_("Tuesday"),0,1) ?></th>
-    <th title="<?php echo _("Wednesday") ?>"><?php echo substr(_("Wednesday"),0,1) ?></th>
-    <th title="<?php echo _("Thursday") ?>"><?php echo substr(_("Thursday"),0,1) ?></th>
-    <th title="<?php echo _("Friday") ?>"><?php echo substr(_("Friday"),0,1) ?></th>
-    <th title="<?php echo _("Saturday") ?>"><?php echo substr(_("Saturday"),0,1) ?></th>
+    <?php for ($i = $prefs->getValue('week_start_monday'), $c = $i + 7; $i < $c; $i++): ?>
+    <th title="<?php echo NLS::getLangInfo(constant('DAY_' . ($i % 7 + 1))) ?>"><?php echo substr(NLS::getLangInfo(constant('DAY_' . ($i % 7 + 1))), 0, 1) ?></th>
+    <?php endfor; ?>
   </tr></thead>
   <tbody>
-    <tr><td class="kronolithMinicalWeek" date="20090329">13</td><td date="20090329" class="kronolithMinicalEmpty">29</td><td date="20090330" class="kronolithMinicalEmpty">30</td><td date="20090331" class="kronolithMinicalEmpty">31</td><td date="20090401" class="">1</td><td date="20090402" class="">2</td><td date="20090403" class="">3</td><td date="20090404" class="">4</td></tr>
-    <tr><td class="kronolithMinicalWeek" date="20090405">14</td><td date="20090405">5</td><td date="20090406">6</td><td date="20090407">7</td><td date="20090408">8</td><td date="20090409">9</td><td date="20090410">10</td><td date="20090411">11</td></tr>
-    <tr><td class="kronolithMinicalWeek" date="20090412">15</td><td date="20090412">12</td><td date="20090413">13</td><td date="20090414">14</td><td date="20090415">15</td><td date="20090416">16</td><td date="20090417">17</td><td date="20090418">18</td></tr>
-    <tr><td class="kronolithMinicalWeek" date="20090419">16</td><td date="20090419">19</td><td date="20090420">20</td><td date="20090421">21</td><td date="20090422">22</td><td date="20090423">23</td><td date="20090424">24</td><td date="20090425">25</td></tr>
-    <tr><td class="kronolithMinicalWeek" date="20090426">17</td><td date="20090426">26</td><td date="20090427">27</td><td date="20090428">28</td><td date="20090429">29</td><td date="20090430">30</td><td date="20090501" class="kronolithMinicalEmpty">1</td><td date="20090502" class="kronolithMinicalEmpty">2</td></tr>
   </tbody>
 </table>
-</div>
-<?php endforeach; ?>
 
 </div>
index fc15eb7..3e4f19e 100644 (file)
@@ -1017,6 +1017,9 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
     float: left;
     margin: 2px 15px 13px 20px;
 }
+.kronolithHasEvents {
+    font-weight: bold;
+}
 
 /* Main view month */
 #kronolithViewMonthContainer {