make list listen to keyboard

This commit is contained in:
Rolux 2010-06-30 16:21:06 +02:00
parent c615da32fb
commit 70429810b2
2 changed files with 92 additions and 13 deletions

View File

@ -446,7 +446,7 @@ requires
modifierNames = { modifierNames = {
altKey: "alt", // mac: option altKey: "alt", // mac: option
ctrlKey: "control", ctrlKey: "control",
metaKey: "meta", // mac: command // metaKey: "meta", // mac: command
shiftKey: "shift" shiftKey: "shift"
}; };
@ -484,15 +484,17 @@ requires
//ret = true, //ret = true,
time; time;
$.each(modifierNames, function(k, v) { $.each(modifierNames, function(k, v) {
Ox.print(k, event[k])
if (event[k]) { if (event[k]) {
keys.push(v); keys.push(v);
} }
}); });
// avoid pushing modifier twice // avoid pushing modifier twice
Ox.print("keys", keys)
if (keyNames[event.keyCode] && keys.indexOf(keyNames[event.keyCode]) == -1) { if (keyNames[event.keyCode] && keys.indexOf(keyNames[event.keyCode]) == -1) {
keys.push(keyNames[event.keyCode]); keys.push(keyNames[event.keyCode]);
} }
key = keys.join("."); key = keys.join("_");
if (key.match(/^[\w\d-]$|SPACE/)) { if (key.match(/^[\w\d-]$|SPACE/)) {
time = Ox.getTime(); time = Ox.getTime();
if (time - bufferTime > bufferTimeout) { if (time - bufferTime > bufferTimeout) {
@ -2391,17 +2393,31 @@ requires
$items: [], $items: [],
$pages: [], $pages: [],
ids: {}, 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, page: 0,
pageLength: 100, pageLength: 100,
requests: [], requests: [],
selected: [] 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({ self.options.request({
callback: function(result) { callback: function(result) {
var keys = {};
Ox.print("items", result.data.items); Ox.print("items", result.data.items);
$.extend(self, { $.extend(self, {
listHeight: result.data.items * self.options.itemHeight, listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
listLength: result.data.items, listLength: result.data.items,
pages: Math.ceil(result.data.items / self.pageLength), pages: Math.ceil(result.data.items / self.pageLength),
pageWidth: self.options.orientation == "horizontal" ? pageWidth: self.options.orientation == "horizontal" ?
@ -2412,7 +2428,8 @@ requires
that.$content.css({ that.$content.css({
height: self.listHeight + "px" 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) { function addToSelection(pos) {
if (!isSelected(pos)) { if (!isSelected(pos)) {
self.selected.push(pos); self.selected.push(pos);
if (!Ox.isUndefined(self.$items[pos])) { if (!Ox.isUndefined(self.$items[pos])) {
Ox.print("pos/item", pos, 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, {
@ -2496,6 +2530,10 @@ requires
} }
} }
function getHeight() {
return that.height() - (that.$content.width() > that.width() ? 12 : 0);
}
function getNext() { function getNext() {
var pos = -1; var pos = -1;
if (self.selected.length) { if (self.selected.length) {
@ -2521,9 +2559,13 @@ requires
return pos; return pos;
} }
function getWidth() {
return that.width() - (that.$content.height() > that.height() ? 12 : 0);
}
function invertSelection() { function invertSelection() {
$.each(self.options.items, function(i, v) { $.each(Ox.range(self.listLength), function(i, v) {
toggleSelection(i); 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) { function select(pos) {
if (!isSelected(pos) || self.selected.length > 1) { if (!isSelected(pos) || self.selected.length > 1) {
selectNone(); selectNone();
@ -2624,8 +2705,9 @@ requires
} }
function selectAll() { function selectAll() {
$.each(self.$items, function(i, v) { $.each(Ox.range(self.listLength), function(i, v) {
addToSelection(i); Ox.print("adding", v);
addToSelection(v);
}); });
} }
@ -2661,10 +2743,6 @@ requires
}); });
} }
function scrollTo(pos) {
}
function toggleSelection(pos) { function toggleSelection(pos) {
if (!isSelected(pos)) { if (!isSelected(pos)) {
addToSelection(pos); addToSelection(pos);

View File

@ -2,7 +2,8 @@ $(function() {
Ox.theme("modern"); Ox.theme("modern");
var $body = $("body"), var $body = $("body"),
app = new Ox.App({ 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({ $menu = new Ox.MainMenu({
menus: [ menus: [