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

more list

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
build/css/ox.ui.css
View file

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

1
build/css/ox.ui.modern.css
View file

@ -126,6 +126,7 @@ Lists
background: rgb(66, 66, 66); background: rgb(66, 66, 66);
} }
.OxThemeModern .OxTextList .OxBar .OxSelected { .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))); 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); color: rgb(255, 255, 255);
} }

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

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

31
demos/test/list.js
View file

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