0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

reform Ox.List to allow for scroll position staying the same after deleting an item

Browse source
This commit is contained in:
rolux 2011-05-29 18:05:29 +02:00
parent ccc4a743d8
commit 7b2a0cfef5
3 changed files with 57 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
source/Ox.UI/js/List/Ox.List.js
View file

@ -168,7 +168,7 @@ Ox.List = function(options, self) {
self.listLength = self.options.items.length; self.listLength = self.options.items.length;
loadItems(); loadItems();
} else { } else {
updateQuery(self.options.selected); updateQuery();
} }
that.bindEvent(self.keyboardEvents); that.bindEvent(self.keyboardEvents);
//Ox.UI.$window.resize(that.size); // fixme: this is not the widget's job //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() { function copyItems() {
var ids = getSelectedIds(); self.options.selected.length && that.triggerEvent('copy', {
ids.length && that.triggerEvent('copy', { ids: self.options.selected
ids: ids
}); });
/* /*
ids.length && self.options.copy && Ox.Clipboard.copy( ids.length && self.options.copy && Ox.Clipboard.copy(
@ -308,9 +307,8 @@ Ox.List = function(options, self) {
} }
function deleteItems() { function deleteItems() {
var ids = getSelectedIds(); self.options.selected.length && that.triggerEvent('delete', {
ids.length && that.triggerEvent('delete', { ids: self.options.selected
ids: ids
}); });
} }
@ -528,6 +526,14 @@ Ox.List = function(options, self) {
return parseInt(pos / self.options.pageLength); 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) { function getPageCSS(page) {
return self.options.orientation == 'horizontal' ? { return self.options.orientation == 'horizontal' ? {
left: (page * self.pageWidth + self.listMargin / 2) + 'px', left: (page * self.pageWidth + self.listMargin / 2) + 'px',
@ -556,26 +562,27 @@ Ox.List = function(options, self) {
return pos; return pos;
} }
function getPositions(ids) { function getPositions(callback) {
ids = ids || getSelectedIds(); Ox.print('getPositions', self.options.selected);
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
if (ids.length /*&& ids.length < self.listLength*/) { if (self.options.selected.length /*&& ids.length < self.listLength*/) {
/*Ox.print('-------- request', { /*Ox.print('-------- request', {
ids: ids, ids: ids,
sort: self.options.sort sort: self.options.sort
});*/ });*/
self.requests.push(self.options.items({ self.requests.push(self.options.items({
ids: ids, ids: self.options.selected,
sort: self.options.sort sort: self.options.sort
}, getPositionsCallback)); }, function(result) {
getPositionsCallback(result, callback);
}));
} else { } else {
getPositionsCallback(); getPositionsCallback(null, callback);
} }
} }
function getPositionsCallback(result) { function getPositionsCallback(result, callback) {
Ox.print('getPositionsCallback', result) Ox.print('getPositionsCallback', result);
var pos = 0; var pos = 0;
if (result) { if (result) {
$.extend(self, { $.extend(self, {
@ -588,12 +595,13 @@ Ox.List = function(options, self) {
}); });
pos = Ox.min(self.selected); pos = Ox.min(self.selected);
self.page = getPageByPosition(pos); self.page = getPageByPosition(pos);
} else if (self.stayAtPosition) {
self.page = getPageByScrollPosition(self.stayAtPosition);
} }
// that.scrollTop(0);
that.$content.empty(); that.$content.empty();
//Ox.print('self.selected', self.selected, 'self.page', self.page);
loadPages(self.page, function() { loadPages(self.page, function() {
scrollToPosition(pos, true); scrollToPosition(pos, true);
callback && callback();
}); });
} }
@ -627,11 +635,15 @@ Ox.List = function(options, self) {
function getSelectedIds() { function getSelectedIds() {
//Ox.print('gSI', self.selected, self.$items) //Ox.print('gSI', self.selected, self.$items)
return $.map(self.selected, function(pos) { if (self.$items.length == 0) {
//Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique]) return self.options.selected;
Ox.print('gsI', pos) } else {
return self.$items[pos].options('data')[self.options.unique]; 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() { function getWidth() {
@ -891,9 +903,8 @@ Ox.List = function(options, self) {
} }
function open() { function open() {
var ids = getSelectedIds(); self.options.selected.length && that.triggerEvent('open', {
ids.length && that.triggerEvent('open', { ids: self.options.selected
ids: ids
}); });
} }
@ -902,12 +913,11 @@ Ox.List = function(options, self) {
} }
function preview() { function preview() {
var ids = getSelectedIds(); if (self.options.selected.length) {
if (ids.length) {
self.preview = !self.preview; self.preview = !self.preview;
if (self.preview) { if (self.preview) {
that.triggerEvent('openpreview', { that.triggerEvent('openpreview', {
ids: getSelectedIds() ids: self.options.selected
}); });
} else { } else {
that.triggerEvent('closepreview'); that.triggerEvent('closepreview');
@ -1135,10 +1145,9 @@ Ox.List = function(options, self) {
} }
function triggerSelectEvent() { function triggerSelectEvent() {
ids = self.options.selected = getSelectedIds(); var ids = self.options.selected = getSelectedIds();
self.options.selected = ids;
setTimeout(function() { setTimeout(function() {
var ids_ = getSelectedIds(); var ids_ = self.options.selected = 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_))
if (Ox.isEqual(ids, ids_)) { if (Ox.isEqual(ids, ids_)) {
that.triggerEvent('select', { that.triggerEvent('select', {
@ -1156,7 +1165,7 @@ Ox.List = function(options, self) {
function triggerToggleEvent(expanded) { function triggerToggleEvent(expanded) {
that.triggerEvent('toggle', { that.triggerEvent('toggle', {
expanded: expanded, 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? function updateQuery(callback) { // fixme: shouldn't this be setQuery?
// ids are the selcected ids
// (in case list is loaded with selection)
Ox.print('updateQuery', self.options) Ox.print('updateQuery', self.options)
clear(); clear(); // fixme: bad function name ... clear what?
self.requests.push(self.options.items({}, function(result) { self.requests.push(self.options.items({}, function(result) {
var keys = {}; var keys = {};
Ox.print('INIT!!!', result.data) Ox.print('INIT!!!', result.data)
@ -1235,7 +1242,7 @@ Ox.List = function(options, self) {
self.options.orientation == 'horizontal' ? 'width' : 'height', self.options.orientation == 'horizontal' ? 'width' : 'height',
self.listSize + 'px' self.listSize + 'px'
); );
getPositions(ids); getPositions(callback);
})); }));
} }
@ -1435,8 +1442,15 @@ Ox.List = function(options, self) {
reloadList <f> reload list contents reloadList <f> reload list contents
() -> <f> returns List Element () -> <f> returns List Element
@*/ @*/
that.reloadList = function() { that.reloadList = function(stayAtPosition) {
updateQuery(); if (stayAtPosition) {
var scrollTop = that.scrollTop();
updateQuery(function() {
that.scrollTop(scrollTop);
});
} else {
updateQuery();
}
return that; return that;
}; };

4
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -785,8 +785,8 @@ Ox.TextList = function(options, self) {
return that; return that;
}; };
that.reloadList = function() { that.reloadList = function(stayAtPosition) {
that.$body.reloadList(); that.$body.reloadList(stayAtPosition);
return that; return that;
}; };

2
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -569,7 +569,7 @@ Ox.ListMap = function(options, self) {
self.$placeButton.options({title: 'Add Place'}); self.$placeButton.options({title: 'Add Place'});
that.triggerEvent('removeplace', {id: self.selectedPlace}); that.triggerEvent('removeplace', {id: self.selectedPlace});
if (self.isAsync) { if (self.isAsync) {
self.$list.options({selected: []}).reloadList(); self.$list.options({selected: []}).reloadList(true);
} }
} }