more list

This commit is contained in:
Rolux 2010-06-28 11:16:36 +02:00
parent 36d1158f1a
commit fc5c98fd97
4 changed files with 164 additions and 67 deletions

View file

@ -11,10 +11,12 @@ Base
body {
margin: 0;
overflow: hidden;
-webkit-user-select: none
-moz-user-select: none;
-webkit-user-select: none;
}
div {
-webkit-user-select: none
-moz-user-select: none;
-webkit-user-select: none;
}
div, input, textarea {
font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;

View file

@ -126,6 +126,7 @@ Lists
background: rgb(66, 66, 66);
}
.OxThemeModern .OxTextList .OxBar .OxSelected {
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48)));
color: rgb(255, 255, 255);
}

View file

@ -2387,31 +2387,42 @@ requires
.defaults({
itemHeight: 16,
itemWidth: 16,
keys: [],
listLength: 0,
orientation: "vertical",
request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
rowLength: 1,
sort: [],
type: "text"
})
.options(options || {});
.options(options || {})
.scroll(scroll);
Ox.print("self1", self)
$.extend(self, {
$items: [],
$pages: [],
page: 0,
pageLength: 100,
pages: 0,
requests: [],
selected: []
});
Ox.print("self2", self)
$.extend(self, {
pageWidth: self.options.orientation == "horizontal" ?
self.pageLength * self.options.itemWidth : 0,
pageHeight: self.options.orientation == "horizontal" ? 0 :
self.pageLength * self.options.itemHeight / self.options.rowLength
self.options.request({
callback: function(result) {
$.extend(self, {
listHeight: result.data.items * self.options.itemHeight,
listLength: result.data.items,
pages: Math.ceil(result.data.items / self.pageLength),
pageWidth: self.options.orientation == "horizontal" ?
self.pageLength * self.options.itemWidth : 0,
pageHeight: self.options.orientation == "horizontal" ? 0 :
self.pageLength * self.options.itemHeight / self.options.rowLength
});
loadPages(self.page);
}
});
function addAllToSelection(pos) {
var arr,
len = self.$items.length;
@ -2503,19 +2514,23 @@ requires
}
function isSelected(pos) {
return selected.indexOf(pos) > -1;
return self.selected.indexOf(pos) > -1;
}
function loadPage(page, callback) {
if (page < 0 || page >= pages) {
Ox.print("loadPage", page, self.pages)
if (page < 0 || page >= self.pages) {
return;
}
var offset = page * self.pageLength,
range = [offset, offset + (page < self.pages - 1 ?
self.pageLength : self.listLength % self.pageLength)];
Ox.print("page", self.$pages[page]);
if (Ox.isUndefined(self.$pages[page])) {
Ox.Request.send({
Ox.print("request...")
self.requests.push(self.options.request({
callback: function(data) {
Ox.print("callback", data)
self.$pages[page] = new Ox.ListPage();
if (self.options.type == "text") {
self.$pages[page].css({
@ -2534,12 +2549,17 @@ requires
}
self.$items[pos].appendTo(self.$pages[page])
});
self.$pages[page].appendTo(that.$content);
},
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
}),
range: range,
sort: self.options.sort
});
}));
} else {
self.$pages[page].appendTo(that.$content);
}
self.$pages[page].appendTo(that.$content);
}
function loadPages(page, callback) {
@ -2554,6 +2574,31 @@ requires
});
}
function scroll() {
var page = self.page;
self.page = getPage();
if (self.page == page - 1) {
unloadPage(self.page + 2);
loadPage(self.page - 1);
} else if (self.page ==page + 1) {
unloadPage(self.page - 2);
loadPage(self.page + 1);
} else if (self.page == page - 2) {
unloadPage(self.page + 3);
unloadPage(self.page + 2);
loadPage(self.page);
loadPage(self.page - 1);
} else if (self.page == page + 2) {
unloadPage(self.page - 3);
unloadPage(self.page - 2);
loadPage(self.page);
loadPage(self.page + 1);
} else if (self.page != page) {
unloadPages(page);
loadPages(self.page);
}
}
function select(pos) {
if (!isSelected(pos) || selected.length > 1) {
selectNone();
@ -2621,6 +2666,37 @@ requires
unloadPage(page + 1)
}
that.clearCache = function() {
self.$pages = [];
};
that.reload = function() {
$.each(self.requests, function(i, v) {
Ox.Request.cancel(v);
});
self.requests = [];
$.extend(self, {
$items: [],
$pages: [],
page: 0,
selected: []
});
unloadPages(self.page);
that.scrollTop(0);
loadPages(self.page);
}
that.sort = function(key, operator) {
if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
self.options.sort[0] = {
key: key,
operator: operator
}
// trigger sort event
that.reload();
}
}
return that;
};
@ -2643,7 +2719,7 @@ requires
.defaults({
columns: [],
request: function() {}, // {sort, range, keys, callback}
sort: {}
sort: []
})
.options(options || {})
.addClass("OxTextList");
@ -2654,7 +2730,10 @@ requires
page: 0,
pageLength: 100,
scrollLeft: 0,
selectedColumn: getColumnById(self.options.sort.key)
selectedColumn: getColumnById(self.options.sort[0].key),
visibleColumns: $.map(self.options.columns, function(v, i) {
return v.visible ? v : null;
})
});
$.extend(self, {
pageHeight: self.pageLength * self.itemHeight
@ -2672,7 +2751,7 @@ requires
.appendTo(that.$bar);
that.$head.$content.addClass("OxTitles");
that.$titles = [];
$.each(self.options.columns, function(i, v) {
$.each(self.visibleColumns, function(i, v) {
var $order, $resize, $left, $center, $right;
self.columnWidths[i] = v.width;
that.$titles[i] = $("<div>")
@ -2683,7 +2762,7 @@ requires
})
.html(v.title)
.click(function() {
if (self.options.sort.key != v.id) {
if (self.options.sort[0].key != v.id) {
that.sort(v.id, v.operator);
} else {
that.order(self.options.operator == "+" ? "-" : "+");
@ -2693,7 +2772,7 @@ requires
$order = $("<div>")
.addClass("OxOrder")
.html(oxui.symbols["triangle_" + (
self.options.sort.operator == "+" ? "up" : "down"
self.options.sort[0].operator == "+" ? "up" : "down"
)])
.click(function() {
$(this).prev().trigger("click")
@ -2736,40 +2815,34 @@ requires
// Body
self.options.request({
callback: function(result) {
Ox.print("result", result);
$.extend(self, {
listHeight: result.data.items * self.itemHeight,
listLength: result.data.items,
pages: Math.ceil(result.data.items / self.pageLength)
});
Ox.print("self", self);
that.$body = new Ox.List({
itemHeight: 16,
itemWidth: Ox.sum(self.columnWidths),
orientation: "vertical",
request: self.options.request,
sort: self.options.sort,
type: "text"
}, self)
.addClass("OxBody")
.scroll(function() {
var scrollLeft = $(this).scrollLeft();
if (scrollLeft != self.scrollLeft) {
self.scrollLeft = scrollLeft;
that.$head.scrollLeft(scrollLeft);
}
})
.appendTo(that);
Ox.print("that.$body", that.$body)
that.$body.$content.css({
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px",
height: self.listHeight + "px"
});
}
Ox.print("self", self);
that.$body = new Ox.List({
itemHeight: 16,
itemWidth: Ox.sum(self.columnWidths),
orientation: "vertical",
request: self.options.request,
sort: self.options.sort,
type: "text"
}, self)
.addClass("OxBody")
.scroll(function() {
var scrollLeft = $(this).scrollLeft();
if (scrollLeft != self.scrollLeft) {
self.scrollLeft = scrollLeft;
that.$head.scrollLeft(scrollLeft);
}
})
.appendTo(that);
Ox.print("that.$body", that.$body)
that.$body.$content.css({
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px",
height: self.listHeight + "px"
});
function addColumn(id) {
}
function constructItem(item, pos) {
var item = $("<div>")
.addClass("OxListItem")
@ -2802,6 +2875,14 @@ requires
return pos;
}
function moveColumn(id) {
}
function removeColumn(id) {
}
function resizeColumn(pos, width) {
self.columnWidths[pos] = width;
that.$head.$content.css({
@ -2816,7 +2897,7 @@ requires
that.$body.$content.css({
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
});
$(".OxColumn" + Ox.toTitleCase(args.columns[pos].id)).css({
$(".OxColumn" + Ox.toTitleCase(self.options.columns[pos].id)).css({
width: (width - 9) + "px"
});
that.$body.clearCache();
@ -2848,14 +2929,6 @@ requires
}
that.order = function(operator) {
if (operator != self.options.sort.operator) {
self.options.sort.operator = operator;
toggleOrder(self.selectedColumn);
that.$body.order(operator);
}
};
that.sort = function(key, operator) {
if (key != self.options.sort.key || operator != self.options.sort.operator) {
self.options.sort = {

View file

@ -2,7 +2,7 @@ $(function() {
Ox.theme("modern");
var $body = $("body"),
app = new Ox.App({
requestURL: "http://blackbook.local:8000/api/"
requestURL: "http://lion.oil21.org:8000/api/"
}),
$list = new Ox.TextList({
columns: [
@ -11,6 +11,7 @@ $(function() {
id: "title",
operator: "+",
title: "Title",
visible: true,
width: 160
},
{
@ -18,13 +19,31 @@ $(function() {
id: "director",
operator: "+",
title: "Director",
visible: true,
width: 160
},
{
align: "left",
id: "country",
operator: "+",
title: "Country",
visible: true,
width: 120
},
{
align: "right",
id: "year",
operator: "-",
title: "Year",
visible: true,
width: 80
},
{
align: "right",
id: "runtime",
operator: "-",
title: "Runtime",
visible: false,
width: 80
}
],
@ -42,9 +61,11 @@ $(function() {
}
}), options.callback);
},
sort: {
key: "year",
operator: "-"
}
sort: [
{
key: "year",
operator: "-"
}
]
}).appendTo($body);
});