some work on ListCalendar

This commit is contained in:
rlx 2011-10-09 21:13:16 +00:00
commit efca832c76
10 changed files with 532 additions and 192 deletions

View file

@ -85,18 +85,7 @@ Ox.Calendar = function(options, self) {
});
self.options.events.forEach(function(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.rangeText = Ox.formatDateRange(event.start, event.end, true);
event.durationText = Ox.formatDateRangeDuration(event.start, event.end, true);
if (event.current) {
event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
}
event = getEventData(event);
});
self.maxZoom = 32;
@ -586,6 +575,22 @@ Ox.Calendar = function(options, self) {
return new Date(+event.startTime + getEventDuration(event) / 2);
}
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.rangeText = Ox.formatDateRange(event.start, event.end, true);
event.durationText = Ox.formatDateRangeDuration(event.start, event.end, true);
if (event.current) {
event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
}
return event;
}
function getEventDuration(event) {
return event.endTime - event.startTime;
}
@ -626,7 +631,66 @@ Ox.Calendar = function(options, self) {
}
});
return $element;
};
}
function getLines() {
self.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
return self.options.showTypes.indexOf(event.type) > -1
/*&& overlaps(event, calendarEvent)*/;
}).sort(function(a, b) {
// 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') {
return 1;
} else if (a.type == 'person' && b.type != 'person') {
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)*/ {
return a.startTime - b.startTime;
}
}).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);
}
self.lineEvents[line].push(event);
});
self.contentHeight = Math.max(
self.lineEvents.length * 16,
self.options.height - 72 // 24 + 16 + 16 + 16
);
self.$content.css({height: self.contentHeight + 'px'});
}
function getMouseDate(e) {
return new Date(+self.options.date + (
@ -825,65 +889,6 @@ Ox.Calendar = function(options, self) {
});
}
function getLines() {
self.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
return self.options.showTypes.indexOf(event.type) > -1
/*&& overlaps(event, calendarEvent)*/;
}).sort(function(a, b) {
// 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') {
return 1;
} else if (a.type == 'person' && b.type != 'person') {
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)*/ {
return a.startTime - b.startTime;
}
}).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);
}
self.lineEvents[line].push(event);
});
self.contentHeight = Math.max(
self.lineEvents.length * 16,
self.options.height - 72 // 24 + 16 + 16 + 16
);
self.$content.css({height: self.contentHeight + 'px'});
}
function renderEvents() {
var calendarEvent = getCalendarEvent(),
height;
@ -1030,11 +1035,13 @@ Ox.Calendar = function(options, self) {
}
}
self.setOption = function(key, val) {
self.setOption = function(key, value) {
if (key == 'date') {
} else if (key == 'height') {
//that.css({height: self.options.height + 'px'});
} else if (key == 'selected') {
selectEvent(value);
} else if (key == 'width') {
//that.css({width: self.options.width + 'px'});
//self.$zoomInput.options({size: self.options.width});
@ -1044,8 +1051,67 @@ Ox.Calendar = function(options, self) {
}
};
that.addEvent = function(event) {
Ox.print('CALENDAR ADD EVENT', event)
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) {
Ox.print('ELEMENT', $element, id)
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);
Ox.print(key, value, 'EVENT:', event)
if ($element) {
getLines();
renderCalendar();
}
});
return that;
};
that.getBounds = function() {
return getCalendarEvent();
};
that.panToEvent = function() {
panToSelected();
return that;
};
that.removeEvent = function() {
Ox.print('REMOVE ... SELF.OPTIONS', self.options)
var index = Ox.getPositionById(self.options.events, self.selected);
self.options.events.splice(index, 1);
getLines();
renderCalendar();
return that;
};
that.resizeCalendar = function() {
@ -1054,10 +1120,12 @@ Ox.Calendar = function(options, self) {
self.$zoomInput.options({size: self.options.width});
getLines();
renderCalendar();
return that;
};
that.zoomToEvent = function() {
zoomToSelected();
return that;
};
return that;

View file

@ -9,9 +9,12 @@ Ox.ListCalendar = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
addEvent: null,
editPlace: null,
events: [],
height: 256,
pageLength: 100,
removePlace: null,
selected: [],
sort: [{key: 'name', operator: '+'}],
width: 256
@ -23,6 +26,8 @@ Ox.ListCalendar = function(options, self) {
height: self.options.height + 'px'
});
Ox.print('EVENT[0]', self.options.events[0])
self.columns = [
{
addable: false, // fixme: implement
@ -208,87 +213,292 @@ Ox.ListCalendar = function(options, self) {
)
.appendTo(self.$listStatusbar);
self.$calendar = Ox.Element();
self.$calendar = Ox.Calendar({
date: new Date(0),
events: self.options.events,
height: self.options.height,
width: self.options.width - 514,
zoom: 4
})
.bindEvent({
resize: function(data) {
// triggered by SplitPanel
$element.resizeCalendar();
},
select: selectEvent
});
self.$placeTitlebar = Ox.Bar({
self.$eventTitlebar = Ox.Bar({
size: 24
});
self.$eventTitle = $('<div>')
.hide()
.appendTo(self.$eventTitlebar);
self.$eventName = Ox.Label({
title: '',
width: 228
})
.css({float: 'left', margin: '4px'})
.appendTo(self.$eventTitle)
.bindEvent({
singleclick: function() {
self.$calendar.panToEvent();
},
doubleclick: function() {
self.$calendar.zoomToEvent();
}
});
self.$deselectEventButton = Ox.Button({
title: 'close',
tooltip: 'Done',
type: 'image'
})
.css({float: 'left', margin: '4px 4px 4px 0'})
.bindEvent({
click: function() {
self.$calendar.options({selected: null});
}
})
.appendTo(self.$eventTitle);
self.$placeForm = Ox.Form({
items: [],
self.$eventForm = Ox.Form({
items: [
self.$nameInput = Ox.Input({
id: 'name',
label: 'Name',
labelWidth: 64,
width: 240
}),
self.$alternativeNamesInput = Ox.ArrayInput({
id: 'alternativeNames',
label: 'Alternative Names',
max: 10,
values: [],
width: 240
}),
Ox.Select({
id: 'type',
items: [
{id: 'date', title: 'Date'},
{id: 'place', title: 'Place'},
{id: 'person', title: 'Person'},
{id: 'other', title: 'Other'}
],
label: 'Type',
labelWidth: 64,
width: 240
}),
self.$startInput = Ox.Input({
id: 'start',
label: 'Start',
labelWidth: 64,
width: 240
}),
self.$endInput = Ox.Input({
id: 'end',
label: 'End',
labelWidth: 64,
width: 240
}),
self.$durationInput = Ox.Input({
disabled: true,
id: 'durationText',
label: 'Duration',
labelWidth: 64,
width: 240
})
],
width: 240
})
.css({margin: '8px'})
.hide();
.hide()
.bindEvent({
change: function(data) {
Ox.print('CHANGE', data);
var exists = false, values
if (['name', 'alternativeNames'].indexOf(data.id) > -1) {
exists = '';
values = data.id == 'name' ? [data.data.value] : data.data.value;
Ox.forEach(self.options.events, function(event) {
Ox.forEach(values, function(value) {
if (
event.name == data.data.value
|| event.alternativeNames.indexOf(data.data.value) > -1
) {
exists = value;
return false;
}
});
return !exists;
});
}
if (data.id == 'name') {
if (!exists) {
// FIXME: can we change this to data.value?
editEvent('name', data.data.value);
} else {
self.$nameInput.addClass('OxError');
}
} else if (data.id == 'alternativeNames') {
if (!exists) {
editEvent('alternativeNames', data.data.value);
} else {
self.$alternativeNamesInput.setErrors([exists]);
}
} else if (data.id == 'type') {
editEvent('type', data.data.selected[0].id);
} else if (data.id == 'start') {
editEvent('start', data.data.value);
} else if (data.id == 'end') {
editEvent('end', data.data.value);
}
}
});
self.$placeStatusbar = Ox.Bar({
self.$eventStatusbar = Ox.Bar({
size: 24
});
that.$element.replaceWith(
that.$element = Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$listToolbar,
size: 24
},
{
element: self.$list
},
{
element: self.$listStatusbar,
size: 16
}
],
orientation: 'vertical'
}),
resizable: true,
resize: [256, 384, 512],
size: 256
},
{
element: self.$calendar,
},
{
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$placeTitlebar,
size: 24
},
{
element: self.$placeForm
},
{
element: self.$placeStatusbar,
size: 24
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
self.$placeTitleName.options({width: data.size - 48});
// fixme: pass width through form
self.$placeFormItems.forEach(function($item) {
$item.options({width: data.size - 16});
});
}
}),
resizable: true,
resize: [204, 256, 384],
size: 256
}
],
orientation: 'horizontal'
}).$element
);
self.$newEventButton = Ox.Button({
title: 'New Event',
width: 96
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.bindEvent({
click: addEvent
})
.appendTo(self.$eventStatusbar);
self.$removeEventButton = Ox.Button({
title: 'Remove Event',
width: 96
})
.css({float: 'right', margin: '4px 4px 4px 2px'})
.bindEvent({
click: removeEvent
})
.hide()
.appendTo(self.$eventStatusbar);
that.$element = Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$listToolbar,
size: 24
},
{
element: self.$list
},
{
element: self.$listStatusbar,
size: 16
}
],
orientation: 'vertical'
}),
resizable: true,
resize: [256, 384, 512],
size: 256
},
{
element: self.$calendar,
},
{
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$eventTitlebar,
size: 24
},
{
element: self.$eventForm
},
{
element: self.$eventStatusbar,
size: 24
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
self.$placeTitleName.options({width: data.size - 48});
// fixme: pass width through form
self.$placeFormItems.forEach(function($item) {
$item.options({width: data.size - 16});
});
}
}),
resizable: true,
resize: [204, 256, 384],
size: 256
}
],
orientation: 'horizontal'
});
function addEvent() {
Ox.print('ADD', self.$calendar.getBounds())
var bounds = self.$calendar.getBounds(),
middle = +self.$calendar.options('date'),
event = {},
i = 1;
event.name = 'Untitled';
while (nameExists(event.name)) {
event.name = 'Untitled [' + (++i) + ']';
};
event.alternativeNames = [];
event.type = 'other';
event.startTime = +new Date((+bounds.startTime + middle) / 2);
event.endTime = +new Date((+bounds.endTime + middle) / 2);
event.start = Ox.formatDate(event.startTime, '%Y-%m-%d %H:%M:%S', true);
event.end = Ox.formatDate(event.endTime, '%Y-%m-%d %H:%M:%S', true);
Ox.print(event);
self.options.addEvent(event, function(result) {
event.id = result.data.id;
self.options.events.push(event);
self.$list.options({
items: Ox.clone(self.options.events),
selected: [event.id]
});
self.$calendar.addEvent(event);
// fixme: duplicated
self.selectedEvent = event.id;
self.$eventName.options({title: event.name});
self.$eventTitle.show();
self.$eventForm.values(Ox.extend({}, event, {
end: event.current ? '' : event.end
})).show();
self.$removeEventButton.show();
});
}
function editEvent(key, value) {
var data = {id: self.selectedEvent};
data[key] = value;
if (['start', 'end'].indexOf(key) > -1) {
self.$durationInput.options({
value: Ox.formatDateRangeDuration(
self.$startInput.options('value'),
self.$endInput.options('value')
|| Ox.formatDate(new Date(), '%Y-%m-%d %H%:%M:%S'),
true
)
});
}
if (['name', 'type', 'start', 'end'].indexOf(key) > -1) {
self.$calendar.editEvent(self.selectedEvent, key, value);
}
self.options.editEvent(data, function(result) {
// ...
});
}
function initList(data) {
self.$status.html(
@ -298,16 +508,71 @@ Ox.ListCalendar = function(options, self) {
);
}
function openItem() {
function nameExists(name) {
var exists = false;
Ox.forEach(self.options.events, function(event) {
if (
event.name == name
|| event.alternativeNames.indexOf(name) > -1
) {
exists = true;
return false;
}
});
return exists;
}
function removeItem() {
function openItem(data) {
selectItem(data);
self.$calendar.zoomToEvent(data.ids[0]);
}
function selectItem() {
function removeEvent() {
self.options.removeEvent({id: self.selectedEvent}, function(result) {
var index = Ox.getPositionById(self.options.events, self.selectedEvent);
self.options.events.splice(index, 1);
self.$list.options({items: Ox.clone(self.options.events)});
self.$calendar.removeEvent();
// fixme: duplicated
self.selectedEvent = null;
self.$eventTitle.hide();
self.$eventForm.hide();
self.$removeEventButton.hide();
});
}
function removeItem(data) {
var id = data.ids[0];
// fixme: events or callback functions??
that.triggerEvent('removeevent', {id: id});
self.$calendar.removeEvent(id);
}
function selectEvent(event) {
self.$list.options({
selected: event.id ? [event.id] : []
});
if (event.id) {
var end = event
self.selectedEvent = event.id;
self.$eventName.options({title: event.name});
self.$eventTitle.show();
self.$eventForm.values(Ox.extend({}, event, {
end: event.current ? '' : event.end
})).show();
self.$removeEventButton.show();
} else {
self.selectedEvent = null;
self.$eventTitle.hide();
self.$eventForm.hide();
self.$removeEventButton.hide();
}
}
function selectItem(data) {
var id = data.ids.length ? data.ids[0] : null;
self.$calendar.options({selected: id});
id && self.$calendar.panToEvent();
}
function updateList(key, value) {