add Ox.ListCalendar
This commit is contained in:
rlx
parent
54b7d9de9f
commit
d51de58009
4 changed files with 364 additions and 32 deletions
323
source/Ox.UI/js/Calendar/Ox.ListCalendar.js
Normal file
323
source/Ox.UI/js/Calendar/Ox.ListCalendar.js
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
// 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({
|
||||
addPlace: null,
|
||||
editPlace: null,
|
||||
height: 256,
|
||||
labels: false,
|
||||
pageLength: 100,
|
||||
places: null,
|
||||
removePlace: null,
|
||||
selected: [],
|
||||
sort: [{key: 'geoname', 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.places,
|
||||
pageLength: self.options.pageLength,
|
||||
scrollbarVisible: true,
|
||||
sort: self.options.sort
|
||||
})
|
||||
.bindEvent({
|
||||
'delete': removeItem,
|
||||
init: initList,
|
||||
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'})
|
||||
.appendTo(self.$listStatusbar);
|
||||
|
||||
self.$calendar = Ox.Element();
|
||||
|
||||
self.$placeTitlebar = Ox.Bar({
|
||||
size: 24
|
||||
});
|
||||
|
||||
self.$placeForm = Ox.Form({
|
||||
items: self.$placeFormItems,
|
||||
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() {
|
||||
|
||||
}
|
||||
|
||||
function openItem() {
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -45,7 +45,6 @@ Ox.Checkbox = function(options, self) {
|
|||
self.options.width != 'auto' && that.css({
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
Ox.print(self.options.width - 16, self.options.label * (self.options.labelWidth - 16))
|
||||
self.$title = Ox.Label({
|
||||
disabled: self.options.disabled,
|
||||
id: self.options.id + 'Label',
|
||||
|
|
|
|||
|
|
@ -54,6 +54,19 @@ Ox.Form = function(options, self) {
|
|||
data.valid = !!data.value.length;
|
||||
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', {
|
||||
id: self.itemIds[i],
|
||||
data: data
|
||||
});
|
||||
},
|
||||
change: function(data) {
|
||||
that.triggerEvent('change', {
|
||||
id: self.itemIds[i],
|
||||
data: data
|
||||
});
|
||||
},
|
||||
submit: function(data) {
|
||||
self.formIsValid && that.submit();
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
/*@
|
||||
Ox.ListMap <f:Ox.Element> ListMap Object
|
||||
() -> <f> ListMap Object
|
||||
(options) -> <f> ListMap Object
|
||||
(options, self) -> <f> ListMap Object
|
||||
Ox.ListMap <f:Ox.Element> ListMap object
|
||||
() -> <f> ListMap object
|
||||
(options) -> <f> ListMap object
|
||||
(options, self) -> <f> ListMap object
|
||||
options <o> Options object
|
||||
height <n|256> height
|
||||
labels <b|false> labels
|
||||
places <f|null> places
|
||||
selected <a|[]> selected
|
||||
width <n|256> width
|
||||
self <o> shared private variable
|
||||
height <n|256> Height in px
|
||||
labels <b|false> If true, show labels
|
||||
places <a|f|null> Array of places, or function that returns places
|
||||
selected <a|[]> Selected places
|
||||
width <n|256> Width in px
|
||||
self <o> Shared private variable
|
||||
@*/
|
||||
|
||||
Ox.ListMap = function(options, self) {
|
||||
|
|
@ -30,8 +30,8 @@ Ox.ListMap = function(options, self) {
|
|||
sort: [{key: 'geoname', operator: '+'}],
|
||||
width: 256
|
||||
})
|
||||
.addClass('OxListMap')
|
||||
.options(options || {})
|
||||
.addClass('OxListMap')
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
height: self.options.height + 'px'
|
||||
|
|
@ -72,7 +72,6 @@ Ox.ListMap = function(options, self) {
|
|||
width: 16
|
||||
},
|
||||
{
|
||||
//editable: true,
|
||||
id: 'name',
|
||||
operator: '+',
|
||||
removable: false,
|
||||
|
|
@ -81,7 +80,6 @@ Ox.ListMap = function(options, self) {
|
|||
width: 144
|
||||
},
|
||||
{
|
||||
editable: false,
|
||||
format: function(value) {
|
||||
return value.join('; ');
|
||||
},
|
||||
|
|
@ -92,7 +90,6 @@ Ox.ListMap = function(options, self) {
|
|||
width: 144
|
||||
},
|
||||
{
|
||||
//editable: true,
|
||||
id: 'geoname',
|
||||
map: function(v) {
|
||||
var names = v.split(', ');
|
||||
|
|
|
|||
Loading…
Reference in a new issue