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;
|
height: 16px;
|
||||||
cursor: ew-resize;
|
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) {
|
.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 {
|
.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
|
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.
|
is 1970-01, or the 0-th century is the 20th century.
|
||||||
A month unit, for example, has the following properties:
|
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
|
- date: returns the start date of the index-th month
|
||||||
- name: returns a string representation of the index-th month
|
- name: returns a string representation of the index-th month
|
||||||
- value: returns the month index for a given date
|
- 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 = [
|
self.units = [
|
||||||
{
|
{
|
||||||
|
@ -339,10 +341,18 @@ Ox.Calendar = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$toolbar);
|
.appendTo(self.$toolbar);
|
||||||
|
|
||||||
|
self.$scalebar = new Ox.Element()
|
||||||
|
.addClass('OxTimeline')
|
||||||
|
.css({
|
||||||
|
posision: 'absolute',
|
||||||
|
top: '24px'
|
||||||
|
})
|
||||||
|
.appendTo(that);
|
||||||
|
|
||||||
self.$container = new Ox.Element()
|
self.$container = new Ox.Element()
|
||||||
.addClass('OxCalendarContainer')
|
.addClass('OxCalendarContainer')
|
||||||
.css({
|
.css({
|
||||||
top: '24px',
|
top: '40px',
|
||||||
bottom: '16px'
|
bottom: '16px'
|
||||||
})
|
})
|
||||||
.bind({
|
.bind({
|
||||||
|
@ -368,13 +378,6 @@ Ox.Calendar = function(options, self) {
|
||||||
.addClass('OxBackground')
|
.addClass('OxBackground')
|
||||||
.appendTo(self.$content);
|
.appendTo(self.$content);
|
||||||
|
|
||||||
self.$scalebar = new Ox.Element()
|
|
||||||
.addClass('OxTimeline')
|
|
||||||
.css({
|
|
||||||
posision: 'absolute',
|
|
||||||
})
|
|
||||||
.appendTo(self.$content);
|
|
||||||
|
|
||||||
self.$scrollbar = new Ox.Element()
|
self.$scrollbar = new Ox.Element()
|
||||||
.addClass('OxTimeline')
|
.addClass('OxTimeline')
|
||||||
.css({
|
.css({
|
||||||
|
@ -444,11 +447,16 @@ Ox.Calendar = function(options, self) {
|
||||||
function drag(event, e) {
|
function drag(event, e) {
|
||||||
if (self.drag) {
|
if (self.drag) {
|
||||||
///*
|
///*
|
||||||
|
var marginLeft = e.clientX - self.drag.x,
|
||||||
|
scrollbarFactor = getScrollbarFactor();
|
||||||
|
self.$scalebar.css({
|
||||||
|
marginLeft: marginLeft + 'px'
|
||||||
|
});
|
||||||
self.$content.css({
|
self.$content.css({
|
||||||
marginLeft: (e.clientX - self.drag.x) + 'px'
|
marginLeft: marginLeft + 'px'
|
||||||
});
|
});
|
||||||
self.$scrollbar.css({
|
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) {
|
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 = new Date(
|
||||||
+self.options.date - (e.clientX - self.drag.x) * getSecondsPerPixel() * 1000
|
+self.options.date - (e.clientX - self.drag.x) * getSecondsPerPixel() * 1000
|
||||||
);
|
);
|
||||||
self.$content.css({
|
|
||||||
marginLeft: 0
|
|
||||||
});
|
|
||||||
self.$scrollbar.css({
|
|
||||||
marginLeft: 0
|
|
||||||
});
|
|
||||||
renderCalendar();
|
renderCalendar();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -492,11 +497,16 @@ Ox.Calendar = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragScrollbar(event, e) {
|
function dragScrollbar(event, e) {
|
||||||
|
var marginLeft = e.clientX - self.drag.x,
|
||||||
|
scrollbarFactor = getScrollbarFactor();
|
||||||
|
self.$scalebar.css({
|
||||||
|
marginLeft: (marginLeft * scrollbarFactor) + 'px'
|
||||||
|
});
|
||||||
self.$content.css({
|
self.$content.css({
|
||||||
marginLeft: ((e.clientX - self.drag.x) * getScrollbarFactor()) + 'px'
|
marginLeft: (marginLeft * scrollbarFactor) + 'px'
|
||||||
});
|
});
|
||||||
self.$scrollbar.css({
|
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) {
|
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 = new Date(
|
||||||
+self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000 * getScrollbarFactor()
|
+self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000 * getScrollbarFactor()
|
||||||
);
|
);
|
||||||
// fixme: duplicated
|
|
||||||
self.$content.css({
|
|
||||||
marginLeft: 0
|
|
||||||
});
|
|
||||||
self.$scrollbar.css({
|
|
||||||
marginLeft: 0
|
|
||||||
});
|
|
||||||
renderCalendar();
|
renderCalendar();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -753,16 +760,21 @@ Ox.Calendar = function(options, self) {
|
||||||
function panTo(date) {
|
function panTo(date) {
|
||||||
var delta = (date - self.options.date) / 1000 * getPixelsPerSecond(),
|
var delta = (date - self.options.date) / 1000 * getPixelsPerSecond(),
|
||||||
ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
|
ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
|
||||||
|
self.$scalebar.animate({
|
||||||
|
marginLeft: -delta + 'px'
|
||||||
|
}, ms);
|
||||||
self.$content.animate({
|
self.$content.animate({
|
||||||
marginLeft: -delta + 'px'
|
marginLeft: -delta + 'px'
|
||||||
}, ms, function() {
|
}, ms, function() {
|
||||||
|
self.$scalebar.stop().css({marginLeft: 0});
|
||||||
|
self.$content.css({marginLeft: 0});
|
||||||
|
self.$scrollbar.stop().css({marginLeft: 0});
|
||||||
self.options.date = date;
|
self.options.date = date;
|
||||||
renderCalendar();
|
renderCalendar();
|
||||||
self.$content.css({
|
|
||||||
marginLeft: 0
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
self.$scrollbar.animate({
|
||||||
|
marginLeft: -delta / getScrollbarFactor() + 'px'
|
||||||
|
}, ms);
|
||||||
};
|
};
|
||||||
|
|
||||||
function panToSelected() {
|
function panToSelected() {
|
||||||
|
@ -837,7 +849,7 @@ Ox.Calendar = function(options, self) {
|
||||||
var $line = new Ox.Element()
|
var $line = new Ox.Element()
|
||||||
.addClass('OxLine')
|
.addClass('OxLine')
|
||||||
.css({
|
.css({
|
||||||
top: ((line + 1) * 16) + 'px'
|
top: (line * 16) + 'px'
|
||||||
})
|
})
|
||||||
.appendTo(self.$content);
|
.appendTo(self.$content);
|
||||||
events.sort(function(a, b) {
|
events.sort(function(a, b) {
|
||||||
|
|
Loading…
Reference in a new issue