forked from 0x2620/oxjs
make list items selectable
This commit is contained in:
Rolux
parent
813dc0a039
commit
084d05d108
7 changed files with 107 additions and 36 deletions
|
|
@ -2417,10 +2417,10 @@ requires
|
|||
var arr,
|
||||
len = self.$items.length;
|
||||
if (!isSelected(pos)) {
|
||||
if (selected.length == 0) {
|
||||
if (self.selected.length == 0) {
|
||||
addToSelection(pos);
|
||||
} else {
|
||||
if (Ox.min(selected) < pos) {
|
||||
if (Ox.min(self.selected) < pos) {
|
||||
var arr = [pos];
|
||||
for (var i = pos - 1; i >= 0; i--) {
|
||||
if (isSelected(i)) {
|
||||
|
|
@ -2432,7 +2432,7 @@ requires
|
|||
arr.push(i);
|
||||
}
|
||||
}
|
||||
if (Ox.max(selected) > pos) {
|
||||
if (Ox.max(self.selected) > pos) {
|
||||
var arr = [pos];
|
||||
for (var i = pos + 1; i < len; i++) {
|
||||
if (isSelected(i)) {
|
||||
|
|
@ -2450,36 +2450,52 @@ requires
|
|||
|
||||
function addToSelection(pos) {
|
||||
if (!isSelected(pos)) {
|
||||
selected.push(pos);
|
||||
self.selected.push(pos);
|
||||
if (!Ox.isUndefined(self.$items[pos])) {
|
||||
self.$items[pos].addClass("OxSelected");
|
||||
}
|
||||
Ox.Event.trigger("select_" + self.options.id, {
|
||||
items: selected.length
|
||||
items: self.selected.length
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function click(e) {
|
||||
Ox.print("e.target", e.target);
|
||||
var $element = $(e.target), pos;
|
||||
while (!$element.hasClass("OxItem") && !$element.hasClass("OxPage")) {
|
||||
$element = $element.parent();
|
||||
}
|
||||
if ($element.hasClass("OxItem")) {
|
||||
Ox.print($element.attr("id"), $element.data("position"));
|
||||
pos = $element.data("position");
|
||||
if (e.shiftKey) {
|
||||
addAllToSelection(pos);
|
||||
} else if (e.metaKey) {
|
||||
toggleSelection(pos);
|
||||
} else {
|
||||
select(pos);
|
||||
}
|
||||
} else {
|
||||
selectNone();
|
||||
}
|
||||
}
|
||||
|
||||
function deselect(pos) {
|
||||
if (isSelected(pos)) {
|
||||
selected.splice(selected.indexOf(pos), 1);
|
||||
self.selected.splice(self.selected.indexOf(pos), 1);
|
||||
if (!Ox.isUndefined(self.$items[pos])) {
|
||||
self.$items[pos].removeClass("OxSelected");
|
||||
}
|
||||
Ox.Event.trigger("select_" + self.options.id, {
|
||||
items: selected.length
|
||||
items: self.selected.length
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getNext() {
|
||||
var pos = -1;
|
||||
if (selected.length) {
|
||||
var pos = Ox.max(selected) + 1;
|
||||
if (self.selected.length) {
|
||||
var pos = Ox.max(self.selected) + 1;
|
||||
if (pos == self.$items.length) {
|
||||
pos = -1;
|
||||
}
|
||||
|
|
@ -2495,8 +2511,8 @@ requires
|
|||
|
||||
function getPrevious() {
|
||||
var pos = -1;
|
||||
if (selected.length) {
|
||||
var pos = Ox.min(selected) - 1;
|
||||
if (self.selected.length) {
|
||||
var pos = Ox.min(self.selected) - 1;
|
||||
}
|
||||
return pos;
|
||||
}
|
||||
|
|
@ -2516,9 +2532,12 @@ requires
|
|||
if (page < 0 || page >= self.pages) {
|
||||
return;
|
||||
}
|
||||
var offset = page * self.pageLength,
|
||||
var keys = $.inArray("id", self.options.keys) > -1 ? self.options.keys :
|
||||
$.merge(self.options.keys, ["id"]),
|
||||
offset = page * self.pageLength,
|
||||
range = [offset, offset + (page < self.pages - 1 ?
|
||||
self.pageLength : self.listLength % self.pageLength)];
|
||||
Ox.print("keys", keys)
|
||||
if (Ox.isUndefined(self.$pages[page])) {
|
||||
self.requests.push(self.options.request({
|
||||
callback: function(result) {
|
||||
|
|
@ -2537,7 +2556,7 @@ requires
|
|||
self.$items[pos] = new Ox.ListItem({
|
||||
construct: self.options.construct,
|
||||
data: v,
|
||||
pos: pos
|
||||
position: pos
|
||||
});
|
||||
if (isSelected(pos)) {
|
||||
self.$items[pos].addClass("OxSelected");
|
||||
|
|
@ -2547,7 +2566,7 @@ requires
|
|||
self.$pages[page].appendTo(that.$content);
|
||||
Ox.print(page, "self.$pages", self.$pages)
|
||||
},
|
||||
keys: self.options.keys,
|
||||
keys: keys,
|
||||
range: range,
|
||||
sort: self.options.sort
|
||||
}));
|
||||
|
|
@ -2594,7 +2613,7 @@ requires
|
|||
}
|
||||
|
||||
function select(pos) {
|
||||
if (!isSelected(pos) || selected.length > 1) {
|
||||
if (!isSelected(pos) || self.selected.length > 1) {
|
||||
selectNone();
|
||||
addToSelection(pos);
|
||||
}
|
||||
|
|
@ -2675,13 +2694,14 @@ requires
|
|||
Ox.Request.cancel(v);
|
||||
});
|
||||
self.requests = [];
|
||||
unloadPages(self.page);
|
||||
//unloadPages(self.page);
|
||||
$.extend(self, {
|
||||
$items: [],
|
||||
$pages: [],
|
||||
page: 0,
|
||||
selected: []
|
||||
});
|
||||
that.$content.empty();
|
||||
that.scrollTop(0);
|
||||
loadPages(self.page);
|
||||
}
|
||||
|
|
@ -2708,7 +2728,7 @@ requires
|
|||
.defaults({
|
||||
construct: function() {},
|
||||
data: {},
|
||||
pos: 0
|
||||
position: 0
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
|
|
@ -2716,12 +2736,11 @@ requires
|
|||
self.options.data[k] = $.isArray(v) ? v.join(", ") : v;
|
||||
});
|
||||
|
||||
that.$element = self.options.construct(self.options.data, self.options.pos);
|
||||
/*
|
||||
$.each(self.options.construct(self.options.data, self.options.pos).children(), function(i, v) {
|
||||
that.append(v);
|
||||
});
|
||||
*/
|
||||
that.$element = self.options.construct(self.options.data)
|
||||
.attr({
|
||||
id: self.options.data.id
|
||||
})
|
||||
.data("position", self.options.position);
|
||||
|
||||
return that;
|
||||
|
||||
|
|
@ -2840,7 +2859,7 @@ requires
|
|||
that.$body = new Ox.List({
|
||||
construct: constructItem,
|
||||
itemHeight: 16,
|
||||
itemWidth: Ox.sum(self.columnWidths),
|
||||
itemWidth: getItemWidth(),
|
||||
keys: $.map(self.visibleColumns, function(v, i) {
|
||||
return v.id;
|
||||
}),
|
||||
|
|
@ -2859,7 +2878,7 @@ requires
|
|||
})
|
||||
.appendTo(that);
|
||||
that.$body.$content.css({
|
||||
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px"
|
||||
width: getItemWidth() + "px"
|
||||
});
|
||||
|
||||
function addColumn(id) {
|
||||
|
|
@ -2876,13 +2895,12 @@ requires
|
|||
);
|
||||
}
|
||||
|
||||
function constructItem(data, pos) {
|
||||
function constructItem(data) {
|
||||
var $item = $("<div>")
|
||||
.addClass("OxItem")
|
||||
.css({
|
||||
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px"
|
||||
})
|
||||
.data("pos", pos);
|
||||
});
|
||||
$.each(self.visibleColumns, function(i, v) {
|
||||
var $cell = $("<div>")
|
||||
.addClass("OxCell OxColumn" + Ox.toTitleCase(v.id))
|
||||
|
|
@ -2918,6 +2936,10 @@ requires
|
|||
return pos;
|
||||
}
|
||||
|
||||
function getItemWidth() {
|
||||
return Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12)
|
||||
}
|
||||
|
||||
function moveColumn(id) {
|
||||
|
||||
}
|
||||
|
|
@ -2941,10 +2963,10 @@ requires
|
|||
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + "px"
|
||||
});
|
||||
that.$body.$content.find(".OxItem").css({ // fixme: can we avoid this lookup?
|
||||
width: Ox.sum(self.columnWidths) + "px"
|
||||
width: getItemWidth() + "px"
|
||||
});
|
||||
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: getItemWidth() + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
|
||||
});
|
||||
$(".OxColumn" + Ox.toTitleCase(self.options.columns[i].id)).css({
|
||||
width: (width - 9) + "px"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue