make list items selectable
This commit is contained in:
parent
813dc0a039
commit
084d05d108
7 changed files with 107 additions and 36 deletions
|
@ -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);
|
||||||
}
|
}
|
|
@ -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
BIN
build/png/ox.ui.modern/loading.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.7 KiB |
BIN
build/png/ox.ui.modern/scrollbarHorizontalDecrement.png
Normal file
BIN
build/png/ox.ui.modern/scrollbarHorizontalDecrement.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
BIN
build/png/ox.ui.modern/scrollbarHorizontalIncrement.png
Normal file
BIN
build/png/ox.ui.modern/scrollbarHorizontalIncrement.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
|
@ -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>
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue