add load event to list

build/css/ox.ui.modern.css

@@ -186,6 +186,13 @@ Scrollbars
 .OxThemeModern ::-webkit-scrollbar {
     width: 12px;
     height: 12px;
+}
+.OxThemeModern ::-webkit-scrollbar:horizontal {
+    border-top: 1px solid rgb(48, 48, 48);
+    border-bottom: 1px solid rgb(48, 48, 48);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+}
+.OxThemeModern ::-webkit-scrollbar:vertical {
     border-left: 1px solid rgb(48, 48, 48);
     border-right: 1px solid rgb(48, 48, 48);
     background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
@@ -206,6 +213,11 @@ Scrollbars
 .OxThemeModern ::-webkit-scrollbar-button:vertical:increment {
     background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png);
 }
+.OxThemeModern ::-webkit-scrollbar-corner {
+    border-right: 1px solid rgb(48, 48, 48);
+    border-bottom: 1px solid rgb(48, 48, 48);
+    background: -webkit-gradient(linear, left top, right bottom, from(rgb(96, 96, 96)), to(rgb(32, 32, 32)));
+}
 .OxThemeModern ::-webkit-scrollbar-thumb {
     border: 1px solid rgb(48, 48, 48);
     -webkit-border-radius: 6px;

build/js/ox.js

@@ -1172,6 +1172,32 @@ Ox.formatDate = function() {
     };
 }();
 
+Ox.formatDuration = function(sec, day, dec) {
+    /*
+    >>> Ox.formatDuration(123456.789, 3)
+    1:10:17:36.789
+    >>> Ox.formatDuration(12345.6789)
+    03:25:46
+    >>> Ox.formatDuration(12345.6789, true)
+    0:03:25:46
+    >>> Ox.formatDuration(3599.999, 3)
+    00:59:59.999
+    >>> Ox.formatDuration(3599.999)
+    01:00:00
+    */
+    var dec = arguments.length == 3 ? dec : (Ox.isNumber(day) ? day : 0),
+        day = arguments.length == 3 ? day : (Ox.isBoolean(day) ? day : false),
+        sec = dec ? sec : Math.round(sec),
+        arr = [
+            Math.floor(sec / 86400),
+            Ox.pad(Math.floor(sec % 86400 / 3600), 2),
+            Ox.pad(Math.floor(sec % 3600 / 60), 2),
+            Ox.pad(Ox.formatNumber(sec % 60, dec, true), dec ? dec + 3 : 2)
+        ];
+    !arr[0] && !day && arr.shift();
+    return arr.join(":");
+};
+
 Ox.formatNumber = function(num, dec) {
     /*
     >>> Ox.formatNumber(123456789, 3)
@@ -1192,6 +1218,23 @@ Ox.formatNumber = function(num, dec) {
     return (num < 0 ? "-" : "") + spl.join(".");
 };
 
+Ox.formatValue = function(num, str) {
+    /*
+    >>> Ox.formatValue(0, "B")
+    ???
+    >>> Ox.formatValue(123456789, "B")
+    ???
+    */
+    var val = "";
+    $.each(["K", "M", "G", "T", "P"], function(i, v) {
+        if (num < Math.pow(1024, i + 2) || i == len - 1) {
+            val = Ox.formatNumber(num / Math.pow(1024, i + 1), i) + " " + v + str;
+            return false;
+        }
+    });
+    return val;
+};
+
 /*
 ================================================================================
 Math functions

build/js/ox.ui.js

@@ -2394,8 +2394,6 @@ requires
                 .click(click)
                 .scroll(scroll);
 
-        Ox.print("self.options.unique", self.options.unique)
-
         $.extend(self, {
             $items: [],
             $pages: [],
@@ -2818,7 +2816,7 @@ requires
             self.requests.push(self.options.request({
                 callback: function(result) {
                     var keys = {};
-                    Ox.print("items", result.data.items);
+                    that.triggerEvent("load", result.data);
                     $.extend(self, {
                         listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
                         listLength: result.data.items,

demos/test/list.css

@@ -0,0 +1,7 @@
+#statusBar {
+    text-align: center;
+}
+#totals {
+    margin-top: 2px;
+    font-size: 9px;
+}

demos/test/list.html

@@ -4,6 +4,7 @@
         <title>oxjs List Demo</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
+        <link rel="stylesheet" type="text/css" href="list.css"/>
         <script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
         <script type="text/javascript" src="../../build/js/ox.js"></script>
         <script type="text/javascript" src="../../build/js/ox.ui.js"></script>

demos/test/list.js

@@ -6,37 +6,6 @@ $(function() {
             // requestURL: "http://blackbook.local:8000/api/"
             requestURL: "http://lion.oil21.org:8000/api/"
         }),
-        $menu = new Ox.MainMenu({
-            menus: [
-                {
-                    id: "demo",
-                    title: "Demo",
-                    items: [
-                        { id: "about", title: "About" }
-                    ]
-                },
-                {
-                    id: "sort",
-                    title: "Sort",
-                    items: [
-                        { id: "sort_movies", title: "Sort Movies by", items: [
-                            { checked: false, group: "sort_movies", id: "title", title: "Title"},
-                            { checked: false, group: "sort_movies", id: "director", title: "Director" },
-                            { checked: false, group: "sort_movies", id: "country", title: "Country" },
-                            { checked: true, group: "sort_movies", id: "year", title: "Year" },
-                            { checked: false, group: "sort_movies", id: "runtime", title: "Runtime" },
-                            { checked: false, group: "sort_movies", id: "language", title: "Language" },
-                            { checked: false, group: "sort_movies", id: "genre", title: "Genre" },
-                        ] },
-                        { id: "order_movies", title: "Order Movies", items: [
-                            { checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
-                            { checked: true, group: "order_movies", id: "descending", title: "Descending" },
-                        ] }
-                    ]
-                },
-            ],
-            size: "large"
-        }),
         groups = [
             {
                 id: "director",
@@ -63,9 +32,9 @@ $(function() {
         ],
         $group = [],
         elements = [],
-        documentWidth = $document.width();
+        rightPanelWidth = $document.width() - 256;
     $.each(groups, function(i, v) {
-        var size = documentWidth / 3 + (documentWidth % 3 > i);
+        var size = rightPanelWidth / 3 + (rightPanelWidth % 3 > i);
         $group[i] = new Ox.TextList({
             columns: [
                 {
@@ -94,7 +63,7 @@ $(function() {
                     query: {
                         conditions: [
                             {
-                                key: "country",
+                                key: "director",
                                 value: "",
                                 operator: ""
                             }
@@ -117,29 +86,12 @@ $(function() {
         });
     });
     Ox.print("elements", elements)
-    var $groups = new Ox.SplitPanel({
+
+    var $groupsPanel = new Ox.SplitPanel({
             elements: elements,
             orientation: "horizontal"
         }),
-        $listbar = Ox.Bar({
+
-            size: 24
-        });
-        $select = Ox.Select({
-            id: "selectView",
-            items: [
-                {
-                    checked: true,
-                    id: "list",
-                    title: "View: List"
-                },
-                {
-                    id: "icons",
-                    title: "View: Icons"
-                }
-            ]
-        }).css({
-            margin: "4px"
-        }).width(128).appendTo($listbar);
         $list = new Ox.TextList({
             columns: [
                 {
@@ -228,7 +180,7 @@ $(function() {
                     query: {
                         conditions: [
                             {
-                                key: "country",
+                                key: "director",
                                 value: "",
                                 operator: ""
                             }
@@ -239,39 +191,132 @@ $(function() {
             },
             sort: [
                 {
-                    key: "year",
+                    key: "director",
-                    operator: "-"
+                    operator: "+"
                 }
             ]
         }),
-        $right = Ox.SplitPanel({
+
-            elements: [
+        $toolBar = Ox.Bar({
+                size: 24
+            }),
+
+        $select = Ox.Select({
+            id: "selectView",
+            items: [
                 {
-                    element: $groups,
+                    checked: true,
-                    size: 128
+                    id: "list",
+                    title: "View: List"
                 },
                 {
-                    element: $listbar,
+                    id: "icons",
-                    size: 24
+                    title: "View: Icons"
+                }
+            ]
+        }).css({
+            margin: "4px"
+        }).width(128).appendTo($toolBar);
+
+        $contentPanel = new Ox.SplitPanel({
+            elements: [
+                {
+                    element: $groupsPanel,
+                    size: 128
                 },
                 {
                     element: $list
                 }
             ],
             orientation: "vertical"
-        })
+        }),
-        $main = Ox.SplitPanel({
+
+        $statusBar = new Ox.Bar({
+            size: 16
+        }).attr({
+            id: "statusBar"
+        }),
+
+        $totals = new Ox.Element().attr({
+            id: "totals"
+        }).appendTo($statusBar);
+
+        $leftPanel = new Ox.Container(),
+
+        $rightPanel = new Ox.SplitPanel({
             elements: [
                 {
-                    element: $menu,
+                    element: $toolBar,
                     size: 24
                 },
                 {
-                    element: $right
+                    element: $contentPanel
+                },
+                {
+                    element: $statusBar,
+                    size: 16
+                }
+            ],
+            orientation: "vertical"
+        }),
+
+        $mainMenu = new Ox.MainMenu({
+            menus: [
+                {
+                    id: "demo",
+                    title: "Demo",
+                    items: [
+                        { id: "about", title: "About" }
+                    ]
+                },
+                {
+                    id: "sort",
+                    title: "Sort",
+                    items: [
+                        { id: "sort_movies", title: "Sort Movies by", items: [
+                            { checked: false, group: "sort_movies", id: "title", title: "Title"},
+                            { checked: false, group: "sort_movies", id: "director", title: "Director" },
+                            { checked: false, group: "sort_movies", id: "country", title: "Country" },
+                            { checked: true, group: "sort_movies", id: "year", title: "Year" },
+                            { checked: false, group: "sort_movies", id: "runtime", title: "Runtime" },
+                            { checked: false, group: "sort_movies", id: "language", title: "Language" },
+                            { checked: false, group: "sort_movies", id: "genre", title: "Genre" },
+                        ] },
+                        { id: "order_movies", title: "Order Movies", items: [
+                            { checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
+                            { checked: true, group: "order_movies", id: "descending", title: "Descending" },
+                        ] }
+                    ]
+                },
+            ],
+            size: "large"
+        }),
+
+        $mainPanel = new Ox.SplitPanel({
+            elements: [
+                {
+                    element: $leftPanel,
+                    size: 256
+                },
+                {
+                    element: $rightPanel
+                }
+            ]
+        }),
+
+        $appPanel = Ox.SplitPanel({
+            elements: [
+                {
+                    element: $mainMenu,
+                    size: 24
+                },
+                {
+                    element: $mainPanel
                 }
             ],
             orientation: "vertical"
         }).appendTo($body);
+
     $.each(groups, function(i, group) {
         Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
             $list.options({
@@ -316,6 +361,18 @@ $(function() {
     });
     Ox.Event.bind(null, "change_sort_movies", function(event, data) {
 
+    });
+    Ox.Event.bind(null, "load_list", function(event, data) {
+        Ox.print(data)
+        var dhms = ["day", "hour", "minute", "second"],
+            html = [
+            data.items + " movie" + (data.items != 1 ? "s" : ""),
+            $.map(Ox.formatDuration(data.runtime).split(":"), function(v, i) {
+                return v + " " + dhms[i] + ((v != "1" && v != "01") ? "s" : "");
+            }).join(" "),
+            Ox.formatValue(data.pixels, "px")
+        ];
+        $totals.html(html.join(", "));
     });
     Ox.Event.bind(null, "sort_list", function(event, data) {