move scalebar out of content div, animate scalebar and scrollbar during keyboard navigation
This commit is contained in:
parent
1950b514b5
commit
263d8ea02c
2 changed files with 49 additions and 32 deletions
|
@ -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 {
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue