make list listen to keyboard
This commit is contained in:
Rolux
parent
c615da32fb
commit
70429810b2
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user