improve listmap editing functionality
This commit is contained in:
parent
2996bc9e8b
commit
e80b7bd8e3
8 changed files with 105 additions and 33 deletions
|
@ -14,6 +14,7 @@ Ox.load('UI', {
|
||||||
editable: true,
|
editable: true,
|
||||||
flag: place.code,
|
flag: place.code,
|
||||||
geoname: place.name,
|
geoname: place.name,
|
||||||
|
id: place.code,
|
||||||
name: place.name,
|
name: place.name,
|
||||||
type: 'Country',
|
type: 'Country',
|
||||||
lat: place.lat,
|
lat: place.lat,
|
||||||
|
|
|
@ -126,6 +126,7 @@ Ox.load.Geo = function(options, callback) {
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.getCountryByGeoname = function(geoname) {
|
Ox.getCountryByGeoname = function(geoname) {
|
||||||
|
// fixme: UAE correction doesn't belong here, fix in map
|
||||||
geoname = geoname.replace(' - United Arab Emirates', ', United Arab Emirates')
|
geoname = geoname.replace(' - United Arab Emirates', ', United Arab Emirates')
|
||||||
return Ox.getCountryByName(
|
return Ox.getCountryByName(
|
||||||
geoname.split(', ').pop()
|
geoname.split(', ').pop()
|
||||||
|
|
|
@ -1116,7 +1116,6 @@ input[type=image].OxMapButton {
|
||||||
.OxMapLabel {
|
.OxMapLabel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
padding: 0 5px 0 5px;
|
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1091,6 +1091,7 @@ Ox.List = function(options, self) {
|
||||||
self.selected.push(pos);
|
self.selected.push(pos);
|
||||||
!Ox.isUndefined(self.$items[pos]) &&
|
!Ox.isUndefined(self.$items[pos]) &&
|
||||||
self.$items[pos].addClass('OxSelected');
|
self.$items[pos].addClass('OxSelected');
|
||||||
|
i == 0 && scrollToPosition(pos);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -627,7 +627,6 @@ Ox.TextList = function(options, self) {
|
||||||
|
|
||||||
self.setOption = function(key, value) {
|
self.setOption = function(key, value) {
|
||||||
if (key == 'items') {
|
if (key == 'items') {
|
||||||
//alert('request set!!')
|
|
||||||
that.$body.options(key, value);
|
that.$body.options(key, value);
|
||||||
} else if (key == 'paste') {
|
} else if (key == 'paste') {
|
||||||
that.$body.options(key, value);
|
that.$body.options(key, value);
|
||||||
|
@ -744,8 +743,9 @@ Ox.TextList = function(options, self) {
|
||||||
|
|
||||||
that.value = function(id, key, value) {
|
that.value = function(id, key, value) {
|
||||||
// fixme: make this accept id, {k: v, ...}
|
// fixme: make this accept id, {k: v, ...}
|
||||||
|
Ox.print('value', id, key, value)
|
||||||
var $item = getItem(id),
|
var $item = getItem(id),
|
||||||
//$cell = getCell(id, key),
|
$cell = getCell(id, key),
|
||||||
column = self.options.columns[getColumnIndexById(key)];
|
column = self.options.columns[getColumnIndexById(key)];
|
||||||
if (arguments.length == 1) {
|
if (arguments.length == 1) {
|
||||||
return that.$body.value(id);
|
return that.$body.value(id);
|
||||||
|
@ -753,8 +753,8 @@ Ox.TextList = function(options, self) {
|
||||||
return that.$body.value(id, key);
|
return that.$body.value(id, key);
|
||||||
} else {
|
} else {
|
||||||
that.$body.value(id, key, value);
|
that.$body.value(id, key, value);
|
||||||
/*
|
|
||||||
$cell && $cell.html(column.format ? column.format(value) : value);
|
$cell && $cell.html(column.format ? column.format(value) : value);
|
||||||
|
/*
|
||||||
if (column.unique) {
|
if (column.unique) {
|
||||||
that.$body.setId($item.data('id'), value);
|
that.$body.setId($item.data('id'), value);
|
||||||
$item.data({id: value});
|
$item.data({id: value});
|
||||||
|
|
|
@ -251,19 +251,22 @@ Ox.ListMap = function(options, self) {
|
||||||
self.$placeTitlebar = Ox.Bar({
|
self.$placeTitlebar = Ox.Bar({
|
||||||
size: 24
|
size: 24
|
||||||
});
|
});
|
||||||
|
self.$placeTitle = $('<div>')
|
||||||
|
.hide()
|
||||||
|
.appendTo(self.$placeTitlebar.$element)
|
||||||
self.$placeTitleFlag = $('<img>')
|
self.$placeTitleFlag = $('<img>')
|
||||||
.addClass('OxFlag')
|
.addClass('OxFlag')
|
||||||
.attr({
|
.attr({
|
||||||
src: Ox.PATH + 'Ox.Geo/png/icons/16/NTHH.png'
|
src: Ox.PATH + 'Ox.Geo/png/icons/16/NTHH.png'
|
||||||
})
|
})
|
||||||
.css({float: 'left', margin: '4px 0 0 4px'})
|
.css({float: 'left', margin: '4px 0 0 4px'})
|
||||||
.appendTo(self.$placeTitlebar.$element);
|
.appendTo(self.$placeTitle);
|
||||||
self.$placeTitleName = Ox.Label({
|
self.$placeTitleName = Ox.Label({
|
||||||
title: '',
|
title: '',
|
||||||
width: 228
|
width: 228
|
||||||
})
|
})
|
||||||
.css({float: 'left', margin: '4px'})
|
.css({float: 'left', margin: '4px'})
|
||||||
.appendTo(self.$placeTitlebar);
|
.appendTo(self.$placeTitle);
|
||||||
|
|
||||||
self.$placeFormItems = Ox.merge([
|
self.$placeFormItems = Ox.merge([
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
|
@ -271,12 +274,27 @@ Ox.ListMap = function(options, self) {
|
||||||
label: 'Name',
|
label: 'Name',
|
||||||
labelWidth: 64,
|
labelWidth: 64,
|
||||||
width: 240
|
width: 240
|
||||||
|
}).bindEvent({
|
||||||
|
change: function(data) {
|
||||||
|
Ox.getObjectById(self.options.places, self.selectedPlace).name = data.value;
|
||||||
|
self.$list.value(self.selectedPlace, 'name', data.value);
|
||||||
|
self.$map.value(self.selectedPlace, 'name', data.value);
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
id: 'geoname',
|
id: 'geoname',
|
||||||
label: 'Geoname',
|
label: 'Geoname',
|
||||||
labelWidth: 64,
|
labelWidth: 64,
|
||||||
width: 240
|
width: 240
|
||||||
|
}).bindEvent({
|
||||||
|
change: function(data) {
|
||||||
|
Ox.getObjectById(self.options.places, self.selectedPlace).geoname = data.value;
|
||||||
|
self.$list.value(self.selectedPlace, 'geoname', data.value);
|
||||||
|
self.$map.value(self.selectedPlace, 'geoname', data.value);
|
||||||
|
self.$placeTitleName.options({
|
||||||
|
title: data.value
|
||||||
|
});
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
Ox.ArrayInput({
|
Ox.ArrayInput({
|
||||||
id: 'alternativeNames',
|
id: 'alternativeNames',
|
||||||
|
@ -301,6 +319,10 @@ Ox.ListMap = function(options, self) {
|
||||||
max: max,
|
max: max,
|
||||||
type: 'float',
|
type: 'float',
|
||||||
width: 240
|
width: 240
|
||||||
|
}).bindEvent({
|
||||||
|
focus: function() {
|
||||||
|
Ox.print('---- FOCUS ----')
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}), [
|
}), [
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
|
@ -317,23 +339,45 @@ Ox.ListMap = function(options, self) {
|
||||||
items: self.$placeFormItems,
|
items: self.$placeFormItems,
|
||||||
width: 240
|
width: 240
|
||||||
})
|
})
|
||||||
.css({margin: '8px'});
|
.css({margin: '8px'})
|
||||||
|
.hide();
|
||||||
|
|
||||||
self.$placeStatusbar = Ox.Bar({
|
self.$placeStatusbar = Ox.Bar({
|
||||||
size: 16
|
size: 24
|
||||||
})
|
});
|
||||||
.addClass('OxVideoPlayer'); // fixme!
|
|
||||||
|
|
||||||
self.$savePlaceButton = Ox.Button({
|
self.$newPlaceButton = Ox.Button({
|
||||||
disabled: true,
|
disabled: true,
|
||||||
id: 'savePlace',
|
title: 'New',
|
||||||
title: 'check',
|
width: 64
|
||||||
style: 'symbol',
|
|
||||||
tooltip: 'Save Place',
|
|
||||||
type: 'image',
|
|
||||||
//width: 80
|
|
||||||
})
|
})
|
||||||
.css({float: 'right'})
|
.css({float: 'left', margin: '4px'})
|
||||||
|
.hide()
|
||||||
|
.appendTo(self.$placeStatusbar);
|
||||||
|
|
||||||
|
self.$removePlaceButton = Ox.Button({
|
||||||
|
disabled: true,
|
||||||
|
title: 'Remove',
|
||||||
|
width: 64
|
||||||
|
})
|
||||||
|
.css({float: 'left', margin: '4px'})
|
||||||
|
.appendTo(self.$placeStatusbar);
|
||||||
|
|
||||||
|
self.$addPlaceButton = Ox.Button({
|
||||||
|
disabled: true,
|
||||||
|
title: 'Add',
|
||||||
|
width: 64
|
||||||
|
})
|
||||||
|
.css({float: 'left', margin: '4px'})
|
||||||
|
.hide()
|
||||||
|
.appendTo(self.$placeStatusbar);
|
||||||
|
|
||||||
|
self.$revertPlaceButton = Ox.Button({
|
||||||
|
disabled: true,
|
||||||
|
title: 'Revert',
|
||||||
|
width: 64
|
||||||
|
})
|
||||||
|
.css({float: 'right', margin: '4px'})
|
||||||
.appendTo(self.$placeStatusbar);
|
.appendTo(self.$placeStatusbar);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -369,6 +413,7 @@ Ox.ListMap = function(options, self) {
|
||||||
findPlaceholder: 'Find on Map',
|
findPlaceholder: 'Find on Map',
|
||||||
height: self.options.height,
|
height: self.options.height,
|
||||||
places: places,
|
places: places,
|
||||||
|
//statusbar: true,
|
||||||
toolbar: true,
|
toolbar: true,
|
||||||
width: self.options.width - 514,//self.mapResize[1],
|
width: self.options.width - 514,//self.mapResize[1],
|
||||||
zoombar: true
|
zoombar: true
|
||||||
|
@ -380,7 +425,7 @@ Ox.ListMap = function(options, self) {
|
||||||
changeplace: function(event, data) {
|
changeplace: function(event, data) {
|
||||||
self.$placeForm.values(Ox.map(data, function(val, key) {
|
self.$placeForm.values(Ox.map(data, function(val, key) {
|
||||||
return key == 'size' ? Ox.formatArea(val) : val;
|
return key == 'size' ? Ox.formatArea(val) : val;
|
||||||
}));
|
})).show();
|
||||||
},
|
},
|
||||||
geocode: function(event, data) {
|
geocode: function(event, data) {
|
||||||
that.triggerEvent('geocode', data);
|
that.triggerEvent('geocode', data);
|
||||||
|
@ -430,7 +475,7 @@ Ox.ListMap = function(options, self) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: self.$placeStatusbar,
|
element: self.$placeStatusbar,
|
||||||
size: 16
|
size: 24
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
|
@ -479,16 +524,24 @@ Ox.ListMap = function(options, self) {
|
||||||
function selectPlace(place) {
|
function selectPlace(place) {
|
||||||
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';
|
||||||
place.id && place.id[0] != '_' && self.$list.options({
|
if (place.id) {
|
||||||
|
self.selectedPlace = place.id;
|
||||||
|
place.id[0] != '_' && self.$list.options({
|
||||||
selected: place.id ? [place.id] : []
|
selected: place.id ? [place.id] : []
|
||||||
});
|
});
|
||||||
self.$placeTitleFlag.attr({
|
self.$placeTitleFlag.attr({
|
||||||
src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
|
src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
|
||||||
});
|
});
|
||||||
self.$placeTitleName.options({title: place.geoname || ''});
|
self.$placeTitleName.options({title: place.geoname || ''});
|
||||||
|
self.$placeTitle.show();
|
||||||
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();
|
||||||
|
} else {
|
||||||
|
self.selectedPlace = null;
|
||||||
|
self.$placeTitle.hide();
|
||||||
|
self.$placeForm.hide();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toFixed(val) {
|
function toFixed(val) {
|
||||||
|
|
|
@ -873,7 +873,7 @@ Ox.Map = function(options, self) {
|
||||||
var metersPerPixel = getMetersPerPixel();
|
var metersPerPixel = getMetersPerPixel();
|
||||||
Ox.forEach(self.scaleMeters, function(meters) {
|
Ox.forEach(self.scaleMeters, function(meters) {
|
||||||
var scaleWidth = Math.round(meters / metersPerPixel);
|
var scaleWidth = Math.round(meters / metersPerPixel);
|
||||||
if (scaleWidth <= 256) {
|
if (scaleWidth <= self.options.width / 2 - 4) {
|
||||||
self.$scaleLabel
|
self.$scaleLabel
|
||||||
.options({
|
.options({
|
||||||
title: '\u2190 ' + (
|
title: '\u2190 ' + (
|
||||||
|
@ -881,7 +881,7 @@ Ox.Map = function(options, self) {
|
||||||
) + 'm \u2192'
|
) + 'm \u2192'
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
width: (scaleWidth - 10) + 'px'
|
width: (scaleWidth - 16) + 'px'
|
||||||
})
|
})
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -1030,6 +1030,10 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
that.addPlace = function() {
|
||||||
|
addPlaceToMap(getSelectedPlace());
|
||||||
|
};
|
||||||
|
|
||||||
that.getKey = function() {
|
that.getKey = function() {
|
||||||
var key = null;
|
var key = null;
|
||||||
if (self.shiftKey) {
|
if (self.shiftKey) {
|
||||||
|
@ -1057,6 +1061,10 @@ Ox.Map = function(options, self) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
that.newPlace = function() {
|
||||||
|
addPlaceToMap();
|
||||||
|
};
|
||||||
|
|
||||||
that.panToPlace = function() {
|
that.panToPlace = function() {
|
||||||
Ox.print('panToPlace:', self.options.selected)
|
Ox.print('panToPlace:', self.options.selected)
|
||||||
var place = getSelectedPlace();
|
var place = getSelectedPlace();
|
||||||
|
@ -1108,6 +1116,13 @@ Ox.Map = function(options, self) {
|
||||||
return that;
|
return that;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
that.value = function(id, key, value) {
|
||||||
|
// fixme: should be like the corresponding List/TextList/etc value function
|
||||||
|
Ox.print('Map.value', id, key, value)
|
||||||
|
getPlaceById(id)[key] = value;
|
||||||
|
Ox.print('...', getPlaceById(id))
|
||||||
|
}
|
||||||
|
|
||||||
that.zoomToPlace = function() {
|
that.zoomToPlace = function() {
|
||||||
Ox.print('zoomToPlace')
|
Ox.print('zoomToPlace')
|
||||||
var place = getSelectedPlace();
|
var place = getSelectedPlace();
|
||||||
|
|
|
@ -18,6 +18,8 @@ run this, then html/geo.html, then fix JSON
|
||||||
http://en.wikipedia.org/wiki/ISO_3166-3 and http://www.imdb.com/country/
|
http://en.wikipedia.org/wiki/ISO_3166-3 and http://www.imdb.com/country/
|
||||||
-- entities with country codes, according to
|
-- entities with country codes, according to
|
||||||
http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
|
http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
|
||||||
|
(like Ascension, Canary Islands, Ceuta and Melilla, Diego Garcia,
|
||||||
|
European Union, Metropolitan France, Tristan da Cunha, UK...)
|
||||||
|
|
||||||
writes json/geo.json and json/countries.json,
|
writes json/geo.json and json/countries.json,
|
||||||
both will used by html/geo.html
|
both will used by html/geo.html
|
||||||
|
@ -189,7 +191,7 @@ geo = {
|
||||||
'Rhodesia': ['Zimbabwe'],
|
'Rhodesia': ['Zimbabwe'],
|
||||||
'Siam': ['Thailand'],
|
'Siam': ['Thailand'],
|
||||||
'Upper Volta': ['Burkina Faso'],
|
'Upper Volta': ['Burkina Faso'],
|
||||||
'Yugoslavia': ['Serbia and Montenegro'],
|
'Yugoslavia': ['Serbia and Montenegro'], # fixme: shape and flag suggest 'split'
|
||||||
'Zaire': ['Democratic Republic of the Congo'],
|
'Zaire': ['Democratic Republic of the Congo'],
|
||||||
# split
|
# split
|
||||||
'Czechoslovakia': ['Czech Republic', 'Slovakia'],
|
'Czechoslovakia': ['Czech Republic', 'Slovakia'],
|
||||||
|
|
Loading…
Reference in a new issue