From e820bad08ddfef773ce7d970c29bbf85c3c04129 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 23 Dec 2010 04:32:29 +0000 Subject: [PATCH] make icon list remember position after resize --- build/js/ox.ui.js | 91 +++++++++++++++++++++++++++++++++++++---------- 1 file changed, 73 insertions(+), 18 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index f265db8..28f44c2 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -5994,7 +5994,7 @@ requires var pos = getAbove(); if (pos > -1) { addToSelection(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6037,7 +6037,7 @@ requires var pos = getBelow(); if (pos > -1) { addToSelection(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6045,7 +6045,7 @@ requires var pos = getNext(); if (pos > -1) { addToSelection(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6053,7 +6053,7 @@ requires var pos = getPrevious(); if (pos > -1) { addToSelection(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6171,6 +6171,10 @@ requires return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0); } + function getListHeight() { + return Math.ceil(self.listLength * (self.options.itemHeight + self.itemMargin) / self.rowLength), // fixme: should be listSize + } + function getNext() { var pos = -1; if (self.selected.length) { @@ -6196,6 +6200,18 @@ requires return parseInt(pos / self.options.pageLength); } + function getPageHeight() { + return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength); + } + + function getPosition() { + // if orientation is both, this returns the + // element position at the current scroll position + return parseInt( + that.scrollTop() / (self.options.itemHeight + self.itemMargin) + ) * self.rowLength; + } + function getPositions() { Ox.print('getPositions', $.map(self.selected, function(v, i) { return self.ids[v]; @@ -6234,11 +6250,11 @@ requires pos = Ox.min(self.selected); self.page = getPageByPosition(pos); } - that.scrollTop(0); + // that.scrollTop(0); that.$content.empty(); Ox.print('self.selected', self.selected, 'self.page', self.page); loadPages(self.page, function() { - scrollTo(pos); + scrollTo(pos, true); }); } @@ -6451,7 +6467,13 @@ requires that.scrollBy(-getHeight()); } - function scrollTo(pos) { + function scrollTo(value) { + that.animate({ + scrollTop: (self.listHeight * value) + 'px' + }, 0) + } + + function scrollToPosition(pos, topAlign) { var itemHeight = self.options.itemHeight + self.itemMargin, itemWidth = self.options.itemWidth + self.itemMargin, positions = [], @@ -6467,7 +6489,7 @@ requires positions[1] = positions[0] + itemHeight + (self.options.orientation == 'vertical' ? 0 : self.itemMargin); scroll = that.scrollTop(); size = getHeight(); - if (positions[0] < scroll) { + if (positions[0] < scroll || topAlign) { that.animate({ scrollTop: positions[0] + 'px' }, 0); @@ -6498,7 +6520,7 @@ requires var pos = getAbove(); if (pos > -1) { select(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6513,7 +6535,7 @@ requires var pos = getBelow(); if (pos > -1) { select(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6521,7 +6543,7 @@ requires var pos = getNext(); if (pos > -1) { select(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6535,7 +6557,7 @@ requires var pos = getPrevious(); if (pos > -1) { select(pos); - scrollTo(pos); + scrollToPosition(pos); } } @@ -6543,7 +6565,7 @@ requires $.each(self.$items, function(i, v) { if (Ox.toLatin(v.title).toUpperCase().indexOf(str) == 0) { select(i); - scrollTo(i); + scrollToPosition(i); return false; } }); @@ -6604,7 +6626,6 @@ requires self.pageLengthByRowLength[self.rowLength] : self.options.pageLength; $.extend(self, { - listHeight: Math.ceil(result.data.items * (self.options.itemHeight + self.itemMargin) / self.rowLength), // fixme: should be listSize listLength: result.data.items, pages: Math.ceil(result.data.items / self.pageLength), pageWidth: self.options.orientation == 'vertical' ? 0 : @@ -6612,6 +6633,7 @@ requires pageHeight: self.options.orientation == 'horizontal' ? 0 : Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength) }); + self.listHeight = getListHeight(); Ox.print('list self', self, self.listHeight); that.$content.css({ height: self.listHeight + 'px' @@ -6620,6 +6642,27 @@ requires })); } + function updatePages(pos, scroll) { + // only used if orientation is both + clear(); + self.pageLength = self.pageLengthByRowLength[self.rowLength] + $.extend(self, { + listHeight: getListHeight(), // fixme: should be listSize + pages: Math.ceil(self.listLength / self.pageLength), + pageWidth: (self.options.itemWidth + self.itemMargin) * self.rowLength, + pageHeight: getPageHeight() + }); + that.$content.css({ + height: self.listHeight + 'px' + }); + self.page = getPageByPosition(pos); + //that.scrollTop(0); + that.$content.empty(); + loadPages(self.page, function() { + scrollTo(scroll); + }); + } + function updateSort() { if (self.listLength > 1) { clear(); @@ -6656,17 +6699,29 @@ requires that.size = function() { if (self.options.orientation == 'both') { var rowLength = getRowLength(), - pageLength = self.pageLengthByRowLength[rowLength]; + pageLength = self.pageLengthByRowLength[rowLength], + pos = getPosition(), + scroll = that.scrollTop() / self.listHeight; if (pageLength != self.pageLength) { - updateQuery(); + self.pageLength = pageLength; + self.rowLength = rowLength; + updatePages(pos, scroll); } else if (rowLength != self.rowLength) { self.rowLength = rowLength; - self.pageWidth = (self.options.itemWidth + self.itemMargin) * self.rowLength; + self.pageWidth = (self.options.itemWidth + self.itemMargin) * self.rowLength; // fixme: make function + self.listHeight = getListHeight(); + self.pageHeight = getPageHeight(); $.each(self.$pages, function(i, $page) { !Ox.isUndefined($page) && $page.css({ - width: self.pageWidth + 'px' + width: self.pageWidth + 'px', + top: (i * self.pageHeight + self.listMargin / 2) + 'px' }); }); + that.$content.css({ + height: self.listHeight + 'px' + }); + Ox.print('scrolling to', scroll) + scrollTo(scroll); } } else if (self.options.type == 'text') { Ox.print('that.size, type==text')