0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add Ox.ListCalendar

Browse source
This commit is contained in:
rlx 2011-10-03 16:14:01 +00:00
parent 54b7d9de9f
commit d51de58009
4 changed files with 364 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

323
source/Ox.UI/js/Calendar/Ox.ListCalendar.js Normal file
View 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);
}
});
}
};

1
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -45,7 +45,6 @@ Ox.Checkbox = function(options, self) {
self.options.width != 'auto' && that.css({ self.options.width != 'auto' && that.css({
width: self.options.width + 'px' width: self.options.width + 'px'
}); });
Ox.print(self.options.width - 16, self.options.label * (self.options.labelWidth - 16))
self.$title = Ox.Label({ self.$title = Ox.Label({
disabled: self.options.disabled, disabled: self.options.disabled,
id: self.options.id + 'Label', id: self.options.id + 'Label',

13
source/Ox.UI/js/Form/Ox.Form.js
View file

@ -54,6 +54,19 @@ Ox.Form = function(options, self) {
data.valid = !!data.value.length; data.valid = !!data.value.length;
validate(i, data.valid); validate(i, data.valid);
data.valid && self.$items[i].setMessage(''); 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) { submit: function(data) {
self.formIsValid && that.submit(); self.formIsValid && that.submit();

59
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -1,41 +1,41 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
/*@ /*@
Ox.ListMap <f:Ox.Element> ListMap Object Ox.ListMap <f:Ox.Element> ListMap object
() -> <f> ListMap Object () -> <f> ListMap object
(options) -> <f> ListMap Object (options) -> <f> ListMap object
(options, self) -> <f> ListMap Object (options, self) -> <f> ListMap object
options <o> Options object options <o> Options object
height <n|256> height height <n|256> Height in px
labels <b|false> labels labels <b|false> If true, show labels
places <f|null> places places <a|f|null> Array of places, or function that returns places
selected <a|[]> selected selected <a|[]> Selected places
width <n|256> width width <n|256> Width in px
self <o> shared private variable self <o> Shared private variable
@*/ @*/
Ox.ListMap = function(options, self) { Ox.ListMap = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
addPlace: null, addPlace: null,
editPlace: null, editPlace: null,
height: 256, height: 256,
labels: false, labels: false,
pageLength: 100, pageLength: 100,
places: null, places: null,
removePlace: null, removePlace: null,
selected: [], selected: [],
sort: [{key: 'geoname', operator: '+'}], sort: [{key: 'geoname', operator: '+'}],
width: 256 width: 256
}) })
.addClass('OxListMap') .options(options || {})
.options(options || {}) .addClass('OxListMap')
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
height: self.options.height + 'px' height: self.options.height + 'px'
}); });
self.isAsync = Ox.isFunction(self.options.places); self.isAsync = Ox.isFunction(self.options.places);
@ -72,7 +72,6 @@ Ox.ListMap = function(options, self) {
width: 16 width: 16
}, },
{ {
//editable: true,
id: 'name', id: 'name',
operator: '+', operator: '+',
removable: false, removable: false,
@ -81,7 +80,6 @@ Ox.ListMap = function(options, self) {
width: 144 width: 144
}, },
{ {
editable: false,
format: function(value) { format: function(value) {
return value.join('; '); return value.join('; ');
}, },
@ -92,7 +90,6 @@ Ox.ListMap = function(options, self) {
width: 144 width: 144
}, },
{ {
//editable: true,
id: 'geoname', id: 'geoname',
map: function(v) { map: function(v) {
var names = v.split(', '); var names = v.split(', ');