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

some support for async listmaps

Browse source
This commit is contained in:
rolux 2011-05-29 12:42:38 +02:00
parent 3936f701cd
commit 14174136d8
3 changed files with 136 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demos/listmap2/index.html
View file

@ -1,10 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>ox.js listmap demo</title <title>OxJS ListMap Demo (async)</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script> <script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="../../source/_/ox.map.js"></script>
<script type="text/javascript" src="js/listmap.js"></script> <script type="text/javascript" src="js/listmap.js"></script>
</head> </head>
<body> <body>

162
demos/listmap2/js/listmap.js
View file

@ -7,41 +7,123 @@ Ox.load('Geo', function() {
Ox.getJSON('json/cities100000.json', function(cities) { Ox.getJSON('json/cities100000.json', function(cities) {
var listmap = new Ox.ListMap({ var places = cities.map(function(city, i) {
var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} :
city.population > 10000000 ? {size: 22, color: [255, 32, 0]} :
city.population > 5000000 ? {size: 20, color: [255, 64, 0]} :
city.population > 2000000 ? {size: 18, color: [255, 96, 0]} :
city.population > 1000000 ? {size: 16, color: [255, 128, 0]} :
city.population > 500000 ? {size: 14, color: [255, 160, 0]} :
city.population > 200000 ? {size: 12, color: [255, 192, 0]} :
city.population > 100000 ? {size: 10, color: [255, 224, 0]} :
{size: 8, color: [255, 255, 0]},
area = Math.sqrt(Math.max(city.population, 1) * 100),
latSize = area / Ox.EARTH_CIRCUMFERENCE * 360,
lngSize = area * Ox.getDegreesPerMeter(city.latitude);
return {
alternativeNames: [],
area: city.population * 100,
countryCode: countryCode,
editable: true,
flag: countryCode,
geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
geonameSort: getGeonameSort(city.name + ', ' + Ox.getCountryByCode(countryCode).name),
id: Ox.encodeBase32(i),
markerColor: marker.color,
markerSize: marker.size,
name: city.name,
type: 'city',
lat: city.latitude,
lng: city.longitude,
south: city.latitude - latSize / 2,
west: city.longitude - lngSize / 2,
north: city.latitude + latSize / 2,
east: city.longitude + lngSize / 2
};
});
var $listmap = new Ox.ListMap({
height: window.innerHeight, height: window.innerHeight,
places: Ox.map(cities, function(city, id) { places: function(options, callback) {
var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code, // this simulates a remote API
marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} : Ox.print('OPTIONS', options)
city.population > 10000000 ? {size: 22, color: [255, 32, 0]} : var data = {};
city.population > 5000000 ? {size: 20, color: [255, 64, 0]} : // query, sort, range, area
city.population > 2000000 ? {size: 18, color: [255, 96, 0]} : if (Ox.isEmpty(options)) {
city.population > 1000000 ? {size: 16, color: [255, 128, 0]} : data = {
city.population > 500000 ? {size: 14, color: [255, 160, 0]} : items: places.length,
city.population > 200000 ? {size: 12, color: [255, 192, 0]} : south: 90,
city.population > 100000 ? {size: 10, color: [255, 224, 0]} : west: 180,
{size: 8, color: [255, 255, 0]}, north: -90,
area = Math.sqrt(city.population * 100), east: -180
latSize = area / Ox.EARTH_CIRCUMFERENCE * 360, };
lngSize = area * Ox.getDegreesPerMeter(city.latitude); places.forEach(function(place) {
return city.population > 400000/*400000*/ ? { ['south', 'west', 'north', 'east'].forEach(function(v) {
area: city.population * 100, if (
countryCode: countryCode, ((v == 'south' || v == 'west') && place[v] < data[v])
editable: true, || ((v == 'north' || v == 'east') && place[v] > data[v])
flag: countryCode, ) {
geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name, data[v] = place[v];
id: Ox.encodeBase32(id), }
markerColor: marker.color, });
markerSize: marker.size, });
name: city.name, } else {
type: 'city', data.items = places;
lat: city.latitude, if (options.query) {
lng: city.longitude,
south: city.latitude - latSize / 2, }
west: city.longitude - lngSize / 2, if (options.area) {
north: city.latitude + latSize / 2, data.items = data.items.filter(function(place) {
east: city.longitude + lngSize / 2 // fixme: fails if crosses dateline
} : null; return place.lat > options.area.south
}), && place.lat < options.area.north
&& place.lng > options.area.west
&& place.lng < options.area.east;
});
}
data.items.sort(function(a, b) {
if (options.sort[0].key == 'geoname') {
aValue = a.geonameSort;
bValue = b.geonameSort;
} else {
aValue = a[options.sort[0].key];
bValue = b[options.sort[0].key];
}
var ret = 0;
if (
(options.sort[0].operator == '+' && aValue < bValue)
|| (options.sort[0].operator == '-' && aValue > bValue)
) {
ret = -1;
} else if (
(options.sort[0].operator == '+' && aValue > bValue)
|| (options.sort[0].operator == '-' && aValue < bValue)
) {
ret = 1;
}
return ret;
});
if (options.ids) {
data.positions = {};
data.items.forEach(function(place, i) {
if (options.ids.indexOf(place.id) > -1) {
data.positions[place.id] = i;
}
});
delete data.items;
} else if (options.range) {
data.items = data.items.filter(function(place, i) {
return i >= options.range[0] && i < options.range[1];
});
}
}
Ox.print('DATA', data)
callback({
data: data,
result: {code: 200, text: 'OK'}
});
},
width: window.innerWidth width: window.innerWidth
}) })
.bindEvent({ .bindEvent({
@ -54,13 +136,21 @@ Ox.load('Geo', function() {
$(window).resize(function() { $(window).resize(function() {
Ox.print('RESIZE', window.innerHeight) Ox.print('RESIZE', window.innerHeight)
listmap.options({ $listmap.options({
height: window.innerHeight, height: window.innerHeight,
width: window.innerWidth width: window.innerWidth
}); });
}); });
window.listmap = listmap; window.$listmap = $listmap;
function getGeonameSort(geoname) {
var names = geoname.split(', ');
if (!Ox.getCountryByGeoname(names[names.length - 1])) {
names.push('~');
}
return names.reverse().join(', ');
}
}); });

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

@ -23,8 +23,10 @@ Ox.ListMap = function(options, self) {
addPlace: null, addPlace: null,
height: 256, height: 256,
labels: false, labels: false,
pageLength: 100,
places: null, places: null,
selected: [], selected: [],
sort: [{key: 'geoname', operator: '+'}],
width: 256 width: 256
}) })
.addClass('OxListMap') .addClass('OxListMap')
@ -34,6 +36,8 @@ Ox.ListMap = function(options, self) {
height: self.options.height + 'px' height: self.options.height + 'px'
}); });
self.isAsync = Ox.isFunction(self.options.places);
self.columns = [ self.columns = [
{ {
addable: false, // fixme: implement addable: false, // fixme: implement
@ -243,11 +247,9 @@ Ox.ListMap = function(options, self) {
columnsVisible: true, columnsVisible: true,
//items: Ox.clone(self.options.places), //items: Ox.clone(self.options.places),
items: self.options.places, items: self.options.places,
pageLength: 100, pageLength: self.options.pageLength,
scrollbarVisible: true, scrollbarVisible: true,
sort: [ sort: self.options.sort
{key: 'name', operator: '+'}
]
}) })
.bindEvent({ .bindEvent({
'delete': removeItem, 'delete': removeItem,
@ -455,7 +457,7 @@ Ox.ListMap = function(options, self) {
]; ];
*/ */
if (Ox.isArray(self.options.places)) { if (!self.isAsync) {
init(self.options.places) init(self.options.places)
} else { } else {
self.options.places({}, function(result) { self.options.places({}, function(result) {
@ -464,7 +466,8 @@ Ox.ListMap = function(options, self) {
keys: self.columns.map(function(column) { keys: self.columns.map(function(column) {
return column.id return column.id
}), }),
range: [0, result.data.items] range: [0, result.data.items],
sort: self.options.sort,
}, function(result) { }, function(result) {
Ox.print('DATA', result) Ox.print('DATA', result)
init(result.data.items); init(result.data.items);