more list
This commit is contained in:
Rolux
parent
36d1158f1a
commit
fc5c98fd97
4 changed files with 164 additions and 67 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue