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

This commit is contained in:
rolux 2010-09-18 10:48:20 +00:00
parent 20630117bc
commit 1d98189008

View file

@ -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;