some work on ListCalendar
This commit is contained in:
parent
2928058f87
commit
efca832c76
10 changed files with 532 additions and 192 deletions
|
@ -213,9 +213,6 @@ Calendar
|
|||
}
|
||||
.OxCalendar .OxLine > .OxEvent {
|
||||
border-radius: 4px;
|
||||
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
|
||||
background: -o-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
|
||||
}
|
||||
.OxCalendar .OxLine > .OxEvent.OxCurrent {
|
||||
border-top-right-radius: 0;
|
||||
|
@ -227,14 +224,21 @@ Calendar
|
|||
background: -webkit-linear-gradient(top, rgba(192, 0, 0, 0.9), rgba(160, 0, 0, 0.9));
|
||||
}
|
||||
.OxCalendar .OxLine > .OxEvent.OxPlace {
|
||||
//background: -moz-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9));
|
||||
//background: -webkit-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9));
|
||||
background: -moz-linear-gradient(top, rgba(255, 192, 0, 0.9), rgba(224, 160, 0, 0.9));
|
||||
background: -o-linear-gradient(top, rgba(255, 192, 0, 0.9), rgba(224, 160, 0, 0.9));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 192, 0, 0.9), rgba(224, 160, 0, 0.9));
|
||||
}
|
||||
.OxCalendar .OxLine > .OxEvent.OxPerson {
|
||||
background: -moz-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
|
||||
background: -o-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
|
||||
}
|
||||
.OxCalendar .OxLine > .OxEvent.OxOther {
|
||||
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
|
||||
background: -o-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
|
||||
}
|
||||
|
||||
.OxCalendar .OxLine > .OxEvent.OxSelected {
|
||||
background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
|
||||
background: -o-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -55,6 +55,7 @@ Ox.Form = function(options, self) {
|
|||
validate(i, data.valid);
|
||||
data.valid && self.$items[i].setMessage('');
|
||||
},
|
||||
/*
|
||||
// fixme: should't inputs also trigger a change event?
|
||||
blur: function(data) {
|
||||
that.triggerEvent('change', {
|
||||
|
@ -62,6 +63,7 @@ Ox.Form = function(options, self) {
|
|||
data: data
|
||||
});
|
||||
},
|
||||
*/
|
||||
change: function(data) {
|
||||
that.triggerEvent('change', {
|
||||
id: self.itemIds[i],
|
||||
|
|
|
@ -115,7 +115,7 @@ Ox.IconList = function(options, self) {
|
|||
function updateKeys() {
|
||||
that.$element.options({
|
||||
keys: Ox.unique(Ox.merge(
|
||||
self.options.sort[0].key.split(':').pop(),
|
||||
self.options.sort[0].key,
|
||||
self.options.keys
|
||||
))
|
||||
});
|
||||
|
|
|
@ -43,6 +43,7 @@ Ox.TextList <f:Ox.Element> TextList Object
|
|||
Ox.TextList = function(options, self) {
|
||||
|
||||
// fixme: rename to TableList
|
||||
// fixme: in columns, "operator" should be "sortOperator"
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
|
@ -553,10 +554,10 @@ Ox.TextList = function(options, self) {
|
|||
if (value === null) {
|
||||
value = '';
|
||||
} else if (format) {
|
||||
value = Ox.isObject(format) ?
|
||||
Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, Ox.merge([value], format.args || [])) :
|
||||
format(value, data);
|
||||
value = Ox.isObject(format)
|
||||
? Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, Ox.merge([value], format.args || []))
|
||||
: format(value, data);
|
||||
} else if (Ox.isArray(value)) {
|
||||
value = value.join(', ');
|
||||
}
|
||||
|
|
|
@ -58,6 +58,7 @@ Ox.ListMap = function(options, self) {
|
|||
.css({
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
borderRadius: '4px',
|
||||
marginLeft: '-3px',
|
||||
marginTop: 0
|
||||
});
|
||||
|
@ -343,15 +344,15 @@ Ox.ListMap = function(options, self) {
|
|||
});
|
||||
self.$placeTitle = $('<div>')
|
||||
.hide()
|
||||
.appendTo(self.$placeTitlebar.$element)
|
||||
self.$placeTitleFlag = $('<img>')
|
||||
.appendTo(self.$placeTitlebar)
|
||||
self.$placeFlag = $('<img>')
|
||||
.addClass('OxFlag')
|
||||
.attr({
|
||||
src: Ox.getImageByGeoname('icon', 16, '')
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.appendTo(self.$placeTitle);
|
||||
self.$placeTitleName = Ox.Label({
|
||||
self.$placeName = Ox.Label({
|
||||
title: '',
|
||||
width: 208
|
||||
})
|
||||
|
@ -365,7 +366,6 @@ Ox.ListMap = function(options, self) {
|
|||
self.$map.zoomToPlace();
|
||||
}
|
||||
});
|
||||
|
||||
self.$deselectPlaceButton = Ox.Button({
|
||||
title: 'close',
|
||||
tooltip: 'Done',
|
||||
|
@ -429,10 +429,10 @@ Ox.ListMap = function(options, self) {
|
|||
country = Ox.getCountryByGeoname(geoname),
|
||||
countryCode = country ? country.code : '',
|
||||
isResult = self.selectedPlace[0] == '_';
|
||||
self.$placeTitleFlag.attr({
|
||||
self.$placeFlag.attr({
|
||||
src: Ox.getImageByGeoname('icon', 16, geoname)
|
||||
});
|
||||
self.$placeTitleName.options({title: geoname});
|
||||
self.$placeName.options({title: geoname});
|
||||
self.$placeForm.values({countryCode: countryCode});
|
||||
if (!self.isAsync) {
|
||||
if (!isResult) {
|
||||
|
@ -647,7 +647,7 @@ Ox.ListMap = function(options, self) {
|
|||
})
|
||||
.bindEvent({
|
||||
resize: function(data) {
|
||||
self.$placeTitleName.options({width: data.size - 48});
|
||||
self.$placeName.options({width: data.size - 48});
|
||||
// fixme: pass width through form
|
||||
self.$placeFormItems.forEach(function($item) {
|
||||
$item.options({width: data.size - 16});
|
||||
|
@ -706,7 +706,7 @@ Ox.ListMap = function(options, self) {
|
|||
}
|
||||
|
||||
function editPlace(keys) {
|
||||
values = Ox.filter(self.$placeForm.values(), function(values, key) {
|
||||
var values = Ox.filter(self.$placeForm.values(), function(values, key) {
|
||||
return keys.indexOf(key) > -1;
|
||||
});
|
||||
values.id = self.selectedPlace;
|
||||
|
@ -724,10 +724,31 @@ Ox.ListMap = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function initList(data) {
|
||||
self.$status.html(
|
||||
Ox.formatNumber(data.items) + ' Place' + (
|
||||
data.items == 1 ? '' : 's'
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function openItem(data) {
|
||||
selectItem(data);
|
||||
self.$map.zoomToPlace(data.ids[0]);
|
||||
}
|
||||
|
||||
function removeItem(data) {
|
||||
var id = data.ids[0];
|
||||
// fixme: events or callback functions??
|
||||
that.triggerEvent('removeplace', {id: id});
|
||||
self.$map.removePlace(id);
|
||||
}
|
||||
|
||||
function removePlace() {
|
||||
var index;
|
||||
Ox.print('REMOVE PLACE', self.selectedPlace, index)
|
||||
if (!self.isAsync) {
|
||||
// fixme: doesn't call self.options.removePlace!
|
||||
index = Ox.getPositionById(self.options.places, self.selectedPlace);
|
||||
self.options.places.splice(index, 1);
|
||||
self.$list.options({items: Ox.clone(self.options.places)});
|
||||
|
@ -744,34 +765,13 @@ Ox.ListMap = function(options, self) {
|
|||
that.triggerEvent('removeplace', {id: self.selectedPlace});
|
||||
}
|
||||
|
||||
function initList(data) {
|
||||
self.$status.html(
|
||||
Ox.formatNumber(data.items) + ' Place' + (
|
||||
data.items == 1 ? '' : 's'
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function openItem(data) {
|
||||
selectItem(data);
|
||||
self.$map.zoomToPlace(data.ids[0]);
|
||||
}
|
||||
|
||||
function removeItem(data) {
|
||||
var id = data.ids[0];
|
||||
that.triggerEvent('removeplace', {id: id});
|
||||
self.$map.removePlace(id);
|
||||
}
|
||||
|
||||
function selectItem(data) {
|
||||
Ox.print('selectItem', data.ids[0])
|
||||
var id = data.ids.length ? data.ids[0] : null;
|
||||
self.$map.options({selected: id});
|
||||
id && self.$map.panToPlace();
|
||||
}
|
||||
|
||||
function selectPlace(place) {
|
||||
Ox.print('selectPlace', place.id && !isResult ? [place.id] : [])
|
||||
var isResult = place.id && place.id[0] == '_';
|
||||
self.$list.options({
|
||||
selected: place.id && !isResult ? [place.id] : []
|
||||
|
@ -779,10 +779,10 @@ Ox.ListMap = function(options, self) {
|
|||
if (place.id) {
|
||||
//isResult && self.options.places.push(place);
|
||||
self.selectedPlace = place.id;
|
||||
self.$placeTitleFlag.attr({
|
||||
self.$placeFlag.attr({
|
||||
src: Ox.getImageByGeoname('icon', 16, place.geoname)
|
||||
});
|
||||
self.$placeTitleName.options({title: place.geoname || ''});
|
||||
self.$placeName.options({title: place.geoname || ''});
|
||||
self.$placeTitle.show();
|
||||
self.$placeForm.values(place).show();
|
||||
self.$areaKmInput.options({value: Ox.formatArea(place.area)});
|
||||
|
|
|
@ -102,7 +102,7 @@ Ox.Map = function(options, self) {
|
|||
findPlaceholder: 'Find',
|
||||
maxMarkers: 100,
|
||||
places: null,
|
||||
selected: null,
|
||||
selected: '',
|
||||
showControls: false,
|
||||
showLabels: false,
|
||||
showTypes: false,
|
||||
|
|
|
@ -551,7 +551,7 @@ Ox.Menu = function(options, self) {
|
|||
checkItem <f>
|
||||
@*/
|
||||
that.checkItem = function(id) {
|
||||
//Ox.print('checkItem id', id)
|
||||
Ox.print('checkItem id', id)
|
||||
var ids = id.split('_'),
|
||||
item;
|
||||
if (ids.length == 1) {
|
||||
|
|
|
@ -1600,7 +1600,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
function rewind() {
|
||||
setTimeout(function() {
|
||||
setPosition(self.options.playInToOut ? self.options.in : 0);
|
||||
setPosition(self.options.playInToOut ? self.options['in'] : 0);
|
||||
}, 250);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue