reform Ox.List to allow for scroll position staying the same after deleting an item
This commit is contained in:
rolux
parent
ccc4a743d8
commit
7b2a0cfef5
3 changed files with 57 additions and 43 deletions
|
|
@ -168,7 +168,7 @@ Ox.List = function(options, self) {
|
|||
self.listLength = self.options.items.length;
|
||||
loadItems();
|
||||
} else {
|
||||
updateQuery(self.options.selected);
|
||||
updateQuery();
|
||||
}
|
||||
that.bindEvent(self.keyboardEvents);
|
||||
//Ox.UI.$window.resize(that.size); // fixme: this is not the widget's job
|
||||
|
|
@ -287,9 +287,8 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function copyItems() {
|
||||
var ids = getSelectedIds();
|
||||
ids.length && that.triggerEvent('copy', {
|
||||
ids: ids
|
||||
self.options.selected.length && that.triggerEvent('copy', {
|
||||
ids: self.options.selected
|
||||
});
|
||||
/*
|
||||
ids.length && self.options.copy && Ox.Clipboard.copy(
|
||||
|
|
@ -308,9 +307,8 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function deleteItems() {
|
||||
var ids = getSelectedIds();
|
||||
ids.length && that.triggerEvent('delete', {
|
||||
ids: ids
|
||||
self.options.selected.length && that.triggerEvent('delete', {
|
||||
ids: self.options.selected
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -528,6 +526,14 @@ Ox.List = function(options, self) {
|
|||
return parseInt(pos / self.options.pageLength);
|
||||
}
|
||||
|
||||
function getPageByScrollPosition(pos) {
|
||||
return getPageByPosition(pos / (
|
||||
self.options.orientation == 'vertical'
|
||||
? self.options.itemHeight
|
||||
: self.options.itemWidth
|
||||
));
|
||||
}
|
||||
|
||||
function getPageCSS(page) {
|
||||
return self.options.orientation == 'horizontal' ? {
|
||||
left: (page * self.pageWidth + self.listMargin / 2) + 'px',
|
||||
|
|
@ -556,26 +562,27 @@ Ox.List = function(options, self) {
|
|||
return pos;
|
||||
}
|
||||
|
||||
function getPositions(ids) {
|
||||
ids = ids || getSelectedIds();
|
||||
Ox.print('getPositions', ids)
|
||||
function getPositions(callback) {
|
||||
Ox.print('getPositions', self.options.selected);
|
||||
// fixme: optimize: send non-selected ids if more than half of the items are selected
|
||||
if (ids.length /*&& ids.length < self.listLength*/) {
|
||||
if (self.options.selected.length /*&& ids.length < self.listLength*/) {
|
||||
/*Ox.print('-------- request', {
|
||||
ids: ids,
|
||||
sort: self.options.sort
|
||||
});*/
|
||||
self.requests.push(self.options.items({
|
||||
ids: ids,
|
||||
ids: self.options.selected,
|
||||
sort: self.options.sort
|
||||
}, getPositionsCallback));
|
||||
}, function(result) {
|
||||
getPositionsCallback(result, callback);
|
||||
}));
|
||||
} else {
|
||||
getPositionsCallback();
|
||||
getPositionsCallback(null, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function getPositionsCallback(result) {
|
||||
Ox.print('getPositionsCallback', result)
|
||||
function getPositionsCallback(result, callback) {
|
||||
Ox.print('getPositionsCallback', result);
|
||||
var pos = 0;
|
||||
if (result) {
|
||||
$.extend(self, {
|
||||
|
|
@ -588,12 +595,13 @@ Ox.List = function(options, self) {
|
|||
});
|
||||
pos = Ox.min(self.selected);
|
||||
self.page = getPageByPosition(pos);
|
||||
} else if (self.stayAtPosition) {
|
||||
self.page = getPageByScrollPosition(self.stayAtPosition);
|
||||
}
|
||||
// that.scrollTop(0);
|
||||
that.$content.empty();
|
||||
//Ox.print('self.selected', self.selected, 'self.page', self.page);
|
||||
loadPages(self.page, function() {
|
||||
scrollToPosition(pos, true);
|
||||
callback && callback();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -627,12 +635,16 @@ Ox.List = function(options, self) {
|
|||
|
||||
function getSelectedIds() {
|
||||
//Ox.print('gSI', self.selected, self.$items)
|
||||
if (self.$items.length == 0) {
|
||||
return self.options.selected;
|
||||
} else {
|
||||
return $.map(self.selected, function(pos) {
|
||||
//Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique])
|
||||
Ox.print('gsI', pos)
|
||||
return self.$items[pos].options('data')[self.options.unique];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getWidth() {
|
||||
return that.width() - (that.$content.height() > that.height() ? Ox.UI.SCROLLBAR_SIZE : 0);
|
||||
|
|
@ -891,9 +903,8 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function open() {
|
||||
var ids = getSelectedIds();
|
||||
ids.length && that.triggerEvent('open', {
|
||||
ids: ids
|
||||
self.options.selected.length && that.triggerEvent('open', {
|
||||
ids: self.options.selected
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -902,12 +913,11 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function preview() {
|
||||
var ids = getSelectedIds();
|
||||
if (ids.length) {
|
||||
if (self.options.selected.length) {
|
||||
self.preview = !self.preview;
|
||||
if (self.preview) {
|
||||
that.triggerEvent('openpreview', {
|
||||
ids: getSelectedIds()
|
||||
ids: self.options.selected
|
||||
});
|
||||
} else {
|
||||
that.triggerEvent('closepreview');
|
||||
|
|
@ -1135,10 +1145,9 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function triggerSelectEvent() {
|
||||
ids = self.options.selected = getSelectedIds();
|
||||
self.options.selected = ids;
|
||||
var ids = self.options.selected = getSelectedIds();
|
||||
setTimeout(function() {
|
||||
var ids_ = getSelectedIds();
|
||||
var ids_ = self.options.selected = getSelectedIds();
|
||||
Ox.print('ids', ids, 'ids after 100 msec', ids_, Ox.isEqual(ids, ids_))
|
||||
if (Ox.isEqual(ids, ids_)) {
|
||||
that.triggerEvent('select', {
|
||||
|
|
@ -1156,7 +1165,7 @@ Ox.List = function(options, self) {
|
|||
function triggerToggleEvent(expanded) {
|
||||
that.triggerEvent('toggle', {
|
||||
expanded: expanded,
|
||||
ids: getSelectedIds()
|
||||
ids: self.options.selected
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1206,11 +1215,9 @@ Ox.List = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function updateQuery(ids) { // fixme: shouldn't this be setQuery?
|
||||
// ids are the selcected ids
|
||||
// (in case list is loaded with selection)
|
||||
function updateQuery(callback) { // fixme: shouldn't this be setQuery?
|
||||
Ox.print('updateQuery', self.options)
|
||||
clear();
|
||||
clear(); // fixme: bad function name ... clear what?
|
||||
self.requests.push(self.options.items({}, function(result) {
|
||||
var keys = {};
|
||||
Ox.print('INIT!!!', result.data)
|
||||
|
|
@ -1235,7 +1242,7 @@ Ox.List = function(options, self) {
|
|||
self.options.orientation == 'horizontal' ? 'width' : 'height',
|
||||
self.listSize + 'px'
|
||||
);
|
||||
getPositions(ids);
|
||||
getPositions(callback);
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -1435,8 +1442,15 @@ Ox.List = function(options, self) {
|
|||
reloadList <f> reload list contents
|
||||
() -> <f> returns List Element
|
||||
@*/
|
||||
that.reloadList = function() {
|
||||
that.reloadList = function(stayAtPosition) {
|
||||
if (stayAtPosition) {
|
||||
var scrollTop = that.scrollTop();
|
||||
updateQuery(function() {
|
||||
that.scrollTop(scrollTop);
|
||||
});
|
||||
} else {
|
||||
updateQuery();
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -785,8 +785,8 @@ Ox.TextList = function(options, self) {
|
|||
return that;
|
||||
};
|
||||
|
||||
that.reloadList = function() {
|
||||
that.$body.reloadList();
|
||||
that.reloadList = function(stayAtPosition) {
|
||||
that.$body.reloadList(stayAtPosition);
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -569,7 +569,7 @@ Ox.ListMap = function(options, self) {
|
|||
self.$placeButton.options({title: 'Add Place'});
|
||||
that.triggerEvent('removeplace', {id: self.selectedPlace});
|
||||
if (self.isAsync) {
|
||||
self.$list.options({selected: []}).reloadList();
|
||||
self.$list.options({selected: []}).reloadList(true);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue