update Geo module
This commit is contained in:
rolux
parent
9c39e0e2e6
commit
0bf4d5a0f5
5 changed files with 582 additions and 62 deletions
|
|
@ -4,4 +4,384 @@
|
|||
|
||||
<p>foo: <code>// this is some code</code></p>
|
||||
|
||||
<blockquote>blockquote</blockquote>
|
||||
<blockquote>blockquote</blockquote>
|
||||
|
||||
<p><pre class="code">
|
||||
/*
|
||||
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
We have to load the Geo module to get Ox.COUNTRIES
|
||||
*/
|
||||
Ox.load({UI: {}, Geo: {}}, function() {
|
||||
|
||||
var countries = Ox.COUNTRIES.filter(function(country) {
|
||||
/*
|
||||
We filter out some types of countries that we're not interested in.
|
||||
*/
|
||||
return !country.disputed
|
||||
&& !country.dissolved
|
||||
&& !country.exception
|
||||
&& country.code.length == 2
|
||||
}).map(function(country) {
|
||||
/*
|
||||
For independent countries, the dependency property is undefined. We
|
||||
want an empty array though, so that the type of this column gets
|
||||
correctly detected as array.
|
||||
*/
|
||||
country.dependency = country.dependency || [];
|
||||
/*
|
||||
When sorting the list by region, we want the regions to be grouped
|
||||
by continent. To get this sort order, we set the value for region to
|
||||
'Continent, Region'. Later, a format function for the region column
|
||||
will remove the continent part again.
|
||||
*/
|
||||
country.region = country.continent + ', ' + country.region;
|
||||
return country;
|
||||
}),
|
||||
api = Ox.api(countries, {sort: ['+name'], unique: 'code'}),
|
||||
$list = Ox.TextList({
|
||||
columns: [
|
||||
{
|
||||
/*
|
||||
The format function of a column has a second argument
|
||||
which contains the values of all columns. This allows us
|
||||
to format a value dependent on other values. In this
|
||||
case, we want to display a flag, and while our items
|
||||
don't have a flag property, the Geo module allows us to
|
||||
derive it from the name property. The flag image needs a
|
||||
tooltip (which is why we can't use an $('<img>') here),
|
||||
and gets some CSS adjustments.
|
||||
*/
|
||||
format: function(value, data) {
|
||||
return Ox.Element({
|
||||
element: '<img>',
|
||||
tooltip:
|
||||
'<div style="margin-top: 2px"><img src="'
|
||||
+ Ox.getFlagByGeoname(data.name, 64)
|
||||
+ '"/></div>'
|
||||
})
|
||||
.attr({
|
||||
src: Ox.getFlagByGeoname(data.name, 16)
|
||||
})
|
||||
.css({
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
marginLeft: '-3px'
|
||||
})
|
||||
},
|
||||
/*
|
||||
As the actual key for the column, we use the country
|
||||
code, not the country name, since we still want to
|
||||
display the name in its own column.
|
||||
*/
|
||||
id: 'flagURL',
|
||||
operator: '+',
|
||||
removable: false,
|
||||
/*
|
||||
We want the column title to be a flag symbol, so we
|
||||
specify this as the titleImage. We can pick anything
|
||||
from the collection of symbols that comes with Ox.UI.
|
||||
The column still needs a textual title that will be
|
||||
displayed in the menu that allows to show or hide
|
||||
specific columns.
|
||||
*/
|
||||
title: 'Flag',
|
||||
titleImage: 'flag',
|
||||
/*
|
||||
The country code is the unique key of our country table.
|
||||
In consequence, whenever the list fires a select event,
|
||||
it will reference this value as the item's id.
|
||||
*/
|
||||
unique: true,
|
||||
visible: true,
|
||||
width: 16
|
||||
},
|
||||
{
|
||||
id: 'code',
|
||||
operator: '+',
|
||||
title: 'Code',
|
||||
unique: true,
|
||||
visible: true,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
/*
|
||||
The operator indicates that we want the default sort
|
||||
order of this column to be ascending.
|
||||
*/
|
||||
operator: '+',
|
||||
/*
|
||||
As it wouldn't make much sense to display the list
|
||||
without the name column, we make it non-removable.
|
||||
*/
|
||||
removable: false,
|
||||
title: 'Name',
|
||||
visible: true,
|
||||
width: 256
|
||||
},
|
||||
{
|
||||
id: 'continent',
|
||||
operator: '+',
|
||||
title: 'Continent',
|
||||
visible: true,
|
||||
width: 96
|
||||
},
|
||||
{
|
||||
/*
|
||||
To tweak the sort order for this column, we had changed
|
||||
the value for region to 'Continent, Region'. The format
|
||||
function now reverts that change.
|
||||
*/
|
||||
format: function(value) {
|
||||
return value.split(', ')[1];
|
||||
},
|
||||
id: 'region',
|
||||
operator: '+',
|
||||
title: 'Region',
|
||||
visible: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
/*
|
||||
As the value is a number, it should be right-aligned.
|
||||
*/
|
||||
align: 'right',
|
||||
/*
|
||||
To get from square meters to something human-readable,
|
||||
we use one of the built-in format functions.
|
||||
*/
|
||||
format: function(value) {
|
||||
return Ox.formatArea(value);
|
||||
},
|
||||
id: 'area',
|
||||
operator: '-',
|
||||
title: 'Area',
|
||||
visible: true,
|
||||
width: 112
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return Ox.formatDegrees(value, 'lat');
|
||||
},
|
||||
align: 'right',
|
||||
id: 'lat',
|
||||
operator: '-',
|
||||
title: 'Latitude',
|
||||
visible: true,
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return Ox.formatDegrees(value, 'lng');
|
||||
},
|
||||
align: 'right',
|
||||
id: 'lng',
|
||||
operator: '+',
|
||||
title: 'Longitude',
|
||||
visible: true,
|
||||
width: 80
|
||||
},
|
||||
/*
|
||||
For the next four columns, which seem less important, we
|
||||
omit the 'visible' option, which defaults to false. They can
|
||||
still be made visible, they're just not visible by default.
|
||||
*/
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return Ox.formatDegrees(value, 'lat');
|
||||
},
|
||||
id: 'south',
|
||||
operator: '-',
|
||||
title: 'South',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return Ox.formatDegrees(value, 'lat');
|
||||
},
|
||||
id: 'north',
|
||||
operator: '-',
|
||||
title: 'North',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return Ox.formatDegrees(value, 'lng');
|
||||
},
|
||||
id: 'west',
|
||||
operator: '-',
|
||||
title: 'West',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: function(value) {
|
||||
return Ox.formatDegrees(value, 'lng');
|
||||
},
|
||||
id: 'east',
|
||||
operator: '-',
|
||||
title: 'East',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
/*
|
||||
The dependency property is an array of country names,
|
||||
for each of which we want to display a flag. So we use a
|
||||
similar constuction as above, and wrap the images in a
|
||||
$('<div>') element.
|
||||
*/
|
||||
format: function(value) {
|
||||
var ret = '';
|
||||
if (value) {
|
||||
var ret = $('<div>').css({marginLeft: '-4px'});
|
||||
value.forEach(function(country) {
|
||||
Ox.Element({
|
||||
element: '<img>',
|
||||
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 = $('<div>').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'}
|
||||
)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</pre></p>
|
||||
Loading…
Add table
Add a link
Reference in a new issue