1
0
Fork 0
forked from 0x2620/oxjs

some more work on map/listmap

This commit is contained in:
rolux 2011-05-22 19:12:21 +02:00
commit 4d9a8537ef
9 changed files with 140 additions and 77 deletions

View file

@ -41,6 +41,42 @@ Ox.ListMap = function(options, self) {
unique: true,
visible: false
},
{
format: function(value) {
return $('<img>')
.attr({
// fixme: not the right place to do this
src: Ox.PATH + 'Ox.Geo/png/icons/16/' + (value || 'NTHH') + '.png'
})
.css({
width: '14px',
height: '14px',
marginLeft: '-3px',
marginTop: 0
});
/*
.css({
width: '21px',
height: '14px'
})
.load(function() {
var $this = $(this);
Ox.print($this.width() / $this.height())
$this.css({
width: Math.round(14 * $this.width() / $this.height()) + 'px',
height: '14px',
padding: '1px 0 0 1px'
});
});
*/
},
id: 'countryCode',
resizable: false, // fixme: implement
title: '<img src="' + Ox.UI.getImagePath('symbolFlag.svg') +
'" style="width: 10px; height: 10px; padding: 3px 1px 1px 3px"/>',
visible: true,
width: 16
},
{
editable: true,
id: 'name',
@ -62,39 +98,6 @@ Ox.ListMap = function(options, self) {
visible: true,
width: 192
},
{
format: function(value) {
return $('<img>')
.attr({
// fixme: not the right place to do this
src: Ox.PATH + 'Ox.Geo/png/icons/16/' + (value || 'NTHH') + '.png'
})
.css({
width: '14px',
height: '14px'
});
/*
.css({
width: '21px',
height: '14px'
})
.load(function() {
var $this = $(this);
Ox.print($this.width() / $this.height())
$this.css({
width: Math.round(14 * $this.width() / $this.height()) + 'px',
height: '14px',
padding: '1px 0 0 1px'
});
});
*/
},
id: 'countryCode',
operator: '+',
title: 'Flag',
visible: true,
width: 48
},
{
align: 'right',
format: {type: 'area', args: [0]},
@ -245,17 +248,22 @@ Ox.ListMap = function(options, self) {
.html(self.options.places.length + ' Place' + (self.options.places.length == 1 ? '' : 's'))
.appendTo(self.$listStatusbar);
self.$placeToolbar = Ox.Bar({
self.$placeTitlebar = Ox.Bar({
size: 24
});
self.$newPlaceButton = Ox.Button({
id: 'newPlace',
title: 'New Place',
width: 80
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);
self.$placeTitleName = Ox.Label({
title: '',
width: 228
})
.css({float: 'left', margin: '4px'})
.appendTo(self.$placeToolbar);
.appendTo(self.$placeTitlebar);
self.$placeFormItems = Ox.merge([
Ox.Input({
@ -361,7 +369,6 @@ 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
@ -415,7 +422,7 @@ Ox.ListMap = function(options, self) {
element: Ox.SplitPanel({
elements: [
{
element: self.$placeToolbar,
element: self.$placeTitlebar,
size: 24
},
{
@ -429,8 +436,9 @@ Ox.ListMap = function(options, self) {
orientation: 'vertical'
})
.bindEvent({
// fixme: pass width through form
resize: function(foo, size) {
self.$placeTitleName.options({width: size - 28});
// fixme: pass width through form
self.$placeFormItems.forEach(function($item) {
$item.options({width: size - 16});
});
@ -468,12 +476,17 @@ Ox.ListMap = function(options, self) {
id && self.$map.panToPlace();
}
function selectPlace(event, data) {
Ox.print('selectPlace', data, data.id)
data.id && data.id[0] != '_' && self.$list.options({
selected: data.id ? [data.id] : []
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.$placeForm.values(Ox.map(data, function(val, key) {
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;
}));
}