') element.
*/
format: function(value) {
var ret = '';
if (value) {
var ret = $('
').css({marginLeft: '-4px'});
value.forEach(function(country) {
Ox.Element({
element: '![]()
',
tooltip: country
})
.attr({
src: Ox.getFlagByGeoname(country, 16)
})
.css({
width: '14px',
height: '14px',
margin: '1px'
})
.appendTo(ret);
});
}
return ret;
},
id: 'dependency',
operator: '+',
title: 'Dependency of',
visible: true,
width: 112
}
],
/*
This allows the user to move the columns around
*/
columnsMovable: true,
/*
This enables the UI to show or hide specific columns
*/
columnsRemovable: true,
/*
This makes sure the column titles get displayed
*/
columnsVisible: true,
items: api,
/*
Pagination is useful when a list is so big that only parts of it
can be requested or displayed. Since this is not the case here,
we set the page length to a sufficiently large number.
*/
pageLength: Ox.COUNTRIES.length,
scrollbarVisible: true,
/*
We have to specify the default sort order.
*/
sort: [{key: 'name', operator: '+'}]
})
.bindEvent({
/*
The init event of a list fires when the items function has
returned the total number of items. If we're dealing with a
remote API, a complex query, a huge dataset or a range request
for paginated results according to a non-trivial sort order,
this may happen quite a bit before any items are returned. Here,
we simply display the number of items in the status bar.
*/
init: function(data) {
$status.html(
(data.items || 'No') + ' countr'
+ (data.items == 1 ? 'y' : 'ies')
);
}
}),
/*
We want the user to be able to pick if dependent countries are included
in the list or not. So we add a checkbox, and bind the find function to
its change event.
*/
$include = Ox.Checkbox({
title: 'Include Dependencies',
value: true
})
.css({float: 'left', margin: '4px'})
.bindEvent({
change: find
}),
/*
We want a search field with find-as-you-type, so we use an input element
and set its changeOnKeypress option to true.
*/
$find = Ox.Input({
changeOnKeypress: true,
placeholder: 'Find',
width: 192
})
.css({float: 'right', margin: '4px'})
.bindEvent({
change: find
}),
/*
...
*/
$toolbar = Ox.Bar({size: 24}).append($include).append($find),
$status = $('
').css({
marginTop: '2px',
fontSize: '9px',
textAlign: 'center'
}),
$statusbar = Ox.Bar({size: 16}).append($status),
$panel = Ox.SplitPanel({
elements: [
{element: $toolbar, size: 24},
{element: $list},
{element: $statusbar, size: 16}
],
orientation: 'vertical'
})
.appendTo(Ox.$body);
function find() {
/*
The find function is bound to the change events of the $include checkbox
and the $find input field. In both cases, the value will be passed, but
since we need both values, we disregard it and query both elements for
their value. If the $include box is not checked, we add a second
condition that matches only independent countries.
*/
var conditions = [
{key: 'name', operator: '=', value: $find.options('value')},
];
!$include.options('value') && conditions.push(
{key: 'dependency', operator: '=', value: void 0}
);
/*
...
*/
api({
keys: [],
query: {conditions: conditions, operator: '&'}
}, function(result) {
$list.options({
items: Ox.api(
result.data.items, {sort: '+name', unique: 'code'}
)
});
});
}
});