diff --git a/demos/listmap/js/listmap.js b/demos/listmap/js/listmap.js index a85257b9..7edab93a 100644 --- a/demos/listmap/js/listmap.js +++ b/demos/listmap/js/listmap.js @@ -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, diff --git a/source/Ox.Geo/Ox.Geo.js b/source/Ox.Geo/Ox.Geo.js index 48f861b3..137e2766 100644 --- a/source/Ox.Geo/Ox.Geo.js +++ b/source/Ox.Geo/Ox.Geo.js @@ -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() diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 639f0491..72fc38f2 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1116,7 +1116,6 @@ input[type=image].OxMapButton { .OxMapLabel { position: absolute; height: 12px; - padding: 0 5px 0 5px; font-size: 10px; border-width: 2px; } diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index 0180512f..48459443 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -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); }); } diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index 486d41b3..ca2d221e 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -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); /* - $cell && $cell.html(column.format ? column.format(value) : value); if (column.unique) { that.$body.setId($item.data('id'), value); $item.data({id: value}); diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index c56c4145..7f501f59 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -251,19 +251,22 @@ Ox.ListMap = function(options, self) { self.$placeTitlebar = Ox.Bar({ size: 24 }); + self.$placeTitle = $('
') + .hide() + .appendTo(self.$placeTitlebar.$element) self.$placeTitleFlag = $('') .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) { diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 61217ab4..82c0d613 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -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(); diff --git a/tools/geo/py/geo.py b/tools/geo/py/geo.py index 7aab349a..bd6cf2d1 100644 --- a/tools/geo/py/geo.py +++ b/tools/geo/py/geo.py @@ -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'],