some work on ListCalendar
This commit is contained in:
rlx
parent
2928058f87
commit
efca832c76
10 changed files with 532 additions and 192 deletions
|
|
@ -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(' ' + value + ' ');
|
||||
} 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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue