0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

slightly faster rendering of events

Browse source
This commit is contained in:
rolux 2011-05-28 01:06:48 +02:00
parent 2c82f51120
commit 37ecdd99ac
1 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -98,7 +98,6 @@ Ox.Calendar = function(options, self) {
event.rangeText = event.rangeText.split(' - ').shift() + ' - ...'; event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
} }
}); });
self.lineEvents = getLineEvents();
self.maxZoom = 32; self.maxZoom = 32;
self.minLabelWidth = 80; self.minLabelWidth = 80;
@ -413,6 +412,8 @@ Ox.Calendar = function(options, self) {
textAlign: 'center' textAlign: 'center'
}); });
self.$lines = [];
self.lineEvents = getLineEvents();
renderCalendar(); renderCalendar();
function changeDate() { function changeDate() {
@ -552,7 +553,8 @@ Ox.Calendar = function(options, self) {
) )
.css({ .css({
left: getPosition(unit.date(value + i), zoom) + 'px', 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) { 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 // 250 ms for half the width of the visible area
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.stop().animate({ self.$scalebar.stop().animate({
@ -811,6 +813,7 @@ Ox.Calendar = function(options, self) {
getBackgroundElements(self.options.zoom).forEach(function($element) { getBackgroundElements(self.options.zoom).forEach(function($element) {
$element.appendTo(self.$background); $element.appendTo(self.$background);
}); });
} }
function renderCalendar() { function renderCalendar() {
@ -827,6 +830,7 @@ Ox.Calendar = function(options, self) {
function getLineEvents() { function getLineEvents() {
var lineEvents = []; var lineEvents = [];
self.$content.find('.OxLine').remove();
self.options.events.filter(function(event) { self.options.events.filter(function(event) {
// filter out events with types not shown // filter out events with types not shown
// and events outside the visible area <-- commented out to keep layout from changing // 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) { if (line == lineEvents.length) {
lineEvents[line] = []; lineEvents[line] = [];
self.$lines[line] = new Ox.Element()
.addClass('OxLine')
.css({
top: (line * 16) + 'px'
})
.appendTo(self.$content);
} }
lineEvents[line].push(event); lineEvents[line].push(event);
}); });
self.contentHeight = Math.max(
lineEvents.length * 16, self.$container.height()
);
self.$content.css({height: self.contentHeight + 'px'});
return lineEvents; return lineEvents;
} }
@ -877,27 +891,14 @@ Ox.Calendar = function(options, self) {
var calendarEvent = getCalendarEvent(), var calendarEvent = getCalendarEvent(),
height; height;
//types = ['date', 'place', 'person', 'other']; //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) { self.lineEvents.forEach(function(events, line) {
var $line = new Ox.Element() events.forEach(function(event) {
.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) {
// append if selected or visible // append if selected or visible
if ( if (
event.id == self.options.selected event.id == self.options.selected
|| overlaps(event, calendarEvent) || 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) { function scrollTo(top, animate) {
var containerHeight = self.$container.height(), var containerHeight = self.$container.height(),
contentHeight = self.$content.height(),
scrollTop = self.$container.$element[0].scrollTop, scrollTop = self.$container.$element[0].scrollTop,
min = 0, min = 0,
max = Math.ceil(contentHeight - containerHeight / 2), max = Math.ceil(self.contentHeight - containerHeight / 2),
top = Ox.limit(top, min, max), top = Ox.limit(top, min, max),
delta = top - scrollTop, delta = top - scrollTop,
ms = 250 * Math.min(Math.abs(delta) / (containerHeight / 2), 1); ms = 250 * Math.min(Math.abs(delta) / (containerHeight / 2), 1);