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; width: 12px;
height: 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 { .OxThemeModern ::-webkit-scrollbar-button:vertical:decrement {
background: url(../png/ox.ui.modern/scrollbarVerticalDecrement.png); background: url(../png/ox.ui.modern/scrollbarVerticalDecrement.png);
} }
.OxThemeModern ::-webkit-scrollbar-button:vertical:increment { .OxThemeModern ::-webkit-scrollbar-button:vertical:increment {
background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png); background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png);
} }
.OxThemeModern ::-webkit-scrollbar-thumb:vertical { .OxThemeModern ::-webkit-scrollbar-thumb {
border: 1px solid rgb(48, 48, 48); 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; -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 { .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))); 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:active,
.OxThemeModern ::-webkit-scrollbar-thumb:vertical:active { .OxThemeModern ::-webkit-scrollbar-thumb:active {
background: rgb(64, 64, 64); background: rgb(64, 64, 64);
} }

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

@ -2417,10 +2417,10 @@ requires
var arr, var arr,
len = self.$items.length; len = self.$items.length;
if (!isSelected(pos)) { if (!isSelected(pos)) {
if (selected.length == 0) { if (self.selected.length == 0) {
addToSelection(pos); addToSelection(pos);
} else { } else {
if (Ox.min(selected) < pos) { if (Ox.min(self.selected) < pos) {
var arr = [pos]; var arr = [pos];
for (var i = pos - 1; i >= 0; i--) { for (var i = pos - 1; i >= 0; i--) {
if (isSelected(i)) { if (isSelected(i)) {
@ -2432,7 +2432,7 @@ requires
arr.push(i); arr.push(i);
} }
} }
if (Ox.max(selected) > pos) { if (Ox.max(self.selected) > pos) {
var arr = [pos]; var arr = [pos];
for (var i = pos + 1; i < len; i++) { for (var i = pos + 1; i < len; i++) {
if (isSelected(i)) { if (isSelected(i)) {
@ -2450,36 +2450,52 @@ requires
function addToSelection(pos) { function addToSelection(pos) {
if (!isSelected(pos)) { if (!isSelected(pos)) {
selected.push(pos); self.selected.push(pos);
if (!Ox.isUndefined(self.$items[pos])) { if (!Ox.isUndefined(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: selected.length items: self.selected.length
}); });
} }
} }
function click(e) { 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) { function deselect(pos) {
if (isSelected(pos)) { if (isSelected(pos)) {
selected.splice(selected.indexOf(pos), 1); self.selected.splice(self.selected.indexOf(pos), 1);
if (!Ox.isUndefined(self.$items[pos])) { if (!Ox.isUndefined(self.$items[pos])) {
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: selected.length items: self.selected.length
}); });
} }
} }
function getNext() { function getNext() {
var pos = -1; var pos = -1;
if (selected.length) { if (self.selected.length) {
var pos = Ox.max(selected) + 1; var pos = Ox.max(self.selected) + 1;
if (pos == self.$items.length) { if (pos == self.$items.length) {
pos = -1; pos = -1;
} }
@ -2495,8 +2511,8 @@ requires
function getPrevious() { function getPrevious() {
var pos = -1; var pos = -1;
if (selected.length) { if (self.selected.length) {
var pos = Ox.min(selected) - 1; var pos = Ox.min(self.selected) - 1;
} }
return pos; return pos;
} }
@ -2516,9 +2532,12 @@ requires
if (page < 0 || page >= self.pages) { if (page < 0 || page >= self.pages) {
return; 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 ? range = [offset, offset + (page < self.pages - 1 ?
self.pageLength : self.listLength % self.pageLength)]; self.pageLength : self.listLength % self.pageLength)];
Ox.print("keys", keys)
if (Ox.isUndefined(self.$pages[page])) { if (Ox.isUndefined(self.$pages[page])) {
self.requests.push(self.options.request({ self.requests.push(self.options.request({
callback: function(result) { callback: function(result) {
@ -2537,7 +2556,7 @@ requires
self.$items[pos] = new Ox.ListItem({ self.$items[pos] = new Ox.ListItem({
construct: self.options.construct, construct: self.options.construct,
data: v, data: v,
pos: pos position: pos
}); });
if (isSelected(pos)) { if (isSelected(pos)) {
self.$items[pos].addClass("OxSelected"); self.$items[pos].addClass("OxSelected");
@ -2547,7 +2566,7 @@ requires
self.$pages[page].appendTo(that.$content); self.$pages[page].appendTo(that.$content);
Ox.print(page, "self.$pages", self.$pages) Ox.print(page, "self.$pages", self.$pages)
}, },
keys: self.options.keys, keys: keys,
range: range, range: range,
sort: self.options.sort sort: self.options.sort
})); }));
@ -2594,7 +2613,7 @@ requires
} }
function select(pos) { function select(pos) {
if (!isSelected(pos) || selected.length > 1) { if (!isSelected(pos) || self.selected.length > 1) {
selectNone(); selectNone();
addToSelection(pos); addToSelection(pos);
} }
@ -2675,13 +2694,14 @@ requires
Ox.Request.cancel(v); Ox.Request.cancel(v);
}); });
self.requests = []; self.requests = [];
unloadPages(self.page); //unloadPages(self.page);
$.extend(self, { $.extend(self, {
$items: [], $items: [],
$pages: [], $pages: [],
page: 0, page: 0,
selected: [] selected: []
}); });
that.$content.empty();
that.scrollTop(0); that.scrollTop(0);
loadPages(self.page); loadPages(self.page);
} }
@ -2708,7 +2728,7 @@ requires
.defaults({ .defaults({
construct: function() {}, construct: function() {},
data: {}, data: {},
pos: 0 position: 0
}) })
.options(options || {}); .options(options || {});
@ -2716,12 +2736,11 @@ requires
self.options.data[k] = $.isArray(v) ? v.join(", ") : v; self.options.data[k] = $.isArray(v) ? v.join(", ") : v;
}); });
that.$element = self.options.construct(self.options.data, self.options.pos); that.$element = self.options.construct(self.options.data)
/* .attr({
$.each(self.options.construct(self.options.data, self.options.pos).children(), function(i, v) { id: self.options.data.id
that.append(v); })
}); .data("position", self.options.position);
*/
return that; return that;
@ -2840,7 +2859,7 @@ requires
that.$body = new Ox.List({ that.$body = new Ox.List({
construct: constructItem, construct: constructItem,
itemHeight: 16, itemHeight: 16,
itemWidth: Ox.sum(self.columnWidths), itemWidth: getItemWidth(),
keys: $.map(self.visibleColumns, function(v, i) { keys: $.map(self.visibleColumns, function(v, i) {
return v.id; return v.id;
}), }),
@ -2859,7 +2878,7 @@ requires
}) })
.appendTo(that); .appendTo(that);
that.$body.$content.css({ that.$body.$content.css({
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px" width: getItemWidth() + "px"
}); });
function addColumn(id) { function addColumn(id) {
@ -2876,13 +2895,12 @@ requires
); );
} }
function constructItem(data, pos) { function constructItem(data) {
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() - 12) + "px"
}) });
.data("pos", pos);
$.each(self.visibleColumns, function(i, v) { $.each(self.visibleColumns, function(i, v) {
var $cell = $("<div>") var $cell = $("<div>")
.addClass("OxCell OxColumn" + Ox.toTitleCase(v.id)) .addClass("OxCell OxColumn" + Ox.toTitleCase(v.id))
@ -2918,6 +2936,10 @@ requires
return pos; return pos;
} }
function getItemWidth() {
return Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12)
}
function moveColumn(id) { function moveColumn(id) {
} }
@ -2941,10 +2963,10 @@ requires
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + "px" width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + "px"
}); });
that.$body.$content.find(".OxItem").css({ // fixme: can we avoid this lookup? 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({ 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({ $(".OxColumn" + Ox.toTitleCase(self.options.columns[i].id)).css({
width: (width - 9) + "px" 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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>oxjs List Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/> <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> <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", title: "Runtime",
visible: true, visible: true,
width: 80 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) { request: function(options) {