improve listmap editing functionality

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,

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()

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;
 }

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);
         });
     }
 

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);            
+            /*
             if (column.unique) {
                 that.$body.setId($item.data('id'), value);
                 $item.data({id: value});

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 = $('<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
+            size: 24
-        })
+        });
-        .addClass('OxVideoPlayer'); // fixme!
 
-    self.$savePlaceButton = Ox.Button({
+    self.$newPlaceButton = Ox.Button({
             disabled: true,
-            id: 'savePlace',
+            title: 'New',
-            title: 'check',
+            width: 64
-            style: 'symbol',
-            tooltip: 'Save Place',
-            type: 'image',
-            //width: 80
         })
-        .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({
+        if (place.id) {
-            selected: place.id ? [place.id] : []
+            self.selectedPlace = place.id;
-        });
+            place.id[0] != '_' && self.$list.options({
-        self.$placeTitleFlag.attr({
+                selected: place.id ? [place.id] : []
-            src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
+            });
-        });
+            self.$placeTitleFlag.attr({
-        self.$placeTitleName.options({title: place.geoname || ''});
+                src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
-        self.$placeForm.values(Ox.map(place, function(val, key) {
+            });
-            return key == 'size' ? Ox.formatArea(val) : val;
+            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) {

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();

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'],