0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
rolux 2010-09-18 10:48:20 +00:00
parent 20630117bc
commit 1d98189008
1 changed files with 89 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
build/js/ox.ui.js
View file

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