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

making groups work

Browse source
This commit is contained in:
Rolux 2010-06-30 20:47:10 +02:00
parent 5f4cc4e793
commit f4972f45c9
2 changed files with 224 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,6 +45,7 @@ requires
}(), }(),
path: $("script[src*=ox.ui.js]").attr("src") path: $("script[src*=ox.ui.js]").attr("src")
.replace("js/ox.ui.js", ""), .replace("js/ox.ui.js", ""),
scrollbarSize: $.browser.mozilla ? 16 : 12,
symbols: { symbols: {
alt: "\u2325", alt: "\u2325",
apple: "\uF8FF", apple: "\uF8FF",
@ -290,6 +291,7 @@ requires
blur: function(id) { blur: function(id) {
if (stack.indexOf(id) > -1) { if (stack.indexOf(id) > -1) {
$elements[Ox.Focus.focused()].removeClass("OxFocus"); $elements[Ox.Focus.focused()].removeClass("OxFocus");
$(".OxFocus").removeClass("OxFocus"); // fixme: the above is better, and should work
stack.splice(stack.length - 2, 0, stack.pop()); stack.splice(stack.length - 2, 0, stack.pop());
Ox.Event.unbindKeyboard(id); Ox.Event.unbindKeyboard(id);
Ox.Event.bindKeyboard(stack[stack.length - 1]); Ox.Event.bindKeyboard(stack[stack.length - 1]);
@ -656,7 +658,7 @@ requires
} }
], ],
width: 400, width: 400,
height: 100 height: 200
}) })
.append("Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.") .append("Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.")
.open(); .open();
@ -2383,12 +2385,15 @@ requires
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",
unique: ""
}) })
.options(options || {}) .options(options || {})
.click(click) .click(click)
.scroll(scroll); .scroll(scroll);
Ox.print("self.options.unique", self.options.unique)
$.extend(self, { $.extend(self, {
$items: [], $items: [],
$pages: [], $pages: [],
@ -2412,26 +2417,8 @@ requires
self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "shift_left" : "shift_up")] = addPreviousToSelection; self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "shift_left" : "shift_up")] = addPreviousToSelection;
self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "shift_right" : "shift_down")] = addNextToSelection; self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "shift_right" : "shift_down")] = addNextToSelection;
self.options.request({ updateQuery();
callback: function(result) { that.bindEvent(self.keyboardEvents);
var keys = {};
Ox.print("items", result.data.items);
$.extend(self, {
listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
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
});
that.$content.css({
height: self.listHeight + "px"
});
loadPages(self.page);
that.bindEvent(self.keyboardEvents);
}
});
function addAllToSelection(pos) { function addAllToSelection(pos) {
var arr, var arr,
@ -2488,15 +2475,28 @@ requires
if (!isSelected(pos)) { if (!isSelected(pos)) {
self.selected.push(pos); self.selected.push(pos);
if (!Ox.isUndefined(self.$items[pos])) { if (!Ox.isUndefined(self.$items[pos])) {
Ox.print("pos/item", pos, self.$items[pos])
self.$items[pos].addClass("OxSelected"); self.$items[pos].addClass("OxSelected");
} }
Ox.Event.trigger("select_" + self.options.id, { Ox.Event.trigger("select_" + self.options.id, {
items: self.selected.length ids: $.map(self.selected, function(v, i) {
return self.ids[v];
})
}); });
} }
} }
function clear() {
$.each(self.requests, function(i, v) {
Ox.Request.cancel(v);
});
$.extend(self, {
$items: [],
$pages: [],
page: 0,
requests: []
});
}
function click(e) { function click(e) {
var $element = $(e.target), pos; var $element = $(e.target), pos;
that.gainFocus(); that.gainFocus();
@ -2525,13 +2525,15 @@ requires
self.$items[pos].removeClass("OxSelected"); self.$items[pos].removeClass("OxSelected");
} }
Ox.Event.trigger("select_" + self.options.id, { Ox.Event.trigger("select_" + self.options.id, {
items: self.selected.length ids: $.map(self.selected, function(v, i) {
return self.ids[v];
})
}); });
} }
} }
function getHeight() { function getHeight() {
return that.height() - (that.$content.width() > that.width() ? 12 : 0); return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
} }
function getNext() { function getNext() {
@ -2551,6 +2553,39 @@ requires
: Math.floor(that.scrollLeft() / self.pageWidth); : Math.floor(that.scrollLeft() / self.pageWidth);
} }
function getPositions() {
Ox.print("getPositions", $.map(self.selected, function(v, i) {
return self.ids[v];
}));
// fixme: optimize: send non-selected ids if more than half of the items are selected
if (self.selected.length /*&& self.selected.length < self.listLength*/) {
self.requests.push(self.options.request({
callback: getPositionsCallback,
ids: $.map(self.selected, function(v, i) {
return self.ids[v];
}),
sort: self.options.sort
}));
} else {
getPositionsCallback();
}
}
function getPositionsCallback(result) {
Ox.print("getPositionsCallback", result)
if (result) {
$.extend(self, {
ids: {},
selected: []
});
$.each(result.data.positions, function(id, pos) {
Ox.print("id", id, "pos", pos)
self.selected.push(pos);
});
}
load();
}
function getPrevious() { function getPrevious() {
var pos = -1; var pos = -1;
if (self.selected.length) { if (self.selected.length) {
@ -2560,7 +2595,7 @@ requires
} }
function getWidth() { function getWidth() {
return that.width() - (that.$content.height() > that.height() ? 12 : 0); return that.width() - (that.$content.height() > that.height() ? oxui.scrollbarSize : 0);
} }
function invertSelection() { function invertSelection() {
@ -2573,9 +2608,16 @@ requires
return self.selected.indexOf(pos) > -1; return self.selected.indexOf(pos) > -1;
} }
function load() {
that.scrollTop(0);
that.$content.empty();
loadPages(self.page);
}
function loadPage(page, callback) { function loadPage(page, callback) {
Ox.print("loadPage", page) Ox.print("loadPage", page)
if (page < 0 || page >= self.pages) { // fixme: callback doesn't get called if (page < 0 || page >= self.pages) {
!Ox.isUndefined(callback) && callback();
return; return;
} }
var keys = $.inArray("id", self.options.keys) > -1 ? self.options.keys : var keys = $.inArray("id", self.options.keys) > -1 ? self.options.keys :
@ -2598,22 +2640,20 @@ requires
} }
$.each(result.data.items, function(i, v) { $.each(result.data.items, function(i, v) {
var pos = offset + i; var pos = offset + i;
if (Ox.isUndefined(v.id)) {
v.id = pos;
}
self.$items[pos] = new Ox.ListItem({ self.$items[pos] = new Ox.ListItem({
construct: self.options.construct, construct: self.options.construct,
data: v, data: v,
id: v[self.options.unique],
position: pos position: pos
}); });
self.ids[pos] = v.id; self.ids[pos] = v[self.options.unique];
if (isSelected(pos)) { if (isSelected(pos)) {
self.$items[pos].addClass("OxSelected"); self.$items[pos].addClass("OxSelected");
} }
self.$items[pos].appendTo(self.$pages[page]); self.$items[pos].appendTo(self.$pages[page]);
}); });
self.$pages[page].appendTo(that.$content); self.$pages[page].appendTo(that.$content);
callback(); !Ox.isUndefined(callback) && callback();
}, },
keys: keys, keys: keys,
range: range, range: range,
@ -2697,7 +2737,7 @@ requires
} }
function scrollToLast() { function scrollToLast() {
that.scrollTop(self.listHeight);
} }
function select(pos) { function select(pos) {
@ -2770,56 +2810,44 @@ requires
unloadPage(page + 1) unloadPage(page + 1)
} }
that.clearCache = function() { function updateQuery() {
self.$pages = []; clear();
self.requests.push(self.options.request({
callback: function(result) {
var keys = {};
Ox.print("items", result.data.items);
$.extend(self, {
listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
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
});
that.$content.css({
height: self.listHeight + "px"
});
getPositions();
}
}));
}
function updateSort() {
clear();
getPositions();
}
self.onChange = function(key, value) {
Ox.print("list onChange", key, value);
if (key == "request") {
updateQuery();
}
}; };
that.reload = function() { that.clearCache = function() { // fixme: unused? make private?
self.$pages = [];
$.each(self.requests, function(i, v) { };
Ox.Request.cancel(v);
});
$.extend(self, {
$items: [],
$pages: [],
page: 0,
requests: []
});
// fixme: optimize: send non-selected ids if more than half of the items are selected
Ox.print(self.selected.length, self.listLength);
if (self.selected.length && self.selected.length < self.listLength) {
Ox.print("sort", self.options.sort, "ids", $.map(self.selected, function(v, i) {
return self.ids[v];
}));
self.requests.push(self.options.request({
callback: callback,
ids: $.map(self.selected, function(v, i) {
return self.ids[v];
}),
sort: self.options.sort
}));
} else {
callback();
}
function callback(result) {
if (result) {
$.extend(self, {
ids: {},
selected: []
});
$.each(result.data.positions, function(id, pos) {
Ox.print("id", id, "pos", pos)
self.selected.push(pos);
});
}
that.$content.empty();
that.scrollTop(0);
loadPages(self.page);
}
}
that.sort = function(key, operator) { that.sort = 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) {
@ -2828,7 +2856,7 @@ requires
operator: operator operator: operator
} }
// fixme: trigger sort event here // fixme: trigger sort event here
that.reload(); updateSort();
} }
} }
@ -2843,6 +2871,7 @@ requires
.defaults({ .defaults({
construct: function() {}, construct: function() {},
data: {}, data: {},
id: "",
position: 0 position: 0
}) })
.options(options || {}); .options(options || {});
@ -2853,7 +2882,7 @@ requires
that.$element = self.options.construct(self.options.data) that.$element = self.options.construct(self.options.data)
.attr({ .attr({
id: self.options.data.id id: self.options.id
}) })
.data("position", self.options.position); .data("position", self.options.position);
@ -2882,6 +2911,18 @@ requires
.options(options || {}) .options(options || {})
.addClass("OxTextList"); .addClass("OxTextList");
$.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
if (Ox.isUndefined(v.unique)) {
v.unique = false;
}
if (Ox.isUndefined(v.visible)) {
v.visible = false;
}
if (v.unique) {
self.unique = v.id;
}
});
$.extend(self, { $.extend(self, {
columnWidths: [], columnWidths: [],
itemHeight: 16, itemHeight: 16,
@ -2984,7 +3025,8 @@ requires
orientation: "vertical", orientation: "vertical",
request: self.options.request, request: self.options.request,
sort: self.options.sort, sort: self.options.sort,
type: "text" type: "text",
unique: self.unique
}) })
.addClass("OxBody") .addClass("OxBody")
.scroll(function() { .scroll(function() {
@ -3017,7 +3059,7 @@ requires
var $item = $("<div>") var $item = $("<div>")
.addClass("OxItem") .addClass("OxItem")
.css({ .css({
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px" width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + "px"
}); });
$.each(self.visibleColumns, function(i, v) { $.each(self.visibleColumns, function(i, v) {
var $cell = $("<div>") var $cell = $("<div>")
@ -3055,7 +3097,7 @@ requires
} }
function getItemWidth() { function getItemWidth() {
return Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
} }
function moveColumn(id) { function moveColumn(id) {
@ -3114,6 +3156,12 @@ requires
]); ]);
} }
self.onChange = function(key, value) {
if (key == "request") {
that.$body.options(key, value);
}
};
that.sort = function(key, operator) { that.sort = function(key, operator) {
var isSelected = key == self.options.sort[0].key; var isSelected = key == self.options.sort[0].key;
self.options.sort = [ self.options.sort = [
@ -4087,7 +4135,6 @@ requires
length = self.options.elements.length, length = self.options.elements.length,
dimensions = oxui.getDimensions(self.options.orientation), dimensions = oxui.getDimensions(self.options.orientation),
edges = oxui.getEdges(self.options.orientation); edges = oxui.getEdges(self.options.orientation);
Ox.print("dimensions, edges", dimensions, edges)
$.each(self.options.elements, function(i, v) { $.each(self.options.elements, function(i, v) {
var element = v.element var element = v.element
.css({ .css({

134
demos/test/list.js
View file

@ -58,55 +58,57 @@ $(function() {
} }
*/ */
], ],
$group = [],
elements = [], elements = [],
documentWidth = $document.width(); documentWidth = $document.width();
Ox.print("documentWidth", documentWidth)
$.each(groups, function(i, v) { $.each(groups, function(i, v) {
var size = documentWidth / 3 + (documentWidth % 3 > i); var size = documentWidth / 3 + (documentWidth % 3 > i);
elements.push({ $group[i] = new Ox.TextList({
element: new Ox.TextList({ columns: [
columns: [ {
{ align: "left",
align: "left", id: "name",
id: "name", operator: v.id == "year" ? "-" : "+",
operator: "+", title: v.title,
title: "Name", unique: true,
visible: true, visible: true,
width: size - 72 width: size - 50 - ($.browser.mozilla ? 16 : 12)
},
{
align: "right",
id: "items",
operator: "-",
title: "Items",
visible: true,
width: 60
}
],
id: "group_" + v.id,
request: function(options) {
delete options.keys;
app.request("find", $.extend(options, {
group: v.id,
query: {
conditions: [
{
key: "country",
value: "",
operator: ""
}
],
operator: ""
}
}), options.callback);
}, },
sort: [ {
{ align: "right",
key: "name", id: "items",
operator: "+" operator: "-",
title: "Items",
visible: true,
width: 50
}
],
id: "group_" + v.id,
request: function(options) {
delete options.keys;
app.request("find", $.extend(options, {
group: v.id,
query: {
conditions: [
{
key: "country",
value: "",
operator: ""
}
],
operator: ""
} }
] }), options.callback);
}), },
sort: [
{
key: "name",
operator: "+"
}
]
});
elements.push({
element: $group[i],
size: size size: size
}); });
}); });
@ -141,6 +143,7 @@ $(function() {
id: "id", id: "id",
operator: "+", operator: "+",
title: "ID", title: "ID",
unique: true,
visible: true, visible: true,
width: 80 width: 80
}, },
@ -205,7 +208,6 @@ $(function() {
id: "rating", id: "rating",
operator: "-", operator: "-",
title: "Rating", title: "Rating",
visible: false,
width: 80 width: 80
}, },
{ {
@ -213,7 +215,6 @@ $(function() {
id: "votes", id: "votes",
operator: "-", operator: "-",
title: "Votes", title: "Votes",
visible: false,
width: 80 width: 80
} }
], ],
@ -267,4 +268,47 @@ $(function() {
], ],
orientation: "vertical" orientation: "vertical"
}).appendTo($body); }).appendTo($body);
$.each(groups, function(i, group) {
Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
Ox.print("OK")
$list.options({
request: function(options) {
app.request("find", $.extend(options, {
query: {
conditions: $.map(data.ids, function(v, j) {
return {
key: group.id,
value: v,
operator: "="
}
}),
operator: "|"
}
}), options.callback);
}
});
$.each(groups, function(i_, group_) {
if (i_ != i) {
$group[i_].options({
request: function(options) {
delete options.keys;
app.request("find", $.extend(options, {
group: group_.id,
query: {
conditions: $.map(data.ids, function(v, j) {
return {
key: group.id,
value: v,
operator: "="
}
}),
operator: "|"
}
}), options.callback);
}
})
}
});
});
});
}); });