make list listen to keyboard

This commit is contained in:
Rolux 2010-06-30 16:21:06 +02:00
parent 8dc0c02dfb
commit 705016e5a6
2 changed files with 92 additions and 13 deletions

View file

@ -446,7 +446,7 @@ requires
modifierNames = {
altKey: "alt", // mac: option
ctrlKey: "control",
metaKey: "meta", // mac: command
// metaKey: "meta", // mac: command
shiftKey: "shift"
};
@ -484,15 +484,17 @@ requires
//ret = true,
time;
$.each(modifierNames, function(k, v) {
Ox.print(k, event[k])
if (event[k]) {
keys.push(v);
}
});
// avoid pushing modifier twice
Ox.print("keys", keys)
if (keyNames[event.keyCode] && keys.indexOf(keyNames[event.keyCode]) == -1) {
keys.push(keyNames[event.keyCode]);
}
key = keys.join(".");
key = keys.join("_");
if (key.match(/^[\w\d-]$|SPACE/)) {
time = Ox.getTime();
if (time - bufferTime > bufferTimeout) {
@ -2391,17 +2393,31 @@ requires
$items: [],
$pages: [],
ids: {},
keyboardEvents: {
key_alt_control_a: invertSelection,
key_control_a: selectAll,
key_control_shift_a: selectNone,
key_end: scrollToFirst,
key_home: scrollToLast,
key_pagedown: scrollPageDown,
key_pageup: scrollPageUp
},
page: 0,
pageLength: 100,
requests: [],
selected: []
});
self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "left" : "up")] = selectPrevious;
self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "right" : "down")] = selectNext;
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.options.request({
callback: function(result) {
var keys = {};
Ox.print("items", result.data.items);
$.extend(self, {
listHeight: result.data.items * self.options.itemHeight,
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" ?
@ -2412,7 +2428,8 @@ requires
that.$content.css({
height: self.listHeight + "px"
});
loadPages(self.page);
loadPages(self.page);
that.bindEvent(self.keyboardEvents);
}
});
@ -2451,10 +2468,27 @@ requires
}
}
function addNextToSelection() {
var pos = getNext();
if (pos > -1) {
addToSelection(pos);
scrollTo(pos);
}
}
function addPreviousToSelection() {
var pos = getPrevious();
if (pos > -1) {
addToSelection(pos);
scrollTo(pos);
}
}
function addToSelection(pos) {
if (!isSelected(pos)) {
self.selected.push(pos);
if (!Ox.isUndefined(self.$items[pos])) {
Ox.print("pos/item", pos, self.$items[pos])
self.$items[pos].addClass("OxSelected");
}
Ox.Event.trigger("select_" + self.options.id, {
@ -2496,6 +2530,10 @@ requires
}
}
function getHeight() {
return that.height() - (that.$content.width() > that.width() ? 12 : 0);
}
function getNext() {
var pos = -1;
if (self.selected.length) {
@ -2521,9 +2559,13 @@ requires
return pos;
}
function getWidth() {
return that.width() - (that.$content.height() > that.height() ? 12 : 0);
}
function invertSelection() {
$.each(self.options.items, function(i, v) {
toggleSelection(i);
$.each(Ox.range(self.listLength), function(i, v) {
toggleSelection(v);
});
}
@ -2616,6 +2658,45 @@ requires
}
}
function scrollPageDown() {
that.scrollBy(getHeight());
}
function scrollPageUp() {
that.scrollBy(-getHeight());
}
function scrollTo(pos) {
var positions = [], scroll, size;
if (self.options.orientation == "horizontal") {
} else if (self.options.orientation == "vertical") {
positions[0] = self.options.itemHeight * pos;
positions[1] = positions[0] + self.options.itemHeight;
scroll = that.scrollTop();
size = getHeight();
if (positions[0] < scroll) {
that.animate({
scrollTop: positions[0] + "px"
}, 0);
} else if (positions[1] > scroll + size) {
that.animate({
scrollTop: (positions[1] - size) + "px"
}, 0);
}
} else {
}
}
function scrollToFirst() {
that.scrollTop(0);
}
function scrollToLast() {
}
function select(pos) {
if (!isSelected(pos) || self.selected.length > 1) {
selectNone();
@ -2624,8 +2705,9 @@ requires
}
function selectAll() {
$.each(self.$items, function(i, v) {
addToSelection(i);
$.each(Ox.range(self.listLength), function(i, v) {
Ox.print("adding", v);
addToSelection(v);
});
}
@ -2661,10 +2743,6 @@ requires
});
}
function scrollTo(pos) {
}
function toggleSelection(pos) {
if (!isSelected(pos)) {
addToSelection(pos);

View file

@ -2,7 +2,8 @@ $(function() {
Ox.theme("modern");
var $body = $("body"),
app = new Ox.App({
requestURL: "http://lion.oil21.org:8000/api/"
requestURL: "http://blackbook.local:8000/api/"
// requestURL: "http://lion.oil21.org:8000/api/"
}),
$menu = new Ox.MainMenu({
menus: [