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

improve listmap editing functionality

Browse source
This commit is contained in:
rolux 2011-05-24 10:40:17 +02:00
parent e80b7bd8e3
commit 76606689d7
2 changed files with 71 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -347,37 +347,53 @@ Ox.ListMap = function(options, self) {
}); });
self.$newPlaceButton = Ox.Button({ self.$newPlaceButton = Ox.Button({
disabled: true, title: 'New Place',
title: 'New', width: 96
width: 64
}) })
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.hide() .bindEvent({
click: function() {
self.$map.newPlace();
}
})
.appendTo(self.$placeStatusbar); .appendTo(self.$placeStatusbar);
self.$removePlaceButton = Ox.Button({ self.$removePlaceButton = Ox.Button({
disabled: true, title: 'Remove Place',
title: 'Remove', width: 96
width: 64
}) })
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.hide()
.bindEvent({
click: function() {
self.$map.removePlace(self.selectedPlace);
self.$removePlaceButton.hide();
self.$addPlaceButton.show();
}
})
.appendTo(self.$placeStatusbar); .appendTo(self.$placeStatusbar);
self.$addPlaceButton = Ox.Button({ self.$addPlaceButton = Ox.Button({
disabled: true, title: 'Add Place',
title: 'Add', width: 96
width: 64
}) })
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.bindEvent({
click: function() {
self.$map.addPlace(self.$placeForm.values);
self.$addPlaceButton.hide();
self.$removePlaceButton.show();
}
})
.hide() .hide()
.appendTo(self.$placeStatusbar); .appendTo(self.$placeStatusbar);
self.$revertPlaceButton = Ox.Button({ self.$revertPlaceButton = Ox.Button({
disabled: true,
title: 'Revert', title: 'Revert',
width: 64 width: 96
}) })
.css({float: 'right', margin: '4px'}) .css({float: 'right', margin: '4px'})
.hide()
.appendTo(self.$placeStatusbar); .appendTo(self.$placeStatusbar);
/* /*
@ -525,6 +541,7 @@ Ox.ListMap = function(options, self) {
var country = place.id ? Ox.getCountryByGeoname(place.geoname) : '', var country = place.id ? Ox.getCountryByGeoname(place.geoname) : '',
code = country ? country.code : 'NTHH'; code = country ? country.code : 'NTHH';
if (place.id) { if (place.id) {
isResult = place.id[0] == '_';
self.selectedPlace = place.id; self.selectedPlace = place.id;
place.id[0] != '_' && self.$list.options({ place.id[0] != '_' && self.$list.options({
selected: place.id ? [place.id] : [] selected: place.id ? [place.id] : []
@ -537,10 +554,18 @@ Ox.ListMap = function(options, self) {
self.$placeForm.values(Ox.map(place, function(val, key) { self.$placeForm.values(Ox.map(place, function(val, key) {
return key == 'size' ? Ox.formatArea(val) : val; return key == 'size' ? Ox.formatArea(val) : val;
})).show(); })).show();
self.$newPlaceButton.hide();
self.$addPlaceButton[isResult ? 'show' : 'hide']();
self.$removePlaceButton[isResult ? 'hide' : 'show']();
self.$revertPlaceButton.options({disabled: true}).show();
} else { } else {
self.selectedPlace = null; self.selectedPlace = null;
self.$placeTitle.hide(); self.$placeTitle.hide();
self.$placeForm.hide(); self.$placeForm.hide();
self.$newPlaceButton.show();
self.$addPlaceButton.hide();
self.$removePlaceButton.hide();
self.$revertPlaceButton.hide();
} }
} }

63
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -406,20 +406,19 @@ Ox.Map = function(options, self) {
selectPlace(place.id); selectPlace(place.id);
} }
function addPlaceToPlaces() { function addPlaceToPlaces(data) {
var place = getSelectedPlace(); var place = getSelectedPlace();
if (self.options.selected == place.id) { if (self.options.selected == place.id) {
self.options.selected = place.id.substr(1); self.options.selected = place.id.substr(1);
} }
place.id = place.id.substr(1); // fixme: NOT SAFE! place.id = place.id.substr(1); // fixme: NOT SAFE!
place.name = self.$placeNameInput.value(); Ox.extend(place, data);
place.geoname = self.$placeGeonameInput.value();
place.countryCode = Ox.getCountryByGeoname(place.geoname).code; place.countryCode = Ox.getCountryByGeoname(place.geoname).code;
place.marker.update(); place.marker.update();
self.places.push(place); self.places.push(place);
self.resultPlace = null; self.resultPlace = null;
that.triggerEvent('addplace', place) that.triggerEvent('addplace', place)
Ox.print('SSSS', self.options.selected) //Ox.print('SSSS', self.options.selected)
} }
function boundsChanged() { function boundsChanged() {
@ -445,10 +444,8 @@ Ox.Map = function(options, self) {
} }
function clickMap(event) { function clickMap(event) {
Ox.print('Ox.Map clickMap')
if (self.options.clickable/* && !editing()*/) { if (self.options.clickable/* && !editing()*/) {
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) { getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
Ox.print('>>>>', place)
if (place) { if (place) {
addPlaceToMap(place); addPlaceToMap(place);
//selectPlace(place.id); //selectPlace(place.id);
@ -472,7 +469,7 @@ Ox.Map = function(options, self) {
} }
function constructZoomInput() { function constructZoomInput() {
Ox.print('constructZoomInput', self.minZoom, self.maxZoom) //Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
if (self.options.zoombar) { if (self.options.zoombar) {
self.$zoomInput && self.$zoomInput.removeElement(); self.$zoomInput && self.$zoomInput.removeElement();
self.$zoomInput = new Ox.Range({ self.$zoomInput = new Ox.Range({
@ -532,6 +529,15 @@ Ox.Map = function(options, self) {
}); });
} }
function getMetersPerPixel() {
var mapWidth = self.$map.width(),
span = self.map.getBounds().toSpan().lng();
if (span >= 360) {
span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
}
return span * Ox.getMetersPerDegree(self.map.getCenter().lat()) / mapWidth;
}
function getMinZoom() { function getMinZoom() {
return 0; return 0;
return Math.ceil( return Math.ceil(
@ -544,19 +550,19 @@ Ox.Map = function(options, self) {
if (!place && self.resultPlace && self.resultPlace.id == id) { if (!place && self.resultPlace && self.resultPlace.id == id) {
place = self.resultPlace; place = self.resultPlace;
} }
Ox.print('getPlaceById', id, place) //Ox.print('getPlaceById', id, place)
return place; return place;
} }
function getPlaceByLatLng(latlng, bounds, callback) { function getPlaceByLatLng(latlng, bounds, callback) {
// gets the largest place at latlng that would fit in bounds // gets the largest place at latlng that would fit in bounds
Ox.print('ll b', latlng, bounds) //Ox.print('ll b', latlng, bounds)
var callback = arguments.length == 3 ? callback : bounds, var callback = arguments.length == 3 ? callback : bounds,
bounds = arguments.length == 3 ? bounds : null; bounds = arguments.length == 3 ? bounds : null;
self.geocoder.geocode({ self.geocoder.geocode({
latLng: latlng latLng: latlng
}, function(results, status) { }, function(results, status) {
Ox.print('results', results) //Ox.print('results', results)
var length = results.length; var length = results.length;
if (status == google.maps.GeocoderStatus.OK) { if (status == google.maps.GeocoderStatus.OK) {
if (bounds) { if (bounds) {
@ -662,7 +668,7 @@ Ox.Map = function(options, self) {
} }
mapBounds = i == 0 ? bounds : mapBounds.union(bounds); mapBounds = i == 0 ? bounds : mapBounds.union(bounds);
}); });
Ox.print('BOUNDS', mapBounds.getSouthWest(), mapBounds.getNorthEast(), mapBounds.getCenter()) //Ox.print('BOUNDS', mapBounds.getSouthWest(), mapBounds.getNorthEast(), mapBounds.getCenter())
self.center = mapBounds ? mapBounds.getCenter() : new google.maps.LatLng(0, 0); self.center = mapBounds ? mapBounds.getCenter() : new google.maps.LatLng(0, 0);
self.zoom = 1; // fixme: should depend on height self.zoom = 1; // fixme: should depend on height
that.map = self.map = new google.maps.Map(self.$map.$element[0], { that.map = self.map = new google.maps.Map(self.$map.$element[0], {
@ -815,8 +821,14 @@ Ox.Map = function(options, self) {
} }
} }
function removePlace(id) { function removePlace() {
var place = getSelectedPlace();
place.id = '_' + place.id;
self.options.selected = place.id;
//Ox.print('removePlace', Ox.getObjectById(self.places, place.id))
self.places.splice(Ox.getPositionById(self.places, place.id), 1);
self.resultPlace = place;
place.marker.update();
} }
function reset() { function reset() {
@ -848,7 +860,7 @@ Ox.Map = function(options, self) {
function selectPlace(id) { function selectPlace(id) {
var place, var place,
selected = getSelectedMarker(); selected = getSelectedMarker();
Ox.print('Ox.Map selectPlace()', id, selected); //Ox.print('Ox.Map selectPlace()', id, selected);
if (id != selected) { if (id != selected) {
place = getPlaceById(selected); place = getPlaceById(selected);
place && place.deselect(); place && place.deselect();
@ -860,15 +872,6 @@ Ox.Map = function(options, self) {
} }
}; };
function getMetersPerPixel() {
var mapWidth = self.$map.width(),
span = self.map.getBounds().toSpan().lng();
if (span >= 360) {
span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
}
return span * Ox.getMetersPerDegree(self.map.getCenter().lat()) / mapWidth;
}
function setScale() { function setScale() {
var metersPerPixel = getMetersPerPixel(); var metersPerPixel = getMetersPerPixel();
Ox.forEach(self.scaleMeters, function(meters) { Ox.forEach(self.scaleMeters, function(meters) {
@ -889,7 +892,7 @@ Ox.Map = function(options, self) {
} }
function setStatus() { function setStatus() {
Ox.print('setStatus()', self.options.selected) //Ox.print('setStatus()', self.options.selected)
var code, country, disabled, place, title; var code, country, disabled, place, title;
if (self.options.statusbar) { if (self.options.statusbar) {
place = getSelectedPlace(); place = getSelectedPlace();
@ -917,7 +920,7 @@ Ox.Map = function(options, self) {
title: title title: title
}); });
} }
Ox.print('STATUS DONE'); //Ox.print('STATUS DONE');
} }
function submitFind(event, data) { function submitFind(event, data) {
@ -928,7 +931,7 @@ Ox.Map = function(options, self) {
function toggleLabels() { function toggleLabels() {
self.options.showLabels = !self.options.showLabels self.options.showLabels = !self.options.showLabels
Ox.print('toggle', getMapType()) //Ox.print('toggle', getMapType())
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]); self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
/* /*
self.$labelsButton.options({ self.$labelsButton.options({
@ -1030,8 +1033,8 @@ Ox.Map = function(options, self) {
} }
}; };
that.addPlace = function() { that.addPlace = function(data) {
addPlaceToMap(getSelectedPlace()); addPlaceToPlaces(data);
}; };
that.getKey = function() { that.getKey = function() {
@ -1072,7 +1075,9 @@ Ox.Map = function(options, self) {
return that; return that;
}; };
that.removePlace = function(id) { that.removePlace = function() {
// fixme: removePlaceFromPlaces() ?
removePlace();
return that; return that;
}; };