allow for vertical scrolling of calendar (mouse and keyboard)

source/Ox.UI/css/Ox.UI.css

@@ -118,7 +118,7 @@ Calendar
     overflow: hidden;
 }
 .OxCalendar > .OxCalendarContent {
-    //height: 100%;
+    position: absolute;
 }
 
 .OxCalendar .OxBackground {

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -52,6 +52,9 @@ Ox.Calendar = function(options, self) {
             key_0: function() {
                 panToSelected();
             },
+            key_down: function() {
+                scrollBy(1);
+            },
             key_equal: function() {
                 zoomBy(1);
             },
@@ -69,6 +72,9 @@ Ox.Calendar = function(options, self) {
             },
             key_shift_0: function() {
                 zoomToSelected();
+            },
+            key_up: function() {
+                scrollBy(-1);
             }
         });
 
@@ -440,7 +446,10 @@ Ox.Calendar = function(options, self) {
 
     function dragstart(event, e) {
         //if ($(e.target).is(':not(.OxLine > .OxEvent)')) {
-            self.drag = {x: e.clientX};
+            self.drag = {
+                x: e.clientX,
+                y: self.$container.$element[0].scrollTop
+            };
         //}
     }
 
@@ -458,20 +467,14 @@ Ox.Calendar = function(options, self) {
             self.$scrollbar.css({
                 marginLeft: Math.round(marginLeft / scrollbarFactor) + 'px'
             });
-            //*/
+            scrollTo(self.drag.y - e.clientDY);
-            /*
-            self.options.date = new Date(
-                +self.options.date - e.clientDX * getSecondsPerPixel() * 1000
-            );
-            */
-            //self.drag = {x: e.clientX};
         }
     }
 
     function dragpause(event, e) {
         if (self.drag) {
             dragafter(e);
-            self.drag = {x: e.clientX};
+            self.drag.x = e.clientX;
         }
     }
 
@@ -644,7 +647,7 @@ Ox.Calendar = function(options, self) {
         [1, 0].forEach(function(u) {
             var unit = units[u],
                 value = unit.value(self.options.date),
-                width = unit.seconds * getPixelsPerSecond(zoom),
+                width = Math.round(unit.seconds * getPixelsPerSecond(zoom)),
                 n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
                 Ox.loop(-n, n + 1, function(i) {
                     if (u == 0 || Ox.mod(value + i, 2)) {
@@ -759,6 +762,7 @@ Ox.Calendar = function(options, self) {
 
     function panTo(date) {
         var delta = (date - self.options.date) / 1000 * getPixelsPerSecond(),
+            // 250 ms for half the width of the visible area
             ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
         self.$scalebar.animate({
             marginLeft: -delta + 'px'
@@ -802,7 +806,8 @@ Ox.Calendar = function(options, self) {
     }
 
     function renderEvents() {
-        var calendarEvent = getCalendarEvent();
+        var calendarEvent = getCalendarEvent(),
+            height,
             lineEvents = [];
             //types = ['date', 'place', 'person', 'other'];
         self.options.events.filter(function(event) {
@@ -845,6 +850,9 @@ Ox.Calendar = function(options, self) {
             lineEvents[line].push(event);
         });
         self.$content.find('.OxLine').remove();
+        height = lineEvents.length * 16;
+        self.$background.$element.children().css({height: height + 'px'});
+        self.$content.css({height: height + 'px'});
         lineEvents.forEach(function(events, line) {
             var $line = new Ox.Element()
                 .addClass('OxLine')
@@ -906,6 +914,28 @@ Ox.Calendar = function(options, self) {
         });
     }
 
+    function scrollBy(delta) {
+        scrollTo(self.$container.$element[0].scrollTop + delta * self.$container.height() / 2, true);
+    }
+
+    function scrollTo(top, animate) {
+        var containerHeight = self.$container.height(),
+            contentHeight = self.$content.height(),
+            scrollTop = self.$container.$element[0].scrollTop,
+            min = 0,
+            max = Math.ceil(contentHeight - containerHeight / 2),
+            top = Ox.limit(top, min, max),
+            delta = top - scrollTop,
+            ms = 250 * Math.min(Math.abs(delta) / (containerHeight / 2), 1);
+        if (animate) {
+            self.$container.animate({
+                scrollTop: top
+            }, ms);
+        } else {
+            self.$container.$element[0].scrollTop = top;
+        }
+    }
+
     function selectEvent(id, $element) {
         self.$content.find('.OxSelected').removeClass('OxSelected');
         if (id) {

source/Ox.UI/js/Core/Ox.JQueryElement.js

@@ -8,6 +8,9 @@ Ox.JQueryElement <function> Wrapper for jQuery
     $element <object> jQuery DOM Element
 @*/
 
+// fixme: it seems that children(), find() etc. don't work directly,
+// and still have to be called on the $element
+
 Ox.JQueryElement = function($element) {
     var that = this;
     //@ id <number> Unique id