improve listmap editing functionality

demos/listmap/js/listmap.js

@@ -9,6 +9,7 @@ Ox.load('UI', {
                 height: window.innerHeight,
                 places: Ox.map(Ox.COUNTRIES, function(place) {
                     return {
+                        alternativeNames: place.googleName ? [place.googleName] : [],
                         area: place.area,
                         countryCode: place.code,
                         editable: true,

source/Ox.UI/js/Form/Ox.ArrayInput.js

@@ -132,9 +132,14 @@ Ox.ArrayInput = function(options, self) {
 
     self.setOption = function(key, value) {
         if (key == 'value') {
-            return Ox.map(self.$input, function($input) {
+            if (self.options.value.length == 0) {
-                var value = $input.value();
+                self.options.value = [''];
-                return value === '' ? null : value;
+            }
+            self.$input && self.$input.forEach(function($input, i) {
+                removeInput(i);
+            });
+            self.options.value.forEach(function(value, i) {
+                addInput(i, value);
             });
         } else if (key == 'width') {
             setWidths();

source/Ox.UI/js/Form/Ox.Form.js

@@ -123,7 +123,7 @@ Ox.Form = function(options, self) {
         } else {
             Ox.forEach(arguments[0], function(value, key) {
                 var index = getItemIndexById(key);
-                //index > -1 && Ox.print(key, value)
+                index > -1 && Ox.print(':::::::', key, value)
                 index > -1 && self.options.items[index].options({value: value});
             });
             return that;

source/Ox.UI/js/List/Ox.List.js

@@ -1240,11 +1240,16 @@ Ox.List = function(options, self) {
     }
 
     self.setOption = function(key, value) {
-        //Ox.print('list onChange', key, value);
+        Ox.print('list setOption', key, value);
         if (key == 'items') {
-            updateQuery();
+            if (Ox.typeOf(value) == 'array') {
+                loadItems();
+                updateSort();
+            } else {
+                updateQuery();
+            }
         } else if (key == 'selected') {
-            Ox.print('onChange selected', value)
+            Ox.print('setOption selected', value)
             setSelected(value);
         }
     };

source/Ox.UI/js/List/Ox.TextList.js

@@ -626,6 +626,7 @@ Ox.TextList = function(options, self) {
     }
 
     self.setOption = function(key, value) {
+        Ox.print('---------------------------- TextList setOption', key, value)
         if (key == 'items') {
             that.$body.options(key, value);
         } else if (key == 'paste') {
@@ -638,6 +639,14 @@ Ox.TextList = function(options, self) {
     // fixme: doesn't work, doesn't return that
     that.closePreview = that.$body.closePreview;
 
+    that.addItem = function(item) {
+        /*
+        self.options.items.push(item);
+        that.$body.options({items: self.options.items});
+        //that.$body.options({selected: [item.id]});
+        */
+    }
+
     that.editCell = function(id, key) {
         Ox.print('editCell', id, key)
         var $item = getItem(id),

source/Ox.UI/js/Map/Ox.ListMap.js

@@ -86,6 +86,18 @@ Ox.ListMap = function(options, self) {
             visible: true,
             width: 144
         },
+        {
+            editable: false,
+            format: function(value) {
+                return value.join('; ');
+            },
+            id: 'alternativeNames',
+            removable: false,
+            operator: '+',
+            title: 'Alternative Names',
+            visible: true,
+            width: 144
+        },
         {
             editable: true,
             id: 'geoname',
@@ -222,7 +234,7 @@ Ox.ListMap = function(options, self) {
             columns: self.columns,
             columnsRemovable: true,
             columnsVisible: true,
-            items: self.options.places,
+            items: Ox.clone(self.options.places),
             pageLength: 100,
             scrollbarVisible: true,
             sort: [
@@ -303,6 +315,10 @@ Ox.ListMap = function(options, self) {
             //sort: true,
             values: [],
             width: 240
+        }).bindEvent({
+            change: function(data) {
+                Ox.print('CHANGE........', data)
+            }
         }),
     ], ['South', 'West', 'North', 'East', 'Latitude', 'Longitude'].map(function(v) {
         var id = (
@@ -325,10 +341,10 @@ Ox.ListMap = function(options, self) {
             }
         });
     }), [
-        Ox.Input({
+        self.$areaInput = Ox.Input({
             disabled: true,
-            id: 'size',
+            id: 'area',
-            label: 'Size',
+            label: 'Area',
             labelWidth: 80,
             textAlign: 'right',
             width: 240
@@ -346,53 +362,44 @@ Ox.ListMap = function(options, self) {
             size: 24
         });
 
-    self.$newPlaceButton = Ox.Button({
+    self.$placeButton = Ox.Button({
             title: 'New Place',
             width: 96
         })
-        .css({float: 'left', margin: '4px'})
+        .css({float: 'left', margin: '4px 2px 4px 4px'})
         .bindEvent({
             click: function() {
-                self.$map.newPlace();
+                var title = self.$placeButton.options('title');
+                if (title == 'New Place') {
+                    self.$map.newPlace();
+                    self.$placeButton.options({title: 'Add Place'})
+                } else if (title == 'Add Place') {
+                    var place = self.$placeForm.values();
+                    place.id = self.selectedPlace.substr(1); // fixme: safe?
+                    self.options.places.push(place);
+                    self.$map.addPlace(place);
+                    self.$list.options({items: Ox.clone(self.options.places)});
+                    self.$list.options({selected: [place.id]});
+                    //self.$list.addItem(place);
+                    self.$placeButton.options({title: 'Remove Place'})
+                } else if (title == 'Remove Place') {
+                    var index = Ox.getPositionById(self.options.places, self.selectedPlace);
+                    self.options.places.splice(index, 1);
+                    self.$list.options({items: Ox.clone(self.options.places)});
+                    self.$map.removePlace();
+                    self.$placeButton.options({title: 'Add Place'});
+                }
+                Ox.print('PLACES.LENGTH', self.options.places.length)
+                Ox.print('ITEMS.LENGTH', self.$list.options('items').length)
             }
         })
         .appendTo(self.$placeStatusbar);
 
-    self.$removePlaceButton = Ox.Button({
+    self.$revertButton = Ox.Button({
-            title: 'Remove Place',
-            width: 96
-        })
-        .css({float: 'left', margin: '4px'})
-        .hide()
-        .bindEvent({
-            click: function() {
-                self.$map.removePlace(self.selectedPlace);
-                self.$removePlaceButton.hide();
-                self.$addPlaceButton.show();
-            }
-        })
-        .appendTo(self.$placeStatusbar);
-
-    self.$addPlaceButton = Ox.Button({
-            title: 'Add Place',
-            width: 96
-        })
-        .css({float: 'left', margin: '4px'})
-        .bindEvent({
-            click: function() {
-                self.$map.addPlace(self.$placeForm.values);
-                self.$addPlaceButton.hide();
-                self.$removePlaceButton.show();
-            }
-        })
-        .hide()
-        .appendTo(self.$placeStatusbar);
-
-    self.$revertPlaceButton = Ox.Button({
             title: 'Revert',
             width: 96
         })
-        .css({float: 'right', margin: '4px'})
+        .css({float: 'right', margin: '4px 4px 4px 2px'})
         .hide()
         .appendTo(self.$placeStatusbar);
 
@@ -440,6 +447,7 @@ Ox.ListMap = function(options, self) {
                 },
                 changeplace: function(event, data) {
                     self.$placeForm.values(Ox.map(data, function(val, key) {
+                        // fixme: no size key anymore
                         return key == 'size' ? Ox.formatArea(val) : val;
                     })).show();
                 },
@@ -506,7 +514,7 @@ Ox.ListMap = function(options, self) {
                             }
                         }),
                         resizable: true,
-                        resize: [128, 256, 384],
+                        resize: [204, 256, 384],
                         size: 256
                     }
                 ],
@@ -551,26 +559,23 @@ Ox.ListMap = function(options, self) {
             });
             self.$placeTitleName.options({title: place.geoname || ''});
             self.$placeTitle.show();
+            Ox.print('>>>>', place)
             self.$placeForm.values(Ox.map(place, function(val, key) {
                 return key == 'size' ? Ox.formatArea(val) : val;
             })).show();
-            self.$newPlaceButton.hide();
+            self.$placeButton.options({title: isResult ? 'Add Place' : 'Remove Place'});
-            self.$addPlaceButton[isResult ? 'show' : 'hide']();
+            self.$revertButton.options({disabled: true}).show();
-            self.$removePlaceButton[isResult ? 'hide' : 'show']();
-            self.$revertPlaceButton.options({disabled: true}).show();
         } else {
             self.selectedPlace = null;
             self.$placeTitle.hide();
             self.$placeForm.hide();
-            self.$newPlaceButton.show();
+            self.$placeButton.options({title: 'New Place'});
-            self.$addPlaceButton.hide();
+            self.$revertButton.hide();
-            self.$removePlaceButton.hide();
-            self.$revertPlaceButton.hide();
         }
     }
 
     function toFixed(val) {
-        return val.toFixed(8);
+        return Ox.isNumber(val) ? val.toFixed(8) : val; // fixme: why can a string be passed ??
     }
 
     /*@