make list listen to keyboard

build/js/ox.ui.js

@@ -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" ?
@@ -2413,6 +2429,7 @@ requires
                     height: self.listHeight + "px"
                 });
                 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) {
+            $.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) {
             if (!isSelected(pos) || self.selected.length > 1) {
                 selectNone();
@@ -2624,8 +2705,9 @@ requires
         }
 
         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) {
             if (!isSelected(pos)) {
                 addToSelection(pos);

demos/test/list.js

@@ -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: [