improve listmap editing functionality
This commit is contained in:
parent
76606689d7
commit
02442a24f7
6 changed files with 81 additions and 56 deletions
|
@ -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,
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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') {
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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() {
|
||||
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 ??
|
||||
}
|
||||
|
||||
/*@
|
||||
|
|
Loading…
Reference in a new issue