From 263d8ea02caf39ee0068a2877d1bddb50dda3ead Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 27 May 2011 10:19:51 +0200 Subject: [PATCH] move scalebar out of content div, animate scalebar and scrollbar during keyboard navigation --- source/Ox.UI/css/Ox.UI.css | 7 ++- source/Ox.UI/js/Calendar/Ox.Calendar.js | 74 ++++++++++++++----------- 2 files changed, 49 insertions(+), 32 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 097b45ba..fd63c965 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -199,8 +199,13 @@ Calendar height: 16px; cursor: ew-resize; } +.OxCalendar .OxOverlay div:nth-child(even) { + height: 14px; + border-top: 1px solid rgba(255, 255, 255, 0.5); + border-bottom: 1px solid rgba(255, 255, 255, 0.5); +} .OxCalendar .OxOverlay div:nth-child(odd) { - background-color: rgba(0, 0, 0, 0.75); + background-color: rgba(0, 0, 0, 0.5); } .OxCalendar .OxRange .OxArrow { diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index e3ed652a..b8a6e1ed 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -96,10 +96,12 @@ Ox.Calendar = function(options, self) { Just like the 0-th second is 1970-01-01 00:00:00, the 0th month is 1970-01, or the 0-th century is the 20th century. A month unit, for example, has the following properties: - - seconds: average number of seconds + - seconds: average number of seconds (used to compute width at zoom) - date: returns the start date of the index-th month - name: returns a string representation of the index-th month - value: returns the month index for a given date + Setting the date is verbose, but it's the only way to avoid years + like 50 to be coerced to 1950. */ self.units = [ { @@ -339,10 +341,18 @@ Ox.Calendar = function(options, self) { }) .appendTo(self.$toolbar); + self.$scalebar = new Ox.Element() + .addClass('OxTimeline') + .css({ + posision: 'absolute', + top: '24px' + }) + .appendTo(that); + self.$container = new Ox.Element() .addClass('OxCalendarContainer') .css({ - top: '24px', + top: '40px', bottom: '16px' }) .bind({ @@ -368,13 +378,6 @@ Ox.Calendar = function(options, self) { .addClass('OxBackground') .appendTo(self.$content); - self.$scalebar = new Ox.Element() - .addClass('OxTimeline') - .css({ - posision: 'absolute', - }) - .appendTo(self.$content); - self.$scrollbar = new Ox.Element() .addClass('OxTimeline') .css({ @@ -444,11 +447,16 @@ Ox.Calendar = function(options, self) { function drag(event, e) { if (self.drag) { ///* + var marginLeft = e.clientX - self.drag.x, + scrollbarFactor = getScrollbarFactor(); + self.$scalebar.css({ + marginLeft: marginLeft + 'px' + }); self.$content.css({ - marginLeft: (e.clientX - self.drag.x) + 'px' + marginLeft: marginLeft + 'px' }); self.$scrollbar.css({ - marginLeft: Math.round((e.clientX - self.drag.x) / getScrollbarFactor()) + 'px' + marginLeft: Math.round(marginLeft / scrollbarFactor) + 'px' }); //*/ /* @@ -475,15 +483,12 @@ Ox.Calendar = function(options, self) { } function dragafter(e) { + self.$scalebar.css({marginLeft: 0}); + self.$content.css({marginLeft: 0}); + self.$scrollbar.css({marginLeft: 0}); self.options.date = new Date( +self.options.date - (e.clientX - self.drag.x) * getSecondsPerPixel() * 1000 ); - self.$content.css({ - marginLeft: 0 - }); - self.$scrollbar.css({ - marginLeft: 0 - }); renderCalendar(); } @@ -492,11 +497,16 @@ Ox.Calendar = function(options, self) { } function dragScrollbar(event, e) { + var marginLeft = e.clientX - self.drag.x, + scrollbarFactor = getScrollbarFactor(); + self.$scalebar.css({ + marginLeft: (marginLeft * scrollbarFactor) + 'px' + }); self.$content.css({ - marginLeft: ((e.clientX - self.drag.x) * getScrollbarFactor()) + 'px' + marginLeft: (marginLeft * scrollbarFactor) + 'px' }); self.$scrollbar.css({ - marginLeft: (e.clientX - self.drag.x) + 'px' + marginLeft: marginLeft + 'px' }); } @@ -511,16 +521,13 @@ Ox.Calendar = function(options, self) { } function dragafterScrollbar(e) { + // fixme: duplicated + self.$scalebar.css({marginLeft: 0}); + self.$content.css({marginLeft: 0}); + self.$scrollbar.css({marginLeft: 0}); self.options.date = new Date( +self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000 * getScrollbarFactor() ); - // fixme: duplicated - self.$content.css({ - marginLeft: 0 - }); - self.$scrollbar.css({ - marginLeft: 0 - }); renderCalendar(); } @@ -753,16 +760,21 @@ Ox.Calendar = function(options, self) { function panTo(date) { var delta = (date - self.options.date) / 1000 * getPixelsPerSecond(), ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1); + self.$scalebar.animate({ + marginLeft: -delta + 'px' + }, ms); self.$content.animate({ marginLeft: -delta + 'px' }, ms, function() { + self.$scalebar.stop().css({marginLeft: 0}); + self.$content.css({marginLeft: 0}); + self.$scrollbar.stop().css({marginLeft: 0}); self.options.date = date; renderCalendar(); - self.$content.css({ - marginLeft: 0 - }); }); - + self.$scrollbar.animate({ + marginLeft: -delta / getScrollbarFactor() + 'px' + }, ms); }; function panToSelected() { @@ -837,7 +849,7 @@ Ox.Calendar = function(options, self) { var $line = new Ox.Element() .addClass('OxLine') .css({ - top: ((line + 1) * 16) + 'px' + top: (line * 16) + 'px' }) .appendTo(self.$content); events.sort(function(a, b) {