From 02442a24f7193b94b9f61663cc975ec8918cd558 Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 24 May 2011 12:44:34 +0200 Subject: [PATCH] improve listmap editing functionality --- demos/listmap/js/listmap.js | 1 + source/Ox.UI/js/Form/Ox.ArrayInput.js | 11 ++- source/Ox.UI/js/Form/Ox.Form.js | 2 +- source/Ox.UI/js/List/Ox.List.js | 11 ++- source/Ox.UI/js/List/Ox.TextList.js | 9 +++ source/Ox.UI/js/Map/Ox.ListMap.js | 103 ++++++++++++++------------ 6 files changed, 81 insertions(+), 56 deletions(-) diff --git a/demos/listmap/js/listmap.js b/demos/listmap/js/listmap.js index 7edab93a..5807ce48 100644 --- a/demos/listmap/js/listmap.js +++ b/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, diff --git a/source/Ox.UI/js/Form/Ox.ArrayInput.js b/source/Ox.UI/js/Form/Ox.ArrayInput.js index e6beb960..f3897631 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayInput.js +++ b/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) { - var value = $input.value(); - return value === '' ? null : value; + if (self.options.value.length == 0) { + self.options.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(); diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js index 4bab6825..888f74d0 100644 --- a/source/Ox.UI/js/Form/Ox.Form.js +++ b/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; diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index 48459443..41b62619 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/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); } }; diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index ca2d221e..b0809a5b 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/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), diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index a43b2479..b9a120db 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/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', - label: 'Size', + id: 'area', + 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({ - 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({ + self.$revertButton = 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.$addPlaceButton[isResult ? 'show' : 'hide'](); - self.$removePlaceButton[isResult ? 'hide' : 'show'](); - self.$revertPlaceButton.options({disabled: true}).show(); + self.$placeButton.options({title: isResult ? 'Add Place' : 'Remove Place'}); + self.$revertButton.options({disabled: true}).show(); } else { self.selectedPlace = null; self.$placeTitle.hide(); self.$placeForm.hide(); - self.$newPlaceButton.show(); - self.$addPlaceButton.hide(); - self.$removePlaceButton.hide(); - self.$revertPlaceButton.hide(); + self.$placeButton.options({title: 'New Place'}); + self.$revertButton.hide(); } } function toFixed(val) { - return val.toFixed(8); + return Ox.isNumber(val) ? val.toFixed(8) : val; // fixme: why can a string be passed ?? } /*@