1174 lines
40 KiB
JavaScript
1174 lines
40 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.MapEditor <f> Map Editor
|
|
options <o> Options object
|
|
height <n|256> Height in px
|
|
labels <b|false> If true, show labels
|
|
mode <s|'add'> Mode ('add' or 'define')
|
|
places <a|f|null> Array of places, or function that returns places
|
|
selected <s|''> Id of the selected place
|
|
width <n|256> Width in px
|
|
self <o> Shared private variable
|
|
([options[, self]]) -> <o:Ox.SplitPanel> Map Editor
|
|
addplace <!> addplace
|
|
removeplace <!> removeplace
|
|
geocode <!> geocode
|
|
loadlist <!> loadlist
|
|
@*/
|
|
|
|
Ox.MapEditor = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
addPlace: null,
|
|
collapsible: false,
|
|
editPlace: null,
|
|
getMatches: null,
|
|
hasMatches: false,
|
|
height: 256,
|
|
labels: false,
|
|
mode: 'add',
|
|
pageLength: 100,
|
|
places: null,
|
|
removePlace: null,
|
|
selected: '',
|
|
showControls: false,
|
|
showLabels: false,
|
|
showTypes: false,
|
|
sort: [{key: 'geoname', operator: '+'}],
|
|
width: 256
|
|
})
|
|
.options(options || {})
|
|
.update({
|
|
height: function() {
|
|
self.$list.size();
|
|
self.$map.resizeMap();
|
|
},
|
|
selected: function() {
|
|
self.$list.options({selected: self.options.selected});
|
|
},
|
|
width: function() {
|
|
self.$map.resizeMap();
|
|
}
|
|
})
|
|
.css({
|
|
width: self.options.width + 'px',
|
|
height: self.options.height + 'px'
|
|
});
|
|
|
|
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 = {
|
|
1000000: 8, // 1 x 1 km
|
|
10000000000: 10 // 100 x 100 km
|
|
};
|
|
|
|
self.columns = [
|
|
{
|
|
format: function(value, data) {
|
|
return data.type
|
|
? $('<img>')
|
|
.attr({
|
|
src: Ox.getFlagByGeoname(data.geoname, 16)
|
|
})
|
|
.css({
|
|
width: '14px',
|
|
height: '14px',
|
|
borderRadius: '4px',
|
|
marginLeft: '-3px',
|
|
marginTop: 0
|
|
})
|
|
: '';
|
|
},
|
|
id: 'countryCode',
|
|
operator: '+',
|
|
resizable: false, // fixme: implement
|
|
sort: function(value) {
|
|
var names = value.split(', ');
|
|
if (!Ox.getCountryByGeoname(names[names.length - 1])) {
|
|
names.push('~');
|
|
}
|
|
return names.reverse().join(', ');
|
|
},
|
|
title: Ox._('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; // break
|
|
}
|
|
});
|
|
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: Ox._('Type'),
|
|
titleImage: 'icon',
|
|
tooltip: function(data) {
|
|
return Ox.toTitleCase(data.type || '');
|
|
},
|
|
visible: true,
|
|
width: 16
|
|
},
|
|
{
|
|
format: function(value, data) {
|
|
return data.type
|
|
? value
|
|
: $('<span>').addClass('OxWarning').html(value);
|
|
},
|
|
id: 'name',
|
|
operator: '+',
|
|
removable: false,
|
|
title: Ox._('Name'),
|
|
visible: true,
|
|
width: 144
|
|
},
|
|
{
|
|
format: function(value) {
|
|
return value.join('; ');
|
|
},
|
|
id: 'alternativeNames',
|
|
operator: '+',
|
|
title: Ox._('Alternative Names'),
|
|
visible: true,
|
|
width: 144
|
|
},
|
|
{
|
|
id: 'geoname',
|
|
operator: '+',
|
|
sort: function(value) {
|
|
var names = value.split(', ');
|
|
if (!Ox.getCountryByGeoname(names[names.length - 1])) {
|
|
names.push('~');
|
|
}
|
|
return names.reverse().join(', ');
|
|
},
|
|
title: Ox._('Geoname'),
|
|
visible: false,
|
|
width: 192
|
|
},
|
|
{
|
|
align: 'right',
|
|
format: toFixed,
|
|
id: 'lat',
|
|
operator: '+',
|
|
title: Ox._('Latitude'),
|
|
visible: true,
|
|
width: 64
|
|
},
|
|
{
|
|
align: 'right',
|
|
format: toFixed,
|
|
id: 'lng',
|
|
operator: '+',
|
|
title: Ox._('Longitude'),
|
|
visible: true,
|
|
width: 64
|
|
},
|
|
{
|
|
align: 'right',
|
|
format: toFixed,
|
|
id: 'south',
|
|
operator: '+',
|
|
title: Ox._('South'),
|
|
visible: false,
|
|
width: 64
|
|
},
|
|
{
|
|
align: 'right',
|
|
id: 'west',
|
|
operator: '+',
|
|
title: Ox._('West'),
|
|
visible: false,
|
|
width: 64
|
|
},
|
|
{
|
|
align: 'right',
|
|
format: toFixed,
|
|
id: 'north',
|
|
operator: '+',
|
|
title: Ox._('North'),
|
|
visible: false,
|
|
width: 64
|
|
},
|
|
{
|
|
align: 'right',
|
|
format: toFixed,
|
|
id: 'east',
|
|
operator: '+',
|
|
title: Ox._('East'),
|
|
visible: false,
|
|
width: 64
|
|
},
|
|
{
|
|
align: 'right',
|
|
format: {type: 'area', args: []},
|
|
id: 'area',
|
|
operator: '-',
|
|
title: Ox._('Area'),
|
|
visible: true,
|
|
width: 128
|
|
},
|
|
{
|
|
format: function(value) {
|
|
return Ox.encodeHTMLEntities(value);
|
|
},
|
|
id: 'user',
|
|
operator: '+',
|
|
title: Ox._('User'),
|
|
visible: false,
|
|
width: 96
|
|
},
|
|
{
|
|
format: function(value) {
|
|
return value.replace('T', ' ').replace('Z', '');
|
|
},
|
|
id: 'created',
|
|
operator: '-',
|
|
title: Ox._('Date Created'),
|
|
visible: false,
|
|
width: 128
|
|
},
|
|
{
|
|
format: function(value) {
|
|
return value.replace('T', ' ').replace('Z', '');
|
|
},
|
|
id: 'modified',
|
|
operator: '-',
|
|
title: Ox._('Date Modified'),
|
|
visible: false,
|
|
width: 128
|
|
}
|
|
];
|
|
|
|
self.options.hasMatches && self.columns.push({
|
|
align: 'right',
|
|
id: 'matches',
|
|
operator: '-',
|
|
title: Ox._('Matches'),
|
|
visible: true,
|
|
width: 64
|
|
});
|
|
|
|
self.$listToolbar = Ox.Bar({
|
|
size: 24
|
|
});
|
|
|
|
self.$findElement = Ox.FormElementGroup({
|
|
elements: [
|
|
self.$findSelect = Ox.Select({
|
|
items: [
|
|
{id: 'all', title: Ox._('Find: All')},
|
|
{id: 'name', title: Ox._('Find: Name')},
|
|
{id: 'alternativeNames', title: Ox._('Find: Alternative Names')},
|
|
{id: 'geoname', title: Ox._('Find: Geoname')}
|
|
],
|
|
overlap: 'right',
|
|
type: 'image'
|
|
})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
var key = data.value,
|
|
value = self.$findInput.value();
|
|
value && updateList(key, value);
|
|
}
|
|
}),
|
|
self.$findInput = Ox.Input({
|
|
clear: true,
|
|
placeholder: 'Find in List',
|
|
width: 234
|
|
})
|
|
.bindEvent({
|
|
submit: function(data) {
|
|
var key = self.$findSelect.value(),
|
|
value = data.value;
|
|
updateList(key, value);
|
|
}
|
|
})
|
|
]
|
|
})
|
|
.css({float: 'right', margin: '4px'})
|
|
.appendTo(self.$listToolbar);
|
|
|
|
self.$list = Ox.TableList({
|
|
columns: self.columns,
|
|
columnsRemovable: true,
|
|
columnsVisible: true,
|
|
items: Ox.clone(self.options.places),
|
|
//items: self.options.places,
|
|
// area needed for icon, geoname needed for flag
|
|
keys: ['area', 'geoname', 'matches'],
|
|
max: 1,
|
|
min: 0,
|
|
pageLength: self.options.pageLength,
|
|
scrollbarVisible: true,
|
|
selected: self.options.selected ? [self.options.selected] : [],
|
|
sort: self.options.sort,
|
|
unique: 'id'
|
|
})
|
|
.bindEvent({
|
|
'delete': removeItem,
|
|
init: initList,
|
|
// 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();
|
|
},
|
|
load: function() {
|
|
that.triggerEvent('loadlist');
|
|
},
|
|
open: openItem,
|
|
select: function(data) {
|
|
selectItem(data);
|
|
}
|
|
});
|
|
|
|
// if loaded with selection, set map and form
|
|
self.options.selected && self.$list.bindEventOnce({
|
|
load: function() {
|
|
self.$list.triggerEvent({
|
|
select: {ids: [self.options.selected]}
|
|
});
|
|
}
|
|
});
|
|
|
|
self.$listStatusbar = Ox.Bar({
|
|
size: 16
|
|
});
|
|
|
|
self.$status = Ox.Element()
|
|
.css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
|
|
.appendTo(self.$listStatusbar);
|
|
|
|
self.$map = Ox.Map({
|
|
clickable: true,
|
|
editable: true,
|
|
findPlaceholder: 'Find on Map',
|
|
height: self.options.height,
|
|
places: self.options.places,
|
|
//statusbar: true,
|
|
showControls: self.options.showControls,
|
|
showLabels: self.options.showLabels,
|
|
showTypes: self.options.showTypes,
|
|
toolbar: true,
|
|
width: self.options.width - 514,//self.mapResize[1],
|
|
zoombar: true
|
|
})
|
|
.bindEvent({
|
|
/*
|
|
addplace: function(data) {
|
|
that.triggerEvent('addplace', data);
|
|
},
|
|
*/
|
|
changeplace: function(data) {
|
|
self.$placeForm.values(data).show();
|
|
self.$areaKmInput.value(Ox.formatArea(data.area));
|
|
},
|
|
changeplaceend: function(data) {
|
|
//Ox.Log('Map', 'ssP', self.selectedPlace);
|
|
var isResult = self.selectedPlace[0] == '_';
|
|
!isResult && editPlace([
|
|
'lat', 'lng', 'south', 'west', 'north', 'east', 'area'
|
|
]);
|
|
},
|
|
geocode: function(data) {
|
|
that.triggerEvent('geocode', data);
|
|
},
|
|
/*
|
|
resize: function() {
|
|
self.$map.resizeMap(); // fixme: don't need event
|
|
},
|
|
*/
|
|
select: selectPlace
|
|
});
|
|
|
|
self.$placeTitlebar = Ox.Bar({
|
|
size: 24
|
|
});
|
|
self.$placeTitle = $('<div>')
|
|
.hide()
|
|
.appendTo(self.$placeTitlebar);
|
|
if (self.options.mode == 'define') {
|
|
self.$findPlaceButton = Ox.Button({
|
|
title: 'find',
|
|
tooltip: Ox._('Find'),
|
|
type: 'image'
|
|
})
|
|
.css({float: 'left', margin: '4px'})
|
|
.bindEvent({
|
|
click: findPlace
|
|
})
|
|
.hide()
|
|
.appendTo(self.$placeTitle);
|
|
}
|
|
self.$placeFlag = $('<img>')
|
|
.addClass('OxFlag')
|
|
.attr({
|
|
src: Ox.getFlagByGeoname('', 16)
|
|
})
|
|
.css({float: 'left', margin: '4px'})
|
|
.appendTo(self.$placeTitle);
|
|
self.$placeName = Ox.Label({
|
|
title: '',
|
|
width: 208
|
|
})
|
|
.css({float: 'left', margin: '4px 0 4px 0'})
|
|
.bindEvent({
|
|
singleclick: function() {
|
|
self.$map.panToPlace();
|
|
},
|
|
doubleclick: function() {
|
|
self.$map.zoomToPlace();
|
|
}
|
|
})
|
|
.appendTo(self.$placeTitle);
|
|
self.$deselectPlaceButton = Ox.Button({
|
|
title: 'close',
|
|
tooltip: Ox._('Done'),
|
|
type: 'image'
|
|
})
|
|
.css({float: 'left', margin: '4px'})
|
|
.bindEvent({
|
|
click: function() {
|
|
self.$list.options({selected: []});
|
|
// FIXME: list doesn't fire select event
|
|
selectItem({ids: []});
|
|
}
|
|
})
|
|
.appendTo(self.$placeTitle);
|
|
|
|
self.$placeData = Ox.Element();
|
|
|
|
self.$placeForm = Ox.Form({
|
|
items: [].concat([
|
|
self.$nameInput = Ox.Input({
|
|
id: 'name',
|
|
label: Ox._('Name'),
|
|
labelWidth: 80,
|
|
width: 240
|
|
}),
|
|
self.$alternativeNamesInput = Ox.ArrayInput({
|
|
id: 'alternativeNames',
|
|
label: Ox._('Alternative Names'),
|
|
max: 10,
|
|
//sort: true,
|
|
values: [],
|
|
width: 240
|
|
}),
|
|
self.$geonameInput = Ox.Input({
|
|
id: 'geoname',
|
|
label: Ox._('Geoname'),
|
|
labelWidth: 80,
|
|
width: 240
|
|
}),
|
|
Ox.Input({
|
|
id: 'countryCode'
|
|
}).hide(),
|
|
Ox.Select({
|
|
id: 'type',
|
|
items: [
|
|
{id: 'country', title: Ox._('Country')},
|
|
{id: 'region', title: Ox._('Region')}, // administative (Kansas) or colloquial (Midwest)
|
|
{id: 'city', title: Ox._('City')},
|
|
{id: 'borough', title: Ox._('Borough')},
|
|
{id: 'street', title: Ox._('Street')}, // streets, squares, bridges, tunnels, ...
|
|
{id: 'building', title: Ox._('Building')}, // airports, stations, stadiums, military installations, ...
|
|
{id: 'feature', title: Ox._('Feature')} // continents, islands, rivers, lakes, seas, oceans, mountains...
|
|
],
|
|
label: Ox._('Type'),
|
|
labelWidth: 80,
|
|
width: 240
|
|
})
|
|
], ['Latitude', 'Longitude', 'South', 'West', 'North', 'East'].map(function(v) {
|
|
var id = (
|
|
v == 'Latitude' ? 'lat' : v == 'Longitude' ? 'lng' : v
|
|
).toLowerCase(),
|
|
max = ['Latitude', 'South', 'North'].indexOf(v) > -1 ? Ox.MAX_LATITUDE : 180;
|
|
return Ox.Input({
|
|
changeOnKeypress: true,
|
|
decimals: 8,
|
|
disabled: ['lat', 'lng'].indexOf(id) > -1,
|
|
id: id,
|
|
label: Ox._(v),
|
|
labelWidth: 80,
|
|
min: -max,
|
|
max: max,
|
|
type: 'float',
|
|
width: 240
|
|
});
|
|
}),
|
|
[
|
|
self.$areaInput = Ox.Input({
|
|
id: 'area',
|
|
type: 'float'
|
|
}).hide()
|
|
]),
|
|
width: 240
|
|
})
|
|
.css({margin: '8px'})
|
|
.hide()
|
|
.bindEvent({
|
|
change: function(data) {
|
|
var isResult = self.selectedPlace[0] == '_';
|
|
if (data.id == 'name') {
|
|
var name = data.data.value;
|
|
!isResult && self.$list.value(self.selectedPlace, 'name', name);
|
|
self.$placeName.options({title: name});
|
|
if (!self.isAsync) {
|
|
Ox.getObjectById(
|
|
self.options.places, self.selectedPlace
|
|
).name = name;
|
|
} else if (isResult) {
|
|
getMatches(this.values());
|
|
} else {
|
|
editPlace(['name']);
|
|
}
|
|
self.$map.value(self.selectedPlace, 'name', name);
|
|
} else if (data.id == 'alternativeNames') {
|
|
if (!self.isAsync) {
|
|
// ...
|
|
} else if (isResult) {
|
|
getMatches(this.values());
|
|
} else {
|
|
editPlace(['alternativeNames']);
|
|
}
|
|
self.$map.value(self.selectedPlace, 'alternativeNames', data.data.value);
|
|
} else if (data.id == 'geoname') {
|
|
var geoname = data.data.value,
|
|
country = Ox.getCountryByGeoname(geoname),
|
|
countryCode = country ? country.code : '';
|
|
self.$placeFlag.attr({
|
|
src: Ox.getFlagByGeoname(geoname, 16)
|
|
});
|
|
self.$placeForm.values({countryCode: countryCode});
|
|
if (!self.isAsync) {
|
|
if (!isResult) {
|
|
self.$list.value(self.selectedPlace, 'geoname', geoname);
|
|
self.$list.value(self.selectedPlace, 'countryCode', countryCode);
|
|
}
|
|
} else {
|
|
!isResult && editPlace(['countryCode', 'geoname']);
|
|
}
|
|
self.$map.value(self.selectedPlace, 'countryCode', countryCode);
|
|
self.$map.value(self.selectedPlace, 'geoname', geoname);
|
|
} else if (data.id == 'type') {
|
|
if (!self.isAsync) {
|
|
// ...
|
|
} else {
|
|
!isResult && editPlace(['type']);
|
|
}
|
|
self.$map.value(self.selectedPlace, 'type', data.data.value);
|
|
} else { // south, west, north, east
|
|
if (!self.isAsync) {
|
|
// ...
|
|
} else {
|
|
!isResult && editPlace([data.id]);
|
|
}
|
|
self.$map.value(self.selectedPlace, data.id, parseFloat(data.data.value));
|
|
}
|
|
}
|
|
})
|
|
.appendTo(self.$placeData);
|
|
|
|
self.$areaKmInput = Ox.Input({
|
|
disabled: true,
|
|
id: 'areaKm',
|
|
label: Ox._('Area'),
|
|
labelWidth: 80,
|
|
textAlign: 'right',
|
|
width: 240
|
|
})
|
|
.css({margin: '8px 8px 0 8px'})
|
|
.hide()
|
|
.appendTo(self.$placeData);
|
|
|
|
if (self.options.hasMatches) {
|
|
self.$matchesInput = Ox.Input({
|
|
disabled: true,
|
|
id: 'matches',
|
|
label: Ox._('Matches'),
|
|
labelWidth: 80,
|
|
type: 'int',
|
|
width: 240
|
|
})
|
|
.css({margin: '8px'})
|
|
.hide()
|
|
.appendTo(self.$placeData);
|
|
}
|
|
|
|
self.$placeStatusbar = Ox.Bar({
|
|
size: 24
|
|
});
|
|
|
|
self.$addPlaceButton = Ox.Button({
|
|
title: Ox._('Add Place'),
|
|
width: 90
|
|
})
|
|
.css({float: 'left', margin: '4px'})
|
|
.bindEvent({
|
|
click: function() {
|
|
if (this.options('title') == Ox._('Add Place')) {
|
|
addPlace();
|
|
} else {
|
|
removePlace();
|
|
}
|
|
}
|
|
})
|
|
.hide()
|
|
.appendTo(self.$placeStatusbar);
|
|
|
|
self.$newPlaceButton = Ox.Button({
|
|
title: Ox._('New Place'),
|
|
width: 70
|
|
})
|
|
.css({float: 'right', margin: '4px'})
|
|
.bindEvent({
|
|
click: function() {
|
|
self.$map.newPlace();
|
|
}
|
|
})
|
|
.appendTo(self.$placeStatusbar);
|
|
|
|
if (self.options.mode == 'define') {
|
|
self.$definePlaceButton = Ox.Button({
|
|
title: Ox._('Define Place'),
|
|
width: 80
|
|
})
|
|
.css({float: 'right', margin: '4px 0 4px 0'})
|
|
.bindEvent({
|
|
click: function() {
|
|
if (this.options('title') == Ox._('Define Place')) {
|
|
definePlace();
|
|
} else {
|
|
clearPlace();
|
|
}
|
|
}
|
|
})
|
|
.hide()
|
|
.appendTo(self.$placeStatusbar);
|
|
}
|
|
|
|
/*
|
|
self.mapResize = [
|
|
Math.round(self.options.width * 0.25),
|
|
Math.round(self.options.width * 0.5),
|
|
Math.round(self.options.width * 0.75)
|
|
];
|
|
*/
|
|
|
|
/*
|
|
if (!self.isAsync) {
|
|
self.placesLength = self.options.places.length;
|
|
setStatus();
|
|
} else {
|
|
self.options.places({}, function(results) {
|
|
self.placesLength = results.data.items;
|
|
setStatus();
|
|
});
|
|
}
|
|
*/
|
|
|
|
that.setElement(
|
|
Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
collapsible: self.options.collapsible,
|
|
element: self.$listPanel = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: self.$listToolbar,
|
|
size: 24
|
|
},
|
|
{
|
|
element: self.$list
|
|
},
|
|
{
|
|
element: self.$listStatusbar,
|
|
size: 16
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
}),
|
|
resizable: true,
|
|
resize: [256, 384, 512],
|
|
size: 256
|
|
},
|
|
{
|
|
element: self.$map
|
|
.bindEvent({
|
|
resize: function() {
|
|
self.$map.resizeMap();
|
|
}
|
|
})
|
|
},
|
|
{
|
|
collapsible: self.options.collapsible,
|
|
element: Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: self.$placeTitlebar,
|
|
size: 24
|
|
},
|
|
{
|
|
element: self.$placeData
|
|
},
|
|
{
|
|
element: self.$placeStatusbar,
|
|
size: 24
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
})
|
|
.bindEvent({
|
|
resize: function(data) {
|
|
self.$placeName.options({width: data.size - 48});
|
|
// fixme: pass width through form
|
|
self.$placeFormItems.forEach(function($item) {
|
|
$item.options({width: data.size - 16});
|
|
});
|
|
self.$areaKmInput.options({width: data.size - 16});
|
|
self.$matchesInput && self.$matchesInput.options({width: data.size - 16});
|
|
}
|
|
}),
|
|
resizable: true,
|
|
resize: [256, 384],
|
|
size: 256
|
|
}
|
|
],
|
|
orientation: 'horizontal'
|
|
})
|
|
.addClass('OxMapEditor')
|
|
);
|
|
|
|
function addPlace() {
|
|
var place = self.$placeForm.values(),
|
|
country = Ox.getCountryByGeoname(place.geoname);
|
|
place.countryCode = country ? country.code : '';
|
|
if (!self.isAsync) {
|
|
place.id = self.selectedPlace.slice(1); // fixme: safe?
|
|
self.selectedPlace = place.id;
|
|
self.options.selected = place.id;
|
|
self.options.places.push(place);
|
|
self.$list.options({
|
|
items: Ox.clone(self.options.places)
|
|
}).options({
|
|
selected: [place.id]
|
|
});
|
|
self.$map.addPlace(place);
|
|
self.$addPlaceButton.options({title: Ox._('Remove Place')});
|
|
//setStatus();
|
|
} else {
|
|
self.$addPlaceButton.options({disabled: true, title: Ox._('Adding...')});
|
|
self.options.addPlace(encodeValues(place), function(result) {
|
|
if (result.status.code == 200) {
|
|
place.id = result.data.id;
|
|
self.options.selected = place.id;
|
|
self.selectedPlace = place.id;
|
|
self.$list.reloadList().options({selected: [place.id]});
|
|
self.$map.addPlace(place);
|
|
self.options.hasMatches && self.$matchesInput.value(
|
|
result.data.matches
|
|
).show();
|
|
self.options.mode == 'define' && self.$definePlaceButton.options({
|
|
disabled: !result.data.matches,
|
|
title: Ox._('Clear Place')
|
|
}).show();
|
|
self.$addPlaceButton.options({
|
|
disabled: false,
|
|
title: Ox._('Remove Place')
|
|
}).show();
|
|
} else if (result.status.code == 409) {
|
|
if (result.data.names.indexOf(self.$nameInput.value()) > -1) {
|
|
self.$nameInput.addClass('OxError');
|
|
}
|
|
self.$alternativeNamesInput.setErrors(result.data.names);
|
|
self.$addPlaceButton.options({disabled: false, title: Ox._('Add Place')});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function clearPlace() {
|
|
var values = {
|
|
id: self.selectedPlace,
|
|
alternativeNames: [], geoname: '', type: '',
|
|
lat: null, lng: null,
|
|
south: null, west: null, north: null, east: null, area: null
|
|
};
|
|
self.$definePlaceButton.options({disabled: true, title: Ox._('Clearing...')});
|
|
self.options.editPlace(values, function() {
|
|
self.$map.removePlace();
|
|
self.$list.reloadList();
|
|
self.$findPlaceButton.show();
|
|
self.$placeFlag.hide();
|
|
hideForm();
|
|
self.$definePlaceButton.options({disabled: false, title: Ox._('Define Place')})
|
|
});
|
|
}
|
|
|
|
function decodeValues(place) {
|
|
return Ox.map(place, function(value) {
|
|
var type = Ox.typeOf(value);
|
|
return type == 'string' ? Ox.decodeHTMLEntities(value)
|
|
: type == 'array' ? Ox.map(value, function(value) {
|
|
return decodeValues(value);
|
|
})
|
|
: value;
|
|
});
|
|
}
|
|
|
|
function definePlace() {
|
|
self.$map.newPlace(); // this will call selectPlace, then editPlace
|
|
self.$definePlaceButton.options({title: Ox._('Clear Place')});
|
|
}
|
|
|
|
function encodeValues(place) {
|
|
return Ox.map(place, function(value) {
|
|
var type = Ox.typeOf(value);
|
|
return type == 'string' ? Ox.encodeHTMLEntities(value)
|
|
: type == 'array' ? Ox.map(value, function(value) {
|
|
return encodeValues(value);
|
|
})
|
|
: value;
|
|
});
|
|
}
|
|
|
|
function editPlace(keys) {
|
|
Ox.Log('Map', 'EDIT PLACE', keys, self.$placeForm.values())
|
|
var values = Ox.filter(self.$placeForm.values(), function(values, key) {
|
|
return keys.indexOf(key) > -1;
|
|
});
|
|
values.id = self.selectedPlace;
|
|
self.options.editPlace(encodeValues(values), function(result) {
|
|
Ox.Log('Map', 'EDIT PLACE::', result)
|
|
if (result.status.code == 200) {
|
|
if (
|
|
keys.indexOf(self.$list.options('sort')[0].key) > -1
|
|
|| (
|
|
self.options.mode == 'define'
|
|
&& (
|
|
keys.indexOf('name') > -1
|
|
|| keys.indexOf('alternativeNames') > -1
|
|
)
|
|
)
|
|
) {
|
|
self.$list.reloadList();
|
|
} else {
|
|
Ox.forEach(values, function(value, key) {
|
|
if (key != 'id') {
|
|
self.$list.value(values.id, key, value);
|
|
self.$map.value(values.id, key, value);
|
|
}
|
|
});
|
|
self.$list.value(values.id, 'matches', result.data.matches);
|
|
}
|
|
if (self.options.mode == 'define') {
|
|
self.$findPlaceButton.hide();
|
|
self.$placeFlag.show();
|
|
}
|
|
self.options.hasMatches && self.$matchesInput.value(result.data.matches);
|
|
if (self.options.mode == 'define') {
|
|
self.$definePlaceButton.options({
|
|
disabled: !result.data.matches,
|
|
title: Ox._('Clear Place')
|
|
});
|
|
self.$addPlaceButton.options({
|
|
disabled: !!result.data.matches
|
|
});
|
|
}
|
|
} else {
|
|
if (result.data.names.indexOf(self.$nameInput.value()) > -1) {
|
|
self.$nameInput.addClass('OxError');
|
|
}
|
|
self.$alternativeNamesInput.setErrors(result.data.names);
|
|
}
|
|
});
|
|
}
|
|
|
|
function findPlace() {
|
|
self.$map
|
|
//.options({find: ''})
|
|
.options({find: self.$list.value(self.options.selected, 'name')});
|
|
}
|
|
|
|
function hideForm() {
|
|
self.$placeForm.hide();
|
|
self.$areaKmInput.hide();
|
|
}
|
|
|
|
function getMatches(place) {
|
|
var names;
|
|
if (self.options.hasMatches) {
|
|
names = Ox.filter([place.name].concat(place.alternativeNames), function(name) {
|
|
return name !== '';
|
|
});
|
|
self.options.getMatches(names, function(matches) {
|
|
self.$matchesInput.value(matches);
|
|
});
|
|
}
|
|
}
|
|
|
|
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??
|
|
that.triggerEvent('removeplace', {id: id});
|
|
}
|
|
|
|
function removePlace() {
|
|
var index;
|
|
Ox.Log('Map', 'REMOVE PLACE', self.selectedPlace, index)
|
|
if (!self.isAsync) {
|
|
// fixme: doesn't call self.options.removePlace!
|
|
index = Ox.getIndexById(self.options.places, self.selectedPlace);
|
|
self.options.selected = '';
|
|
self.options.places.splice(index, 1);
|
|
self.$list.options({items: Ox.clone(self.options.places)});
|
|
self.$addPlaceButton.options({title: Ox._('Add Place')});
|
|
//setStatus();
|
|
}
|
|
// fixme: what is this? both options.removePlace and event removeplace??
|
|
if (self.isAsync) {
|
|
self.$addPlaceButton.options({disabled: true, title: Ox._('Removing...')})
|
|
self.options.removePlace({id: self.selectedPlace}, function() {
|
|
self.options.selected = '';
|
|
self.$list.options({selected: []}).reloadList(true);
|
|
self.options.hasMatches && self.$matchesInput.hide();
|
|
self.options.mode == 'define' && self.$definePlaceButton.options({
|
|
disabled: true
|
|
});
|
|
self.$addPlaceButton.options({disabled: false, title: Ox._('Add Place')});
|
|
});
|
|
}
|
|
self.$map.removePlace();
|
|
that.triggerEvent('removeplace', {id: self.selectedPlace});
|
|
}
|
|
|
|
function selectItem(data, place) {
|
|
// Select item in list
|
|
var isUndefined, selectedPlace;
|
|
self.options.selected = data.ids.length ? data.ids[0] : '';
|
|
place = place || (
|
|
self.options.selected
|
|
? self.$list.value(self.options.selected)
|
|
: {}
|
|
);
|
|
isUndefined = !!self.options.selected && !place.type;
|
|
selectedPlace = self.options.selected && !isUndefined
|
|
? self.options.selected : '';
|
|
self.$map.options({selected: selectedPlace});
|
|
selectedPlace && self.$map.panToPlace();
|
|
if (self.options.selected) {
|
|
self.options.mode == 'define'
|
|
&& self.$findPlaceButton[isUndefined ? 'show' : 'hide']();
|
|
self.$placeFlag.attr({
|
|
src: Ox.getFlagByGeoname(place.geoname || '', 16)
|
|
})[isUndefined ? 'hide' : 'show']();
|
|
self.$placeName.options({title: place.name || ''});
|
|
self.$placeTitle.show();
|
|
!isUndefined ? showForm(place) : hideForm();
|
|
self.options.hasMatches && self.$matchesInput.value(place.matches || 0).show();
|
|
self.options.mode == 'define' && self.$definePlaceButton.options({
|
|
disabled: !isUndefined && !place.matches,
|
|
title: isUndefined ? 'Define Place' : 'Clear Place'
|
|
}).show();
|
|
self.$addPlaceButton.options({
|
|
disabled: self.options.mode == 'define' && !!place.matches,
|
|
title: Ox._('Remove Place')
|
|
}).show();
|
|
} else {
|
|
self.$placeTitle.hide();
|
|
hideForm();
|
|
self.options.hasMatches && self.$matchesInput.hide();
|
|
self.options.mode == 'define' && self.$definePlaceButton.hide();
|
|
self.$addPlaceButton.hide();
|
|
}
|
|
}
|
|
|
|
function selectPlace(place) {
|
|
// Select place on map
|
|
var isResult = !!place.id && place.id[0] == '_',
|
|
isUndefined = !!self.options.selected
|
|
&& !self.$list.value(self.options.selected, 'type');
|
|
self.selectedPlace = place.id || '';
|
|
if (isResult && isUndefined) {
|
|
Ox.print('place.id', place.id, 'self.options.selected', self.options.selected, 'type', self.$list.value(self.options.selected));
|
|
// define undefined place
|
|
self.selectedPlace = self.options.selected;
|
|
place.name = self.$list.value(self.options.selected, 'name');
|
|
place.id = self.options.selected;
|
|
self.$map.addPlace(place);
|
|
self.$findPlaceButton.hide();
|
|
self.$placeFlag.attr({
|
|
src: Ox.getFlagByGeoname(place.geoname || '', 16)
|
|
}).show();
|
|
showForm(place);
|
|
editPlace([
|
|
'geoname', 'type',
|
|
'lat', 'lng',
|
|
'south', 'west', 'north', 'east', 'area'
|
|
]);
|
|
} else if (self.selectedPlace && isResult) {
|
|
// select result place
|
|
self.$list.options({selected: []});
|
|
self.$placeFlag.attr({
|
|
src: Ox.getFlagByGeoname(place.geoname || '', 16)
|
|
}).show();
|
|
self.$placeName.options({title: place.name || ''});
|
|
self.$placeTitle.show();
|
|
showForm(place);
|
|
if (self.options.hasMatches) {
|
|
self.$matchesInput.value('').show();
|
|
getMatches(place);
|
|
}
|
|
self.options.mode == 'define' && self.$definePlaceButton.hide();
|
|
self.$addPlaceButton.options({disabled: false, title: Ox._('Add Place')}).show();
|
|
} else if (!self.selectedPlace && !self.options.selected) {
|
|
// deselect result place
|
|
self.$placeFlag.hide();
|
|
self.$placeTitle.hide();
|
|
hideForm();
|
|
self.options.hasMatches && self.$matchesInput.hide();
|
|
} else if (!self.selectedPlace && isUndefined) {
|
|
// deselect triggered by selecting an undefined item,
|
|
// so do nothing
|
|
} else {
|
|
// select or deselect existing place
|
|
self.options.selected = self.selectedPlace;
|
|
self.$list.options({
|
|
selected: self.options.selected ? [self.options.selected] : []
|
|
});
|
|
// FIXME: list doesn't fire select event
|
|
selectItem({ids: self.$list.options('selected')}, place);
|
|
}
|
|
}
|
|
|
|
function showForm(place) {
|
|
self.$nameInput.removeClass('OxError');
|
|
self.$alternativeNamesInput.setErrors([]);
|
|
self.$placeForm.values(decodeValues(place)).show();
|
|
self.$areaKmInput.value(Ox.formatArea(place.area)).show();
|
|
}
|
|
|
|
function toFixed(val) {
|
|
return Ox.isNumber(val) ? val.toFixed(3) : '';
|
|
}
|
|
|
|
function toggleList() {
|
|
var list = self.$listSelect.options('value');
|
|
list == 'names' && !self.namesLoaded ? load() : toggle();
|
|
function load() {
|
|
self.options.names(function(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: [].concat(
|
|
['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);
|
|
}
|
|
});
|
|
}
|
|
|
|
/*@
|
|
focusList <f> focusList
|
|
@*/
|
|
that.focusList = function() {
|
|
self.$list.gainFocus();
|
|
return that;
|
|
};
|
|
|
|
/*@
|
|
reloadList <f> reloadList
|
|
@*/
|
|
that.reloadList = function() {
|
|
self.$list.reloadList();
|
|
return that;
|
|
};
|
|
|
|
/*@
|
|
resizeMap <f> resizeMap
|
|
@*/
|
|
that.resizeMap = function() {
|
|
self.$map.resizeMap();
|
|
return that;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|