update countries example
This commit is contained in:
rolux
parent
730f18cb72
commit
b5749bfaeb
1 changed files with 125 additions and 171 deletions
|
|
@ -5,28 +5,11 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
var items = Ox.COUNTRIES.map(function(country) {
|
||||
return Ox.extend({}, country, {
|
||||
flag: Ox.getFlagByCountryCode(country.code, 256),
|
||||
icon: Ox.getFlagByCountryCode(country.code, 16),
|
||||
region: country.continent + ', ' + country.region
|
||||
});
|
||||
}),
|
||||
|
||||
columns = [
|
||||
{
|
||||
format: function(value) {
|
||||
return $('<img>').attr({src: value}).css({
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
borderRadius: '2px',
|
||||
margin: '0 0 0 -3px'
|
||||
})
|
||||
},
|
||||
id: 'icon',
|
||||
operator: '+',
|
||||
title: 'Flag',
|
||||
titleImage: 'flag',
|
||||
visible: true,
|
||||
width: 16
|
||||
},
|
||||
{
|
||||
id: 'code',
|
||||
operator: '+',
|
||||
|
|
@ -95,52 +78,12 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
title: 'Longitude',
|
||||
visible: true,
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
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
|
||||
},
|
||||
}
|
||||
],
|
||||
|
||||
itemSize = 288 + Ox.UI.SCROLLBAR_SIZE,
|
||||
|
||||
state = {
|
||||
ui = {
|
||||
find: '',
|
||||
include: {
|
||||
dependency: false,
|
||||
|
|
@ -159,38 +102,37 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
|
||||
$view = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{id: 'grid', title: 'grid'},
|
||||
{id: 'list', title: 'list'}
|
||||
{id: 'grid', title: 'grid', tooltip: 'View as Grid'},
|
||||
{id: 'list', title: 'list', tooltip: 'View as List'}
|
||||
],
|
||||
selectable: true,
|
||||
type: 'image',
|
||||
value: state.view
|
||||
value: ui.view
|
||||
})
|
||||
.bindEvent({change: view})
|
||||
.appendTo($toolbar),
|
||||
|
||||
$sort = Ox.Select({
|
||||
items: [
|
||||
{id: 'name', title: 'Sort by Name'},
|
||||
{id: 'code', title: 'Sort by Code'},
|
||||
{id: 'continent', title: 'Sort by Continent'},
|
||||
{id: 'region', title: 'Sort by Region'},
|
||||
{id: 'area', title: 'Sort by Area'},
|
||||
{id: 'lat', title: 'Sort by Latitude'},
|
||||
{id: 'lng', title: 'Sort by Longitude'}
|
||||
],
|
||||
items: columns.filter(function(column) {
|
||||
return column.id != 'flag';
|
||||
}).map(function(column) {
|
||||
return {
|
||||
id: column.id,
|
||||
title: 'Sort by ' + column.title
|
||||
};
|
||||
}),
|
||||
value: ui.sort[0].key,
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({change: sort})
|
||||
[state.view == 'grid' ? 'show' : 'hide']()
|
||||
[ui.view == 'grid' ? 'show' : 'hide']()
|
||||
.appendTo($toolbar),
|
||||
|
||||
$order = Ox.Button({
|
||||
title: state.sort[0].operator == '+' ? 'up' : 'down',
|
||||
$order = Ox.Button(Ox.extend(getOptions(), {
|
||||
type: 'image'
|
||||
})
|
||||
}))
|
||||
.bindEvent({click: order})
|
||||
[state.view == 'grid' ? 'show' : 'hide']()
|
||||
[ui.view == 'grid' ? 'show' : 'hide']()
|
||||
.appendTo($toolbar),
|
||||
|
||||
$find = Ox.Input({
|
||||
|
|
@ -218,57 +160,7 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
.bindEvent({change: include})
|
||||
.appendTo($toolbar),
|
||||
|
||||
$list = {
|
||||
|
||||
grid: Ox.IconList({
|
||||
borderRadius: 16,
|
||||
fixedRatio: 1,
|
||||
item: function(data, sort, size) {
|
||||
var key = sort[0].key == 'name' ? 'code' : sort[0].key,
|
||||
column = Ox.getObjectById(columns, key),
|
||||
info = (column.format || Ox.identity)(data[key]);
|
||||
return {
|
||||
height: size,
|
||||
id: data.id,
|
||||
info: info,
|
||||
title: data.name,
|
||||
url: data.flag,
|
||||
width: size
|
||||
};
|
||||
},
|
||||
items: items,
|
||||
keys: ['flag', 'name'],
|
||||
max: 1,
|
||||
pageLength: 1000,
|
||||
query: query,
|
||||
selected: state.selected,
|
||||
size: 128,
|
||||
sort: Ox.clone(state.sort),
|
||||
unique: 'code'
|
||||
})
|
||||
.bindEvent({
|
||||
init: init,
|
||||
select: select
|
||||
}),
|
||||
|
||||
list: Ox.TextList({
|
||||
columns: columns,
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsVisible: true,
|
||||
items: items,
|
||||
max: 1,
|
||||
pageLength: 1000,
|
||||
query: query,
|
||||
scrollbarVisible: true,
|
||||
sort: Ox.clone(state.sort)
|
||||
})
|
||||
.bindEvent({
|
||||
init: init,
|
||||
select: select
|
||||
})
|
||||
|
||||
},
|
||||
$list = renderList(),
|
||||
|
||||
$statusbar = Ox.Bar({size: 16}),
|
||||
|
||||
|
|
@ -277,7 +169,7 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
$listPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $toolbar, size: 24},
|
||||
{element: $list[state.view]},
|
||||
{element: $list},
|
||||
{element: $statusbar, size: 16}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
|
|
@ -297,7 +189,7 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
$list[state.view].options({selected: []});
|
||||
$list.options({selected: []});
|
||||
select({ids: []});
|
||||
}
|
||||
})
|
||||
|
|
@ -325,18 +217,26 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
.appendTo(Ox.$body);
|
||||
|
||||
function find() {
|
||||
state.find = $find.options('value');
|
||||
ui.find = $find.options('value');
|
||||
query = getQuery();
|
||||
$status.html('Loading...');
|
||||
$list[state.view].options({query: query});
|
||||
$list.options({query: query});
|
||||
}
|
||||
|
||||
function getOptions() {
|
||||
var operator = ui.sort[0].operator;
|
||||
return {
|
||||
title: operator == '+' ? 'up' : 'down',
|
||||
tooltip: operator == '+' ? 'Ascending' : 'Descending'
|
||||
};
|
||||
}
|
||||
|
||||
function getQuery() {
|
||||
var query = {
|
||||
conditions: [{key: 'name', operator: '=', value: state.find}],
|
||||
conditions: [{key: 'name', operator: '=', value: ui.find}],
|
||||
operator: '&'
|
||||
};
|
||||
Ox.forEach(state.include, function(value, key) {
|
||||
Ox.forEach(ui.include, function(value, key) {
|
||||
!value && query.conditions.push(
|
||||
{key: key, operator: '=', value: void 0}
|
||||
);
|
||||
|
|
@ -345,7 +245,7 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
}
|
||||
|
||||
function include(data) {
|
||||
state.include[data.id] = data.checked;
|
||||
ui.include[data.id] = data.checked;
|
||||
find();
|
||||
}
|
||||
|
||||
|
|
@ -356,34 +256,16 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
);
|
||||
}
|
||||
|
||||
function order(data) {
|
||||
state.sort[0].operator = state.sort[0].operator == '+' ? '-' : '+';
|
||||
$order.options({title: state.sort[0].operator == '+' ? 'up' : 'down'});
|
||||
$list[state.view].options({sort: Ox.clone(state.sort)});
|
||||
function order() {
|
||||
ui.sort[0].operator = ui.sort[0].operator == '+' ? '-' : '+';
|
||||
$order.options(getOptions());
|
||||
$list.options({sort: Ox.clone(ui.sort, true)});
|
||||
}
|
||||
|
||||
function select(data) {
|
||||
Ox.print('SELECT', data)
|
||||
var id = data.ids[0];
|
||||
if (id) {
|
||||
state.selected = [id];
|
||||
data = $list[state.view].value(id);
|
||||
Ox.print(state.view, 'DATA:', data, id)
|
||||
$title.options({title: data.name}).show();
|
||||
$deselect.show();
|
||||
showItem();
|
||||
} else {
|
||||
state.selected = [];
|
||||
$title.hide();
|
||||
$deselect.hide();
|
||||
$item.empty();
|
||||
}
|
||||
}
|
||||
|
||||
function showItem() {
|
||||
var code = state.selected[0];
|
||||
function renderItem() {
|
||||
var code = ui.selected[0];
|
||||
$item.empty();
|
||||
if (state.view == 'grid') {
|
||||
if (ui.view == 'grid') {
|
||||
Ox.TreeList({
|
||||
data: Ox.getCountryByCode(code),
|
||||
scrollbarVisible: true,
|
||||
|
|
@ -398,22 +280,94 @@ Ox.load(['Geo', 'UI'], function() {
|
|||
}
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
return ui.view == 'grid'
|
||||
? Ox.IconList({
|
||||
borderRadius: 16,
|
||||
fixedRatio: 1,
|
||||
item: function(data, sort, size) {
|
||||
var key = sort[0].key == 'name' ? 'code' : sort[0].key,
|
||||
column = Ox.getObjectById(columns, key),
|
||||
info = (column.format || Ox.identity)(data[key]);
|
||||
return {
|
||||
height: size,
|
||||
id: data.id,
|
||||
info: info,
|
||||
title: data.name,
|
||||
url: data.flag,
|
||||
width: size
|
||||
};
|
||||
},
|
||||
items: items,
|
||||
keys: ['flag', 'name'],
|
||||
max: 1,
|
||||
pageLength: 1000,
|
||||
query: query,
|
||||
selected: ui.selected,
|
||||
size: 128,
|
||||
sort: Ox.clone(ui.sort, true),
|
||||
unique: 'code'
|
||||
})
|
||||
.bindEvent({
|
||||
init: init,
|
||||
select: select
|
||||
})
|
||||
: Ox.TextList({
|
||||
columns: columns,
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsVisible: true,
|
||||
items: items,
|
||||
max: 1,
|
||||
pageLength: 1000,
|
||||
query: query,
|
||||
scrollbarVisible: true,
|
||||
selected: ui.selected,
|
||||
sort: Ox.clone(ui.sort, true)
|
||||
})
|
||||
.bindEvent({
|
||||
init: init,
|
||||
select: select,
|
||||
sort: sort
|
||||
});
|
||||
}
|
||||
|
||||
function select(data) {
|
||||
var id = data.ids[0];
|
||||
if (id) {
|
||||
ui.selected = [id];
|
||||
data = $list.value(id);
|
||||
$title.options({title: data.name}).show();
|
||||
$deselect.show();
|
||||
renderItem();
|
||||
} else {
|
||||
ui.selected = [];
|
||||
$title.hide();
|
||||
$deselect.hide();
|
||||
$item.empty();
|
||||
}
|
||||
}
|
||||
|
||||
function sort(data) {
|
||||
state.sort = [{
|
||||
key: data.value,
|
||||
operator: Ox.getObjectById(columns, data.value).operator
|
||||
}];
|
||||
$order.options({title: state.sort[0].operator == '+' ? 'up' : 'down'});
|
||||
$list[state.view].options({sort: state.sort});
|
||||
if (data.value) {
|
||||
data = {
|
||||
key: data.value,
|
||||
operator: Ox.getObjectById(columns, data.value).operator
|
||||
}
|
||||
}
|
||||
ui.sort = [{key: data.key, operator: data.operator}];
|
||||
$sort.options({value: data.key});
|
||||
$order.options(getOptions());
|
||||
$list.options({sort: Ox.clone(ui.sort, true)});
|
||||
}
|
||||
|
||||
function view(data) {
|
||||
state.view = data.value;
|
||||
$sort[state.view == 'grid' ? 'show' : 'hide']();
|
||||
$order[state.view == 'grid' ? 'show' : 'hide']();
|
||||
$listPanel.replaceElement(1, $list[state.view].options({
|
||||
selected: state.selected
|
||||
}));
|
||||
ui.view = data.value;
|
||||
$sort[ui.view == 'grid' ? 'show' : 'hide']();
|
||||
$order[ui.view == 'grid' ? 'show' : 'hide']();
|
||||
$list = renderList();
|
||||
$listPanel.replaceElement(1, $list);
|
||||
$list.gainFocus();
|
||||
}
|
||||
|
||||
});
|
||||
Loading…
Reference in a new issue