forked from 0x2620/oxjs
update manage places / manage events
This commit is contained in:
rlx
parent
a9089ee8f7
commit
e4b60c83c2
8 changed files with 676 additions and 482 deletions
|
|
@ -23,9 +23,10 @@ Ox.ListMap = function(options, self) {
|
|||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
addPlace: null,
|
||||
editPlace: null,
|
||||
collapsible: false,
|
||||
editPlace: null,
|
||||
getMatches: null,
|
||||
hasMatches: false,
|
||||
height: 256,
|
||||
labels: false,
|
||||
mode: 'add',
|
||||
|
|
@ -73,7 +74,7 @@ Ox.ListMap = function(options, self) {
|
|||
},
|
||||
{
|
||||
format: function(value, data) {
|
||||
return data.geoname
|
||||
return data.type
|
||||
? $('<img>')
|
||||
.attr({
|
||||
src: Ox.getFlagByGeoname(data.geoname, 16)
|
||||
|
|
@ -143,7 +144,7 @@ Ox.ListMap = function(options, self) {
|
|||
format: function(value, data) {
|
||||
return data.type
|
||||
? value
|
||||
: $('<span>').addClass('OxWarning').html(value)
|
||||
: $('<span>').addClass('OxWarning').html(value);
|
||||
},
|
||||
id: 'name',
|
||||
operator: '+',
|
||||
|
|
@ -264,17 +265,18 @@ Ox.ListMap = function(options, self) {
|
|||
title: 'Date Modified',
|
||||
visible: false,
|
||||
width: 128,
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
id: 'matches',
|
||||
operator: '-',
|
||||
title: 'Matches',
|
||||
visible: false,
|
||||
width: 64,
|
||||
}
|
||||
];
|
||||
|
||||
self.options.hasMatches && self.columns.push({
|
||||
align: 'right',
|
||||
id: 'matches',
|
||||
operator: '-',
|
||||
title: 'Matches',
|
||||
visible: true,
|
||||
width: 64
|
||||
});
|
||||
|
||||
self.$listToolbar = Ox.Bar({
|
||||
size: 24
|
||||
});
|
||||
|
|
@ -313,19 +315,14 @@ Ox.ListMap = function(options, self) {
|
|||
]
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
|
||||
}
|
||||
})
|
||||
.appendTo(self.$listToolbar);
|
||||
|
||||
self.$list = Ox.TextList({
|
||||
columns: self.columns,
|
||||
columnsRemovable: true,
|
||||
columnsVisible: true,
|
||||
//items: Ox.clone(self.options.places),
|
||||
items: self.options.places,
|
||||
items: Ox.clone(self.options.places),
|
||||
//items: self.options.places,
|
||||
// area needed for icon, geoname needed for flag
|
||||
keys: ['area', 'geoname', 'matches'],
|
||||
max: 1,
|
||||
|
|
@ -367,47 +364,47 @@ Ox.ListMap = function(options, self) {
|
|||
.appendTo(self.$listStatusbar);
|
||||
|
||||
self.$map = Ox.Map({
|
||||
clickable: true,
|
||||
editable: true,
|
||||
findPlaceholder: 'Find on Map',
|
||||
height: self.options.height,
|
||||
places: self.options.places,
|
||||
selected: self.options.selected,
|
||||
//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
|
||||
},
|
||||
*/
|
||||
selectplace: selectPlace
|
||||
});
|
||||
clickable: true,
|
||||
editable: true,
|
||||
findPlaceholder: 'Find on Map',
|
||||
height: self.options.height,
|
||||
places: self.options.places,
|
||||
selected: self.options.selected,
|
||||
//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
|
||||
},
|
||||
*/
|
||||
selectplace: selectPlace
|
||||
});
|
||||
|
||||
self.$placeTitlebar = Ox.Bar({
|
||||
size: 24
|
||||
|
|
@ -457,157 +454,139 @@ Ox.ListMap = function(options, self) {
|
|||
.css({float: 'left', margin: '4px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.$map.options({selected: null});
|
||||
self.$list.options({selected: []});
|
||||
// FIXME: list doesn't fire select event
|
||||
selectItem({ids: []});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$placeTitle);
|
||||
|
||||
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']);
|
||||
}
|
||||
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);
|
||||
self.$placeFlag.attr({
|
||||
src: Ox.getFlagByGeoname(geoname, 16)
|
||||
});
|
||||
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);
|
||||
}
|
||||
} else {
|
||||
!isResult && editPlace(['countryCode', 'geoname']);
|
||||
}
|
||||
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,
|
||||
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'},
|
||||
{id: 'street', title: 'Street'}, // streets, squares, bridges, tunnels, ...
|
||||
{id: 'building', title: 'Building'}, // airports, stations, stadiums, military installations, ...
|
||||
{id: 'feature', title: 'Feature'} // continents, islands, rivers, lakes, seas, oceans, mountains...
|
||||
],
|
||||
label: 'Type',
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
}).bindEvent({
|
||||
change: function(data) {
|
||||
var isResult = self.selectedPlace[0] == '_';
|
||||
if (!self.isAsync) {
|
||||
// ...
|
||||
} else {
|
||||
!isResult && editPlace(['type'])
|
||||
}
|
||||
self.$map.value(self.selectedPlace, 'type', data.value);
|
||||
}
|
||||
})
|
||||
], ['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({
|
||||
decimals: 8,
|
||||
disabled: ['lat', 'lng'].indexOf(id) > -1,
|
||||
id: id,
|
||||
label: v,
|
||||
labelWidth: 80,
|
||||
min: -max,
|
||||
max: max,
|
||||
type: 'float',
|
||||
width: 240
|
||||
})
|
||||
.bindEvent({
|
||||
blur: function(data) {
|
||||
///*
|
||||
// fixme: if type is set, no change event fires
|
||||
var isResult = self.selectedPlace[0] == '_';
|
||||
if (!self.isAsync) {
|
||||
// ...
|
||||
} else {
|
||||
!isResult && editPlace([v])
|
||||
}
|
||||
self.$map.value(self.selectedPlace, id, parseFloat(data.value));
|
||||
//*/
|
||||
}
|
||||
});
|
||||
}), [
|
||||
self.$areaInput = Ox.Input({
|
||||
id: 'area',
|
||||
type: 'float'
|
||||
}).hide()
|
||||
]);
|
||||
self.$placeData = Ox.Element();
|
||||
|
||||
self.$placeForm = Ox.Form({
|
||||
items: self.$placeFormItems,
|
||||
items: Ox.merge([
|
||||
self.$nameInput = Ox.Input({
|
||||
id: 'name',
|
||||
label: 'Name',
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
}),
|
||||
self.$alternativeNamesInput = Ox.ArrayInput({
|
||||
id: 'alternativeNames',
|
||||
label: 'Alternative Names',
|
||||
max: 10,
|
||||
//sort: true,
|
||||
values: [],
|
||||
width: 240
|
||||
}),
|
||||
self.$geonameInput = Ox.Input({
|
||||
id: 'geoname',
|
||||
label: 'Geoname',
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
}),
|
||||
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'},
|
||||
{id: 'street', title: 'Street'}, // streets, squares, bridges, tunnels, ...
|
||||
{id: 'building', title: 'Building'}, // airports, stations, stadiums, military installations, ...
|
||||
{id: 'feature', title: 'Feature'} // continents, islands, rivers, lakes, seas, oceans, mountains...
|
||||
],
|
||||
label: 'Type',
|
||||
labelWidth: 64,
|
||||
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({
|
||||
decimals: 8,
|
||||
disabled: ['lat', 'lng'].indexOf(id) > -1,
|
||||
id: id,
|
||||
label: 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();
|
||||
.hide()
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
var isResult = self.selectedPlace[0] == '_';
|
||||
if (data.id == 'name') {
|
||||
!isResult && self.$list.value(self.selectedPlace, 'name', data.data.value);
|
||||
if (!self.isAsync) {
|
||||
Ox.getObjectById(
|
||||
self.options.places, self.selectedPlace
|
||||
).name = data.data.value;
|
||||
} else {
|
||||
!isResult && editPlace(['name']);
|
||||
}
|
||||
self.$map.value(self.selectedPlace, 'name', data.data.value);
|
||||
} else if (data.id == 'alternativeNames') {
|
||||
if (!self.isAsync) {
|
||||
// ...
|
||||
} else {
|
||||
!isResult && 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.$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);
|
||||
}
|
||||
} 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 { // lat, lng, 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,
|
||||
|
|
@ -617,20 +596,22 @@ Ox.ListMap = function(options, self) {
|
|||
textAlign: 'right',
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '4px 0 4px 0'})
|
||||
.appendTo(self.$placeForm);
|
||||
.css({margin: '8px 8px 0 8px'})
|
||||
.hide()
|
||||
.appendTo(self.$placeData);
|
||||
|
||||
if (self.options.getMatches) {
|
||||
if (self.options.hasMatches) {
|
||||
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);
|
||||
disabled: true,
|
||||
id: 'matches',
|
||||
label: 'Matches',
|
||||
labelWidth: 80,
|
||||
type: 'int',
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'})
|
||||
.hide()
|
||||
.appendTo(self.$placeData);
|
||||
}
|
||||
|
||||
self.$placeStatusbar = Ox.Bar({
|
||||
|
|
@ -685,16 +666,6 @@ Ox.ListMap = function(options, self) {
|
|||
.appendTo(self.$placeStatusbar);
|
||||
}
|
||||
|
||||
/*
|
||||
self.$revertButton = Ox.Button({
|
||||
title: 'Revert',
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||||
.hide()
|
||||
.appendTo(self.$placeStatusbar);
|
||||
*/
|
||||
|
||||
/*
|
||||
self.mapResize = [
|
||||
Math.round(self.options.width * 0.25),
|
||||
|
|
@ -757,7 +728,7 @@ Ox.ListMap = function(options, self) {
|
|||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.$placeForm
|
||||
element: self.$placeData
|
||||
},
|
||||
{
|
||||
element: self.$placeStatusbar,
|
||||
|
|
@ -803,9 +774,7 @@ Ox.ListMap = function(options, self) {
|
|||
self.$map.addPlace(place);
|
||||
self.$addPlaceButton.options({title: 'Remove Place'});
|
||||
//setStatus();
|
||||
}
|
||||
//that.triggerEvent('addplace', {place: place});
|
||||
if (self.isAsync) {
|
||||
} else {
|
||||
self.$addPlaceButton.options({disabled: true, title: 'Adding...'});
|
||||
self.options.addPlace(place, function(result) {
|
||||
if (result.status.code == 200) {
|
||||
|
|
@ -813,17 +782,22 @@ Ox.ListMap = function(options, self) {
|
|||
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.options.hasMatches && self.$matchesInput.value(
|
||||
result.data.matches
|
||||
).show();
|
||||
self.options.mode == 'define' && self.$definePlaceButton.options({
|
||||
disabled: !result.data.matches,
|
||||
title: 'Clear Place'
|
||||
}).show();
|
||||
self.$addPlaceButton.options({
|
||||
disabled: false,
|
||||
title: '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: 'Add Place'});
|
||||
}
|
||||
});
|
||||
|
|
@ -840,17 +814,18 @@ Ox.ListMap = function(options, self) {
|
|||
self.$definePlaceButton.options({disabled: true, title: 'Clearing...'});
|
||||
self.options.editPlace(values, function() {
|
||||
self.$list.reloadList();
|
||||
self.$map.removePlace();
|
||||
self.$map.removePlace().options({selected: ''});
|
||||
self.$findPlaceButton.show();
|
||||
self.$placeFlag.hide();
|
||||
self.$placeForm.hide();
|
||||
self.$areaKmInput.hide();
|
||||
self.$definePlaceButton.options({disabled: false, title: 'Define Place'})
|
||||
});
|
||||
}
|
||||
|
||||
function definePlace() {
|
||||
self.$map.newPlace(); // this will call selectPlace, then editPlace
|
||||
self.$definePlaceButton.options({title: 'Clear Place'})
|
||||
self.$definePlaceButton.options({title: 'Clear Place'});
|
||||
}
|
||||
|
||||
function editPlace(keys) {
|
||||
|
|
@ -859,27 +834,56 @@ Ox.ListMap = function(options, self) {
|
|||
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();
|
||||
self.options.editPlace(values, function(result) {
|
||||
Ox.print('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: 'Clear Place'
|
||||
});
|
||||
self.$addPlaceButton.options({
|
||||
disabled: !!result.data.matches
|
||||
});
|
||||
}
|
||||
} else {
|
||||
Ox.forEach(values, function(value, key) {
|
||||
if (key != 'id') {
|
||||
self.$list.value(values.id, key, value);
|
||||
self.$map.value(values.id, key, value);
|
||||
}
|
||||
});
|
||||
if (result.data.names.indexOf(self.$nameInput.value()) > -1) {
|
||||
self.$nameInput.addClass('OxError');
|
||||
}
|
||||
self.$alternativeNamesInput.setErrors(result.data.names);
|
||||
}
|
||||
});
|
||||
if (keys.indexOf('name') > -1 || keys.indexOf('alternativeNames') > -1) {
|
||||
updateMatches();
|
||||
}
|
||||
}
|
||||
|
||||
function findPlace() {
|
||||
self.$map.options({
|
||||
find: self.$list.value(self.selectedPlace).name
|
||||
});
|
||||
self.$map
|
||||
//.options({find: ''})
|
||||
.options({find: self.$list.value(self.options.selected, 'name')});
|
||||
}
|
||||
|
||||
function initList(data) {
|
||||
|
|
@ -918,98 +922,125 @@ Ox.ListMap = function(options, self) {
|
|||
self.$addPlaceButton.options({disabled: true, title: 'Removing...'})
|
||||
self.options.removePlace({id: self.selectedPlace}, function() {
|
||||
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: 'Add Place'})
|
||||
self.$addPlaceButton.options({disabled: false, title: 'Add Place'});
|
||||
});
|
||||
}
|
||||
self.$map.removePlace();
|
||||
that.triggerEvent('removeplace', {id: self.selectedPlace});
|
||||
}
|
||||
|
||||
function selectItem(data) {
|
||||
function selectItem(data, place) {
|
||||
// Select item in list
|
||||
Ox.print('selectItem', data, place);
|
||||
var isUndefined, selectedPlace;
|
||||
self.options.selected = data.ids.length ? data.ids[0] : '';
|
||||
isUndefined = !!self.options.selected
|
||||
&& !self.$list.value(self.options.selected, 'type');
|
||||
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 : null;
|
||||
? self.options.selected : '';
|
||||
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')
|
||||
});
|
||||
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();
|
||||
self.$definePlaceButton.options({
|
||||
title: 'Define Place'
|
||||
if (!isUndefined) {
|
||||
self.$placeForm.values(place).show();
|
||||
self.$areaKmInput.value(Ox.formatArea(place.area)).show();
|
||||
} else {
|
||||
self.$placeForm.hide();
|
||||
self.$areaKmInput.hide();
|
||||
}
|
||||
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.$list.value(self.options.selected, 'matches') > 0,
|
||||
disabled: self.options.mode == 'define' && !!place.matches,
|
||||
title: 'Remove Place'
|
||||
}).show();
|
||||
} else {
|
||||
self.$placeTitle.hide();
|
||||
self.$placeForm.hide();
|
||||
self.$areaKmInput.hide();
|
||||
self.options.hasMatches && self.$matchesInput.hide();
|
||||
self.options.mode == 'define' && self.$definePlaceButton.hide();
|
||||
self.$addPlaceButton.hide();
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
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] : []
|
||||
});
|
||||
}
|
||||
if (place.id) {
|
||||
if (isResult && isUndefined) {
|
||||
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();
|
||||
var isResult = !!place.id && place.id[0] == '_',
|
||||
isUndefined = !!self.options.selected
|
||||
&& !self.$list.value(self.options.selected, 'type'),
|
||||
names;
|
||||
self.selectedPlace = place.id || '';
|
||||
if (isResult && isUndefined) {
|
||||
// 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.$placeForm.values(place).show();
|
||||
self.$areaKmInput.value(Ox.formatArea(place.area)).show();
|
||||
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();
|
||||
self.$placeForm.values(place).show();
|
||||
self.$areaKmInput.value(Ox.formatArea(place.area));
|
||||
self.$matchesInput.value(place.matches);
|
||||
//updateMatches();
|
||||
self.options.mode == 'define' && self.$definePlaceButton.options({
|
||||
title: isUndefined && !isResult ? 'Define Place' : 'Clear Place'
|
||||
}).show();
|
||||
self.$addPlaceButton.options({
|
||||
disabled: self.options.mode == 'define' && place.matches > 0,
|
||||
title: isResult ? 'Add Place' : 'Remove Place'
|
||||
}).show();
|
||||
if (isResult && isUndefined) {
|
||||
self.$map.addPlace(place);
|
||||
self.$addPlaceButton.options({title: 'Remove Place'});
|
||||
editPlace([
|
||||
'geoname', 'type',
|
||||
'lat', 'lng',
|
||||
'south', 'west', 'north', 'east', 'area'
|
||||
]);
|
||||
self.$areaKmInput.value(Ox.formatArea(place.area)).show();
|
||||
if (self.options.hasMatches) {
|
||||
self.$matchesInput.value('').show();
|
||||
names = Ox.filter(Ox.merge([place.name], place.alternativeNames), function(name) {
|
||||
return name !== '';
|
||||
});
|
||||
self.options.getMatches(names, function(matches) {
|
||||
self.$matchesInput.value(matches);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
self.options.mode == 'define' && self.$definePlaceButton.hide();
|
||||
self.$addPlaceButton.options({disabled: false, title: 'Add Place'}).show();
|
||||
} else if (!self.selectedPlace && !self.options.selected) {
|
||||
// deselect result place
|
||||
self.$placeFlag.hide();
|
||||
self.$placeTitle.hide();
|
||||
self.$placeForm.hide();
|
||||
self.options.mode == 'define' && self.$definePlaceButton.hide();
|
||||
self.$addPlaceButton.hide();
|
||||
self.$areaKmInput.hide();
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1022,7 +1053,6 @@ Ox.ListMap = function(options, self) {
|
|||
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();
|
||||
|
|
@ -1054,24 +1084,6 @@ Ox.ListMap = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
self.$matchesInput.value('');
|
||||
self.options.getMatches(names, function(matches) {
|
||||
self.$matchesInput.value(Ox.formatNumber(matches));
|
||||
});
|
||||
} else {
|
||||
self.$matchesInput.value(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*@
|
||||
setOption <f> setOption
|
||||
@*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue