slightly faster rendering of events
This commit is contained in:
parent
2c82f51120
commit
37ecdd99ac
1 changed files with 20 additions and 20 deletions
|
@ -98,7 +98,6 @@ Ox.Calendar = function(options, self) {
|
|||
event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
|
||||
}
|
||||
});
|
||||
self.lineEvents = getLineEvents();
|
||||
|
||||
self.maxZoom = 32;
|
||||
self.minLabelWidth = 80;
|
||||
|
@ -413,6 +412,8 @@ Ox.Calendar = function(options, self) {
|
|||
textAlign: 'center'
|
||||
});
|
||||
|
||||
self.$lines = [];
|
||||
self.lineEvents = getLineEvents();
|
||||
renderCalendar();
|
||||
|
||||
function changeDate() {
|
||||
|
@ -552,7 +553,8 @@ Ox.Calendar = function(options, self) {
|
|||
)
|
||||
.css({
|
||||
left: getPosition(unit.date(value + i), zoom) + 'px',
|
||||
width: (u == 0 ? 1 : width) + 'px'
|
||||
width: (u == 0 ? 1 : width) + 'px',
|
||||
height: self.contentHeight + 'px'
|
||||
})
|
||||
);
|
||||
}
|
||||
|
@ -776,7 +778,7 @@ Ox.Calendar = function(options, self) {
|
|||
}
|
||||
|
||||
function panTo(date, line) {
|
||||
var delta = (date - self.options.date) / 1000 * getPixelsPerSecond(),
|
||||
var delta = Math.round((date - self.options.date) / 1000 * getPixelsPerSecond()),
|
||||
// 250 ms for half the width of the visible area
|
||||
ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
|
||||
self.$scalebar.stop().animate({
|
||||
|
@ -811,6 +813,7 @@ Ox.Calendar = function(options, self) {
|
|||
getBackgroundElements(self.options.zoom).forEach(function($element) {
|
||||
$element.appendTo(self.$background);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
|
@ -827,6 +830,7 @@ Ox.Calendar = function(options, self) {
|
|||
|
||||
function getLineEvents() {
|
||||
var lineEvents = [];
|
||||
self.$content.find('.OxLine').remove();
|
||||
self.options.events.filter(function(event) {
|
||||
// filter out events with types not shown
|
||||
// and events outside the visible area <-- commented out to keep layout from changing
|
||||
|
@ -867,9 +871,19 @@ Ox.Calendar = function(options, self) {
|
|||
});
|
||||
if (line == lineEvents.length) {
|
||||
lineEvents[line] = [];
|
||||
self.$lines[line] = new Ox.Element()
|
||||
.addClass('OxLine')
|
||||
.css({
|
||||
top: (line * 16) + 'px'
|
||||
})
|
||||
.appendTo(self.$content);
|
||||
}
|
||||
lineEvents[line].push(event);
|
||||
});
|
||||
self.contentHeight = Math.max(
|
||||
lineEvents.length * 16, self.$container.height()
|
||||
);
|
||||
self.$content.css({height: self.contentHeight + 'px'});
|
||||
return lineEvents;
|
||||
}
|
||||
|
||||
|
@ -877,27 +891,14 @@ Ox.Calendar = function(options, self) {
|
|||
var calendarEvent = getCalendarEvent(),
|
||||
height;
|
||||
//types = ['date', 'place', 'person', 'other'];
|
||||
self.$content.find('.OxLine').remove();
|
||||
height = Math.max(self.lineEvents.length * 16, self.$container.height());
|
||||
self.$background.$element.children().css({height: height + 'px'});
|
||||
self.$content.css({height: height + 'px'});
|
||||
self.lineEvents.forEach(function(events, line) {
|
||||
var $line = new Ox.Element()
|
||||
.addClass('OxLine')
|
||||
.css({
|
||||
top: (line * 16) + 'px'
|
||||
})
|
||||
.appendTo(self.$content);
|
||||
events.sort(function(a, b) {
|
||||
// sort events by start, ascending
|
||||
return a.startTime - b.startTime;
|
||||
}).forEach(function(event) {
|
||||
events.forEach(function(event) {
|
||||
// append if selected or visible
|
||||
if (
|
||||
event.id == self.options.selected
|
||||
|| overlaps(event, calendarEvent)
|
||||
) {
|
||||
getEventElement(event).data({line: line}).appendTo($line);
|
||||
getEventElement(event).data({line: line}).appendTo(self.$lines[line]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -956,10 +957,9 @@ Ox.Calendar = function(options, self) {
|
|||
|
||||
function scrollTo(top, animate) {
|
||||
var containerHeight = self.$container.height(),
|
||||
contentHeight = self.$content.height(),
|
||||
scrollTop = self.$container.$element[0].scrollTop,
|
||||
min = 0,
|
||||
max = Math.ceil(contentHeight - containerHeight / 2),
|
||||
max = Math.ceil(self.contentHeight - containerHeight / 2),
|
||||
top = Ox.limit(top, min, max),
|
||||
delta = top - scrollTop,
|
||||
ms = 250 * Math.min(Math.abs(delta) / (containerHeight / 2), 1);
|
||||
|
|
Loading…
Reference in a new issue