move scalebar out of content div, animate scalebar and scrollbar during keyboard navigation

This commit is contained in:
rolux 2011-05-27 10:19:51 +02:00
parent 1950b514b5
commit 263d8ea02c
2 changed files with 49 additions and 32 deletions

View file

@ -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 {

View file

@ -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) {