forked from 0x2620/oxjs
calendar updates
This commit is contained in:
rlx
parent
02a3b5c6a1
commit
0cbf31e981
4 changed files with 212 additions and 77 deletions
|
|
@ -10968,7 +10968,8 @@ requires
|
|||
id: 'day',
|
||||
seconds: 86400,
|
||||
date: function(i) {
|
||||
return i * 86400000;
|
||||
// adjust for timezone difference
|
||||
return i * 86400000 + +new Date().getTimezoneOffset() * 60000;
|
||||
},
|
||||
name: function(i) {
|
||||
return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y');
|
||||
|
|
@ -11025,6 +11026,7 @@ requires
|
|||
bottom: '40px'
|
||||
})
|
||||
.bind({
|
||||
dblclick: dblclick,
|
||||
mouseleave: mouseleave,
|
||||
mousemove: mousemove,
|
||||
mousewheel: mousewheel
|
||||
|
|
@ -11041,6 +11043,10 @@ requires
|
|||
.addClass('OxCalendarContent')
|
||||
.appendTo(self.$container);
|
||||
|
||||
self.$background = new Ox.Element()
|
||||
.addClass('OxBackground')
|
||||
.appendTo(self.$content);
|
||||
|
||||
self.$scalebar = new Ox.Element()
|
||||
.addClass('OxTimeline')
|
||||
.css({
|
||||
|
|
@ -11124,9 +11130,7 @@ requires
|
|||
textAlign: 'center'
|
||||
});
|
||||
|
||||
sortDates();
|
||||
renderTimelines();
|
||||
renderDates();
|
||||
renderCalendar();
|
||||
|
||||
function changeDate() {
|
||||
|
||||
|
|
@ -11134,9 +11138,19 @@ requires
|
|||
|
||||
function changeZoom(event, data) {
|
||||
self.options.zoom = data.value;
|
||||
$('.OxDate').remove();
|
||||
renderTimelines();
|
||||
renderDates();
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
function dblclick(e) {
|
||||
if ($(e.target).is(':not(.OxLine > .OxDate)')) {
|
||||
if (self.options.zoom < self.maxZoom) {
|
||||
self.options.date = new Date(
|
||||
(+self.options.date + +getMouseDate(e)) / 2
|
||||
);
|
||||
self.options.zoom++;
|
||||
}
|
||||
renderCalendar();
|
||||
}
|
||||
}
|
||||
|
||||
function dragstart(event, e) {
|
||||
|
|
@ -11147,34 +11161,50 @@ requires
|
|||
|
||||
function drag(event, e) {
|
||||
if (self.drag) {
|
||||
///*
|
||||
self.$content.css({
|
||||
marginLeft: (e.clientX - self.drag.x) + 'px'
|
||||
});
|
||||
self.$scrollbar.css({
|
||||
marginLeft: Math.round((e.clientX - self.drag.x) / 16) + 'px'
|
||||
});
|
||||
});
|
||||
//*/
|
||||
/*
|
||||
self.options.date = new Date(
|
||||
+self.options.date - e.clientDX * getSecondsPerPixel() * 1000
|
||||
);
|
||||
*/
|
||||
//self.drag = {x: e.clientX};
|
||||
}
|
||||
}
|
||||
|
||||
function dragpause(event, e) {
|
||||
return;
|
||||
if (self.drag) {
|
||||
Ox.print('dragpause')
|
||||
dragafter();
|
||||
dragafter(e);
|
||||
self.drag = {x: e.clientX};
|
||||
}
|
||||
}
|
||||
|
||||
function dragend(event, e) {
|
||||
if (self.drag) {
|
||||
self.options.date = new Date(
|
||||
+self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000
|
||||
);
|
||||
dragafter(e);
|
||||
self.drag = null;
|
||||
dragafter();
|
||||
}
|
||||
}
|
||||
|
||||
function dragafter(e) {
|
||||
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();
|
||||
}
|
||||
|
||||
function dragstartScrollbar(event, e) {
|
||||
self.drag = {x: e.clientX};
|
||||
}
|
||||
|
|
@ -11189,33 +11219,27 @@ requires
|
|||
}
|
||||
|
||||
function dragpauseScrollbar(event, e) {
|
||||
return;
|
||||
dragafterScrollbar(e);
|
||||
self.drag = {x: e.clientX};
|
||||
dragafter();
|
||||
}
|
||||
|
||||
function dragendScrollbar(event, e) {
|
||||
dragafterScrollbar(e);
|
||||
self.drag = null;
|
||||
}
|
||||
|
||||
function dragafterScrollbar(e) {
|
||||
self.options.date = new Date(
|
||||
+self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000 * 16
|
||||
);
|
||||
self.drag = null;
|
||||
dragafter();
|
||||
}
|
||||
|
||||
function dragafter() {
|
||||
// fixme: duplicated
|
||||
self.$content.css({
|
||||
marginLeft: 0
|
||||
});
|
||||
self.$scrollbar.css({
|
||||
marginLeft: 0
|
||||
});
|
||||
$('.OxDate').remove();
|
||||
renderTimelines();
|
||||
renderDates();
|
||||
var calendarDate = getCalendarDate();
|
||||
self.$statusbar.html(
|
||||
calendarDate.start + ' | ' + self.options.date + ' | ' + calendarDate.stop
|
||||
);
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
|
|
@ -11284,10 +11308,10 @@ requires
|
|||
}
|
||||
|
||||
function getPosition(date, zoom) {
|
||||
zoom = zoom || self.options.zoom
|
||||
return Math.round(
|
||||
self.options.width / 2 +
|
||||
(date - self.options.date) / 1000 * getPixelsPerSecond(zoom)
|
||||
(date - self.options.date) / 1000 *
|
||||
getPixelsPerSecond(zoom || self.options.zoom)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -11295,15 +11319,42 @@ requires
|
|||
return 1 / getPixelsPerSecond(zoom);
|
||||
}
|
||||
|
||||
function getBackgroundElements(zoom) {
|
||||
// fixme: duplicated
|
||||
var $elements = [],
|
||||
pixelsPerSecond = getPixelsPerSecond(zoom),
|
||||
n, unit, value, width;
|
||||
Ox.forEach(self.units, function(v, i) {
|
||||
width = Math.round(v.seconds * pixelsPerSecond);
|
||||
if (width < 64) {
|
||||
unit = v;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
|
||||
value = unit.value(self.options.date);
|
||||
Ox.loop(-n, n + 1, function(i) {
|
||||
$elements.push(
|
||||
new Ox.Element()
|
||||
.addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd')
|
||||
.css({
|
||||
left: getPosition(new Date(unit.date(value + i)), zoom) + 'px',
|
||||
width: width + 'px'
|
||||
})
|
||||
);
|
||||
});
|
||||
return $elements;
|
||||
}
|
||||
|
||||
function getTimelineElements(zoom) {
|
||||
var $elements = [],
|
||||
pixelsPerSecond = getPixelsPerSecond(zoom),
|
||||
n, unit, value, width;
|
||||
self.units = self.units.reverse();
|
||||
Ox.forEach(self.units, function(v) {
|
||||
width = v.seconds * pixelsPerSecond;
|
||||
width = Math.round(v.seconds * pixelsPerSecond);
|
||||
if (width >= 64) {
|
||||
unit = Ox.getObjectById(self.units, v.id);
|
||||
unit = v;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -11313,7 +11364,7 @@ requires
|
|||
Ox.loop(-n, n + 1, function(i) {
|
||||
$elements.push(
|
||||
getDateElement({
|
||||
name: unit.name(value + i)/* + unit.date(value + i) + '-' + unit.date(value + i + 1)*/,
|
||||
name: unit.name(value + i),
|
||||
start: new Date(unit.date(value + i)),
|
||||
stop: new Date(unit.date(value + i + 1))
|
||||
}, zoom)
|
||||
|
|
@ -11344,18 +11395,22 @@ requires
|
|||
}
|
||||
|
||||
function mousewheel(e, delta, deltaX, deltaY) {
|
||||
Ox.print('mousewheel', delta, deltaX, deltaY);
|
||||
//Ox.print('mousewheel', delta, deltaX, deltaY);
|
||||
var deltaZ = 0;
|
||||
if (!self.mousewheel && deltaY && Math.abs(deltaY) > Math.abs(deltaX)) {
|
||||
self.options.date = deltaY < 0 ?
|
||||
new Date(2 * +self.options.date - +getMouseDate(e)) :
|
||||
new Date((+self.options.date + +getMouseDate(e)) / 2)
|
||||
self.options.zoom = Ox.limit(self.options.zoom + (
|
||||
deltaY < 0 ? -1 : 1
|
||||
), 0, self.maxZoom);
|
||||
self.$zoomInput.options({value: self.options.zoom});
|
||||
$('.OxDate').remove();
|
||||
renderTimelines();
|
||||
renderDates();
|
||||
if (deltaY < 0 && self.options.zoom > 0) {
|
||||
deltaZ = -1
|
||||
} else if (deltaY > 0 && self.options.zoom < self.maxZoom) {
|
||||
deltaZ = 1
|
||||
}
|
||||
if (deltaZ) {
|
||||
self.options.date = deltaZ == -1 ?
|
||||
new Date(2 * +self.options.date - +getMouseDate(e)) :
|
||||
new Date((+self.options.date + +getMouseDate(e)) / 2)
|
||||
self.options.zoom += deltaZ;
|
||||
self.$zoomInput.options({value: self.options.zoom});
|
||||
renderCalendar();
|
||||
}
|
||||
}
|
||||
self.mousewheel = true;
|
||||
setTimeout(function() {
|
||||
|
|
@ -11371,14 +11426,37 @@ requires
|
|||
);
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
$('.OxBackground').empty();
|
||||
$('.OxDate').remove();
|
||||
renderBackground();
|
||||
renderTimelines();
|
||||
renderDates();
|
||||
}
|
||||
|
||||
function renderBackground() {
|
||||
getBackgroundElements(self.options.zoom).forEach(function($element) {
|
||||
$element.appendTo(self.$background);
|
||||
});
|
||||
}
|
||||
|
||||
function renderDates() {
|
||||
self.lineDates = [];
|
||||
self.$lines = [];
|
||||
self.options.dates.forEach(function(date, i) {
|
||||
var line = self.$lines.length;
|
||||
Ox.forEach(self.lineDates, function(dates, line_) {
|
||||
var calendarDate = getCalendarDate();
|
||||
lineDates = [];
|
||||
self.options.dates.filter(function(date) {
|
||||
// filter out dates outside the visible area
|
||||
return overlaps(date, calendarDate);
|
||||
}).sort(function(a, b) {
|
||||
// sort dates by duration, descending
|
||||
return (b.stop - b.start) - (a.stop - a.start);
|
||||
}).forEach(function(date, i) {
|
||||
var line = lineDates.length;
|
||||
// traverse lines
|
||||
Ox.forEach(lineDates, function(dates, line_) {
|
||||
var fits = true;
|
||||
// traverse dates in line
|
||||
Ox.forEach(dates, function(date_) {
|
||||
// if overlaps, check next line
|
||||
if (overlaps(date, date_)) {
|
||||
fits = false;
|
||||
return false;
|
||||
|
|
@ -11389,24 +11467,30 @@ requires
|
|||
return false;
|
||||
}
|
||||
});
|
||||
if (line == self.$lines.length) {
|
||||
self.lineDates[line] = [];
|
||||
self.$lines[line] = new Ox.Element()
|
||||
.addClass('OxLine')
|
||||
.css({
|
||||
top: ((line + 1) * 16) + 'px'
|
||||
});
|
||||
if (line == lineDates.length) {
|
||||
lineDates[line] = [];
|
||||
}
|
||||
self.lineDates[line].push(date);
|
||||
self.$lines[line].append(getDateElement(date));
|
||||
lineDates[line].push(date);
|
||||
});
|
||||
$('.OxLine').remove();
|
||||
self.$lines.forEach(function($line) {
|
||||
$line.appendTo(self.$content);
|
||||
lineDates.forEach(function(dates, line) {
|
||||
var $line = new Ox.Element()
|
||||
.addClass('OxLine')
|
||||
.css({
|
||||
top: ((line + 1) * 16) + 'px'
|
||||
})
|
||||
.appendTo(self.$content);
|
||||
dates.sort(function(a, b) {
|
||||
// sort dates by start, ascending
|
||||
return a.start - b.start;
|
||||
}).forEach(function(date) {
|
||||
getDateElement(date).appendTo($line);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderTimelines() {
|
||||
Ox.print(self.options.zoom, Math.max(self.options.zoom - 4, 0))
|
||||
getTimelineElements(self.options.zoom).forEach(function($element) {
|
||||
$element.appendTo(self.$scalebar.$element);
|
||||
});
|
||||
|
|
@ -11415,12 +11499,6 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function sortDates() {
|
||||
self.options.dates.sort(function(a, b) {
|
||||
return (b.stop - b.start) - (a.stop - a.start);
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, val) {
|
||||
if (key == 'date') {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue