improvements for list resizing, and for text lists with less items than would fit on the screen
This commit is contained in:
rolux
parent
20630117bc
commit
1d98189008
1 changed files with 89 additions and 54 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue