improvements for list resizing, and for text lists with less items than would fit on the screen
This commit is contained in:
parent
20630117bc
commit
1d98189008
1 changed files with 89 additions and 54 deletions
|
@ -1491,30 +1491,32 @@ requires
|
||||||
});
|
});
|
||||||
|
|
||||||
function drag(e) {
|
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.options.size = Ox.limit(
|
||||||
self.startSize + d * (self.leftOrTop ? 1 : -1),
|
self.startSize + d * (self.leftOrTop ? 1 : -1),
|
||||||
self.options.resize[0],
|
self.options.resize[0],
|
||||||
self.options.resize[self.options.resize.length - 1]
|
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) {
|
$.each(self.options.resize, function(i, v) {
|
||||||
if (self.options.size > v - 8 && self.options.size < v + 8) {
|
if (self.options.size > v - 8 && self.options.size < v + 8) {
|
||||||
self.options.size = v;
|
self.options.size = v;
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
|
if (self.options.size != size) {
|
||||||
if (self.leftOrTop) {
|
that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
|
||||||
self.options.elements[0].css(self.dimensions[1], self.options.size + 'px');
|
if (self.leftOrTop) {
|
||||||
self.options.elements[1].css(self.edges[2], (self.options.size + 1) + 'px');
|
self.options.elements[0].css(self.dimensions[1], self.options.size + 'px');
|
||||||
Ox.Event.trigger(self.ids[0], 'resize', self.options.size);
|
self.options.elements[1].css(self.edges[2], (self.options.size + 1) + 'px');
|
||||||
Ox.Event.trigger(self.ids[1], 'resize', self.options.elements[1][self.dimensions[1]]());
|
Ox.Event.trigger(self.ids[0], 'resize', self.options.size);
|
||||||
} else {
|
Ox.Event.trigger(self.ids[1], 'resize', self.options.elements[1][self.dimensions[1]]());
|
||||||
self.options.elements[1].css(self.dimensions[1], self.options.size + 'px');
|
} else {
|
||||||
self.options.elements[0].css(self.edges[3], (self.options.size + 1) + 'px');
|
self.options.elements[1].css(self.dimensions[1], self.options.size + 'px');
|
||||||
Ox.Event.trigger(self.ids[1], 'resize', self.options.size);
|
self.options.elements[0].css(self.edges[3], (self.options.size + 1) + 'px');
|
||||||
Ox.Event.trigger(self.ids[0], 'resize', self.options.elements[0][self.dimensions[1]]());
|
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.$element.closePreview();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
that.resize = function() {
|
||||||
|
that.$element.resize();
|
||||||
|
}
|
||||||
|
|
||||||
that.sortList = function(key, operator) {
|
that.sortList = function(key, operator) {
|
||||||
self.options.sort = [{
|
self.options.sort = [{
|
||||||
key: key,
|
key: key,
|
||||||
|
@ -5996,7 +6002,7 @@ requires
|
||||||
updateQuery();
|
updateQuery();
|
||||||
Ox.print('s.o', self.options)
|
Ox.print('s.o', self.options)
|
||||||
that.addEvent(self.keyboardEvents);
|
that.addEvent(self.keyboardEvents);
|
||||||
$window.resize(resize);
|
$window.resize(that.resize);
|
||||||
|
|
||||||
function addAboveToSelection() {
|
function addAboveToSelection() {
|
||||||
var pos = getAbove();
|
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) {
|
function findItem(e) {
|
||||||
var $element = $(e.target),
|
var $element = $(e.target),
|
||||||
$item = null;
|
$item = null;
|
||||||
|
@ -6290,21 +6325,7 @@ requires
|
||||||
self.$items[pos].appendTo(self.$pages[page]);
|
self.$items[pos].appendTo(self.$pages[page]);
|
||||||
});
|
});
|
||||||
if (self.options.type == 'text' && page == 0) {
|
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);
|
self.$pages[page].appendTo(that.$content);
|
||||||
!Ox.isUndefined(callback) && callback();
|
!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() {
|
function scroll() {
|
||||||
var page = self.page;
|
var page = self.page;
|
||||||
self.scrollTimeout && clearTimeout(self.scrollTimeout);
|
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
|
listHeight: Math.ceil(result.data.items * (self.options.itemHeight + self.itemMargin) / self.rowLength), // fixme: should be listSize
|
||||||
listLength: result.data.items,
|
listLength: result.data.items,
|
||||||
pages: Math.ceil(result.data.items / self.pageLength),
|
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,
|
(self.options.itemWidth + self.itemMargin) * self.rowLength,
|
||||||
pageHeight: self.options.orientation == 'horizontal' ? 0 :
|
pageHeight: self.options.orientation == 'horizontal' ? 0 :
|
||||||
Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength)
|
Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength)
|
||||||
|
@ -6644,6 +6647,28 @@ requires
|
||||||
return that;
|
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) {
|
that.sortList = function(key, operator) {
|
||||||
if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
|
if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
|
||||||
self.options.sort[0] = {
|
self.options.sort[0] = {
|
||||||
|
@ -7111,18 +7136,23 @@ requires
|
||||||
that.$titles[pos].css({
|
that.$titles[pos].css({
|
||||||
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
|
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({
|
$('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
|
||||||
width: (width - 9) + 'px'
|
width: (width - 9) + 'px'
|
||||||
});
|
});
|
||||||
|
setWidth();
|
||||||
that.$body.clearCache();
|
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) {
|
function toggleSelected(id) {
|
||||||
var pos = getColumnPositionById(id);
|
var pos = getColumnPositionById(id);
|
||||||
if (pos > -1) {
|
if (pos > -1) {
|
||||||
|
@ -7157,6 +7187,11 @@ requires
|
||||||
that.$body.closePreview();
|
that.$body.closePreview();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
that.resize = function() {
|
||||||
|
setWidth();
|
||||||
|
that.$body.resize();
|
||||||
|
}
|
||||||
|
|
||||||
that.resizeColumn = function(id, width) {
|
that.resizeColumn = function(id, width) {
|
||||||
resizeColumn(id, width);
|
resizeColumn(id, width);
|
||||||
return that;
|
return that;
|
||||||
|
|
Loading…
Reference in a new issue