diff --git a/demos/listmap2/js/listmap.js b/demos/listmap2/js/listmap.js index bef5ed67..4cccb4ef 100644 --- a/demos/listmap2/js/listmap.js +++ b/demos/listmap2/js/listmap.js @@ -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 }) diff --git a/demos/map/js/map.js b/demos/map/js/map.js index 9e2020c1..c3aac8b3 100644 --- a/demos/map/js/map.js +++ b/demos/map/js/map.js @@ -1,4 +1,5 @@ Ox.load('UI', {debug: true}, function() { +Ox.load('Geo', function() { $.getJSON('json/countries.json', function(data) { @@ -126,4 +127,5 @@ Ox.load('UI', {debug: true}, function() { }); +}); }); \ No newline at end of file diff --git a/source/Ox.Geo/Ox.Geo.js b/source/Ox.Geo/Ox.Geo.js index 4d0e2127..96280d92 100644 --- a/source/Ox.Geo/Ox.Geo.js +++ b/source/Ox.Geo/Ox.Geo.js @@ -93,6 +93,23 @@ Ox.load.Geo = function(options, callback) { return country; }; + /*@ + Ox.getCountryByGeoname Returns a country object for a given geoname + (name) -> Country object + name 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 Returns a country object for a given country name (name) -> Country object diff --git a/source/Ox.Geo/json/Ox.Geo.json b/source/Ox.Geo/json/Ox.Geo.json index 02adc6f0..8ea29f39 100644 --- a/source/Ox.Geo/json/Ox.Geo.json +++ b/source/Ox.Geo/json/Ox.Geo.json @@ -5085,7 +5085,7 @@ "west": 12.4035885 }, { - "code": "NT", + "code": "NTHH", "dependencies": [], "dependency": [ "Iraq", diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 42bbe7e3..639f0491 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1121,6 +1121,12 @@ input[type=image].OxMapButton { border-width: 2px; } +.OxFlag { + width: 16px; + height: 16px; + border-radius: 8px; +} + /* ================================================================================ Menus diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index dbfa348e..486d41b3 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -10,11 +10,13 @@ Ox.TextList TextList Object Fixme: There's probably more... addable editable + format id removable operator default sort operator sort function that maps values to sort values title + unique If true, this column acts as unique id visible width columnsMovable @@ -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 = $('
') .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); } } - that.$body.sortList( - self.options.sort[0].key, - self.options.sort[0].operator, - self.options.columns[self.selectedColumn].sort - ); + // 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; }; diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 324fa8f0..bd766086 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -41,6 +41,42 @@ Ox.ListMap = function(options, self) { unique: true, visible: false }, + { + format: function(value) { + return $('') + .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: '', + 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 $('') - .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 = $('') + .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; })); } diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 1e6653ea..15004f95 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -260,19 +260,26 @@ Ox.Map = function(options, self) { bottom: 0 }) .appendTo(that); + self.$placeFlag = $('') + .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,12 +979,14 @@ 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) - }); - self.$placeGeonameInput && self.$placeGeonameInput.options({ - width: Math.ceil((width - 112) / 2) - }); + if (self.options.statusbar) { + self.$placeNameInput.options({ + width: Math.floor((width - 132) / 2) + }); + self.$placeGeonameInput.options({ + width: Math.ceil((width - 132) / 2) + }); + } } function zoom(z) { diff --git a/source/Ox.UI/js/Map/Ox.MapMarkerImage.js b/source/Ox.UI/js/Map/Ox.MapMarkerImage.js index 560f79a6..9ca6f0ce 100644 --- a/source/Ox.UI/js/Map/Ox.MapMarkerImage.js +++ b/source/Ox.UI/js/Map/Ox.MapMarkerImage.js @@ -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]) :