From 1d98189008d3465edadfd2a170d547b29dae9c6a Mon Sep 17 00:00:00 2001 From: rolux Date: Sat, 18 Sep 2010 10:48:20 +0000 Subject: [PATCH] improvements for list resizing, and for text lists with less items than would fit on the screen --- build/js/ox.ui.js | 143 +++++++++++++++++++++++++++++----------------- 1 file changed, 89 insertions(+), 54 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index f68b9b72..25f3716c 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1491,30 +1491,32 @@ requires }); function drag(e) { - var d = e[self.clientXY] - self.startPos; + var d = e[self.clientXY] - self.startPos + size = self.options.size; self.options.size = Ox.limit( self.startSize + d * (self.leftOrTop ? 1 : -1), self.options.resize[0], self.options.resize[self.options.resize.length - 1] ); - Ox.print('sS', self.startSize, 'd', d, 's.o.s', self.options.size, 'edge', self.options.edge, self.edges) $.each(self.options.resize, function(i, v) { if (self.options.size > v - 8 && self.options.size < v + 8) { self.options.size = v; return false; } }); - that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px'); - if (self.leftOrTop) { - self.options.elements[0].css(self.dimensions[1], self.options.size + 'px'); - self.options.elements[1].css(self.edges[2], (self.options.size + 1) + 'px'); - Ox.Event.trigger(self.ids[0], 'resize', self.options.size); - Ox.Event.trigger(self.ids[1], 'resize', self.options.elements[1][self.dimensions[1]]()); - } else { - self.options.elements[1].css(self.dimensions[1], self.options.size + 'px'); - self.options.elements[0].css(self.edges[3], (self.options.size + 1) + 'px'); - Ox.Event.trigger(self.ids[1], 'resize', self.options.size); - Ox.Event.trigger(self.ids[0], 'resize', self.options.elements[0][self.dimensions[1]]()); + if (self.options.size != size) { + that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px'); + if (self.leftOrTop) { + self.options.elements[0].css(self.dimensions[1], self.options.size + 'px'); + self.options.elements[1].css(self.edges[2], (self.options.size + 1) + 'px'); + Ox.Event.trigger(self.ids[0], 'resize', self.options.size); + Ox.Event.trigger(self.ids[1], 'resize', self.options.elements[1][self.dimensions[1]]()); + } else { + self.options.elements[1].css(self.dimensions[1], self.options.size + 'px'); + self.options.elements[0].css(self.edges[3], (self.options.size + 1) + 'px'); + Ox.Event.trigger(self.ids[1], 'resize', self.options.size); + Ox.Event.trigger(self.ids[0], 'resize', self.options.elements[0][self.dimensions[1]]()); + } } } @@ -5766,6 +5768,10 @@ requires that.$element.closePreview(); }; + that.resize = function() { + that.$element.resize(); + } + that.sortList = function(key, operator) { self.options.sort = [{ key: key, @@ -5996,7 +6002,7 @@ requires updateQuery(); Ox.print('s.o', self.options) that.addEvent(self.keyboardEvents); - $window.resize(resize); + $window.resize(that.resize); function addAboveToSelection() { var pos = getAbove(); @@ -6104,6 +6110,35 @@ requires } } + function emptyFirstPage() { + Ox.print('emptyFirstPage', self.$pages); + self.$pages[0].find('.OxEmpty').remove(); + } + + function fillFirstPage() { + var height = getHeight(), + lastItemHeight = height % self.options.itemHeight || self.options.itemHeight, + visibleItems = Math.ceil(height / self.options.itemHeight); + if (self.$items.length < visibleItems) { + $.each(Ox.range(self.$items.length, visibleItems), function(i, v) { + var $item = new Ox.ListItem({ + construct: self.options.construct, + data: {}, + id: '', + position: v + }); + $item.addClass('OxEmpty').removeClass('OxTarget'); + if (v == visibleItems - 1) { + $item.$element.css({ + height: lastItemHeight + 'px', + overflowY: 'hidden' + }); + } + $item.appendTo(self.$pages[0]); + }); + } + } + function findItem(e) { var $element = $(e.target), $item = null; @@ -6290,21 +6325,7 @@ requires self.$items[pos].appendTo(self.$pages[page]); }); if (self.options.type == 'text' && page == 0) { - var height = that.height() - (that.width() < that.$content.width() ? oxui.scrollbarSize : 0), - visibleItems = Math.ceil(height / self.options.itemHeight); - if (result.data.items.length < visibleItems) { - self.$pages[page].height(height).css({ - overflow: 'hidden' - }); - $.each(Ox.range(result.data.items.length, visibleItems), function(i, v) { - new Ox.ListItem({ - construct: self.options.construct, - data: {}, - id: '', - position: v - }).appendTo(self.$pages[page]); - }); - } + fillFirstPage(); } self.$pages[page].appendTo(that.$content); !Ox.isUndefined(callback) && callback(); @@ -6386,24 +6407,6 @@ requires } } - function resize() { - if (self.options.orientation == 'both') { - var rowLength = getRowLength(), - pageLength = self.pageLengthByRowLength[rowLength]; - if (pageLength != self.pageLength) { - updateQuery(); - } else if (rowLength != self.rowLength) { - self.rowLength = rowLength; - self.pageWidth = (self.options.itemWidth + self.itemMargin) * self.rowLength; - $.each(self.$pages, function(i, $page) { - $page.css({ - width: self.pageWidth + 'px' - }); - }); - } - } - } - function scroll() { var page = self.page; self.scrollTimeout && clearTimeout(self.scrollTimeout); @@ -6600,7 +6603,7 @@ requires 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' ? self.options.itemWidth : + pageWidth: self.options.orientation == 'vertical' ? 0 : (self.options.itemWidth + self.itemMargin) * self.rowLength, pageHeight: self.options.orientation == 'horizontal' ? 0 : Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength) @@ -6644,6 +6647,28 @@ requires return that; }; + that.resize = function() { + if (self.options.orientation == 'both') { + var rowLength = getRowLength(), + pageLength = self.pageLengthByRowLength[rowLength]; + if (pageLength != self.pageLength) { + updateQuery(); + } else if (rowLength != self.rowLength) { + self.rowLength = rowLength; + self.pageWidth = (self.options.itemWidth + self.itemMargin) * self.rowLength; + $.each(self.$pages, function(i, $page) { + $page.css({ + width: self.pageWidth + 'px' + }); + }); + } + } else if (self.options.type == 'text') { + Ox.print('that.resize, type==text') + emptyFirstPage(); + fillFirstPage(); + } + } + that.sortList = function(key, operator) { if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) { self.options.sort[0] = { @@ -7111,18 +7136,23 @@ requires that.$titles[pos].css({ width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px' }); - that.$body.$content.find('.OxItem').css({ // fixme: can we avoid this lookup? - width: getItemWidth() + 'px' - }); - that.$body.$content.css({ - width: getItemWidth() + 'px' // fixme: check if scrollbar visible, and listen to resize/toggle event - }); $('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({ width: (width - 9) + 'px' }); + setWidth(); that.$body.clearCache(); } + function setWidth() { + var width = getItemWidth(); + that.$body.$content.find('.OxItem').css({ // fixme: can we avoid this lookup? + width: width + 'px' + }); + that.$body.$content.css({ + width: width + 'px' // fixme: check if scrollbar visible, and listen to resize/toggle event + }); + } + function toggleSelected(id) { var pos = getColumnPositionById(id); if (pos > -1) { @@ -7157,6 +7187,11 @@ requires that.$body.closePreview(); }; + that.resize = function() { + setWidth(); + that.$body.resize(); + } + that.resizeColumn = function(id, width) { resizeColumn(id, width); return that;