oxjs/source/Ox.UI/js/Map/Ox.ListMap.js

1117 lines
36 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-05-16 08:24:46 +00:00
2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
2011-10-03 16:14:01 +00:00
Ox.ListMap <f:Ox.Element> ListMap object
() -> <f> ListMap object
(options) -> <f> ListMap object
(options, self) -> <f> ListMap object
2011-05-16 08:24:46 +00:00
options <o> Options object
2011-10-03 16:14:01 +00:00
height <n|256> Height in px
labels <b|false> If true, show labels
mode <s|'add'> Mode ('add' or 'define')
2011-10-03 16:14:01 +00:00
places <a|f|null> Array of places, or function that returns places
selected <s|''> Id of the selected place
2011-10-03 16:14:01 +00:00
width <n|256> Width in px
self <o> Shared private variable
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.ListMap = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-10-03 16:14:01 +00:00
.defaults({
addPlace: null,
editPlace: null,
collapsible: false,
2011-10-30 14:40:33 +00:00
getMatches: null,
2011-10-03 16:14:01 +00:00
height: 256,
labels: false,
mode: 'add',
2011-10-03 16:14:01 +00:00
pageLength: 100,
places: null,
removePlace: null,
2012-01-15 15:05:17 +00:00
selected: '',
2011-10-31 12:45:08 +00:00
showControls: false,
showLabels: false,
showTypes: false,
2011-10-03 16:14:01 +00:00
sort: [{key: 'geoname', operator: '+'}],
width: 256
})
.options(options || {})
.css({
width: self.options.width + 'px',
height: self.options.height + 'px'
});
2011-04-22 22:03:10 +00:00
2011-05-29 10:42:38 +00:00
self.isAsync = Ox.isFunction(self.options.places);
// FIXME: duplicated, see MapMarker
self.typeColor = {
country: [64, 64, 255],
region: [0, 192, 192],
city: [255, 0, 0],
borough: [255, 128, 0],
street: [255, 255, 0],
building: [255, 64, 128],
feature: [0, 192, 0]
};
self.areaSize = {
10000: 8, // 100 x 100 m
10000000000: 10 // 100 x 100 km
};
2011-04-22 22:03:10 +00:00
self.columns = [
{
addable: false, // fixme: implement
id: 'id',
2011-05-24 16:08:52 +00:00
title: 'Id',
2011-04-22 22:03:10 +00:00
unique: true,
2011-05-24 16:08:52 +00:00
visible: false,
2012-02-05 01:56:23 +00:00
width: 32
2011-04-22 22:03:10 +00:00
},
{
2011-11-23 15:43:01 +00:00
format: function(value, data) {
return data.geoname
? $('<img>')
.attr({
src: Ox.getFlagByGeoname(data.geoname, 16)
})
.css({
width: '14px',
height: '14px',
borderRadius: '4px',
marginLeft: '-3px',
marginTop: 0
})
: '';
2011-04-22 22:03:10 +00:00
},
id: 'countryCode',
map: function(value) {
var names = value.split(', ');
if (!Ox.getCountryByGeoname(names[names.length - 1])) {
names.push('~');
}
return names.reverse().join(', ');
},
operator: '+',
2011-05-22 17:12:21 +00:00
resizable: false, // fixme: implement
title: 'Flag',
titleImage: 'flag',
tooltip: function(data) {
return Ox.toTitleCase(data.geoname || '')
},
visible: true,
width: 16
},
{
format: function(value, data) {
var iconSize = 6;
Ox.forEach(self.areaSize, function(size, area) {
if (data.area >= area) {
iconSize = size;
} else {
return false;
}
});
return data.type
? $('<div>')
.addClass('OxTypeIcon')
.css({
width: iconSize + 'px',
height: iconSize + 'px',
borderRadius: (iconSize + 4) / 2 + 'px',
margin: [0, 0, 0, -3].map(function(v) {
return v + (10 - iconSize) / 2 + 'px';
}).join(' '),
background: 'rgb(' + self.typeColor[data.type].join(', ') + ')'
})
: '';
},
id: 'type',
operator: '+',
title: 'Type',
titleImage: 'icon',
tooltip: function(data) {
return Ox.toTitleCase(data.type || '');
},
2011-05-22 17:12:21 +00:00
visible: true,
width: 16
},
{
format: function(value, data) {
return data.type
? value
: $('<span>').addClass('OxWarning').html(value)
},
2011-05-22 17:12:21 +00:00
id: 'name',
operator: '+',
removable: false,
title: 'Name',
visible: true,
width: 144
},
2011-05-24 10:44:34 +00:00
{
format: function(value) {
return value.join('; ');
},
id: 'alternativeNames',
operator: '+',
title: 'Alternative Names',
visible: true,
width: 144
},
2011-05-22 17:12:21 +00:00
{
id: 'geoname',
2011-10-10 12:38:54 +00:00
map: function(value) {
var names = value.split(', ');
2011-05-28 08:46:39 +00:00
if (!Ox.getCountryByGeoname(names[names.length - 1])) {
names.push('~');
}
return names.reverse().join(', ');
},
operator: '+',
title: 'Geoname',
visible: false,
width: 192
},
{
align: 'right',
format: toFixed,
id: 'lat',
2011-05-24 12:50:16 +00:00
operator: '+',
title: 'Latitude',
2011-04-22 22:03:10 +00:00
visible: true,
width: 64
2011-04-22 22:03:10 +00:00
},
{
align: 'right',
format: toFixed,
id: 'lng',
operator: '+',
title: 'Longitude',
visible: true,
width: 64
},
2011-04-22 22:03:10 +00:00
{
align: 'right',
format: toFixed,
2011-05-24 11:43:27 +00:00
id: 'south',
2011-04-22 22:03:10 +00:00
operator: '+',
2011-05-24 11:43:27 +00:00
title: 'South',
visible: false,
width: 64
2011-04-22 22:03:10 +00:00
},
{
align: 'right',
2011-05-24 11:43:27 +00:00
id: 'west',
2011-04-22 22:03:10 +00:00
operator: '+',
2011-05-24 11:43:27 +00:00
title: 'West',
visible: false,
width: 64
2011-04-22 22:03:10 +00:00
},
{
align: 'right',
format: toFixed,
2011-05-24 11:43:27 +00:00
id: 'north',
2011-04-22 22:03:10 +00:00
operator: '+',
2011-05-24 11:43:27 +00:00
title: 'North',
2011-04-22 22:03:10 +00:00
visible: false,
width: 64
2011-04-22 22:03:10 +00:00
},
{
align: 'right',
2011-05-24 11:43:27 +00:00
format: toFixed,
id: 'east',
2011-04-22 22:03:10 +00:00
operator: '+',
2011-05-24 11:43:27 +00:00
title: 'East',
2011-04-22 22:03:10 +00:00
visible: false,
width: 64
2011-04-22 22:03:10 +00:00
},
2011-05-24 11:43:27 +00:00
{
align: 'right',
2011-05-30 09:31:28 +00:00
format: {type: 'area', args: []},
2011-05-24 11:43:27 +00:00
id: 'area',
operator: '-',
title: 'Area',
visible: true,
width: 128
},
2011-04-22 22:03:10 +00:00
{
id: 'user',
operator: '+',
title: 'User',
visible: false,
width: 96
},
{
2011-05-30 09:31:28 +00:00
format: function(value) {
return value.replace('T', ' ').replace('Z', '');
},
2011-04-22 22:03:10 +00:00
id: 'created',
operator: '-',
title: 'Date Created',
visible: false,
width: 128,
2011-04-22 22:03:10 +00:00
},
{
2011-05-30 09:31:28 +00:00
format: function(value) {
return value.replace('T', ' ').replace('Z', '');
},
2011-04-22 22:03:10 +00:00
id: 'modified',
operator: '-',
title: 'Date Modified',
visible: false,
width: 128,
2011-04-22 22:03:10 +00:00
},
{
align: 'right',
id: 'matches',
operator: '-',
title: 'Matches',
visible: false,
2011-05-30 18:57:22 +00:00
width: 64,
2011-04-22 22:03:10 +00:00
}
];
2011-05-21 17:56:15 +00:00
self.$listToolbar = Ox.Bar({
2011-04-22 22:03:10 +00:00
size: 24
});
2011-05-21 17:56:15 +00:00
self.$findElement = Ox.FormElementGroup({
2011-04-22 22:03:10 +00:00
elements: [
2011-05-21 17:56:15 +00:00
self.$findSelect = Ox.Select({
2011-04-22 22:03:10 +00:00
items: [
{id: 'all', title: 'Find: All'},
{id: 'name', title: 'Find: Name'},
{id: 'alternativeNames', title: 'Find: Alternative Names'},
{id: 'geoname', title: 'Find: Geoname'}
2011-04-22 22:03:10 +00:00
],
overlap: 'right',
type: 'image'
})
.bindEvent({
change: function(data) {
2011-12-21 15:33:52 +00:00
var key = data.value,
value = self.$findInput.value();
value && updateList(key, value);
}
2011-04-22 22:03:10 +00:00
}),
2011-05-21 17:56:15 +00:00
self.$findInput = Ox.Input({
2011-04-22 22:03:10 +00:00
clear: true,
placeholder: 'Find in List',
2012-02-01 17:29:15 +00:00
width: 234
2011-04-22 22:03:10 +00:00
})
.bindEvent({
submit: function(data) {
var key = self.$findSelect.value(),
value = data.value;
updateList(key, value);
}
})
2011-04-22 22:03:10 +00:00
]
})
.css({float: 'right', margin: '4px'})
2011-06-01 08:39:33 +00:00
.bindEvent({
change: function(data) {
}
})
.appendTo(self.$listToolbar);
2011-04-22 22:03:10 +00:00
2011-05-21 17:56:15 +00:00
self.$list = Ox.TextList({
2011-04-22 22:03:10 +00:00
columns: self.columns,
columnsRemovable: true,
columnsVisible: true,
2011-05-24 20:00:25 +00:00
//items: Ox.clone(self.options.places),
items: self.options.places,
2012-02-05 01:56:23 +00:00
// area needed for icon, geoname needed for flag
keys: ['area', 'geoname', 'matches'],
2012-01-15 15:05:17 +00:00
max: 1,
min: 0,
2011-05-29 10:42:38 +00:00
pageLength: self.options.pageLength,
2011-04-22 22:03:10 +00:00
scrollbarVisible: true,
2012-01-15 15:05:17 +00:00
selected: self.options.selected ? [self.options.selected] : [],
2011-05-29 10:42:38 +00:00
sort: self.options.sort
2011-04-22 22:03:10 +00:00
})
.bindEvent({
'delete': removeItem,
init: initList,
2011-05-24 14:51:40 +00:00
// fixme: do we need 0/shift-0? return already zooms to place
key_0: function() {
self.$map.panToPlace();
},
key_equal: function() {
self.$map.zoom(1);
},
key_minus: function() {
self.$map.zoom(-1);
},
key_shift_0: function() {
self.$map.zoomToPlace();
},
2011-04-22 22:03:10 +00:00
load: function() {
that.triggerEvent('loadlist');
},
open: openItem,
select: selectItem
});
2011-05-21 17:56:15 +00:00
self.$listStatusbar = Ox.Bar({
size: 16
});
self.$status = Ox.Element()
.css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
.appendTo(self.$listStatusbar);
2011-05-29 12:22:54 +00:00
self.$map = Ox.Map({
clickable: true,
editable: true,
findPlaceholder: 'Find on Map',
height: self.options.height,
places: self.options.places,
2012-01-15 15:05:17 +00:00
selected: self.options.selected,
2011-05-29 12:22:54 +00:00
//statusbar: true,
2011-10-31 12:45:08 +00:00
showControls: self.options.showControls,
showLabels: self.options.showLabels,
2011-05-30 18:57:22 +00:00
showTypes: self.options.showTypes,
2011-05-29 12:22:54 +00:00
toolbar: true,
width: self.options.width - 514,//self.mapResize[1],
zoombar: true
})
.bindEvent({
/*
addplace: function(data) {
2011-05-29 12:22:54 +00:00
that.triggerEvent('addplace', data);
},
*/
changeplace: function(data) {
self.$placeForm.values(data).show();
2011-12-21 15:33:52 +00:00
self.$areaKmInput.value(Ox.formatArea(data.area));
2011-05-29 12:22:54 +00:00
},
changeplaceend: function(data) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Map', 'ssP', self.selectedPlace);
2011-06-01 13:56:18 +00:00
var isResult = self.selectedPlace[0] == '_';
!isResult && editPlace([
'lat', 'lng', 'south', 'west', 'north', 'east', 'area'
]);
},
geocode: function(data) {
2011-05-29 12:22:54 +00:00
that.triggerEvent('geocode', data);
},
/*
2011-05-29 12:22:54 +00:00
resize: function() {
self.$map.resizeMap(); // fixme: don't need event
},
*/
2011-05-29 12:22:54 +00:00
selectplace: selectPlace
});
2011-05-21 17:56:15 +00:00
2011-05-22 17:12:21 +00:00
self.$placeTitlebar = Ox.Bar({
2011-05-21 17:56:15 +00:00
size: 24
});
2011-05-24 06:15:44 +00:00
self.$placeTitle = $('<div>')
.hide()
.appendTo(self.$placeTitlebar);
if (self.options.mode == 'define') {
self.$findPlaceButton = Ox.Button({
title: 'find',
tooltip: 'Find',
type: 'image'
})
.css({float: 'left', margin: '4px'})
.bindEvent({
click: findPlace
})
.hide()
.appendTo(self.$placeTitle);
}
2011-10-09 21:13:16 +00:00
self.$placeFlag = $('<img>')
2011-05-22 17:12:21 +00:00
.addClass('OxFlag')
.attr({
2011-11-23 14:53:17 +00:00
src: Ox.getFlagByGeoname('', 16)
2011-05-22 17:12:21 +00:00
})
2011-05-29 19:05:31 +00:00
.css({float: 'left', margin: '4px'})
2011-05-24 06:15:44 +00:00
.appendTo(self.$placeTitle);
2011-10-09 21:13:16 +00:00
self.$placeName = Ox.Label({
2011-05-22 17:12:21 +00:00
title: '',
2011-05-29 19:05:31 +00:00
width: 208
})
.css({float: 'left', margin: '4px 0 4px 0'})
.appendTo(self.$placeTitle)
.bindEvent({
singleclick: function() {
self.$map.panToPlace();
},
doubleclick: function() {
self.$map.zoomToPlace();
}
});
2011-05-29 19:05:31 +00:00
self.$deselectPlaceButton = Ox.Button({
title: 'close',
tooltip: 'Done',
type: 'image'
2011-05-21 17:56:15 +00:00
})
.css({float: 'left', margin: '4px'})
2011-05-29 19:05:31 +00:00
.bindEvent({
click: function() {
self.$map.options({selected: null});
}
})
2011-05-24 06:15:44 +00:00
.appendTo(self.$placeTitle);
2011-05-21 17:56:15 +00:00
self.$nameInput = Ox.Input({
id: 'name',
label: 'Name',
labelWidth: 64,
width: 240
}).bindEvent({
change: function(data) {
var isResult = self.selectedPlace[0] == '_';
!isResult && self.$list.value(self.selectedPlace, 'name', data.value);
if (!self.isAsync) {
Ox.getObjectById(
self.options.places, self.selectedPlace
).name = data.value;
} else {
!isResult && editPlace(['name']);
2011-05-24 06:15:44 +00:00
}
self.$map.value(self.selectedPlace, 'name', data.value);
}
});
self.$alternativeNamesInput = Ox.ArrayInput({
id: 'alternativeNames',
label: 'Alternative Names',
max: 10,
//sort: true,
values: [],
width: 240
}).bindEvent({
change: function(data) {
var isResult = self.selectedPlace[0] == '_';
if (!self.isAsync) {
} else {
!isResult && editPlace(['alternativeNames'])
}
self.$map.value(self.selectedPlace, 'alternativeNames', data.value);
}
});
self.$geonameInput = Ox.Input({
id: 'geoname',
label: 'Geoname',
labelWidth: 64,
width: 240
}).bindEvent({
change: function(data) {
var geoname = data.value,
country = Ox.getCountryByGeoname(geoname),
countryCode = country ? country.code : '',
isResult = self.selectedPlace[0] == '_';
Ox.print('CHANGE', geoname, country, countryCode, self.isAsync);
2011-10-09 21:13:16 +00:00
self.$placeFlag.attr({
2011-11-23 14:53:17 +00:00
src: Ox.getFlagByGeoname(geoname, 16)
});
2011-10-09 21:13:16 +00:00
self.$placeName.options({title: geoname});
self.$placeForm.values({countryCode: countryCode});
if (!self.isAsync) {
if (!isResult) {
self.$list.value(self.selectedPlace, 'geoname', geoname);
self.$list.value(self.selectedPlace, 'countryCode', countryCode);
2011-05-29 17:44:48 +00:00
}
} else {
!isResult && editPlace(['countryCode', 'geoname']);
2011-05-24 06:15:44 +00:00
}
self.$map.value(self.selectedPlace, 'countryCode', countryCode);
self.$map.value(self.selectedPlace, 'geoname', geoname);
}
});
// fixme: form should have a change event
// fixme: it has one now, but inputs fire on blur
self.$placeFormItems = Ox.merge([
self.$nameInput,
self.$alternativeNamesInput,
self.$geonameInput,
2011-05-30 08:46:12 +00:00
Ox.Input({
id: 'countryCode'
}).hide(),
Ox.Select({
id: 'type',
items: [
{id: 'country', title: 'Country'},
{id: 'region', title: 'Region'}, // administative (Kansas) or colloquial (Midwest)
{id: 'city', title: 'City'},
{id: 'borough', title: 'Borough'},
2011-06-01 10:48:11 +00:00
{id: 'street', title: 'Street'}, // streets, squares, bridges, tunnels, ...
{id: 'building', title: 'Building'}, // airports, stations, stadiums, military installations, ...
2011-12-21 15:33:52 +00:00
{id: 'feature', title: 'Feature'} // continents, islands, rivers, lakes, seas, oceans, mountains...
],
label: 'Type',
labelWidth: 64,
2011-05-21 17:56:15 +00:00
width: 240
2011-05-24 10:44:34 +00:00
}).bindEvent({
change: function(data) {
2011-05-30 09:31:28 +00:00
var isResult = self.selectedPlace[0] == '_';
2011-05-30 08:46:12 +00:00
if (!self.isAsync) {
2012-01-13 16:25:47 +00:00
// ...
2011-05-30 08:46:12 +00:00
} else {
!isResult && editPlace(['type'])
2011-05-30 08:46:12 +00:00
}
2011-12-21 15:33:52 +00:00
self.$map.value(self.selectedPlace, 'type', data.value);
2011-05-24 10:44:34 +00:00
}
})
2011-05-31 08:42:22 +00:00
], ['Latitude', 'Longitude', 'South', 'West', 'North', 'East'].map(function(v) {
2011-05-22 12:39:57 +00:00
var id = (
2011-05-21 17:56:15 +00:00
v == 'Latitude' ? 'lat' : v == 'Longitude' ? 'lng' : v
).toLowerCase(),
max = ['Latitude', 'South', 'North'].indexOf(v) > -1 ? Ox.MAX_LATITUDE : 180;
return Ox.Input({
decimals: 8,
disabled: ['lat', 'lng'].indexOf(id) > -1,
2011-05-22 12:39:57 +00:00
id: id,
2011-05-21 17:56:15 +00:00
label: v,
labelWidth: 80,
min: -max,
max: max,
type: 'float',
width: 240
2011-06-01 09:11:22 +00:00
})
.bindEvent({
blur: function(data) {
2011-06-01 14:42:45 +00:00
///*
2011-06-01 15:49:07 +00:00
// fixme: if type is set, no change event fires
2011-06-01 09:11:22 +00:00
var isResult = self.selectedPlace[0] == '_';
if (!self.isAsync) {
2012-01-13 16:25:47 +00:00
// ...
2011-06-01 09:11:22 +00:00
} else {
!isResult && editPlace([v])
}
2011-06-01 14:02:16 +00:00
self.$map.value(self.selectedPlace, id, parseFloat(data.value));
2011-06-01 14:42:45 +00:00
//*/
2011-06-01 09:11:22 +00:00
}
2011-04-22 22:03:10 +00:00
});
2011-05-22 12:39:57 +00:00
}), [
2011-05-24 10:44:34 +00:00
self.$areaInput = Ox.Input({
id: 'area',
2011-06-02 08:04:22 +00:00
type: 'float'
2011-05-31 08:42:22 +00:00
}).hide()
2011-05-22 12:39:57 +00:00
]);
2011-11-03 15:42:41 +00:00
2011-05-21 17:56:15 +00:00
self.$placeForm = Ox.Form({
items: self.$placeFormItems,
width: 240
})
2011-05-24 06:15:44 +00:00
.css({margin: '8px'})
.hide();
2011-04-22 22:03:10 +00:00
2011-05-31 08:42:22 +00:00
self.$areaKmInput = Ox.Input({
disabled: true,
id: 'areaKm',
label: 'Area',
labelWidth: 80,
textAlign: 'right',
width: 240
})
.css({margin: '4px 0 4px 0'})
.appendTo(self.$placeForm);
2011-10-30 14:40:33 +00:00
if (self.options.getMatches) {
self.$matchesInput = Ox.Input({
disabled: true,
id: 'matches',
label: 'Matches',
labelWidth: 80,
type: 'int',
width: 240
})
.css({margin: '8px 0 4px 0'})
.appendTo(self.$placeForm);
}
2011-05-21 17:56:15 +00:00
self.$placeStatusbar = Ox.Bar({
2011-10-03 16:37:05 +00:00
size: 24
});
2011-05-24 06:15:44 +00:00
2011-06-01 13:25:07 +00:00
self.$newPlaceButton = Ox.Button({
2011-05-24 08:40:17 +00:00
title: 'New Place',
width: 70
2011-05-24 06:15:44 +00:00
})
.css({float: 'left', margin: '4px'})
2011-06-01 13:25:07 +00:00
.bindEvent({
2011-06-14 15:03:26 +00:00
click: function() {
self.$map.newPlace();
}
2011-06-01 13:25:07 +00:00
})
2011-06-01 13:28:21 +00:00
.appendTo(self.$placeStatusbar);
2011-06-01 13:25:07 +00:00
self.$addPlaceButton = Ox.Button({
2012-02-05 01:56:23 +00:00
title: 'Add Place',
width: 90
2011-06-01 13:25:07 +00:00
})
.css({float: 'right', margin: '4px'})
2011-05-24 08:40:17 +00:00
.bindEvent({
click: function() {
if (this.options('title') == 'Add Place') {
addPlace();
2011-06-01 13:25:07 +00:00
} else {
removePlace();
2011-05-24 10:44:34 +00:00
}
2011-05-24 08:40:17 +00:00
}
})
2011-06-01 13:29:40 +00:00
.hide()
2011-05-24 06:15:44 +00:00
.appendTo(self.$placeStatusbar);
if (self.options.mode == 'define') {
self.$definePlaceButton = Ox.Button({
title: 'Define Place',
width: 80
})
.css({float: 'right', margin: '4px 0 4px 0'})
.bindEvent({
click: function() {
if (this.options('title') == 'Define Place') {
definePlace();
} else {
clearPlace();
}
}
})
.hide()
.appendTo(self.$placeStatusbar);
}
2011-06-01 13:25:07 +00:00
/*
2011-05-24 10:44:34 +00:00
self.$revertButton = Ox.Button({
2011-05-24 06:15:44 +00:00
title: 'Revert',
2011-05-24 08:40:17 +00:00
width: 96
2011-05-24 06:15:44 +00:00
})
2011-05-24 10:44:34 +00:00
.css({float: 'right', margin: '4px 4px 4px 2px'})
2011-05-24 08:40:17 +00:00
.hide()
2011-05-21 17:56:15 +00:00
.appendTo(self.$placeStatusbar);
2011-06-01 13:25:07 +00:00
*/
2011-05-21 17:56:15 +00:00
/*
2011-04-22 22:03:10 +00:00
self.mapResize = [
Math.round(self.options.width * 0.25),
Math.round(self.options.width * 0.5),
Math.round(self.options.width * 0.75)
];
2011-05-21 17:56:15 +00:00
*/
2011-04-22 22:03:10 +00:00
/*
2011-05-29 10:42:38 +00:00
if (!self.isAsync) {
2011-05-29 12:22:54 +00:00
self.placesLength = self.options.places.length;
setStatus();
2011-04-22 22:03:10 +00:00
} else {
self.options.places({}, function(results) {
self.placesLength = results.data.items;
2011-05-29 12:22:54 +00:00
setStatus();
2011-04-22 22:03:10 +00:00
});
}
*/
2011-04-22 22:03:10 +00:00
2011-05-29 12:22:54 +00:00
that.$element.replaceWith(
that.$element = Ox.SplitPanel({
elements: [
{
collapsible: self.options.collapsible,
2012-01-15 15:05:17 +00:00
element: self.$listPanel = Ox.SplitPanel({
2011-05-29 12:22:54 +00:00
elements: [
{
element: self.$listToolbar,
size: 24
},
{
element: self.$list
},
{
element: self.$listStatusbar,
size: 16
}
],
orientation: 'vertical'
}),
resizable: true,
resize: [256, 384, 512],
size: 256
},
2011-05-29 12:22:54 +00:00
{
element: self.$map
.bindEvent({
resize: function() {
self.$map.resizeMap();
}
}),
2011-04-22 22:03:10 +00:00
},
2011-05-29 12:22:54 +00:00
{
collapsible: self.options.collapsible,
2011-05-29 12:22:54 +00:00
element: Ox.SplitPanel({
elements: [
{
element: self.$placeTitlebar,
size: 24
},
{
element: self.$placeForm
},
{
element: self.$placeStatusbar,
size: 24
2011-05-22 12:39:57 +00:00
}
2011-05-29 12:22:54 +00:00
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
2011-10-09 21:13:16 +00:00
self.$placeName.options({width: data.size - 48});
2011-05-29 12:22:54 +00:00
// fixme: pass width through form
self.$placeFormItems.forEach(function($item) {
$item.options({width: data.size - 16});
2011-05-29 12:22:54 +00:00
});
self.$areaKmInput.options({width: data.size - 16});
self.$matchesInput && self.$matchesInput.options({width: data.size - 16});
2011-05-29 12:22:54 +00:00
}
}),
resizable: true,
resize: [256, 384],
2011-05-29 12:22:54 +00:00
size: 256
}
],
orientation: 'horizontal'
})
.addClass('OxListMap')
.$element
2011-05-29 12:22:54 +00:00
);
2011-04-22 22:03:10 +00:00
function addPlace() {
var place = self.$placeForm.values(),
country = Ox.getCountryByGeoname(place.geoname);
place.countryCode = country ? country.code : '';
if (!self.isAsync) {
2011-05-29 17:44:48 +00:00
place.id = self.selectedPlace.substr(1); // fixme: safe?
self.selectedPlace = place.id;
self.options.places.push(place);
self.$list.options({
items: Ox.clone(self.options.places),
selected: [place.id]
});
2011-05-29 17:44:48 +00:00
self.$map.addPlace(place);
self.$addPlaceButton.options({title: 'Remove Place'});
//setStatus();
}
2011-05-29 17:44:48 +00:00
//that.triggerEvent('addplace', {place: place});
if (self.isAsync) {
self.$addPlaceButton.options({disabled: true, title: 'Adding...'});
self.options.addPlace(place, function(result) {
if (result.status.code == 200) {
place.id = result.data.id;
self.selectedPlace = place.id;
self.$list.reloadList().options({selected: [place.id]});
self.$map.addPlace(place);
self.$addPlaceButton.options({disabled: false, title: 'Remove Place'});
} else {
if (result.data.names) {
if (result.data.names.indexOf(self.$nameInput.value()) > -1) {
self.$nameInput.addClass('OxError');
}
self.$alternativeNamesInput.setErrors(result.data.names);
}
if (result.data.geoname) {
self.$geonameInput.addClass('OxError');
}
self.$addPlaceButton.options({disabled: false, title: 'Add Place'});
}
2011-05-29 17:44:48 +00:00
});
}
2011-05-29 17:44:48 +00:00
}
function clearPlace() {
var values = {
id: self.selectedPlace,
alternativeNames: [], geoname: '', type: '',
2012-02-05 01:56:23 +00:00
lat: null, lng: null,
south: null, west: null, north: null, east: null, area: null
};
self.$definePlaceButton.options({disabled: true, title: 'Clearing...'});
self.options.editPlace(values, function() {
self.$list.reloadList();
self.$map.removePlace();
self.$findPlaceButton.show();
self.$placeFlag.hide();
self.$placeForm.hide();
self.$definePlaceButton.options({disabled: false, title: 'Define Place'})
});
}
function definePlace() {
2012-02-05 01:56:23 +00:00
self.$map.newPlace(); // this will call selectPlace, then editPlace
self.$definePlaceButton.options({title: 'Clear Place'})
}
function editPlace(keys) {
Ox.print('EDIT PLACE', keys, self.$placeForm.values())
2011-10-09 21:13:16 +00:00
var values = Ox.filter(self.$placeForm.values(), function(values, key) {
return keys.indexOf(key) > -1;
});
values.id = self.selectedPlace;
self.options.editPlace(values, function() {
if (keys.indexOf(self.$list.options('sort')[0].key) > -1) {
self.$list.reloadList();
} else {
Ox.forEach(values, function(value, key) {
if (key != 'id') {
self.$list.value(values.id, key, value);
2011-06-01 09:18:38 +00:00
self.$map.value(values.id, key, value);
}
});
}
2011-05-29 17:44:48 +00:00
});
2011-10-30 14:40:33 +00:00
if (keys.indexOf('name') > -1 || keys.indexOf('alternativeNames') > -1) {
updateMatches();
}
}
function findPlace() {
self.$map.options({
find: self.$list.value(self.selectedPlace).name
});
}
2011-10-09 21:13:16 +00:00
function initList(data) {
self.$status.html(
Ox.formatNumber(data.items) + ' Place' + (
data.items == 1 ? '' : 's'
)
);
}
function openItem(data) {
selectItem(data);
self.$map.zoomToPlace(data.ids[0]);
}
function removeItem(data) {
var id = data.ids[0];
self.$list.value(id, 'type') && self.$map.removePlace(id);
// FIXME: events or callback functions??
2011-10-09 21:13:16 +00:00
that.triggerEvent('removeplace', {id: id});
}
function removePlace() {
var index;
2011-11-04 15:54:28 +00:00
Ox.Log('Map', 'REMOVE PLACE', self.selectedPlace, index)
if (!self.isAsync) {
2011-10-09 21:13:16 +00:00
// fixme: doesn't call self.options.removePlace!
index = Ox.getIndexById(self.options.places, self.selectedPlace);
self.options.places.splice(index, 1);
self.$list.options({items: Ox.clone(self.options.places)});
self.$addPlaceButton.options({title: 'Add Place'});
//setStatus();
}
// fixme: what is this? both options.removePlace and event removeplace??
if (self.isAsync) {
self.$addPlaceButton.options({disabled: true, title: 'Removing...'})
2011-05-29 17:44:48 +00:00
self.options.removePlace({id: self.selectedPlace}, function() {
self.$list.options({selected: []}).reloadList(true);
2012-02-05 01:56:23 +00:00
self.options.mode == 'define' && self.$definePlaceButton.options({
disabled: true
});
self.$addPlaceButton.options({disabled: false, title: 'Add Place'})
2011-05-29 17:44:48 +00:00
});
}
self.$map.removePlace();
that.triggerEvent('removeplace', {id: self.selectedPlace});
}
function selectItem(data) {
// Select item in list
var isUndefined, selectedPlace;
self.options.selected = data.ids.length ? data.ids[0] : '';
isUndefined = !!self.options.selected
&& !self.$list.value(self.options.selected, 'type');
selectedPlace = self.options.selected && !isUndefined
? self.options.selected : null;
self.$map.options({selected: selectedPlace});
selectedPlace && self.$map.panToPlace();
if (isUndefined) {
self.selectedPlace = self.options.selected;
self.$findPlaceButton.show();
self.$placeFlag.hide();
self.$placeName.options({
title: self.$list.value(self.options.selected, 'name')
});
self.$placeTitle.show();
self.$definePlaceButton.options({
title: 'Define Place'
}).show();
self.$addPlaceButton.options({
2012-02-05 01:56:23 +00:00
disabled: self.$list.value(self.options.selected, 'matches') > 0,
title: 'Remove Place'
}).show();
}
2011-04-22 22:03:10 +00:00
}
2011-05-22 17:12:21 +00:00
function selectPlace(place) {
// Select place on map
Ox.print('selectPlace', place)
var isResult, isUndefined;
self.selectedPlace = place.id || null;
isResult = !!place.id && place.id[0] == '_';
isUndefined = !!self.options.selected
&& !self.$list.value(self.options.selected, 'type');
Ox.print('isResult', isResult, 'isUndefined', isUndefined, self.options.selected)
2012-02-05 01:56:23 +00:00
if (!(isUndefined && !place.id)) {
// if isUndefined && !place.id, then we're handling the
// map deselect, which we don't want to pass to the list
self.$list.options({
selected: place.id && !isResult ? [place.id] : []
});
}
2011-05-24 06:15:44 +00:00
if (place.id) {
if (isResult && isUndefined) {
2012-02-05 01:56:23 +00:00
self.selectedPlace = self.options.selected;
place.id = self.options.selected;
place.name = self.$list.value(self.options.selected, 'name');
Ox.print('PLACE::::::', place)
}
self.options.mode == 'define' && self.$findPlaceButton.hide();
2011-10-09 21:13:16 +00:00
self.$placeFlag.attr({
src: Ox.getFlagByGeoname(place.geoname || '', 16)
}).show();
self.$placeName.options({title: place.name || ''});
2011-05-24 06:15:44 +00:00
self.$placeTitle.show();
2011-10-31 11:29:59 +00:00
self.$placeForm.values(place).show();
self.$areaKmInput.value(Ox.formatArea(place.area));
2012-02-05 01:56:23 +00:00
self.$matchesInput.value(place.matches);
//updateMatches();
self.options.mode == 'define' && self.$definePlaceButton.options({
title: isUndefined && !isResult ? 'Define Place' : 'Clear Place'
}).show();
self.$addPlaceButton.options({
2012-02-05 01:56:23 +00:00
disabled: self.options.mode == 'define' && place.matches > 0,
title: isResult ? 'Add Place' : 'Remove Place'
}).show();
if (isResult && isUndefined) {
2012-02-05 01:56:23 +00:00
self.$map.addPlace(place);
self.$addPlaceButton.options({title: 'Remove Place'});
editPlace([
'geoname', 'type',
2012-02-05 01:56:23 +00:00
'lat', 'lng',
'south', 'west', 'north', 'east', 'area'
]);
}
2011-05-24 06:15:44 +00:00
} else {
self.$placeTitle.hide();
self.$placeForm.hide();
self.options.mode == 'define' && self.$definePlaceButton.hide();
self.$addPlaceButton.hide();
2011-05-24 06:15:44 +00:00
}
2011-04-22 22:03:10 +00:00
}
function toFixed(val) {
return Ox.isNumber(val) ? val.toFixed(3) : '';
2011-04-22 22:03:10 +00:00
}
2012-01-15 15:05:17 +00:00
function toggleList() {
var list = self.$listSelect.options('value');
list == 'names' && !self.namesLoaded ? load() : toggle();
function load() {
self.options.names(function(data) {
Ox.print('DATA IS', data);
self.$namesList.options({items: data});
self.namesLoaded = true;
toggle();
});
}
function toggle() {
self.$listPanel.replaceElement(1, self[list == 'places' ? '$list' : '$namesList']);
}
}
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: '='}] : [],
['all', 'geoname'].indexOf(key) > -1
? [{key: 'geoname', value: value, operator: '='}] : []
),
operator: key == 'all' ? '|' : '&'
};
self.$list.options({
items: function(data, callback) {
return pandora.api.findPlaces(Ox.extend(data, {
query: query
}), callback);
}
});
}
2011-10-30 14:40:33 +00:00
function updateMatches() {
var names, place;
if (self.options.getMatches) {
place = self.$placeForm.values();
names = Ox.filter(Ox.merge([place.name], place.alternativeNames), function(name) {
return name !== '';
});
if (names.length) {
2011-12-21 15:33:52 +00:00
self.$matchesInput.value('');
2011-10-30 14:40:33 +00:00
self.options.getMatches(names, function(matches) {
2011-12-21 15:33:52 +00:00
self.$matchesInput.value(Ox.formatNumber(matches));
2011-10-30 14:40:33 +00:00
});
} else {
2011-12-21 15:33:52 +00:00
self.$matchesInput.value(0);
2011-10-30 14:40:33 +00:00
}
}
}
2011-05-16 10:49:48 +00:00
/*@
setOption <f> setOption
@*/
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
if (key == 'height') {
self.$list.size();
self.$map.resizeMap();
2011-04-22 22:03:10 +00:00
} else if (key == 'selected') {
self.$list.options({selected: value});
} else if (key == 'width') {
self.$map.resizeMap();
2011-04-22 22:03:10 +00:00
}
}
2011-05-16 10:49:48 +00:00
/*@
focusList <f> focusList
@*/
2011-04-22 22:03:10 +00:00
that.focusList = function() {
self.$list.gainFocus();
return that;
}
2011-05-16 10:49:48 +00:00
/*@
reloadList <f> reloadList
@*/
2011-04-22 22:03:10 +00:00
that.reloadList = function() {
self.$list.reloadList();
return that;
}
2011-05-16 10:49:48 +00:00
/*@
resizeMap <f> resizeMap
@*/
2011-04-22 22:03:10 +00:00
that.resizeMap = function() {
2011-11-04 15:54:28 +00:00
Ox.Log('Map', 'Ox.ListMap.resizeMap()')
2011-04-22 22:03:10 +00:00
self.$map.resizeMap();
return that;
};
return that;
};