improvements for list resizing, and for text lists with less items than would fit on the screen

build/js/ox.ui.js

@@ -1491,19 +1491,20 @@ 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;
                 }
             });
+            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');
@@ -1517,6 +1518,7 @@ requires
                     Ox.Event.trigger(self.ids[0], 'resize', self.options.elements[0][self.dimensions[1]]());
                 }
             }
+        }
 
         function dragStart(e) {
             self.startPos = e[self.clientXY];
@@ -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),
+                        fillFirstPage();
-                            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]);
-                            });
-                        }
                     }
                     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;