334 lines
No EOL
9.3 KiB
JavaScript
334 lines
No EOL
9.3 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
|
|
/*@
|
|
Ox.ListCalendar <f> ListCalendar object
|
|
@*/
|
|
|
|
Ox.ListCalendar = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
events: [],
|
|
height: 256,
|
|
pageLength: 100,
|
|
selected: [],
|
|
sort: [{key: 'name', operator: '+'}],
|
|
width: 256
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxListCalendar')
|
|
.css({
|
|
width: self.options.width + 'px',
|
|
height: self.options.height + 'px'
|
|
});
|
|
|
|
self.columns = [
|
|
{
|
|
addable: false, // fixme: implement
|
|
id: 'id',
|
|
title: 'Id',
|
|
unique: true,
|
|
visible: false,
|
|
width: 64
|
|
},
|
|
{
|
|
id: 'name',
|
|
operator: '+',
|
|
removable: false,
|
|
title: 'Name',
|
|
visible: true,
|
|
width: 144
|
|
},
|
|
{
|
|
editable: false,
|
|
format: function(value) {
|
|
return value.join('; ');
|
|
},
|
|
id: 'alternativeNames',
|
|
operator: '+',
|
|
title: 'Alternative Names',
|
|
visible: true,
|
|
width: 144
|
|
},
|
|
{
|
|
format: function(value) {
|
|
return Ox.toTitleCase(value);
|
|
},
|
|
id: 'type',
|
|
operator: '+',
|
|
title: 'Type',
|
|
visible: true,
|
|
width: 64
|
|
},
|
|
{
|
|
id: 'start',
|
|
operator: '-',
|
|
title: 'Start',
|
|
visible: true,
|
|
width: 144
|
|
},
|
|
{
|
|
id: 'end',
|
|
operator: '-',
|
|
title: 'End',
|
|
visible: true,
|
|
width: 144
|
|
},
|
|
{
|
|
id: 'duration',
|
|
operator: '-',
|
|
title: 'Duration',
|
|
visible: true,
|
|
width: 144
|
|
},
|
|
{
|
|
id: 'user',
|
|
operator: '+',
|
|
title: 'User',
|
|
visible: false,
|
|
width: 96
|
|
},
|
|
{
|
|
format: function(value) {
|
|
return value.replace('T', ' ').replace('Z', '');
|
|
},
|
|
id: 'created',
|
|
operator: '-',
|
|
title: 'Date Created',
|
|
visible: false,
|
|
width: 128,
|
|
},
|
|
{
|
|
format: function(value) {
|
|
return value.replace('T', ' ').replace('Z', '');
|
|
},
|
|
id: 'modified',
|
|
operator: '-',
|
|
title: 'Date Modified',
|
|
visible: false,
|
|
width: 128,
|
|
},
|
|
{
|
|
align: 'right',
|
|
id: 'matches',
|
|
operator: '-',
|
|
title: 'Matches',
|
|
visible: false,
|
|
width: 64,
|
|
}
|
|
];
|
|
|
|
self.$listToolbar = Ox.Bar({
|
|
size: 24
|
|
});
|
|
|
|
self.$findElement = Ox.FormElementGroup({
|
|
elements: [
|
|
self.$findSelect = Ox.Select({
|
|
items: [
|
|
{id: 'all', title: 'Find: All'},
|
|
{id: 'name', title: 'Find: Name'},
|
|
{id: 'alternativeNames', title: 'Find: Alternative Names'},
|
|
],
|
|
overlap: 'right',
|
|
type: 'image'
|
|
})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
var key = data.selected[0].id,
|
|
value = self.$findInput.value();
|
|
value && updateList(key, value);
|
|
}
|
|
}),
|
|
self.$findInput = Ox.Input({
|
|
clear: true,
|
|
placeholder: 'Find in List',
|
|
width: 234
|
|
})
|
|
.bindEvent({
|
|
submit: function(data) {
|
|
var key = self.$findSelect.value(),
|
|
value = data.value;
|
|
updateList(key, value);
|
|
}
|
|
})
|
|
]
|
|
})
|
|
.css({float: 'right', margin: '4px'})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
|
|
}
|
|
})
|
|
.appendTo(self.$listToolbar);
|
|
|
|
self.$list = Ox.TextList({
|
|
columns: self.columns,
|
|
columnsRemovable: true,
|
|
columnsVisible: true,
|
|
//items: Ox.clone(self.options.places),
|
|
items: self.options.events,
|
|
pageLength: self.options.pageLength,
|
|
scrollbarVisible: true,
|
|
sort: self.options.sort
|
|
})
|
|
.bindEvent({
|
|
'delete': removeItem,
|
|
init: initList, // fixme: won't fire from static list
|
|
key_0: function() {
|
|
self.$calendar.panToEvent();
|
|
},
|
|
key_equal: function() {
|
|
self.$calendar.zoom(1);
|
|
},
|
|
key_minus: function() {
|
|
self.$calendar.zoom(-1);
|
|
},
|
|
key_shift_0: function() {
|
|
self.$calendar.zoomToPlace();
|
|
},
|
|
load: function() {
|
|
that.triggerEvent('loadlist');
|
|
},
|
|
open: openItem,
|
|
select: selectItem
|
|
});
|
|
|
|
self.$listStatusbar = Ox.Bar({
|
|
size: 16
|
|
});
|
|
|
|
self.$status = Ox.Element()
|
|
.css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
|
|
.html(
|
|
Ox.formatNumber(self.options.events.length) + ' Event' + (
|
|
self.options.events.length == 1 ? '' : 's'
|
|
)
|
|
)
|
|
.appendTo(self.$listStatusbar);
|
|
|
|
self.$calendar = Ox.Element();
|
|
|
|
self.$placeTitlebar = Ox.Bar({
|
|
size: 24
|
|
});
|
|
|
|
self.$placeForm = Ox.Form({
|
|
items: [],
|
|
width: 240
|
|
})
|
|
.css({margin: '8px'})
|
|
.hide();
|
|
|
|
self.$placeStatusbar = 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
|
|
);
|
|
|
|
|
|
function initList(data) {
|
|
self.$status.html(
|
|
Ox.formatNumber(data.items) + ' Event' + (
|
|
data.items == 1 ? '' : 's'
|
|
)
|
|
);
|
|
}
|
|
|
|
function openItem() {
|
|
|
|
}
|
|
|
|
function removeItem() {
|
|
|
|
}
|
|
|
|
function selectItem() {
|
|
|
|
}
|
|
|
|
function updateList(key, value) {
|
|
var query = {
|
|
conditions: Ox.merge(
|
|
['all', 'name'].indexOf(key) > -1
|
|
? [{key: 'name', value: value, operator: '='}] : [],
|
|
['all', 'alternativeNames'].indexOf(key) > -1
|
|
? [{key: 'alternativeNames', value: value, operator: '='}] : []
|
|
),
|
|
operator: key == 'all' ? '|' : '&'
|
|
};
|
|
self.$list.options({
|
|
items: function(data, callback) {
|
|
return pandora.api.findEvents(Ox.extend(data, {
|
|
query: query
|
|
}), callback);
|
|
}
|
|
});
|
|
}
|
|
|
|
return that;
|
|
|
|
}; |