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

some more work on map/listmap

Browse source
This commit is contained in:
rolux 2011-05-22 19:12:21 +02:00
parent a3c18e57b0
commit 4d9a8537ef
9 changed files with 140 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demos/listmap2/js/listmap.js
View file

@ -5,11 +5,11 @@ Ox.load('UI', {
Ox.load('Geo', function() {
Ox.getJSON('json/cities1000000.json', function(data) {
Ox.getJSON('json/cities100000.json', function(cities) {
var listmap = new Ox.ListMap({
height: window.innerHeight,
places: data.map(function(city, id) {
places: Ox.map(cities, function(city, id) {
var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} :
city.population > 10000000 ? {size: 22, color: [255, 32, 0]} :
@ -23,12 +23,12 @@ Ox.load('Geo', function() {
size = Math.sqrt(city.population * 100),
latSize = size / Ox.EARTH_CIRCUMFERENCE * 360,
lngSize = size * Ox.getDegreesPerMeter(city.latitude);
return {
return city.population > 400000 ? {
countryCode: countryCode,
editable: true,
flag: countryCode,
geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
id: id,
id: Ox.encodeBase32(id),
markerColor: marker.color,
markerSize: marker.size,
name: city.name,
@ -40,7 +40,7 @@ Ox.load('Geo', function() {
west: city.longitude - lngSize / 2,
north: city.latitude + latSize / 2,
east: city.longitude + lngSize / 2
};
} : null;
}),
width: window.innerWidth
})

2
demos/map/js/map.js
View file

@ -1,4 +1,5 @@
Ox.load('UI', {debug: true}, function() {
Ox.load('Geo', function() {
$.getJSON('json/countries.json', function(data) {
@ -127,3 +128,4 @@ Ox.load('UI', {debug: true}, function() {
});
});
});

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

@ -93,6 +93,23 @@ Ox.load.Geo = function(options, callback) {
return country;
};
/*@
Ox.getCountryByGeoname <f> Returns a country object for a given geoname
(name) -> <o> Country object
name <s> Geoname
> Ox.getCountryByGeoname('Los Angeles, California, United States').code
'US'
> Ox.getCountryByGeoname('The Bottom, Saba, Bonaire, Saint Eustatius and Saba').code
'BQ'
@*/
Ox.getCountryByGeoname = function(geoname) {
return Ox.getCountryByName(
geoname.split(', ').pop()
.replace('Saint Eustatius', 'Bonaire, Saint Eustatius')
);
}
/*@
Ox.getCountryByName <f> Returns a country object for a given country name
(name) -> <o> Country object

2
source/Ox.Geo/json/Ox.Geo.json
View file

@ -5085,7 +5085,7 @@
"west": 12.4035885
},
{
"code": "NT",
"code": "NTHH",
"dependencies": [],
"dependency": [
"Iraq",

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

@ -1121,6 +1121,12 @@ input[type=image].OxMapButton {
border-width: 2px;
}
.OxFlag {
width: 16px;
height: 16px;
border-radius: 8px;
}
/*
================================================================================
Menus

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

@ -10,11 +10,13 @@ Ox.TextList <f:Ox.Element> TextList Object
Fixme: There's probably more...
addable <b>
editable <b>
format <f>
id <s>
removable <b>
operator <s> default sort operator
sort <f> function that maps values to sort values
title <s>
unique <b> If true, this column acts as unique id
visible <b>
width <n>
columnsMovable <b|false>
@ -274,10 +276,18 @@ Ox.TextList = function(options, self) {
textAlign: v.align
})
.html(v.title)
.bindEvent({
.appendTo(that.$head.$content.$element);
// if sort operator is set, bind click event
if (v.operator) {
that.$titles[i].bindEvent({
anyclick: function(event, e) {
clickColumn(v.id);
},
}
});
}
// if columns are movable, bind drag events
if (self.options.columnsMovable) {
that.$titles[i].bindEvent({
dragstart: function(event, e) {
dragstartColumn(v.id, e);
},
@ -288,7 +298,7 @@ Ox.TextList = function(options, self) {
dragendColumn(v.id, e);
}
})
.appendTo(that.$head.$content.$element);
}
$order = $('<div>')
.addClass('OxOrder')
.html(Ox.UI.symbols['triangle_' + (
@ -301,6 +311,7 @@ Ox.TextList = function(options, self) {
$resize = new Ox.Element()
.addClass('OxResize')
.appendTo(that.$head.$content.$element);
// if columns are resizable, bind click and drag events
if (self.options.columnsResizable) {
$resize.addClass('OxResizable')
.bindEvent({
@ -325,8 +336,6 @@ Ox.TextList = function(options, self) {
that.$head.$content.css({
width: (Ox.sum(self.columnWidths) + 2) + 'px'
});
//Ox.print('s.sC', self.selectedColumn)
//Ox.print('s.cO', self.columnOffsets)
if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
toggleSelected(self.options.columns[self.selectedColumn].id);
that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
@ -721,11 +730,15 @@ Ox.TextList = function(options, self) {
toggleSelected(self.options.columns[self.selectedColumn].id);
}
}
// fixme: strangely, sorting the list blocks toggling the selection,
// so we use a timeout for now
setTimeout(function() {
that.$body.sortList(
self.options.sort[0].key,
self.options.sort[0].operator,
self.options.columns[self.selectedColumn].sort
);
}, 10);
return that;
};

109
source/Ox.UI/js/Map/Ox.ListMap.js
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;
}));
}

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

@ -260,19 +260,26 @@ Ox.Map = function(options, self) {
bottom: 0
})
.appendTo(that);
self.$placeFlag = $('<img>')
.addClass('OxFlag')
.attr({
src: Ox.PATH + 'Ox.Geo/png/icons/16/NTHH.png'
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.appendTo(self.$statusbar.$element);
self.$placeNameInput = new Ox.Input({
placeholder: 'Name',
width: 96
})
//.css({position: 'absolute', left: 4, top: 4})
.css({float: 'left', margin: '4px 1px 4px 4px'})
.css({float: 'left', margin: '4px 2px 4px 2px'})
.appendTo(self.$statusbar);
self.$placeGeonameInput = new Ox.Input({
placeholder: 'Geoname',
width: 96
})
//.css({position: 'absolute', left: 104, top: 4})
.css({float: 'left', margin: '4px 1px 4px 4px'})
.css({float: 'left', margin: '4px 2px 4px 2px'})
.appendTo(self.$statusbar);
self.$placeButton = new Ox.Button({
title: 'New Place',
@ -407,7 +414,7 @@ Ox.Map = function(options, self) {
place.id = place.id.substr(1); // fixme: NOT SAFE!
place.name = self.$placeNameInput.value();
place.geoname = self.$placeGeonameInput.value();
place.countryCode = Ox.getCountryCode(place.geoname);
place.countryCode = Ox.getCountryByGeoname(place.geoname).code;
place.marker.update();
self.places.push(place);
self.resultPlace = null;
@ -880,15 +887,20 @@ Ox.Map = function(options, self) {
function setStatus() {
Ox.print('setStatus()', self.options.selected)
var disabled, place, title;
var code, country, disabled, place, title;
if (self.options.statusbar) {
place = getSelectedPlace();
country = place ? Ox.getCountryByGeoname(place.geoname) : '';
code = country ? country.code : 'NTHH';
disabled = place && !place.editable;
if (place) {
title = place.id[0] == '_' ? 'Add Place' : 'Remove Place';
} else {
title = 'New Place';
}
disabled = place && !place.editable;
self.$placeFlag.attr({
src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
});
self.$placeNameInput.options({
disabled: disabled,
value: place ? place.name : ''
@ -967,13 +979,15 @@ Ox.Map = function(options, self) {
function updateFormElements() {
var width = that.width();
self.$zoomInput && constructZoomInput();
self.$placeNameInput && self.$placeNameInput.options({
width: Math.floor((width - 112) / 2)
if (self.options.statusbar) {
self.$placeNameInput.options({
width: Math.floor((width - 132) / 2)
});
self.$placeGeonameInput && self.$placeGeonameInput.options({
width: Math.ceil((width - 112) / 2)
self.$placeGeonameInput.options({
width: Math.ceil((width - 132) / 2)
});
}
}
function zoom(z) {
self.map.setZoom(self.map.getZoom() + z);

2
source/Ox.UI/js/Map/Ox.MapMarkerImage.js
View file

@ -27,8 +27,6 @@ Ox.MapMarkerImage = (function() {
options.type, options.mode, options.size, options.color.join(',')
].join(';');
Ox.print('HELLO??')
if (!cache[index]) {
var color = options.type == 'place' ?
Ox.merge(Ox.clone(options.color), [0.5]) :