oxjs/source/Ox.UI/js/Calendar/Ox.Calendar.js

1343 lines
42 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-05-05 18:02:56 +00:00
2011-11-05 16:46:53 +00:00
'use strict';
2011-05-05 18:02:56 +00:00
/*@
2011-05-16 08:24:46 +00:00
Ox.Calendar <f:Ox.Element> Basic calendar object
2011-05-05 18:02:56 +00:00
() -> <f> Calendar object
(options) -> <f> Calendar object
(options, self) -> <f> Calendar object
options <o> Options object
date <d|new Date()> UTC Date on which the calendar is centered
2011-05-25 09:22:16 +00:00
events <[o]|[]> Event objects to be displayed
alternativeNames <[s]> Array of alternative names
end <s> End of the event (UTC Date, as string)
id <s> Id of the event
name <s> Name of the event
start <s> Start of the event (UTC Date, as string)
type <s> Type of the event (like "person")
2011-05-05 18:02:56 +00:00
height <n|256> Height in px
range <[n]|[1000, 3000]> Start and end year of the calendar
2011-05-25 09:22:16 +00:00
selected <s|''> Id of the selected event
2011-05-05 18:02:56 +00:00
width <n|256> Width in px
zoom <n|8> Initial zoom level
self <o> Shared private variable
@*/
// Fixme: switch to UTC
2011-05-25 09:22:16 +00:00
// Fixme: create a variable-resolution event type (with end that is _inclusive_)
2011-05-05 18:02:56 +00:00
2011-04-22 22:03:10 +00:00
Ox.Calendar = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
date: new Date(),
2011-05-25 09:22:16 +00:00
events: [],
2011-05-05 18:02:56 +00:00
height: 256,
range: [1000, 3000],
2011-05-25 09:22:16 +00:00
selected: '',
2011-10-31 12:45:08 +00:00
showControls: false,
2012-01-13 16:25:47 +00:00
showToolbar: false,
showTypes: ['date', 'place', 'person', 'other'],
2012-01-13 16:25:47 +00:00
showZoombar: false,
2011-05-05 18:02:56 +00:00
width: 256,
2012-01-27 14:29:11 +00:00
zoom: 8,
zoomOnlyWhenFocused: false
2011-04-22 22:03:10 +00:00
})
.options(options || {})
.addClass('OxCalendar')
2012-01-13 06:57:42 +00:00
/*
2011-04-22 22:03:10 +00:00
.css({
2012-01-13 06:57:42 +00:00
width: self.options.width + 'px',
height: self.options.height + 'px'
})
2012-01-13 06:57:42 +00:00
*/
.bindEvent({
key_0: function() {
panToSelected();
},
key_down: function() {
scrollBy(1);
},
key_equal: function() {
zoomBy(1);
},
key_escape: function() {
selectEvent('');
},
key_left: function() {
panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000);
},
key_minus: function() {
zoomBy(-1);
},
key_right: function() {
panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000);
},
key_shift_0: function() {
zoomToSelected();
},
key_shift_down: function() {
scrollTo(1000000, true);
},
key_shift_up: function() {
scrollTo(0, true);
},
key_up: function() {
scrollBy(-1);
},
mousedown: function(e) {
!$(e.target).is('.OxInput') && that.gainFocus();
}
2011-04-22 22:03:10 +00:00
});
2011-05-25 09:22:16 +00:00
self.options.events.forEach(function(event) {
2011-10-09 21:13:16 +00:00
event = getEventData(event);
2011-05-25 09:22:16 +00:00
});
2011-04-22 22:03:10 +00:00
self.maxZoom = 32;
self.minLabelWidth = 80;
/*
We need to iterate over irregular intervals, like months or years.
The idea is to put this logic into a data structure, the units.
Just like the 0-th second is 1970-01-01 00:00:00, the 0th month
is 1970-01, or the 0-th century is the 20th century.
A month unit, for example, has the following properties:
- seconds: average number of seconds (used to compute width at zoom)
- date: returns the start date of the index-th month
- name: returns a string representation of the index-th month
- value: returns the month index for a given date
*/
2011-04-22 22:03:10 +00:00
self.units = [
{
id: 'millennium',
seconds: 365242.5 * 86400,
date: function(i) {
return Ox.parseDate((i + 1) * 1000, true);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
return i > -2
? Ox.formatOrdinal(i + 2) + ' Millennium'
: Ox.formatOrdinal(-i - 1) + ' Millennium BC'
2011-04-22 22:03:10 +00:00
},
value: function(date) {
2011-04-25 09:12:02 +00:00
return Math.floor(date.getUTCFullYear() / 1000) - 1;
2011-04-22 22:03:10 +00:00
}
},
{
id: 'century',
seconds: 36524.25 * 86400,
date: function(i) {
return Ox.parseDate((i + 19) * 100, true);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
return i > -20
? Ox.formatOrdinal(i + 20) + ' Century'
: Ox.formatOrdinal(-i - 19) + ' Century BC'
2011-04-22 22:03:10 +00:00
},
value: function(date) {
2011-04-25 09:12:02 +00:00
return Math.floor(date.getUTCFullYear() / 100) - 19;
2011-04-22 22:03:10 +00:00
}
},
{
id: 'decade',
seconds: 3652.425 * 86400,
date: function(i) {
return Ox.parseDate((i + 197) * 10, true);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
return i > -198
? (i + 197) + '0s'
: (-i - 198) + '0s BC';
2011-04-22 22:03:10 +00:00
},
value: function(date) {
2011-04-25 09:12:02 +00:00
return Math.floor(date.getUTCFullYear() / 10) - 197;
2011-04-22 22:03:10 +00:00
}
},
{
id: 'year',
seconds: 365.2425 * 86400,
date: function(i) {
return Ox.parseDate(i + 1970, true);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
return Ox.formatDate(Ox.parseDate(i + 1970, true), '%x', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
2011-04-25 09:12:02 +00:00
return date.getUTCFullYear() - 1970;
2011-04-22 22:03:10 +00:00
}
},
{
id: 'month',
seconds: 365.2425 / 12 * 86400,
date: function(i) {
return Ox.parseDate(
(Math.floor(i / 12) + 1970) + '-' + (Ox.mod(i, 12) + 1), true
);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
return Ox.formatDate(Ox.parseDate(
(Math.floor(i / 12 + 1970)) + '-' + (Ox.mod(i, 12) + 1), true
), '%b %x', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
2011-04-25 09:12:02 +00:00
return (date.getUTCFullYear() - 1970) * 12 + date.getUTCMonth();
2011-04-22 22:03:10 +00:00
}
},
{
id: 'week',
seconds: 7 * 86400,
date: function(i) {
return new Date((i * 7 - 3) * 86400000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
2011-04-25 09:12:02 +00:00
return Math.floor((date / 86400000 + 4) / 7);
2011-04-22 22:03:10 +00:00
}
},
{
id: 'day',
seconds: 86400,
date: function(i) {
return new Date(i * 86400000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
return Ox.formatDate(new Date(i * 86400000), '%b %e, %x', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
return Math.floor(date / 86400000);
}
},
{
id: 'six_hours',
seconds: 21600,
date: function(i) {
return new Date(i * 21600000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
2011-04-25 09:12:02 +00:00
return Ox.formatDate(new Date(i * 21600000), '%b %e, %H:00', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
2011-04-25 09:12:02 +00:00
return Math.floor(date / 21600000);
2011-04-22 22:03:10 +00:00
}
},
{
id: 'hour',
seconds: 3600,
date: function(i) {
return new Date(i * 3600000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
2011-04-25 09:12:02 +00:00
return Ox.formatDate(new Date(i * 3600000), '%b %e, %H:00', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
return Math.floor(date / 3600000);
}
},
{
id: 'five_minutes',
seconds: 300,
date: function(i) {
return new Date(i * 300000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
2011-04-25 09:12:02 +00:00
return Ox.formatDate(new Date(i * 300000), '%b %e, %H:%M', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
return Math.floor(date / 300000);
}
},
{
id: 'minute',
seconds: 60,
date: function(i) {
return new Date(i * 60000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
2011-04-25 09:12:02 +00:00
return Ox.formatDate(new Date(i * 60000), '%b %e, %H:%M', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
return Math.floor(date / 60000);
}
},
{
id: 'five_seconds',
seconds: 5,
date: function(i) {
return new Date(i * 5000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
2011-04-25 09:12:02 +00:00
return Ox.formatDate(new Date(i * 5000), '%H:%M:%S', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
return Math.floor(date / 5000);
}
},
{
id: 'second',
seconds: 1,
date: function(i) {
return new Date(i * 1000);
2011-04-22 22:03:10 +00:00
},
name: function(i) {
2011-04-25 09:12:02 +00:00
return Ox.formatDate(new Date(i * 1000), '%H:%M:%S', true);
2011-04-22 22:03:10 +00:00
},
value: function(date) {
return Math.floor(date / 1000);
}
}
];
2012-01-13 16:25:47 +00:00
if (self.options.showToolbar) {
2012-01-13 16:25:47 +00:00
self.$toolbar = Ox.Bar({
size: 24
})
.appendTo(that);
2012-01-13 16:25:47 +00:00
self.$typeSelect = Ox.Select({
items: [
{id: 'date', title: 'Dates'},
{id: 'place', title: 'Places'},
{id: 'person', title: 'People'},
{id: 'other', title: 'Other'}
],
max: -1,
min: 1,
title: 'Show...',
value: self.options.showTypes,
width: 80
})
.css({float: 'left', margin: '4px'})
.bindEvent({
change: function(data) {
self.options.showTypes = data.value;
getLines();
renderCalendar();
}
})
.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.$scalebar = Ox.Element()
.addClass('OxTimeline')
.css({
posision: 'absolute',
2012-01-13 16:25:47 +00:00
top: (self.options.showToolbar * 24) + 'px'
})
2012-01-30 23:27:27 +00:00
.bindEvent({
dragstart: dragstart,
drag: drag,
dragpause: dragpause,
dragend: dragend,
singleclick: singleclick
})
.appendTo(that);
self.$container = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxCalendarContainer')
.css({
2012-01-13 16:25:47 +00:00
top: (self.options.showToolbar * 24) + 16 + 'px',
bottom: (self.options.showZoombar * 16) + 'px'
2011-04-22 22:03:10 +00:00
})
.bind({
mouseleave: mouseleave,
mousemove: mousemove,
mousewheel: mousewheel
})
.bindEvent({
doubleclick: doubleclick,
dragstart: dragstart,
drag: drag,
dragpause: dragpause,
dragend: dragend,
singleclick: singleclick
})
.appendTo(that);
self.$content = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxCalendarContent')
.appendTo(self.$container);
self.$background = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxBackground')
.appendTo(self.$content);
self.$scrollbar = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxTimeline')
.css({
posision: 'absolute',
2012-01-13 16:25:47 +00:00
bottom: (self.options.showZoombar * 16) + 'px'
2011-04-22 22:03:10 +00:00
})
.appendTo(that);
2012-01-13 16:25:47 +00:00
if (self.options.showZoombar) {
self.$zoombar = Ox.Element()
.css({
position: 'absolute',
bottom: 0,
height: '16px'
})
.appendTo(that);
self.$zoomInput = Ox.Range({
arrows: true,
changeOnDrag: true,
max: self.maxZoom,
min: 0,
size: self.options.width,
thumbSize: 32,
thumbValue: true,
value: self.options.zoom
})
.bindEvent({
change: changeZoom
})
.appendTo(self.$zoombar);
}
2011-10-31 12:45:08 +00:00
self.$controls = {
center: Ox.Button({
title: 'center',
type: 'image'
})
.addClass('OxCalendarControl OxCalendarButtonCenter')
2012-01-13 16:25:47 +00:00
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
2011-10-31 12:45:08 +00:00
.bindEvent({
singleclick: function() {
2012-01-30 20:48:19 +00:00
// ... FIXME: implement
2011-10-31 12:45:08 +00:00
},
doubleclick: function() {
2012-01-30 20:48:19 +00:00
// ... FIXME: implement
2011-10-31 12:45:08 +00:00
}
})
.appendTo(that),
down: Ox.Button({
title: 'down',
type: 'image'
})
.addClass('OxCalendarControl OxCalendarButtonDown')
2012-01-13 16:25:47 +00:00
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
2011-10-31 12:45:08 +00:00
.bindEvent({
singleclick: function() {
scrollBy(1);
},
doubleclick: function() {
2012-01-30 20:48:19 +00:00
scrollTo(1000000, true);
2011-10-31 12:45:08 +00:00
}
})
.appendTo(that),
left: Ox.Button({
title: 'left',
type: 'image'
})
.addClass('OxCalendarControl OxCalendarButtonLeft')
2012-01-13 16:25:47 +00:00
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
2011-10-31 12:45:08 +00:00
.bindEvent({
singleclick: function() {
panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000);
},
doubleclick: function() {
// fixme: should pan to rightmost event
panBy(-self.$content.width() * getSecondsPerPixel() * 1000);
}
})
.appendTo(that),
right: Ox.Button({
title: 'right',
type: 'image'
})
.addClass('OxCalendarControl OxCalendarButtonRight')
2012-01-13 16:25:47 +00:00
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
2011-10-31 12:45:08 +00:00
.bindEvent({
singleclick: function() {
panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000);
},
doubleclick: function() {
// fixme: should pan to rightmost event
panBy(self.$content.width() * getSecondsPerPixel() * 1000);
}
})
.appendTo(that),
up: Ox.Button({
title: 'up',
type: 'image'
})
2012-01-13 16:25:47 +00:00
.css({bottom: 60 + (self.options.showZoombar * 16) + 'px'})
2011-10-31 12:45:08 +00:00
.addClass('OxCalendarControl OxCalendarButtonUp')
.bindEvent({
singleclick: function() {
scrollBy(-1);
},
doubleclick: function() {
scrollTo(0, true)
}
})
.appendTo(that)
};
!self.options.showControls && Ox.forEach(self.$controls, function($control) {
$control.css({opacity: 0}).hide();
});
self.$eventControls = {
name: Ox.Label()
.addClass('OxEventControl OxEventName')
2012-01-13 16:25:47 +00:00
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
2011-10-31 12:45:08 +00:00
.bindEvent({
singleclick: function() {
panToSelected();
},
doubleclick: function() {
zoomToSelected();
}
})
.appendTo(that),
deselectButton: Ox.Button({
title: 'close',
type: 'image',
})
.addClass('OxEventControl OxEventDeselectButton')
2012-01-13 16:25:47 +00:00
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
2011-10-31 12:45:08 +00:00
.bindEvent({
click: function() {
selectEvent('');
}
})
.appendTo(that)
};
Ox.forEach(self.$eventControls, function($eventControl) {
$eventControl.css({opacity: 0}).hide();
});
self.$tooltip = Ox.Tooltip({
2011-04-22 22:03:10 +00:00
animate: false
})
.css({
textAlign: 'center'
});
2011-11-03 15:42:41 +00:00
2011-05-27 23:06:48 +00:00
self.$lines = [];
2011-05-27 23:49:36 +00:00
getLines();
2011-04-22 22:03:10 +00:00
renderCalendar();
function changeDate() {
}
function changeZoom(data) {
2011-04-22 22:03:10 +00:00
self.options.zoom = data.value;
renderCalendar();
}
2011-09-17 11:49:29 +00:00
function doubleclick(data) {
var $target = $(data.target),
id = $target.data('id');
if ($target.is('.OxLine > .OxEvent')) {
selectEvent(id, $target);
zoomToSelected();
} else {
2011-04-22 22:03:10 +00:00
if (self.options.zoom < self.maxZoom) {
self.options.date = new Date(
(+self.options.date + +getMouseDate(data)) / 2
2011-04-22 22:03:10 +00:00
);
self.options.zoom++;
}
renderCalendar();
}
}
2011-09-17 11:49:29 +00:00
function dragstart(data) {
//if ($(e.target).is(':not(.OxLine > .OxEvent)')) {
self.drag = {
top: self.$container.$element[0].scrollTop,
2011-09-17 11:49:29 +00:00
x: data.clientX
};
//}
2011-04-22 22:03:10 +00:00
}
2011-09-17 11:49:29 +00:00
function drag(data) {
2011-04-22 22:03:10 +00:00
if (self.drag) {
///*
2011-09-17 11:49:29 +00:00
var marginLeft = data.clientX - self.drag.x,
scrollbarFactor = getScrollbarFactor();
self.$scalebar.css({
marginLeft: marginLeft + 'px'
});
2011-04-22 22:03:10 +00:00
self.$content.css({
marginLeft: marginLeft + 'px'
2011-04-22 22:03:10 +00:00
});
self.$scrollbar.css({
marginLeft: Math.round(marginLeft / scrollbarFactor) + 'px'
2011-04-22 22:03:10 +00:00
});
2011-09-17 11:49:29 +00:00
scrollTo(self.drag.top - data.clientDY);
// fixme: after dragging too far in one direction,
// dragging in the opposite direction should work immediately
2011-04-22 22:03:10 +00:00
}
}
2011-09-17 11:49:29 +00:00
function dragpause(data) {
2011-04-22 22:03:10 +00:00
if (self.drag) {
2011-09-17 11:49:29 +00:00
dragafter(data);
self.drag.x = data.clientX;
2011-04-22 22:03:10 +00:00
}
}
2011-09-17 11:49:29 +00:00
function dragend(data) {
2011-04-22 22:03:10 +00:00
if (self.drag) {
2011-09-17 11:49:29 +00:00
dragafter(data);
2011-04-22 22:03:10 +00:00
self.drag = null;
}
}
2011-09-17 11:49:29 +00:00
function dragafter(data) {
self.$scalebar.css({marginLeft: 0});
self.$content.css({marginLeft: 0});
self.$scrollbar.css({marginLeft: 0});
2011-04-22 22:03:10 +00:00
self.options.date = new Date(
2012-01-13 06:57:42 +00:00
+self.options.date
- (data.clientX - self.drag.x) * getSecondsPerPixel() * 1000
2011-04-22 22:03:10 +00:00
);
renderCalendar();
}
2011-09-17 11:49:29 +00:00
function dragstartScrollbar(data) {
self.drag = {x: data.clientX};
2011-04-22 22:03:10 +00:00
}
2011-09-17 11:49:29 +00:00
function dragScrollbar(data) {
var marginLeft = data.clientX - self.drag.x,
scrollbarFactor = getScrollbarFactor();
self.$scalebar.css({
marginLeft: (marginLeft * scrollbarFactor) + 'px'
});
2011-04-22 22:03:10 +00:00
self.$content.css({
marginLeft: (marginLeft * scrollbarFactor) + 'px'
2011-04-22 22:03:10 +00:00
});
self.$scrollbar.css({
marginLeft: marginLeft + 'px'
2011-04-22 22:03:10 +00:00
});
}
2011-09-17 11:49:29 +00:00
function dragpauseScrollbar(data) {
dragafterScrollbar(data);
self.drag = {x: data.clientX};
2011-04-22 22:03:10 +00:00
}
2011-09-17 11:49:29 +00:00
function dragendScrollbar(data) {
dragafterScrollbar(data);
2011-04-22 22:03:10 +00:00
self.drag = null;
}
2011-09-17 11:49:29 +00:00
function dragafterScrollbar(data) {
// fixme: duplicated
self.$scalebar.css({marginLeft: 0});
self.$content.css({marginLeft: 0});
self.$scrollbar.css({marginLeft: 0});
2011-04-22 22:03:10 +00:00
self.options.date = new Date(
2012-01-13 06:57:42 +00:00
+self.options.date
+ (self.drag.x - data.clientX) * getSecondsPerPixel() * 1000
* getScrollbarFactor()
2011-04-22 22:03:10 +00:00
);
renderCalendar();
}
function getBackgroundElements(zoom) {
// fixme: duplicated (or at least similar to getTimelineElements)
var $elements = [],
units = getUnits(zoom),
n, value, width;
[1, 0].forEach(function(u) {
var unit = units[u],
value = unit.value(self.options.date),
width = Math.round(unit.seconds * getPixelsPerSecond(zoom)),
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
2012-01-13 06:57:42 +00:00
Ox.loop(-n, n + 1, function(i) {
if (u == 0 || Ox.mod(value + i, 2)) {
$elements.push(
Ox.Element()
.addClass(
u == 0 ? 'line' : ''
)
.css({
left: getPosition(unit.date(value + i), zoom) + 'px',
width: (u == 0 ? 1 : width) + 'px',
height: self.contentHeight + 'px'
})
);
}
});
});
return $elements;
}
function getCalendarEvent(zoom) {
var ms = self.options.width * getSecondsPerPixel(zoom) * 1000;
2011-04-22 22:03:10 +00:00
return {
startTime: new Date(+self.options.date - ms / 2),
endTime: new Date(+self.options.date + ms / 2)
2011-04-22 22:03:10 +00:00
};
}
2011-05-25 09:22:16 +00:00
function getEventById(id) {
var event = null;
Ox.forEach(self.options.events, function(v) {
if (v.id == id) {
event = v;
2011-04-22 22:03:10 +00:00
return false;
}
});
2011-05-25 09:22:16 +00:00
return event;
2011-04-22 22:03:10 +00:00
}
function getEventCenter(event) {
return new Date(+event.startTime + getEventDuration(event) / 2);
}
2011-10-09 21:13:16 +00:00
function getEventData(event) {
if (!event.end) {
event.end = Ox.formatDate(new Date(), '%Y-%m-%d');
event.current = true;
}
event.id = Ox.isUndefined(event.id) ? Ox.uid() : event.id;
event.startTime = Ox.parseDate(event.start, true);
event.endTime = Ox.parseDate(event.end, true);
event.durationTime = event.endTime - event.startTime;
2011-10-09 21:13:16 +00:00
event.rangeText = Ox.formatDateRange(event.start, event.end, true);
event.durationText = Ox.formatDateRangeDuration(event.start, event.end, true);
if (event.current) {
2011-10-11 23:23:36 +00:00
event.rangeText = event.rangeText.split(' - ').shift() + ' - today';
2011-10-09 21:13:16 +00:00
}
return event;
}
function getEventDuration(event) {
return event.endTime - event.startTime;
}
2011-05-25 09:22:16 +00:00
function getEventElement(event, zoom) {
var left = Math.max(getPosition(event.startTime, zoom), -10000),
paddingLeft = (event.type && left < 0 ? -left : 0),
width = Ox.limit(getPosition(event.endTime, zoom) - left, 1, 20000) - paddingLeft;
// selected element may be past the left edge of the screen
if (width < 0) {
paddingLeft = 0;
width = getPosition(event.endTime, zoom) - left;
}
return Ox.Element()
2011-11-03 15:42:41 +00:00
.addClass(
'OxEvent'
+ (event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' )
+ (event.current ? ' OxCurrent' : '')
+ (event.id == self.options.selected ? ' OxSelected' : '')
)
2011-04-22 22:03:10 +00:00
.css({
left: left + 'px',
width: width + 'px',
paddingLeft: paddingLeft + 'px'
2011-04-22 22:03:10 +00:00
})
.data({
2011-05-25 09:22:16 +00:00
id: event.id
2011-04-22 22:03:10 +00:00
})
.html('&nbsp;' + event.name + '&nbsp;')
2011-04-22 22:03:10 +00:00
}
2011-05-25 09:22:16 +00:00
function getEventElementById(id) {
var $element;
$('.OxLine > .OxEvent').each(function() {
var $this = $(this);
if ($this.data('id') == id) {
$element = $this;
return false;
}
});
return $element;
2011-10-09 21:13:16 +00:00
}
function getEventLine(id) {
var line = -1;
Ox.forEach(self.lineEvents, function(events, line_) {
if (Ox.getIndexById(events, id) > -1) {
line = line_;
return false;
}
});
return line;
}
2011-10-09 21:13:16 +00:00
function getLines() {
self.lineEvents = [];
self.$content.find('.OxLine').remove();
self.options.events.filter(function(event) {
// filter out events with types not shown
return self.options.showTypes.indexOf(event.type) > -1;
2011-10-09 21:13:16 +00:00
}).sort(function(a, b) {
// sort events (dates first, people last, longer before shorter,
// earlier before later, otherwise alphabetically by name)
2011-10-09 21:13:16 +00:00
if (a.type == 'date' && b.type != 'date') {
return -1;
} else if (a.type != 'date' && b.type == 'date') {
return 1;
} else if (a.type == 'person' && b.type != 'person') {
return 1;
} else if (a.type != 'person' && b.type == 'person') {
return -1;
} else if (a.durationTime != b.durationTime) {
return b.durationTime - a.durationTime;
} else if (+a.startTime != +b.startTime) {
2011-10-09 21:13:16 +00:00
return a.startTime - b.startTime;
} else {
return a.name < b.name ? -1 : 1;
2011-10-09 21:13:16 +00:00
}
}).forEach(function(event, i) {
var line = self.lineEvents.length;
// traverse lines
Ox.forEach(self.lineEvents, function(events, line_) {
var fits = true;
// traverse events in line
Ox.forEach(events, function(event_) {
// if overlaps, check next line
if (overlaps(event, event_)) {
fits = false;
return false;
}
});
if (fits) {
line = line_;
return false;
}
});
if (line == self.lineEvents.length) {
self.lineEvents[line] = [];
self.$lines[line] = Ox.Element()
.addClass('OxLine')
.css({
top: (line * 16) + 'px'
})
.appendTo(self.$content);
}
2011-11-03 15:42:41 +00:00
self.lineEvents[line].push(event);
2011-10-09 21:13:16 +00:00
});
}
2011-05-25 09:22:16 +00:00
2011-04-22 22:03:10 +00:00
function getMouseDate(e) {
return new Date(+self.options.date + (
e.clientX - that.offset().left - self.options.width / 2 - 1
2011-11-03 15:42:41 +00:00
) * getSecondsPerPixel() * 1000);
2011-04-22 22:03:10 +00:00
}
function getOverlayWidths() {
2011-10-03 14:12:31 +00:00
var width = Math.round(self.options.width / getScrollbarFactor());
return [
2011-10-03 14:12:31 +00:00
Math.floor((self.options.width - width) / 2),
width,
Math.ceil((self.options.width - width) / 2),
];
}
2011-04-22 22:03:10 +00:00
function getPixelsPerSecond(zoom) {
return Math.pow(2, (
!Ox.isUndefined(zoom) ? zoom : self.options.zoom
) - (self.maxZoom - 4));
2011-04-22 22:03:10 +00:00
}
function getPosition(date, zoom) {
return Math.round(
2011-11-03 15:42:41 +00:00
self.options.width / 2
+ (date - self.options.date) / 1000 * getPixelsPerSecond(zoom)
2011-04-22 22:03:10 +00:00
);
}
function getScrollbarFactor() {
return Math.pow(2, Math.min(self.options.zoom, 4));
}
2011-04-22 22:03:10 +00:00
function getSecondsPerPixel(zoom) {
return 1 / getPixelsPerSecond(zoom);
}
function getSelectedEvent() {
var event = null;
if (self.options.selected !== '') {
event = getEventById(self.options.selected);
}
return event;
}
function getSelectedEventElement() {
var $element = null;
if (self.options.selected !== '') {
$element = getEventElementById(self.options.selected);
}
return $element;
}
2011-04-22 22:03:10 +00:00
function getTimelineElements(zoom) {
var $elements = [],
unit = getUnits(zoom)[0],
value = unit.value(self.options.date),
width = unit.seconds * getPixelsPerSecond(zoom),
2011-04-22 22:03:10 +00:00
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
Ox.loop(-n, n + 1, function(i) {
$elements.push(
2011-05-25 09:22:16 +00:00
getEventElement({
2011-04-22 22:03:10 +00:00
name: unit.name(value + i),
startTime: unit.date(value + i),
endTime: unit.date(value + i + 1)
2011-04-22 22:03:10 +00:00
}, zoom)
.addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd')
);
});
return $elements;
}
function getUnits(zoom) {
// returns array of 2 units
// units[0] for timeline
// units[1] for background
var pixelsPerSecond = getPixelsPerSecond(zoom),
units;
self.units.reverse();
2011-04-22 22:03:10 +00:00
Ox.forEach(self.units, function(v, i) {
2011-11-05 17:27:11 +00:00
var width = Math.round(v.seconds * pixelsPerSecond);
2011-04-22 22:03:10 +00:00
if (width >= self.minLabelWidth) {
units = [self.units[i], self.units[i - 1]];
return false;
}
});
self.units.reverse();
2011-04-22 22:03:10 +00:00
return units;
}
function mouseleave() {
self.$tooltip.hide();
}
function mousemove(e) {
var $target = $(e.target),
2011-05-25 09:22:16 +00:00
event, title;
if ($target.is('.OxLine > .OxEvent')) {
event = getEventById($target.data('id'));
title = '<span class="OxBright">' + event.name + '</span><br/>'
+ (event.rangeText != event.name ? event.rangeText + '<br>' : '')
+ event.durationText;
2011-04-22 22:03:10 +00:00
} else {
title = Ox.formatDate(getMouseDate(e), '%a, %b %e, %x, %H:%M:%S', true);
2011-04-22 22:03:10 +00:00
}
self.$tooltip.options({
title: title
})
.show(e.clientX, e.clientY);
}
function mousewheel(e, delta, deltaX, deltaY) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Calendar', 'mousewheel', delta, deltaX, deltaY);
2011-04-22 22:03:10 +00:00
var deltaZ = 0;
2012-01-27 14:29:11 +00:00
if (
(!self.options.zoomOnlyWhenFocused || that.hasFocus())
&& !self.mousewheel
&& Math.abs(deltaY) > Math.abs(deltaX)
) {
2011-04-22 22:03:10 +00:00
if (deltaY < 0 && self.options.zoom > 0) {
deltaZ = -1;
2011-04-22 22:03:10 +00:00
} else if (deltaY > 0 && self.options.zoom < self.maxZoom) {
deltaZ = 1;
2011-04-22 22:03:10 +00:00
}
if (deltaZ) {
2011-11-23 14:53:17 +00:00
self.options.date = deltaZ == -1
? new Date(2 * +self.options.date - +getMouseDate(e))
: new Date((+self.options.date + +getMouseDate(e)) / 2);
zoomBy(deltaZ);
2011-04-22 22:03:10 +00:00
}
2011-11-23 14:53:17 +00:00
self.mousewheel = true;
setTimeout(function() {
self.mousewheel = false;
}, 250);
2011-04-22 22:03:10 +00:00
}
2012-01-27 14:29:11 +00:00
that.hasFocus() && e.preventDefault();
2011-04-22 22:03:10 +00:00
}
2011-05-25 09:22:16 +00:00
function overlaps(eventA, eventB) {
2011-04-22 22:03:10 +00:00
return (
2012-01-13 06:57:42 +00:00
eventA.startTime >= eventB.startTime
&& eventA.startTime < eventB.endTime
2011-04-22 22:03:10 +00:00
) || (
2012-01-13 06:57:42 +00:00
eventB.startTime >= eventA.startTime
&& eventB.startTime < eventA.endTime
2011-04-22 22:03:10 +00:00
);
}
function panBy(ms) {
panTo(new Date(+self.options.date + ms));
}
function panTo(date, line) {
2012-01-13 06:57:42 +00:00
var delta = Math.round(
(date - self.options.date) / 1000 * getPixelsPerSecond()
),
// 250 ms for half the width of the visible area
2012-01-13 06:57:42 +00:00
ms = 250 * Math.min(
Math.abs(delta) / (self.$content.width() / 2), 1
);
2011-05-27 22:06:56 +00:00
self.$scalebar.stop().animate({
marginLeft: -delta + 'px'
}, ms);
2011-05-27 22:06:56 +00:00
self.$content.stop().animate({
marginLeft: -delta + 'px'
}, ms, function() {
self.$scalebar.stop().css({marginLeft: 0});
self.$content.css({marginLeft: 0});
self.$scrollbar.stop().css({marginLeft: 0});
self.options.date = date;
renderCalendar();
});
2011-05-27 22:06:56 +00:00
self.$scrollbar.stop().animate({
marginLeft: -delta / getScrollbarFactor() + 'px'
}, ms);
if (!Ox.isUndefined(line)) {
scrollTo((line + 1) * 16 - self.$container.height() / 2, true);
}
};
function panToSelected() {
2011-05-27 23:49:36 +00:00
// fixme: '0' should zoom to selected if selected is already centered
// (both horizontally and vertically, the latter is a bit more work)
var event = getSelectedEvent();
2011-05-27 23:49:36 +00:00
self.options.selected !== '' && panTo(
getEventCenter(event),
getEventLine(event.id)
2011-05-27 23:49:36 +00:00
);
}
function renderBackground() {
getBackgroundElements(self.options.zoom).forEach(function($element) {
$element.appendTo(self.$background);
});
}
2011-04-22 22:03:10 +00:00
function renderCalendar() {
2011-10-16 12:32:02 +00:00
self.contentHeight = Math.max(
self.lineEvents.length * 16 + 16, // fixme: why +16 ?
self.options.height - (self.options.showToolbar * 24)
2012-01-13 16:25:47 +00:00
// self.options.height - 56 // 24 + 16 + 16
2011-10-16 12:32:02 +00:00
);
self.$content.css({height: self.contentHeight + 'px'});
2012-01-29 19:42:53 +00:00
that.$element.find('.OxBackground').empty();
that.$element.find('.OxEvent').remove();
2011-04-22 22:03:10 +00:00
renderBackground();
renderTimelines();
renderOverlay();
2011-05-25 09:22:16 +00:00
renderEvents();
2012-01-13 16:25:47 +00:00
self.options.showToolbar && self.$dateInput.value(
2011-12-21 15:33:52 +00:00
Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true)
);
2011-04-22 22:03:10 +00:00
}
function renderEvents() {
var calendarEvent = getCalendarEvent(),
height;
//types = ['date', 'place', 'person', 'other'];
self.lineEvents.forEach(function(events, line) {
2011-05-27 23:06:48 +00:00
events.forEach(function(event) {
// append if selected or visible
if (
event.id == self.options.selected
|| overlaps(event, calendarEvent)
) {
getEventElement(event).appendTo(self.$lines[line]);
}
2011-04-22 22:03:10 +00:00
});
});
}
function renderOverlay() {
var widths = getOverlayWidths();
that.find('.OxOverlay').remove();
Ox.Element()
.addClass('OxOverlay')
.css({
2012-01-13 16:25:47 +00:00
bottom: (self.options.showZoombar * 16) + 'px'
})
.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);
}
2011-04-22 22:03:10 +00:00
function renderTimelines() {
2011-11-04 15:54:28 +00:00
Ox.Log('Calendar', self.options.zoom, Math.max(self.options.zoom - 4, 0))
2011-04-22 22:03:10 +00:00
getTimelineElements(self.options.zoom).forEach(function($element) {
$element.appendTo(self.$scalebar.$element);
});
getTimelineElements(Math.max(self.options.zoom - 4, 0)).forEach(function($element) {
$element.appendTo(self.$scrollbar.$element);
});
}
function scrollBy(delta) {
scrollTo(
self.$container.$element[0].scrollTop
+ delta * self.$container.height() / 2, true
);
}
function scrollTo(top, animate) {
var containerHeight = self.$container.height(),
scrollTop = self.$container.$element[0].scrollTop,
min = 0,
2011-05-27 23:06:48 +00:00
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);
if (animate) {
2011-05-27 22:06:56 +00:00
self.$container.stop().animate({
scrollTop: top
}, ms);
} else {
self.$container.$element[0].scrollTop = top;
}
}
function selectEvent(id, $element) {
2011-10-31 12:45:08 +00:00
var event;
self.$content.find('.OxSelected').removeClass('OxSelected');
if (id) {
self.options.selected = id;
$element = $element || getEventElementById(id);
if ($element) {
$element.addClass('OxSelected');
} else {
panToSelected();
}
2011-10-31 12:45:08 +00:00
event = Ox.getObjectById(self.options.events, id);
// fixme: map event should also be 'select', not 'selectplace'
2011-10-31 12:45:08 +00:00
setEventControls(event);
that.triggerEvent('select', event);
} else {
if (self.options.selected !== '') {
self.options.selected = '';
2011-10-31 12:45:08 +00:00
setEventControls(null);
that.triggerEvent('select', {id: ''});
}
}
2011-05-25 09:22:16 +00:00
}
2011-10-31 12:45:08 +00:00
function setEventControls(event) {
var $eventControls = that.find('.OxEventControl'),
2011-10-31 12:45:08 +00:00
isVisible = self.$eventControls.name.is(':visible');
if (event) {
self.$eventControls.name.options({title: event.name});
!isVisible && $eventControls.show().animate({opacity: 1}, 250);
} else {
isVisible && $eventControls.animate({opacity: 0}, 250, function() {
$eventControls.hide();
});
}
}
2011-09-17 11:49:29 +00:00
function singleclick(data) {
var $target = $(data.target),
2011-05-25 09:22:16 +00:00
id = $target.data('id');
if ($target.is('.OxLine > .OxEvent')) {
if (id == self.options.selected) {
panToSelected();
} else {
selectEvent(id, $target);
}
2011-05-25 09:22:16 +00:00
} else {
selectEvent('');
2011-10-03 14:12:31 +00:00
panTo(getMouseDate(data));
}
}
2011-10-31 12:45:08 +00:00
function toggleControls() {
// ...
}
function zoomBy(delta) {
zoomTo(self.options.zoom + delta);
}
function zoomTo(zoom) {
self.options.zoom = Ox.limit(zoom, 0, self.maxZoom);
2012-01-13 16:25:47 +00:00
self.options.showZoombar && self.$zoomInput.value(self.options.zoom);
renderCalendar();
}
function zoomToSelected() {
if (self.options.selected !== '') {
var event = getSelectedEvent(),
eventDuration = getEventDuration(event),
zoom = getZoom();
zoom != self.options.zoom && zoomTo(zoom);
panToSelected();
}
function getZoom() {
var zoom;
Ox.loop(self.maxZoom, 0, function(z) {
var calendarDuration = getEventDuration(getCalendarEvent(z));
if (calendarDuration > eventDuration) {
zoom = z;
return false;
}
});
return zoom;
2011-04-22 22:03:10 +00:00
}
}
2011-10-09 21:13:16 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'date') {
2012-01-17 09:25:58 +00:00
// ...
} else if (key == 'events') {
value.forEach(function(event) {
event = getEventData(event);
});
self.$lines = [];
getLines();
renderCalendar();
if (self.options.selected) {
2012-01-17 11:50:31 +00:00
selectEvent(
getSelectedEvent() ? self.options.selected : ''
);
2012-01-17 09:25:58 +00:00
}
2011-05-27 23:49:36 +00:00
} else if (key == 'height') {
that.css({height: self.options.height + 'px'});
2011-10-09 21:13:16 +00:00
} else if (key == 'selected') {
2012-01-17 11:50:31 +00:00
self.options.selected = 'FIXME: THIS IS A VERY UGLY HACK';
2011-10-09 21:13:16 +00:00
selectEvent(value);
2011-05-27 23:49:36 +00:00
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
renderOverlay();
2011-10-03 13:23:40 +00:00
//getLines();
2011-04-22 22:03:10 +00:00
} else if (key == 'zoom') {
}
};
2011-10-09 21:13:16 +00:00
that.addEvent = function(event) {
2012-01-13 06:57:42 +00:00
// Ox.Log('Calendar', 'CALENDAR ADD EVENT', event)
2011-10-10 12:38:54 +00:00
event = getEventData(event);
2011-10-09 21:13:16 +00:00
self.options.events.push(event);
getLines();
renderCalendar();
selectEvent(event.id);
return that;
};
/*@
that.editEvent <f> Edit event data
(id, key, value) -> <o> Calendar object
{id, {key: value, ...}} -> <o> Calendar object
@*/
that.editEvent = function() {
var args = Ox.makeArray(arguments),
id = args.shift(),
data = Ox.makeObject(args),
event = Ox.getObjectById(self.options.events, id),
$element = getEventElementById(id);
Ox.forEach(data, function(value, key) {
if ($element) {
2011-11-04 15:54:28 +00:00
Ox.Log('Calendar', 'ELEMENT', $element, id)
2011-10-09 21:13:16 +00:00
if (key == 'name') {
$element && $element.html('&nbsp;' + value + '&nbsp;');
} else if (key == 'type') {
$element.removeClass('Ox' + Ox.toTitleCase(event[key]))
.addClass('Ox' + Ox.toTitleCase(value))
} else if (key == 'end') {
$element[
value === '' ? 'addClass' : 'removeClass'
]('OxCurrent');
}
}
event[key] = value;
event = getEventData(event);
2011-11-04 15:54:28 +00:00
Ox.Log('Calendar', key, value, 'EVENT:', event)
2011-10-09 21:13:16 +00:00
if ($element) {
getLines();
renderCalendar();
2011-10-10 12:38:54 +00:00
panToSelected();
2011-10-31 12:45:08 +00:00
setEventControls(event);
2011-10-09 21:13:16 +00:00
}
});
return that;
};
that.getBounds = function() {
return getCalendarEvent();
};
2011-10-03 14:12:31 +00:00
that.panToEvent = function() {
panToSelected();
2011-10-09 21:13:16 +00:00
return that;
};
that.removeEvent = function() {
2011-11-04 15:54:28 +00:00
Ox.Log('Calendar', 'REMOVE ... SELF.OPTIONS', self.options)
var index = Ox.getIndexById(self.options.events, self.options.selected);
2011-10-09 21:13:16 +00:00
self.options.events.splice(index, 1);
2012-01-17 11:50:31 +00:00
self.options.selected = '';
2011-10-09 21:13:16 +00:00
getLines();
renderCalendar();
2012-01-17 11:50:31 +00:00
setEventControls('');
2011-10-09 21:13:16 +00:00
return that;
2011-10-03 14:12:31 +00:00
};
2011-10-03 13:23:40 +00:00
that.resizeCalendar = function() {
Ox.print('RESIZE CALENDAR')
2011-10-03 14:12:31 +00:00
self.options.width = that.width();
2011-10-08 19:09:47 +00:00
self.options.height = that.height();
2012-01-13 16:25:47 +00:00
self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
2011-10-03 13:23:40 +00:00
renderCalendar();
2011-10-09 21:13:16 +00:00
return that;
2011-10-03 13:23:40 +00:00
};
2011-10-03 14:12:31 +00:00
that.zoomToEvent = function() {
zoomToSelected();
2011-10-09 21:13:16 +00:00
return that;
2011-10-03 14:12:31 +00:00
};
2011-04-22 22:03:10 +00:00
return that;
};