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

speed up rendering of the calendar (only compute event positions once)

Browse source
This commit is contained in:
rolux 2011-05-27 21:42:01 +02:00
parent eccade6aa9
commit b99679ffe1
2 changed files with 96 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
demos/calendar/js/calendar.js
View file

@ -15,18 +15,27 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
date: new Date(0),
events: [
{name: '13th Century', start: '1200', end: '1300', type: 'date'},
{name: '14th Century', start: '1300', end: '1400', type: 'date'},
{name: '15th Century', start: '1400', end: '1500', type: 'date'},
{name: '16th Century', start: '1500', end: '1600', type: 'date'},
{name: '17th Century', start: '1600', end: '1700', type: 'date'},
{name: '18th Century', start: '1700', end: '1800', type: 'date'},
{name: '19th Century', start: '1800', end: '1900', type: 'date'},
{name: '1848', start: '1848', end: '1849', type: 'date'},
{name: '20th Century', start: '1900', end: '2000', type: 'date'},
{name: '1900s', start: '1900', end: '1910', type: 'date'},
{name: '1910s', start: '1910', end: '1920', type: 'date'},
{name: '1920s', start: '1920', end: '1930', type: 'date'},
{name: '1930s', start: '1930', end: '1940', type: 'date'},
{name: '1933', start: '1933', end: '1934', type: 'date'},
{name: '1936', start: '1936', end: '1937', type: 'date'},
{name: '1940s', start: '1940', end: '1950', type: 'date'},
{name: '1940', start: '1940', end: '1941', type: 'date'},
{name: '1941', start: '1941', end: '1942', type: 'date'},
{name: '1942', start: '1942', end: '1943', type: 'date'},
{name: '1943', start: '1943', end: '1944', type: 'date'},
{name: '1944', start: '1944', end: '1945', type: 'date'},
{name: '1945', start: '1945', end: '1946', type: 'date'},
{name: '1950s', start: '1950', end: '1960', type: 'date'},
{name: '1960s', start: '1960', end: '1970', type: 'date'},
{name: '1967', start: '1967', end: '1968', type: 'date'},
@ -37,8 +46,19 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: '1969', start: '1969', end: '1970', type: 'date'},
{name: '1970s', start: '1970', end: '1980', type: 'date'},
{name: '1970', start: '1970', end: '1971', type: 'date'},
{name: '1971', start: '1971', end: '1972', type: 'date'},
{name: '1972', start: '1972', end: '1973', type: 'date'},
{name: '1973', start: '1973', end: '1974', type: 'date'},
{name: '1974', start: '1974', end: '1975', type: 'date'},
{name: '1975', start: '1975', end: '1976', type: 'date'},
{name: '1976', start: '1976', end: '1977', type: 'date'},
{name: '1977', start: '1977', end: '1978', type: 'date'},
{name: '1978', start: '1978', end: '1979', type: 'date'},
{name: '1979', start: '1979', end: '1980', type: 'date'},
{name: '1980s', start: '1980', end: '1990', type: 'date'},
{name: '1989', start: '1989', end: '1990', type: 'date'},
{name: '1990s', start: '1990', end: '2000', type: 'date'},
{name: '1990', start: '1990', end: '1991', type: 'date'},
{name: '3rd Millennium', start: '2000', end: '3000', type: 'date'},
{name: '21st Century', start: '2000', end: '2100', type: 'date'},
{name: '2000s', start: '2000', end: '2010', type: 'date'},
@ -48,23 +68,66 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: '2020s', start: '2020', end: '2030', type: 'date'},
{name: 'Ötzi', start: '-3300', end: '-3255', type: 'person'},
{name: 'Imhotep', start: '-2655', end: '-2600', type: 'person'},
{name: 'Hammurabi', start: '-1850', end: '-1750', type: 'person'},
{name: 'Hatshepsut', start: '-1508', end: '-1458', type: 'person'},
{name: 'Nefertiti', start: '-1370', end: '-1330', type: 'person'},
{name: 'Tutankhamun', start: '-1341', end: '-1323', type: 'person'},
{name: 'Ramesses', start: '-1300', end: '-1213', type: 'person'},
{name: 'King Saul', start: '-1079', end: '-1007', type: 'person'},
{name: 'King David', start: '-1040', end: '-970', type: 'person'},
{name: 'King Solomon', start: '-1011', end: '-931', type: 'person'},
{name: 'Homer', start: '-900', end: '-800', type: 'person'},
{name: 'Nebuchadnezzar', start: '-634', end: '-562', type: 'person'},
{name: 'Thales of Miletus', start: '-624', end: '-546', type: 'person'},
{name: 'Cyrus the Great', start: '-600', end: '-530', type: 'person'},
{name: 'Buddha', start: '-600', end: '-500', type: 'person'},
{name: 'Pythagoras', start: '-570', end: '-495', type: 'person'},
{name: 'Confucius', start: '-551-09-28', end: '-479', type: 'person'},
{name: 'Darius the Great', start: '-550', end: '-486', type: 'person'},
{name: 'Sun Tzu', start: '-544', end: '-496', type: 'person'},
{name: 'Aeschylus', start: '-525', end: '-455', type: 'person'},
{name: 'Sophocles', start: '-496', end: '-406', type: 'person'},
{name: 'Pericles', start: '-495', end: '-429', type: 'person'},
{name: 'Empedocles', start: '-490', end: '-430', type: 'person'},
{name: 'Herodotus', start: '-484', end: '-425', type: 'person'},
{name: 'Euripides', start: '-480', end: '-406', type: 'person'},
{name: 'Socrates', start: '-469', end: '-399', type: 'person'},
{name: 'Hippocrates', start: '-460', end: '-370', type: 'person'},
{name: 'Aristophanes', start: '-446', end: '-386', type: 'person'},
{name: 'Plato', start: '-428', end: '-348', type: 'person'},
{name: 'Aristotle', start: '-384', end: '-322', type: 'person'},
{name: 'Alexander the Great', start: '-356-07-20', end: '-323-06-10', type: 'person'},
{name: 'Euclid', start: '-300', end: '-200', type: 'person'},
{name: 'Archimedes', start: '-287', end: '-212', type: 'person'},
{name: 'Eratosthenes', start: '-276', end: '-194', type: 'person'},
{name: 'Hannibal', start: '-247', end: '-182', type: 'person'},
{name: 'Spartacus', start: '-109', end: '-71', type: 'person'},
{name: 'Cicero', start: '-106-01-03', end: '-43-12-07', type: 'person'},
{name: 'Julius Caesar', start: '-100-07-13', end: '-44-03-15', type: 'person'},
{name: 'Virgil', start: '-70-10-15', end: '-19-09-21', type: 'person'},
{name: 'Cleopatra', start: '-69', end: '-30-08-12', type: 'person'},
{name: 'Horatius', start: '-65-12-08', end: '-8-11-27', type: 'person'},
{name: 'Augustus', start: '-63-09-23', end: '14-08-19', type: 'person'},
{name: 'Ovid', start: '-43-03-20', end: '17', type: 'person'},
{name: 'Jesus Christ', start: '-5', end: '33', type: 'person'},
{name: 'Caligula', start: '12-08-31', end: '41-01-24', type: 'person'},
{name: 'Nero', start: '37-12-15', end: '68-06-09', type: 'person'},
{name: 'Plutarch', start: '46', end: '120', type: 'person'},
{name: 'Tacitus', start: '56', end: '117', type: 'person'},
{name: 'Ptolemy', start: '90', end: '168', type: 'person'},
{name: 'Muhammad', start: '570', end: '632-06-08', type: 'person'},
{name: 'Charlemagne', start: '742-04-02', end: '814-01-28', type: 'person'},
{name: 'Erik the Red', start: '950', end: '1003', type: 'person'},
{name: 'William the Conqueror', start: '1027', end: '1087-09-09', type: 'person'},
{name: 'Barbarossa', start: '1122', end: '1190-06-10', type: 'person'},
{name: 'Saladin', start: '1138', end: '1193-03-04', type: 'person'},
{name: 'Genghis Khan', start: '1162-05-31', end: '1227-08-25', type: 'person'},
{name: 'Marco Polo', start: '1254', end: '1324-01-08', type: 'person'},
{name: 'Dante Alighieri', start: '1265-06-01', end: '1321-09-14', type: 'person'},
{name: 'Mansa Musa', start: '1280', end: '1337', type: 'person'},
{name: 'Jeanne d\'Arc', start: '1412', end: '1431-05-30', type: 'person'},
{name: 'Christopher Columbus', start: '1451-08-22', end: '1506-05-20', type: 'person'},
@ -336,12 +399,27 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'Kurt Cobain', start: '1967-02-20', end: '1994-04-05', type: 'person'},
{name: 'Xia Dynasty', start: '-2070', end: '-1600', type: 'place'},
{name: 'Shang Dynasty', start: '-1760', end: '-1046', type: 'place'},
{name: 'Zhou Dynasty', start: '-1046', end: '-256', type: 'place'},
{name: 'Library of Alexandria', start: '-300', end: '-48', type: 'place'},
{name: 'Qin Dynasty', start: '-221', end: '-206', type: 'place'},
{name: 'Han Dynasty', start: '-206', end: '220', type: 'place'},
{name: 'Roman Empire', start: '-27', end: '1453', type: 'place'},
{name: 'Liang Dynasty', start: '502', end: '587', type: 'place'},
{name: 'Chen Dynasty', start: '557', end: '589', type: 'place'},
{name: 'Sui Dynasty', start: '581', end: '618', type: 'place'},
{name: 'Tang Dynasty', start: '618', end: '907', type: 'place'},
{name: 'Song Dynasty', start: '960', end: '1279', type: 'place'},
{name: 'Holy Roman Empire', start: '962-02-02', end: '1806-08-06', type: 'place'},
{name: 'Mongol Empire', start: '1206', end: '1368', type: 'place'},
{name: 'Yuan Dynasty', start: '1271', end: '1368', type: 'place'},
{name: 'Ottoman Empire', start: '1299-07-27', end: '1923-10-29', type: 'place'},
{name: 'Ming Dynasty', start: '1368', end: '1644', type: 'place'},
{name: 'Mughal Empire', start: '1526-04-21', end: '1858-06-20', type: 'place'},
{name: 'Qing Dynasty', start: '1644', end: '1912', type: 'place'},
{name: 'Austrian Empire', start: '1804-08-11', end: '1867-03-30', type: 'place'},
{name: 'Japanese Empire', start: '1868-01-03', end: '1947-05-03', type: 'place'},
{name: 'Congo Free State', start: '1885-07-11', end: '1908-11-15', type: 'place'},
{name: 'Soviet Union', start: '1922-12-30', end: '1991-12-26', type: 'place'},
{name: 'Weimar Republic', start: '1918-11-09', end: '1933-01-30', type: 'place'},
@ -361,6 +439,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'Battle of Hastings', start: '1066-10-14', end: '1066-10-15', type: 'other'},
{name: 'Crusades', start: '1095', end: '1291', type: 'other'},
{name: 'Hundred Years\' War', start: '1337', end: '1453', type: 'other'},
{name: 'Great Plague', start: '1348', end: '1350', type: 'other'},
{name: 'Renaissance', start: '1350', end: '1650', type: 'other'},
{name: 'Fall of Constantinople', start: '1453-04-06', end: '1453-05-29', type: 'other'},
{name: 'Spanish Inquisition', start: '1480-09-27', end: '1834-07-15', type: 'other'},
@ -402,6 +481,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'Wannsee Conference', start: '1942-01-20', end: '1942-01-21', type: 'other'},
{name: 'Battle of Stalingrad', start: '1942-08-23', end: '1943-02-02', type: 'other'},
{name: 'D-Day', start: '1944-06-06', end: '1944-06-07', type: 'other'},
{name: 'Liberation of Paris', start: '1944-08-19', end: '1944-08-25', type: 'other'},
{name: 'Liberation of Auschwitz', start: '1945-01-27', end: '1945-01-28', type: 'other'},
{name: 'Battle of Okinawa', start: '1945-04-01', end: '1945-06-22', type: 'other'},
{name: 'Hiroshima', start: '1945-08-06', end: '1945-08-07', type: 'other'},

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

@ -98,6 +98,7 @@ Ox.Calendar = function(options, self) {
event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
}
});
self.lineEvents = getLineEvents();
self.maxZoom = 32;
self.minLabelWidth = 80;
@ -318,6 +319,7 @@ Ox.Calendar = function(options, self) {
self.options.showTypes = data.selected.map(function(type) {
return type.id;
});
self.lineEvents = getLineEvents();
renderCalendar();
}
})
@ -823,18 +825,15 @@ Ox.Calendar = function(options, self) {
});
}
function renderEvents() {
var calendarEvent = getCalendarEvent(),
height,
lineEvents = [];
//types = ['date', 'place', 'person', 'other'];
function getLineEvents() {
var lineEvents = [];
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
return self.options.showTypes.indexOf(event.type) > -1
/*&& overlaps(event, calendarEvent)*/;
}).sort(function(a, b) {
// sort events
// sort events (dates first, people last, longer before shorter)
if (a.type == 'date' && b.type != 'date') {
return -1;
} else if (a.type != 'date' && b.type == 'date') {
@ -843,7 +842,6 @@ Ox.Calendar = function(options, self) {
return 1;
} else if (a.type != 'person' && b.type == 'person') {
return -1;
///*
} else if ((b.endTime - b.startTime) != (a.endTime - a.startTime)) {
return (b.endTime - b.startTime) - (a.endTime - a.startTime);
} else /*if (a.startTime < b.startTime || a.startTime > b.startTime)*/ {
@ -872,11 +870,18 @@ Ox.Calendar = function(options, self) {
}
lineEvents[line].push(event);
});
return lineEvents;
}
function renderEvents() {
var calendarEvent = getCalendarEvent(),
height;
//types = ['date', 'place', 'person', 'other'];
self.$content.find('.OxLine').remove();
height = Math.max(lineEvents.length * 16, self.$container.height());
height = Math.max(self.lineEvents.length * 16, self.$container.height());
self.$background.$element.children().css({height: height + 'px'});
self.$content.css({height: height + 'px'});
lineEvents.forEach(function(events, line) {
self.lineEvents.forEach(function(events, line) {
var $line = new Ox.Element()
.addClass('OxLine')
.css({