better list demo

build/css/ox.ui.css

@@ -637,10 +637,18 @@ Menus
     background: rgb(48, 48, 48);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48)));
 }
-.OxMainMenu > .OxExtras {
+.OxMainMenu.OxLarge > .OxExtras {
     float: right;
     padding: 4px 12px 0 0;
 }
+.OxMainMenu.OxMedium > .OxExtras {
+    float: right;
+    padding: 2px 10px 0 0;
+}
+.OxMainMenu.OxSmall > .OxExtras {
+    float: right;
+    padding: 2px 8px 0 0;
+}
 
 
 .OxMenu {

build/js/ox.ui.js

@@ -204,7 +204,6 @@ requires
 
     // use dom elements / jquery instead
 
-    
     Ox.Event = function() {
         var keyboardEvents = {};
             $eventHandler = $("<div>");
@@ -532,8 +531,6 @@ requires
 
     Ox.Request = function() {
 
-        // chained requests, make cancelable: id = 4.7.9
-
         var cache = {},
             pending = {},
             requests = {},
@@ -574,22 +571,22 @@ requires
 
             send: function(options) {
 
-                options = $.extend({
+                var options = $.extend({
-                    age: -1,
+                        age: -1,
-                    callback: function() {},
+                        callback: function() {},
-                    id: Ox.uid(),
+                        id: Ox.uid(),
-                    timeout: self.options.timeout,
+                        timeout: self.options.timeout,
-                    type: self.options.type,
+                        type: self.options.type,
-                    url: self.options.url
+                        url: self.options.url
-                }, options);
+                    }, options),
-
+                    req = JSON.stringify({
-                var req = JSON.stringify({
                         url: options.url,
                         data: options.data
                     });
 
                 function callback(data) {
                     delete requests[options.id];
+                    Ox.length(requests) == 0 && Ox.Event.trigger("requestStop"); 
                     options.callback(data);
                 }
 
@@ -718,9 +715,16 @@ requires
                             type: options.type,
                             url: options.url
                         });
+                        Ox.length(requests) == 1 && Ox.Event.trigger("requestStart");
                     }
                 }
+
                 return options.id;
+
+            },
+
+            requests: function() {
+                return Ox.length(requests);
             }
 
         };
@@ -4208,8 +4212,15 @@ requires
                 .addClass(
                     "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
                 );
-        self.count = 0;
         self.deg = 0;
+        self.interval = 0;
+        self.isRunning = false;
+        function clear() {
+            clearInterval(self.interval);
+            self.deg = 0;
+            self.interval = 0;
+            update();
+        }
         function update() {
             that.css({
                 MozTransform: "rotate(" + self.deg + "deg)",
@@ -4217,28 +4228,23 @@ requires
             });
         }
         that.start = function() {
-            self.deg = 0;
+            self.isRunning = true;
-            self.count++;
+            clear();
-            if (self.count == 1) {
+            that.animate({
-                that.animate({
+                opacity: 1
-                    opacity: 1
+            }, 250);
-                }, 250);
+            self.interval = setInterval(function() {
-                self.interval = setInterval(function() {
+                self.deg = (self.deg + 30) % 360;
-                    self.deg = (self.deg + 30) % 360;
+                update();
-                    update();
+            }, 83);
-                }, 83);
-            }
         };
         that.stop = function() {
-            self.count--;
+            that.animate({
-            if (self.count == 0) {
+                opacity: 0
-                that.animate({
+            }, 250, function() {
-                    opacity: 0
+                !self.isRunning && clear();
-                }, 250, function() {
+                self.isRunning = false;
-                    clearTimeout(self.interval);
+            });
-                    self.deg = 0;
-                });
-            }
         }
         return that;
     }

demos/test/list.js

@@ -19,7 +19,6 @@ $(function() {
                 id: "year",
                 title: "Year"
             },
-            /*
             {
                 id: "language",
                 title: "Language"
@@ -28,13 +27,13 @@ $(function() {
                 id: "genre",
                 title: "Genre"
             }
-            */
         ],
         $group = [],
         elements = [],
         rightPanelWidth = $document.width() - 256;
+
     $.each(groups, function(i, v) {
-        var size = rightPanelWidth / 3 + (rightPanelWidth % 3 > i);
+        var size = rightPanelWidth / 5 + (rightPanelWidth % 5 > i);
         $group[i] = new Ox.TextList({
             columns: [
                 {
@@ -44,15 +43,15 @@ $(function() {
                     title: v.title,
                     unique: true,
                     visible: true,
-                    width: size - 60 - ($.browser.mozilla ? 16 : 12)
+                    width: size - 40 - ($.browser.mozilla ? 16 : 12)
                 },
                 {
                     align: "right",
                     id: "items",
                     operator: "-",
-                    title: "Items",
+                    title: "#",
                     visible: true,
-                    width: 60
+                    width: 40
                 }
             ],
             id: "group_" + v.id,
@@ -74,8 +73,8 @@ $(function() {
             },
             sort: [
                 {
-                    key: "name",
+                    key: v.id == "year" ? "name" : "items",
-                    operator: "+"
+                    operator: "-"
                 }
             ]
         });
@@ -85,13 +84,27 @@ $(function() {
             size: size
         });
     });
-    Ox.print("elements", elements)
 
-    var $groupsPanel = new Ox.SplitPanel({
+    var $groupsInnerPanel = new Ox.SplitPanel({
-            elements: elements,
+            elements: [
+                elements[1],
+                elements[2],
+                elements[3]
+            ],
             orientation: "horizontal"
         }),
 
+        $groupsOuterPanel = new Ox.SplitPanel({
+            elements: [
+                elements[0],
+                {
+                    element: $groupsInnerPanel
+                },
+                elements[4]
+            ],
+            orientation: "horizontal"
+        })
+
         $list = new Ox.TextList({
             columns: [
                 {
@@ -327,7 +340,7 @@ $(function() {
         $contentPanel = new Ox.SplitPanel({
             elements: [
                 {
-                    element: $groupsPanel,
+                    element: $groupsOuterPanel,
                     size: 128
                 },
                 {
@@ -366,7 +379,14 @@ $(function() {
             orientation: "vertical"
         }),
 
+        $loadingIcon = new Ox.LoadingIcon({
+            size: "medium"
+        });
+
         $mainMenu = new Ox.MainMenu({
+            extras: [
+                $loadingIcon
+            ],
             menus: [
                 {
                     id: "demo",
@@ -423,6 +443,16 @@ $(function() {
             orientation: "vertical"
         }).appendTo($body);
 
+    Ox.Request.requests() && $loadingIcon.start();
+    Ox.Event.bind(null, "requestStart", function() {
+        Ox.print("start")
+        $loadingIcon.start();
+    });
+    Ox.Event.bind(null, "requestStop", function() {
+        Ox.print("stop")
+        $loadingIcon.stop();
+    });
+
     $.each(groups, function(i, group) {
         Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
             $list.options({