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

more calendar improvements (low zoom levels)

Browse source
This commit is contained in:
rolux 2011-05-25 21:33:43 +02:00
parent d98c34407d
commit 474d5f92cb
3 changed files with 127 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
demos/calendar/js/calendar.js
View file

@ -44,15 +44,18 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: '2020s', start: '2020', end: '2030', type: 'date'}, {name: '2020s', start: '2020', end: '2030', type: 'date'},
{name: 'Barbarossa', start: '1122', end: '1190-06-10', type: 'person'},
{name: 'Genghis Khan', start: '1162', end: '1228', type: 'person'}, {name: 'Genghis Khan', start: '1162', end: '1228', type: 'person'},
{name: 'Marco Polo', start: '1254', end: '1324-01-08', type: 'person'}, {name: 'Marco Polo', start: '1254', end: '1324-01-08', type: 'person'},
{name: 'Christopher Columbus', start: '1451-08-22', end: '1506-05-20', type: 'person'}, {name: 'Christopher Columbus', start: '1451-08-22', end: '1506-05-20', type: 'person'},
{name: 'Leonardo da Vinci', start: '1452-04-15', end: '1519-05-02', type: 'person'}, {name: 'Leonardo da Vinci', start: '1452-04-15', end: '1519-05-02', type: 'person'},
{name: 'Michelangelo', start: '1475-03-06', end: '1564-02-18', type: 'person'}, {name: 'Michelangelo', start: '1475-03-06', end: '1564-02-18', type: 'person'},
{name: 'Pieter Bruegel', start: '1525', end: '1569-09-09', type: 'person'}, {name: 'Pieter Bruegel', start: '1525', end: '1569-09-09', type: 'person'},
{name: 'Francis Bacon', start: '1561-01-22', end: '1626-04-09', type: 'person'},
{name: 'Galileo Galilei', start: '1564-02-15', end: '1642-01-08', type: 'person'}, {name: 'Galileo Galilei', start: '1564-02-15', end: '1642-01-08', type: 'person'},
{name: 'William Shakespeare', start: '1564-04-26', end: '1616-04-23', type: 'person'}, {name: 'William Shakespeare', start: '1564-04-26', end: '1616-04-23', type: 'person'},
{name: 'René Descartes', start: '1596-03-31', end: '1650-02-11', type: 'person'}, {name: 'René Descartes', start: '1596-03-31', end: '1650-02-11', type: 'person'},
{name: 'Oliver Cromwell', start: '1599-04-25', end: '1658-09-03', type: 'person'},
{name: 'Diego Velázquez', start: '1599-06-06', end: '1660-08-06', type: 'person'}, {name: 'Diego Velázquez', start: '1599-06-06', end: '1660-08-06', type: 'person'},
{name: 'Johannes Vermeer', start: '1632-10-31', end: '1675-12-15', type: 'person'}, {name: 'Johannes Vermeer', start: '1632-10-31', end: '1675-12-15', type: 'person'},
{name: 'Baruch Spinoza', start: '1632-11-24', end: '1677-02-21', type: 'person'}, {name: 'Baruch Spinoza', start: '1632-11-24', end: '1677-02-21', type: 'person'},
@ -92,6 +95,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'Adolf Hitler', start: '1889-04-20', end: '1945-04-30', type: 'person'}, {name: 'Adolf Hitler', start: '1889-04-20', end: '1945-04-30', type: 'person'},
{name: 'Charles de Gaulle', start: '1890-11-22', end: '1970-11-09', type: 'person'}, {name: 'Charles de Gaulle', start: '1890-11-22', end: '1970-11-09', type: 'person'},
{name: 'Walter Benjamin', start: '1892-07-15', end: '1940-09-26', type: 'person'}, {name: 'Walter Benjamin', start: '1892-07-15', end: '1940-09-26', type: 'person'},
{name: 'Mao Zedong', start: '1893-12-26', end: '1976-09-09', type: 'person'},
{name: 'Al Capone', start: '1899-01-17', end: '1947-01-25', type: 'person'}, {name: 'Al Capone', start: '1899-01-17', end: '1947-01-25', type: 'person'},
{name: 'Alfred Hitchcock', start: '1899-08-13', end: '1980-04-29', type: 'person'}, {name: 'Alfred Hitchcock', start: '1899-08-13', end: '1980-04-29', type: 'person'},
{name: 'Werner Heisenberg', start: '1901-12-05', end: '1976-02-01', type: 'person'}, {name: 'Werner Heisenberg', start: '1901-12-05', end: '1976-02-01', type: 'person'},
@ -103,6 +107,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'Alan Turing', start: '1912-06-23', end: '1954-06-07', type: 'person'}, {name: 'Alan Turing', start: '1912-06-23', end: '1954-06-07', type: 'person'},
{name: 'John F. Kennedy', start: '1917-05-29', end: '1963-11-22', type: 'person'}, {name: 'John F. Kennedy', start: '1917-05-29', end: '1963-11-22', type: 'person'},
{name: 'Gilles Deleuze', start: '1925-01-18', end: '1995-11-04', type: 'person'}, {name: 'Gilles Deleuze', start: '1925-01-18', end: '1995-11-04', type: 'person'},
{name: 'Pol Pot', start: '1925-05-19', end: '1998-04-15', type: 'person'},
{name: 'Marylin Monroe', start: '1926-06-01', end: '1962-08-05', type: 'person'}, {name: 'Marylin Monroe', start: '1926-06-01', end: '1962-08-05', type: 'person'},
{name: 'Michel Foucault', start: '1926-10-15', end: '1984-06-25', type: 'person'}, {name: 'Michel Foucault', start: '1926-10-15', end: '1984-06-25', type: 'person'},
{name: 'Che Guevara', start: '1928-06-14', end: '1967-10-09', type: 'person'}, {name: 'Che Guevara', start: '1928-06-14', end: '1967-10-09', type: 'person'},
@ -200,6 +205,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
], ],
height: window.innerHeight, height: window.innerHeight,
range: [-5000, 5000],
width: window.innerWidth, width: window.innerWidth,
zoom: 4 zoom: 4
}).appendTo(Ox.UI.$body).gainFocus(); }).appendTo(Ox.UI.$body).gainFocus();

6
source/Ox.UI/css/Ox.UI.css
View file

@ -196,7 +196,11 @@ Calendar
cursor: ew-resize; cursor: ew-resize;
} }
.OxCalendar .OxOverlay div:nth-child(odd) { .OxCalendar .OxOverlay div:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.333); background-color: rgba(0, 0, 0, 0.75);
}
.OxCalendar .OxRange .OxArrow {
border-radius: 0;
} }

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

@ -15,7 +15,7 @@ Ox.Calendar <f:Ox.Element> Basic calendar object
start <s> Start of the event (UTC Date, as string) start <s> Start of the event (UTC Date, as string)
type <s> Type of the event (like "person") type <s> Type of the event (like "person")
height <n|256> Height in px height <n|256> Height in px
range <[n]|[100, 5101]> Start and end year of the calendar range <[n]|[1000, 3000]> Start and end year of the calendar
selected <s|''> Id of the selected event selected <s|''> Id of the selected event
width <n|256> Width in px width <n|256> Width in px
zoom <n|8> Initial zoom level zoom <n|8> Initial zoom level
@ -46,8 +46,8 @@ Ox.Calendar = function(options, self) {
height: self.options.height + 'px' height: self.options.height + 'px'
}) })
.bindEvent({ .bindEvent({
anyclick: function() { anyclick: function(e) {
that.gainFocus(); !$(e.target).is('.OxInput') && that.gainFocus();
}, },
key_0: function() { key_0: function() {
panToSelected(); panToSelected();
@ -80,21 +80,19 @@ Ox.Calendar = function(options, self) {
self.maxZoom = 32; self.maxZoom = 32;
self.minLabelWidth = 80; self.minLabelWidth = 80;
self.overlayWidths = [Math.round(self.options.width / 16)];
self.overlayWidths = [
Math.floor((self.options.width - self.overlayWidths[0]) / 2),
self.overlayWidths[0],
Math.ceil((self.options.width - self.overlayWidths[0]) / 2),
];
self.units = [ self.units = [
{ {
id: 'millennium', id: 'millennium',
seconds: 365242.5 * 86400, seconds: 365242.5 * 86400,
date: function(i) { date: function(i) {
return '01/01/' + (i + 1) + '000 UTC'; var date = new Date(1970, 0, 1);
date.setUTCFullYear((i + 1) * 1000);
return date;
}, },
name: function(i) { name: function(i) {
return Ox.formatOrdinal(i + 2) + ' millennium'; return i > -2
? Ox.formatOrdinal(i + 2) + ' millennium'
: Ox.formatOrdinal(-i - 1) + ' millennium BC'
}, },
value: function(date) { value: function(date) {
return Math.floor(date.getUTCFullYear() / 1000) - 1; return Math.floor(date.getUTCFullYear() / 1000) - 1;
@ -104,10 +102,14 @@ Ox.Calendar = function(options, self) {
id: 'century', id: 'century',
seconds: 36524.25 * 86400, seconds: 36524.25 * 86400,
date: function(i) { date: function(i) {
return '01/01/' + (i + 19) + '00 UTC'; var date = new Date(1970, 0, 1);
date.setUTCFullYear((i + 19) * 100);
return date;
}, },
name: function(i) { name: function(i) {
return Ox.formatOrdinal(i + 20) + ' century'; return i > -20
? Ox.formatOrdinal(i + 20) + ' century'
: Ox.formatOrdinal(-i - 19) + ' century BC'
}, },
value: function(date) { value: function(date) {
return Math.floor(date.getUTCFullYear() / 100) - 19; return Math.floor(date.getUTCFullYear() / 100) - 19;
@ -117,7 +119,9 @@ Ox.Calendar = function(options, self) {
id: 'decade', id: 'decade',
seconds: 3652.425 * 86400, seconds: 3652.425 * 86400,
date: function(i) { date: function(i) {
return '01/01/' + (i + 197) + '0 UTC' var date = new Date(1970, 0, 1);
date.setUTCFullYear((i + 197) * 10);
return date;
}, },
name: function(i) { name: function(i) {
return (i + 197) + '0s' return (i + 197) + '0s'
@ -143,7 +147,9 @@ Ox.Calendar = function(options, self) {
id: 'month', id: 'month',
seconds: 365.2425 / 12 * 86400, seconds: 365.2425 / 12 * 86400,
date: function(i) { date: function(i) {
return (Ox.mod(i, 12) + 1) + '/01/' + (Math.floor(i / 12) + 1970) + ' UTC'; var date = new Date(1970, Ox.mod(i, 12), 1);
date.setUTCFullYear(Math.floor(i / 12) + 1970)
return date;
}, },
name: function(i) { name: function(i) {
return Ox.SHORT_MONTHS[Ox.mod(i, 12)] + ' ' + Math.floor(i / 12 + 1970) return Ox.SHORT_MONTHS[Ox.mod(i, 12)] + ' ' + Math.floor(i / 12 + 1970)
@ -156,7 +162,7 @@ Ox.Calendar = function(options, self) {
id: 'week', id: 'week',
seconds: 7 * 86400, seconds: 7 * 86400,
date: function(i) { date: function(i) {
return (i * 7 - 3) * 86400000; return new Date((i * 7 - 3) * 86400000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e'); return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e');
@ -169,7 +175,7 @@ Ox.Calendar = function(options, self) {
id: 'day', id: 'day',
seconds: 86400, seconds: 86400,
date: function(i) { date: function(i) {
return i * 86400000; return new Date(i * 86400000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y', true); return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y', true);
@ -182,7 +188,7 @@ Ox.Calendar = function(options, self) {
id: 'six_hours', id: 'six_hours',
seconds: 21600, seconds: 21600,
date: function(i) { date: function(i) {
return i * 21600000; return new Date(i * 21600000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 21600000), '%b %e, %H:00', true); return Ox.formatDate(new Date(i * 21600000), '%b %e, %H:00', true);
@ -195,7 +201,7 @@ Ox.Calendar = function(options, self) {
id: 'hour', id: 'hour',
seconds: 3600, seconds: 3600,
date: function(i) { date: function(i) {
return i * 3600000; return new Date(i * 3600000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 3600000), '%b %e, %H:00', true); return Ox.formatDate(new Date(i * 3600000), '%b %e, %H:00', true);
@ -208,7 +214,7 @@ Ox.Calendar = function(options, self) {
id: 'five_minutes', id: 'five_minutes',
seconds: 300, seconds: 300,
date: function(i) { date: function(i) {
return i * 300000; return new Date(i * 300000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 300000), '%b %e, %H:%M', true); return Ox.formatDate(new Date(i * 300000), '%b %e, %H:%M', true);
@ -221,7 +227,7 @@ Ox.Calendar = function(options, self) {
id: 'minute', id: 'minute',
seconds: 60, seconds: 60,
date: function(i) { date: function(i) {
return i * 60000; return new Date(i * 60000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 60000), '%b %e, %H:%M', true); return Ox.formatDate(new Date(i * 60000), '%b %e, %H:%M', true);
@ -234,7 +240,7 @@ Ox.Calendar = function(options, self) {
id: 'five_seconds', id: 'five_seconds',
seconds: 5, seconds: 5,
date: function(i) { date: function(i) {
return i * 5000; return new Date(i * 5000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 5000), '%H:%M:%S', true); return Ox.formatDate(new Date(i * 5000), '%H:%M:%S', true);
@ -247,7 +253,7 @@ Ox.Calendar = function(options, self) {
id: 'second', id: 'second',
seconds: 1, seconds: 1,
date: function(i) { date: function(i) {
return i * 1000; return new Date(i * 1000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 1000), '%H:%M:%S', true); return Ox.formatDate(new Date(i * 1000), '%H:%M:%S', true);
@ -263,7 +269,6 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(that); .appendTo(that);
Ox.print(self.options.showTypes)
self.$typeSelect = Ox.Select({ self.$typeSelect = Ox.Select({
items: [ items: [
{id: 'date', title: 'Dates', checked: self.options.showTypes.indexOf('date') > -1}, {id: 'date', title: 'Dates', checked: self.options.showTypes.indexOf('date') > -1},
@ -276,7 +281,7 @@ Ox.Calendar = function(options, self) {
title: 'Show...', title: 'Show...',
width: 80 width: 80
}) })
.css({margin: '4px'}) .css({float: 'left', margin: '4px'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
self.options.showTypes = data.selected.map(function(type) { self.options.showTypes = data.selected.map(function(type) {
@ -287,11 +292,25 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(self.$toolbar); .appendTo(self.$toolbar);
self.$dateInput = Ox.Input({
clear: true,
//placeholder: 'Date',
value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true),
width: 160
})
.css({float: 'right', margin: '4px'})
.bindEvent({
change: function(data) {
panTo(Ox.parseDate(data.value, true))
}
})
.appendTo(self.$toolbar);
self.$container = new Ox.Element() self.$container = new Ox.Element()
.addClass('OxCalendarContainer') .addClass('OxCalendarContainer')
.css({ .css({
top: '24px', top: '24px',
bottom: '40px' bottom: '16px'
}) })
.bind({ .bind({
mouseleave: mouseleave, mouseleave: mouseleave,
@ -327,46 +346,18 @@ Ox.Calendar = function(options, self) {
.addClass('OxTimeline') .addClass('OxTimeline')
.css({ .css({
posision: 'absolute', posision: 'absolute',
bottom: '40px' bottom: '16px'
})
.appendTo(that);
self.$overlay = new Ox.Element()
.addClass('OxOverlay')
.css({
bottom: '40px'
})
.append(
$('<div>').css({
width: self.overlayWidths[0] + 'px'
})
)
.append(
$('<div>').css({
left: self.overlayWidths[0] + 'px',
width: self.overlayWidths[1] + 'px'
})
)
.append(
$('<div>').css({
left: (self.overlayWidths[0] + self.overlayWidths[1]) + 'px',
width: self.overlayWidths[2] + 'px'
})
)
.bindEvent({
dragstart: dragstartScrollbar,
drag: dragScrollbar,
dragpause: dragpauseScrollbar,
dragend: dragendScrollbar
}) })
.appendTo(that); .appendTo(that);
self.$zoombar = new Ox.Element() self.$zoombar = new Ox.Element()
.css({ .css({
position: 'absolute', position: 'absolute',
bottom: 24 + 'px', bottom: 0,
height: '16px' height: '16px'
}) })
.appendTo(that); .appendTo(that);
self.$zoomInput = new Ox.Range({ self.$zoomInput = new Ox.Range({
arrows: true, arrows: true,
max: self.maxZoom, max: self.maxZoom,
@ -381,17 +372,6 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(self.$zoombar); .appendTo(self.$zoombar);
self.$statusbar = new Ox.Bar({
size: 24
})
.css({
// fixme: no need to set position absolute with map statusbar
position: 'absolute',
bottom: 0,
textAlign: 'center'
})
.appendTo(that);
self.$tooltip = new Ox.Tooltip({ self.$tooltip = new Ox.Tooltip({
animate: false animate: false
}) })
@ -423,9 +403,9 @@ Ox.Calendar = function(options, self) {
} }
function dragstart(event, e) { function dragstart(event, e) {
if ($(e.target).is(':not(.OxLine > .OxEvent)')) { //if ($(e.target).is(':not(.OxLine > .OxEvent)')) {
self.drag = {x: e.clientX}; self.drag = {x: e.clientX};
} //}
} }
function drag(event, e) { function drag(event, e) {
@ -480,7 +460,7 @@ Ox.Calendar = function(options, self) {
function dragScrollbar(event, e) { function dragScrollbar(event, e) {
self.$content.css({ self.$content.css({
marginLeft: ((e.clientX - self.drag.x) * 16) + 'px' marginLeft: ((e.clientX - self.drag.x) * getScrollbarFactor()) + 'px'
}); });
self.$scrollbar.css({ self.$scrollbar.css({
marginLeft: (e.clientX - self.drag.x) + 'px' marginLeft: (e.clientX - self.drag.x) + 'px'
@ -556,7 +536,7 @@ Ox.Calendar = function(options, self) {
} }
function getCalendarEvent(zoom) { function getCalendarEvent(zoom) {
var ms = self.options.width * getSecondsPerPixel(zoom || self.options.zoom) * 1000; var ms = self.options.width * getSecondsPerPixel(zoom) * 1000;
return { return {
start: new Date(+self.options.date - ms / 2), start: new Date(+self.options.date - ms / 2),
end: new Date(+self.options.date + ms / 2) end: new Date(+self.options.date + ms / 2)
@ -621,18 +601,33 @@ Ox.Calendar = function(options, self) {
) * getSecondsPerPixel() * 1000); ) * getSecondsPerPixel() * 1000);
} }
function getOverlayWidths() {
var width = Math.round(self.options.width / getScrollbarFactor());
return [
Math.floor((self.options.width - width) / 2),
width,
Math.ceil((self.options.width - width) / 2),
];
}
function getPixelsPerSecond(zoom) { function getPixelsPerSecond(zoom) {
return Math.pow(2, (zoom || self.options.zoom) - (self.maxZoom - 4)); return Math.pow(2, (
!Ox.isUndefined(zoom) ? zoom : self.options.zoom
) - (self.maxZoom - 4));
} }
function getPosition(date, zoom) { function getPosition(date, zoom) {
return Math.round( return Math.round(
self.options.width / 2 + self.options.width / 2 +
(date - self.options.date) / 1000 * (date - self.options.date) / 1000 *
getPixelsPerSecond(zoom || self.options.zoom) getPixelsPerSecond(zoom)
); );
} }
function getScrollbarFactor() {
return Math.pow(2, Math.min(self.options.zoom, 4));
}
function getSecondsPerPixel(zoom) { function getSecondsPerPixel(zoom) {
return 1 / getPixelsPerSecond(zoom); return 1 / getPixelsPerSecond(zoom);
} }
@ -662,7 +657,7 @@ Ox.Calendar = function(options, self) {
u == 0 ? 'line' : Ox.mod(value + i, 2) == 0 ? 'even' : 'odd' u == 0 ? 'line' : Ox.mod(value + i, 2) == 0 ? 'even' : 'odd'
) )
.css({ .css({
left: getPosition(new Date(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'
}) })
); );
@ -675,14 +670,15 @@ Ox.Calendar = function(options, self) {
var $elements = [], var $elements = [],
unit = getUnits(zoom)[0], unit = getUnits(zoom)[0],
value = unit.value(self.options.date), value = unit.value(self.options.date),
width = unit.seconds * getPixelsPerSecond(zoom); width = unit.seconds * getPixelsPerSecond(zoom),
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width); n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
Ox.print(zoom, getUnits(zoom).map(function(u) {return u.name(value)}).join('/'))
Ox.loop(-n, n + 1, function(i) { Ox.loop(-n, n + 1, function(i) {
$elements.push( $elements.push(
getEventElement({ getEventElement({
name: unit.name(value + i), name: unit.name(value + i),
start: new Date(unit.date(value + i)), start: unit.date(value + i),
end: new Date(unit.date(value + i + 1)) end: unit.date(value + i + 1)
}, zoom) }, zoom)
.addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd') .addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd')
); );
@ -696,7 +692,8 @@ Ox.Calendar = function(options, self) {
// units[1] for background // units[1] for background
var pixelsPerSecond = getPixelsPerSecond(zoom), var pixelsPerSecond = getPixelsPerSecond(zoom),
units; units;
self.units = self.units.reverse(); Ox.print(zoom, 'ppsec', pixelsPerSecond)
self.units.reverse();
Ox.forEach(self.units, function(v, i) { Ox.forEach(self.units, function(v, i) {
width = Math.round(v.seconds * pixelsPerSecond); width = Math.round(v.seconds * pixelsPerSecond);
if (width >= self.minLabelWidth) { if (width >= self.minLabelWidth) {
@ -704,7 +701,7 @@ Ox.Calendar = function(options, self) {
return false; return false;
} }
}); });
self.units = self.units.reverse(); self.units.reverse();
return units; return units;
} }
@ -795,10 +792,11 @@ Ox.Calendar = function(options, self) {
$('.OxEvent').remove(); $('.OxEvent').remove();
renderBackground(); renderBackground();
renderTimelines(); renderTimelines();
renderOverlay();
renderEvents(); renderEvents();
self.$statusbar.html( self.$dateInput.options({
Ox.formatDate(self.options.date, '%a, %b %e, %Y, %H:%M:%S (%s)', true) value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true)
); });
} }
function renderEvents() { function renderEvents() {
@ -842,7 +840,7 @@ Ox.Calendar = function(options, self) {
} }
lineEvents[line].push(event); lineEvents[line].push(event);
}); });
$('.OxLine').remove(); self.$content.find('.OxLine').remove();
lineEvents.forEach(function(events, line) { lineEvents.forEach(function(events, line) {
var $line = new Ox.Element() var $line = new Ox.Element()
.addClass('OxLine') .addClass('OxLine')
@ -859,6 +857,40 @@ Ox.Calendar = function(options, self) {
}); });
} }
function renderOverlay() {
var widths = getOverlayWidths();
that.find('.OxOverlay').remove();
Ox.Element()
.addClass('OxOverlay')
.css({
bottom: '16px'
})
.append(
$('<div>').css({
width: widths[0] + 'px'
})
)
.append(
$('<div>').css({
left: widths[0] + 'px',
width: widths[1] + 'px'
})
)
.append(
$('<div>').css({
left: (widths[0] + widths[1]) + 'px',
width: widths[2] + 'px'
})
)
.bindEvent({
dragstart: dragstartScrollbar,
drag: dragScrollbar,
dragpause: dragpauseScrollbar,
dragend: dragendScrollbar
})
.appendTo(that);
}
function renderTimelines() { function renderTimelines() {
Ox.print(self.options.zoom, Math.max(self.options.zoom - 4, 0)) Ox.print(self.options.zoom, Math.max(self.options.zoom - 4, 0))
getTimelineElements(self.options.zoom).forEach(function($element) { getTimelineElements(self.options.zoom).forEach(function($element) {