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 08:15:44 +02:00
parent 2996bc9e8b
commit e80b7bd8e3
8 changed files with 105 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demos/listmap/js/listmap.js
View file

@ -14,6 +14,7 @@ Ox.load('UI', {
editable: true,
flag: place.code,
geoname: place.name,
id: place.code,
name: place.name,
type: 'Country',
lat: place.lat,

1
source/Ox.Geo/Ox.Geo.js
View file

@ -126,6 +126,7 @@ Ox.load.Geo = function(options, callback) {
@*/
Ox.getCountryByGeoname = function(geoname) {
// fixme: UAE correction doesn't belong here, fix in map
geoname = geoname.replace(' - United Arab Emirates', ', United Arab Emirates')
return Ox.getCountryByName(
geoname.split(', ').pop()

1
source/Ox.UI/css/Ox.UI.css
View file

@ -1116,7 +1116,6 @@ input[type=image].OxMapButton {
.OxMapLabel {
position: absolute;
height: 12px;
padding: 0 5px 0 5px;
font-size: 10px;
border-width: 2px;
}

1
source/Ox.UI/js/List/Ox.List.js
View file

@ -1091,6 +1091,7 @@ Ox.List = function(options, self) {
self.selected.push(pos);
!Ox.isUndefined(self.$items[pos]) &&
self.$items[pos].addClass('OxSelected');
i == 0 && scrollToPosition(pos);
});
}

6
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -627,7 +627,6 @@ Ox.TextList = function(options, self) {
self.setOption = function(key, value) {
if (key == 'items') {
//alert('request set!!')
that.$body.options(key, value);
} else if (key == 'paste') {
that.$body.options(key, value);
@ -744,8 +743,9 @@ Ox.TextList = function(options, self) {
that.value = function(id, key, value) {
// fixme: make this accept id, {k: v, ...}
Ox.print('value', id, key, value)
var $item = getItem(id),
//$cell = getCell(id, key),
$cell = getCell(id, key),
column = self.options.columns[getColumnIndexById(key)];
if (arguments.length == 1) {
return that.$body.value(id);
@ -753,8 +753,8 @@ Ox.TextList = function(options, self) {
return that.$body.value(id, key);
} else {
that.$body.value(id, key, value);
/*
$cell && $cell.html(column.format ? column.format(value) : value);
/*
if (column.unique) {
that.$body.setId($item.data('id'), value);
$item.data({id: value});

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

@ -251,19 +251,22 @@ Ox.ListMap = function(options, self) {
self.$placeTitlebar = Ox.Bar({
size: 24
});
self.$placeTitle = $('<div>')
.hide()
.appendTo(self.$placeTitlebar.$element)
self.$placeTitleFlag = $('<img>')
.addClass('OxFlag')
.attr({
src: Ox.PATH + 'Ox.Geo/png/icons/16/NTHH.png'
})
.css({float: 'left', margin: '4px 0 0 4px'})
.appendTo(self.$placeTitlebar.$element);
.appendTo(self.$placeTitle);
self.$placeTitleName = Ox.Label({
title: '',
width: 228
})
.css({float: 'left', margin: '4px'})
.appendTo(self.$placeTitlebar);
.appendTo(self.$placeTitle);
self.$placeFormItems = Ox.merge([
Ox.Input({
@ -271,12 +274,27 @@ Ox.ListMap = function(options, self) {
label: 'Name',
labelWidth: 64,
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({
id: 'geoname',
label: 'Geoname',
labelWidth: 64,
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({
id: 'alternativeNames',
@ -301,6 +319,10 @@ Ox.ListMap = function(options, self) {
max: max,
type: 'float',
width: 240
}).bindEvent({
focus: function() {
Ox.print('---- FOCUS ----')
}
});
}), [
Ox.Input({
@ -317,23 +339,45 @@ Ox.ListMap = function(options, self) {
items: self.$placeFormItems,
width: 240
})
.css({margin: '8px'});
.css({margin: '8px'})
.hide();
self.$placeStatusbar = Ox.Bar({
size: 16
})
.addClass('OxVideoPlayer'); // fixme!
size: 24
});
self.$savePlaceButton = Ox.Button({
self.$newPlaceButton = Ox.Button({
disabled: true,
id: 'savePlace',
title: 'check',
style: 'symbol',
tooltip: 'Save Place',
type: 'image',
//width: 80
title: 'New',
width: 64
})
.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);
/*
@ -369,6 +413,7 @@ Ox.ListMap = function(options, self) {
findPlaceholder: 'Find on Map',
height: self.options.height,
places: places,
//statusbar: true,
toolbar: true,
width: self.options.width - 514,//self.mapResize[1],
zoombar: true
@ -380,7 +425,7 @@ Ox.ListMap = function(options, self) {
changeplace: function(event, data) {
self.$placeForm.values(Ox.map(data, function(val, key) {
return key == 'size' ? Ox.formatArea(val) : val;
}));
})).show();
},
geocode: function(event, data) {
that.triggerEvent('geocode', data);
@ -430,7 +475,7 @@ Ox.ListMap = function(options, self) {
},
{
element: self.$placeStatusbar,
size: 16
size: 24
}
],
orientation: 'vertical'
@ -479,16 +524,24 @@ Ox.ListMap = function(options, self) {
function selectPlace(place) {
var country = place.id ? Ox.getCountryByGeoname(place.geoname) : '',
code = country ? country.code : 'NTHH';
place.id && place.id[0] != '_' && self.$list.options({
selected: place.id ? [place.id] : []
});
self.$placeTitleFlag.attr({
src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
});
self.$placeTitleName.options({title: place.geoname || ''});
self.$placeForm.values(Ox.map(place, function(val, key) {
return key == 'size' ? Ox.formatArea(val) : val;
}));
if (place.id) {
self.selectedPlace = place.id;
place.id[0] != '_' && self.$list.options({
selected: place.id ? [place.id] : []
});
self.$placeTitleFlag.attr({
src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
});
self.$placeTitleName.options({title: place.geoname || ''});
self.$placeTitle.show();
self.$placeForm.values(Ox.map(place, function(val, key) {
return key == 'size' ? Ox.formatArea(val) : val;
})).show();
} else {
self.selectedPlace = null;
self.$placeTitle.hide();
self.$placeForm.hide();
}
}
function toFixed(val) {

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

@ -873,7 +873,7 @@ Ox.Map = function(options, self) {
var metersPerPixel = getMetersPerPixel();
Ox.forEach(self.scaleMeters, function(meters) {
var scaleWidth = Math.round(meters / metersPerPixel);
if (scaleWidth <= 256) {
if (scaleWidth <= self.options.width / 2 - 4) {
self.$scaleLabel
.options({
title: '\u2190 ' + (
@ -881,7 +881,7 @@ Ox.Map = function(options, self) {
) + 'm \u2192'
})
.css({
width: (scaleWidth - 10) + 'px'
width: (scaleWidth - 16) + 'px'
})
return false;
}
@ -1030,6 +1030,10 @@ Ox.Map = function(options, self) {
}
};
that.addPlace = function() {
addPlaceToMap(getSelectedPlace());
};
that.getKey = function() {
var key = null;
if (self.shiftKey) {
@ -1057,6 +1061,10 @@ Ox.Map = function(options, self) {
});
};
that.newPlace = function() {
addPlaceToMap();
};
that.panToPlace = function() {
Ox.print('panToPlace:', self.options.selected)
var place = getSelectedPlace();
@ -1108,6 +1116,13 @@ Ox.Map = function(options, self) {
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() {
Ox.print('zoomToPlace')
var place = getSelectedPlace();

4
tools/geo/py/geo.py
View file

@ -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/
-- entities with country codes, according to
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,
both will used by html/geo.html
@ -189,7 +191,7 @@ geo = {
'Rhodesia': ['Zimbabwe'],
'Siam': ['Thailand'],
'Upper Volta': ['Burkina Faso'],
'Yugoslavia': ['Serbia and Montenegro'],
'Yugoslavia': ['Serbia and Montenegro'], # fixme: shape and flag suggest 'split'
'Zaire': ['Democratic Republic of the Congo'],
# split
'Czechoslovakia': ['Czech Republic', 'Slovakia'],