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

make list items selectable

Browse source
This commit is contained in:
Rolux 2010-06-30 11:02:13 +02:00
parent 813dc0a039
commit 084d05d108
7 changed files with 107 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -194,23 +194,39 @@ Scrollbars
width: 12px;
height: 12px;
}
.OxThemeModern ::-webkit-scrollbar-button:horizontal:decrement {
background: url(../png/ox.ui.modern/scrollbarHorizontalDecrement.png);
}
.OxThemeModern ::-webkit-scrollbar-button:horizontal:increment {
background: url(../png/ox.ui.modern/scrollbarHorizontalIncrement.png);
}
.OxThemeModern ::-webkit-scrollbar-button:vertical:decrement {
background: url(../png/ox.ui.modern/scrollbarVerticalDecrement.png);
}
.OxThemeModern ::-webkit-scrollbar-button:vertical:increment {
background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png);
}
.OxThemeModern ::-webkit-scrollbar-thumb:vertical {
.OxThemeModern ::-webkit-scrollbar-thumb {
border: 1px solid rgb(48, 48, 48);
background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
-webkit-border-radius: 6px;
}
.OxThemeModern ::-webkit-scrollbar-thumb:horizontal {
background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
}
.OxThemeModern ::-webkit-scrollbar-thumb:vertical {
background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
}
.OxThemeModern ::-webkit-scrollbar-track {
border: 1px solid rgb(32, 32, 32);
-webkit-border-radius: 6px;
}
.OxThemeModern ::-webkit-scrollbar-track:horizontal {
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
}
.OxThemeModern ::-webkit-scrollbar-track:vertical {
border: 1px solid rgb(32, 32, 32);
background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
-webkit-border-radius: 6px;
}
.OxThemeModern ::-webkit-scrollbar:active,
.OxThemeModern ::-webkit-scrollbar-thumb:vertical:active {
.OxThemeModern ::-webkit-scrollbar-thumb:active {
background: rgb(64, 64, 64);
}

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

@ -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"

BIN
build/png/ox.ui.modern/loading.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
build/png/ox.ui.modern/scrollbarHorizontalDecrement.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
build/png/ox.ui.modern/scrollbarHorizontalIncrement.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

1
demos/test/list.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>oxjs List Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>

32
demos/test/list.js
View file

@ -81,6 +81,38 @@ $(function() {
title: "Runtime",
visible: true,
width: 80
},
{
align: "left",
id: "language",
operator: "+",
title: "Language",
visible: true,
width: 120
},
{
align: "left",
id: "genre",
operator: "+",
title: "Genre",
visible: true,
width: 120
},
{
align: "right",
id: "rating",
operator: "-",
title: "Rating",
visible: false,
width: 80
},
{
align: "right",
id: "votes",
operator: "-",
title: "Votes",
visible: false,
width: 80
}
],
request: function(options) {