make list focus on click

build/js/ox.ui.js

@@ -45,7 +45,7 @@ requires
             }(),
             path: $("script[src*=ox.ui.js]").attr("src")
                 .replace("js/ox.ui.js", ""),
-            symbols: { // fixme: make lowercase
+            symbols: {
                 alt: "\u2325",
                 apple: "\uF8FF",
                 arrow_down: "\u2193",
@@ -105,7 +105,8 @@ requires
     $(function() {
         $window = $(window),
         $document = $(document),
-        $body = $("body");
+        $body = $("body"),
+        $elements = {};
         Ox.theme(oxui.defaultTheme);
     });
 
@@ -286,6 +287,15 @@ requires
     Ox.Focus = function() {
         var stack = [];
         return {
+            blur: function(id) {
+                if (stack.indexOf(id) > -1) {
+                    $elements[Ox.Focus.focused()].removeClass("OxFocus");
+                    stack.splice(stack.length - 2, 0, stack.pop());
+                    Ox.Event.unbindKeyboard(id);
+                    Ox.Event.bindKeyboard(stack[stack.length - 1]);
+                    Ox.print("blur", stack);
+                }
+            },
             focus: function(id) {
                 var index = stack.indexOf(id);
                 if (stack.length) {
@@ -295,19 +305,12 @@ requires
                     stack.splice(index, 1);
                 }
                 stack.push(id);
+                $elements[Ox.Focus.focused()].addClass("OxFocus");
                 Ox.Event.bindKeyboard(id);
                 Ox.print("focus", stack);
             },
             focused: function() {
                 return stack[stack.length - 1];
-            },
-            blur: function(id) {
-                if (stack.indexOf(id) > -1) {
-                    stack.splice(stack.length - 2, 0, stack.pop());
-                }
-                Ox.Event.unbindKeyboard(id);
-                Ox.Event.bindKeyboard(stack[stack.length - 1]);
-                Ox.print("blur", stack);
             }
         };
     }();
@@ -758,7 +761,7 @@ requires
 
     Ox.Element = function() {
 
-        var elements = {};
+        var elements = {}; // fixme: unused, we need this outside Element (for Focus)
 
         return function(options, self) {
 
@@ -782,7 +785,7 @@ requires
                         ox: that.id
                     }
                 });
-                elements[that.id] = that;
+                $elements[that.id] = that;
                 wrapjQuery();
             })();
 
@@ -836,8 +839,8 @@ requires
                         // if the $element of an ox object was returned
                         // then return the ox object instead
                         // so we can do oxObj.jqFn().oxFn()
-                        return ret.jquery && elements[id = ret.data("ox")] ?
-                                elements[id] : ret;
+                        return ret.jquery && $elements[id = ret.data("ox")] ?
+                                $elements[id] : ret;
                     }
                 });
             }
@@ -933,7 +936,7 @@ requires
             };
             that.remove = function() {
                 that.$element.remove();
-                delete elements[that.ox];
+                delete $elements[that.ox];
                 return that;
             };
             that.triggerEvent = function() {
@@ -2462,6 +2465,7 @@ requires
 
         function click(e) {
             var $element = $(e.target), pos;
+            that.gainFocus();
             while (!$element.hasClass("OxItem") && !$element.hasClass("OxPage")) {
                 $element = $element.parent();
             }
@@ -2760,6 +2764,7 @@ requires
                 .defaults({
                     columns: [],
                     columnWidth: [40, 800],
+                    id: "",
                     request: function() {}, // {sort, range, keys, callback}
                     sort: []
                 })
@@ -2858,6 +2863,7 @@ requires
 
         that.$body = new Ox.List({
                 construct: constructItem,
+                id: self.options.id,
                 itemHeight: 16,
                 itemWidth: getItemWidth(),
                 keys: $.map(self.visibleColumns, function(v, i) {

demos/test/list.js

@@ -115,6 +115,7 @@ $(function() {
                     width: 80
                 }
             ],
+            id: "list",
             request: function(options) {
                 app.request("find", $.extend(options, {
                     query: {