allow for setting the selected id of an Ox.List to an id that is currently not in view
This commit is contained in:
parent
93408b0b4d
commit
0e835cc116
4 changed files with 38 additions and 16 deletions
|
@ -71,7 +71,7 @@ Ox.load('Geo', function() {
|
||||||
} else {
|
} else {
|
||||||
data.items = places;
|
data.items = places;
|
||||||
if (options.query) {
|
if (options.query) {
|
||||||
// only case is key: 'id', value: ..., operator: '='
|
// only case is key: 'id', value: ..., operator: '^$'
|
||||||
data.items = data.items.filter(function(place) {
|
data.items = data.items.filter(function(place) {
|
||||||
return place[options.query.key] == options.query.value;
|
return place[options.query.key] == options.query.value;
|
||||||
});
|
});
|
||||||
|
|
|
@ -87,6 +87,7 @@ Ox.List = function(options, self) {
|
||||||
clickTimeout: 0,
|
clickTimeout: 0,
|
||||||
dragTimeout: 0,
|
dragTimeout: 0,
|
||||||
format: {},
|
format: {},
|
||||||
|
isAsync: Ox.isFunction(self.options.items),
|
||||||
itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
|
itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
|
||||||
keyboardEvents: {
|
keyboardEvents: {
|
||||||
key_control_c: copyItems,
|
key_control_c: copyItems,
|
||||||
|
@ -163,7 +164,7 @@ Ox.List = function(options, self) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Ox.isArray(self.options.items)) {
|
if (!self.isAsync) {
|
||||||
self.listLength = self.options.items.length;
|
self.listLength = self.options.items.length;
|
||||||
loadItems();
|
loadItems();
|
||||||
} else {
|
} else {
|
||||||
|
@ -556,7 +557,6 @@ Ox.List = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPositions(ids) {
|
function getPositions(ids) {
|
||||||
// Ox.print('getPositions', ids)
|
|
||||||
ids = ids || getSelectedIds();
|
ids = ids || getSelectedIds();
|
||||||
Ox.print('getPositions', ids)
|
Ox.print('getPositions', ids)
|
||||||
// fixme: optimize: send non-selected ids if more than half of the items are selected
|
// fixme: optimize: send non-selected ids if more than half of the items are selected
|
||||||
|
@ -629,7 +629,7 @@ Ox.List = function(options, self) {
|
||||||
//Ox.print('gSI', self.selected, self.$items)
|
//Ox.print('gSI', self.selected, self.$items)
|
||||||
return $.map(self.selected, function(pos) {
|
return $.map(self.selected, function(pos) {
|
||||||
//Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique])
|
//Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique])
|
||||||
//Ox.print('2222', self.$items, pos)
|
Ox.print('gsI', pos)
|
||||||
return self.$items[pos].options('data')[self.options.unique];
|
return self.$items[pos].options('data')[self.options.unique];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -916,7 +916,7 @@ Ox.List = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function scroll() {
|
function scroll() {
|
||||||
if (Ox.isFunction(self.options.items)) {
|
if (self.isAsync) {
|
||||||
var page = self.page;
|
var page = self.page;
|
||||||
self.scrollTimeout && clearTimeout(self.scrollTimeout);
|
self.scrollTimeout && clearTimeout(self.scrollTimeout);
|
||||||
self.scrollTimeout = setTimeout(function() {
|
self.scrollTimeout = setTimeout(function() {
|
||||||
|
@ -1079,10 +1079,12 @@ Ox.List = function(options, self) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSelected(ids) {
|
function setSelected(ids, callback) {
|
||||||
|
// fixme: no case where callback is set
|
||||||
// fixme: can't use selectNone here,
|
// fixme: can't use selectNone here,
|
||||||
// since it'd trigger a select event
|
// since it'd trigger a select event
|
||||||
Ox.print('setSelected', ids)
|
Ox.print('setSelected', ids)
|
||||||
|
var counter = 0;
|
||||||
self.$items.forEach(function($item, pos) {
|
self.$items.forEach(function($item, pos) {
|
||||||
if (isSelected(pos)) {
|
if (isSelected(pos)) {
|
||||||
self.selected.splice(self.selected.indexOf(pos), 1);
|
self.selected.splice(self.selected.indexOf(pos), 1);
|
||||||
|
@ -1092,12 +1094,27 @@ Ox.List = function(options, self) {
|
||||||
});
|
});
|
||||||
ids.forEach(function(id, i) {
|
ids.forEach(function(id, i) {
|
||||||
var pos = getPositionById(id);
|
var pos = getPositionById(id);
|
||||||
|
if (pos > -1) {
|
||||||
|
select(pos, i);
|
||||||
|
} else {
|
||||||
|
// async and id not in current view
|
||||||
|
self.options.items({
|
||||||
|
ids: [id],
|
||||||
|
sort: self.options.sort
|
||||||
|
}, function(results) {
|
||||||
|
pos = results.data.positions[id];
|
||||||
|
select(pos, i);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function select(pos, i) {
|
||||||
Ox.print('pushing', pos, 'onto self.selected')
|
Ox.print('pushing', pos, 'onto self.selected')
|
||||||
self.selected.push(pos);
|
self.selected.push(pos);
|
||||||
!Ox.isUndefined(self.$items[pos]) &&
|
!Ox.isUndefined(self.$items[pos]) &&
|
||||||
self.$items[pos].addClass('OxSelected');
|
self.$items[pos].addClass('OxSelected');
|
||||||
i == 0 && scrollToPosition(pos);
|
i == 0 && scrollToPosition(pos);
|
||||||
});
|
++counter == ids.length && callback && callback();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleSelection(pos) {
|
function toggleSelection(pos) {
|
||||||
|
@ -1118,7 +1135,8 @@ Ox.List = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function triggerSelectEvent() {
|
function triggerSelectEvent() {
|
||||||
var ids = self.options.selected = getSelectedIds();
|
ids = self.options.selected = getSelectedIds();
|
||||||
|
self.options.selected = ids;
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
var ids_ = getSelectedIds();
|
var ids_ = getSelectedIds();
|
||||||
Ox.print('ids', ids, 'ids after 100 msec', ids_, Ox.isEqual(ids, ids_))
|
Ox.print('ids', ids, 'ids after 100 msec', ids_, Ox.isEqual(ids, ids_))
|
||||||
|
@ -1240,7 +1258,7 @@ Ox.List = function(options, self) {
|
||||||
selectedIds,
|
selectedIds,
|
||||||
sort = {};
|
sort = {};
|
||||||
if (self.listLength > 1) {
|
if (self.listLength > 1) {
|
||||||
if (Ox.isArray(self.options.items)) {
|
if (!self.isAsync) {
|
||||||
selectedIds = getSelectedIds();
|
selectedIds = getSelectedIds();
|
||||||
self.options.items.forEach(function(item) {
|
self.options.items.forEach(function(item) {
|
||||||
sort[item.id] = map ? map(item[key]) : item[key];
|
sort[item.id] = map ? map(item[key]) : item[key];
|
||||||
|
@ -1278,7 +1296,9 @@ Ox.List = function(options, self) {
|
||||||
//Ox.print('list setOption', key, value);
|
//Ox.print('list setOption', key, value);
|
||||||
var selectedIds;
|
var selectedIds;
|
||||||
if (key == 'items') {
|
if (key == 'items') {
|
||||||
if (Ox.typeOf(value) == 'array') {
|
// fixme: this could be used to change the list
|
||||||
|
// from sync to async or vice versa, which wouldn't work
|
||||||
|
if (Ox.isArray(value)) {
|
||||||
updateSelected();
|
updateSelected();
|
||||||
updateSort();
|
updateSort();
|
||||||
} else {
|
} else {
|
||||||
|
@ -1287,7 +1307,9 @@ Ox.List = function(options, self) {
|
||||||
} else if (key == 'selected') {
|
} else if (key == 'selected') {
|
||||||
Ox.print('setOption selected', value)
|
Ox.print('setOption selected', value)
|
||||||
setSelected(value);
|
setSelected(value);
|
||||||
triggerSelectEvent(); // fixme: added to make text list find-as-you-type work, may break other things
|
// fixme: next line added to make text list find-as-you-type work,
|
||||||
|
// may break other things
|
||||||
|
!self.isAsync && triggerSelectEvent(value);
|
||||||
} else if (key == 'sort') {
|
} else if (key == 'sort') {
|
||||||
Ox.print('---sort---')
|
Ox.print('---sort---')
|
||||||
updateSort();
|
updateSort();
|
||||||
|
|
|
@ -490,8 +490,8 @@ Ox.ListMap = function(options, self) {
|
||||||
self.placesLength = self.options.places.length;
|
self.placesLength = self.options.places.length;
|
||||||
setStatus();
|
setStatus();
|
||||||
} else {
|
} else {
|
||||||
self.options.places({}, function(result) {
|
self.options.places({}, function(results) {
|
||||||
self.placesLength = result.data.items;
|
self.placesLength = results.data.items;
|
||||||
setStatus();
|
setStatus();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -610,8 +610,8 @@ Ox.ListMap = function(options, self) {
|
||||||
|
|
||||||
function setStatus() {
|
function setStatus() {
|
||||||
self.$status.html(
|
self.$status.html(
|
||||||
self.options.placesLength + ' Place' + (
|
Ox.formatNumber(self.placesLength) + ' Place' + (
|
||||||
self.options.placesLength == 1 ? '' : 's'
|
self.placesLength == 1 ? '' : 's'
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -939,7 +939,7 @@ Ox.Map = function(options, self) {
|
||||||
query: {
|
query: {
|
||||||
key: 'id',
|
key: 'id',
|
||||||
value: id,
|
value: id,
|
||||||
operator: '='
|
operator: '^$'
|
||||||
}
|
}
|
||||||
}, function(results) {
|
}, function(results) {
|
||||||
place = new Ox.MapPlace(Ox.extend({
|
place = new Ox.MapPlace(Ox.extend({
|
||||||
|
|
Loading…
Reference in a new issue