From 3061853ed216cec29874f7450aa214999e0ecc1c Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Mon, 28 Jun 2010 11:16:36 +0200
Subject: [PATCH] more list

---
 build/css/ox.ui.css        |   6 +-
 build/css/ox.ui.modern.css |   1 +
 build/js/ox.ui.js          | 193 +++++++++++++++++++++++++------------
 demos/test/list.js         |  31 +++++-
 4 files changed, 164 insertions(+), 67 deletions(-)

diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 3c27d53..a5a9ef6 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -11,10 +11,12 @@ Base
 body {
     margin: 0;
     overflow: hidden;
-    -webkit-user-select: none
+    -moz-user-select: none;
+    -webkit-user-select: none;
 }
 div {
-    -webkit-user-select: none
+    -moz-user-select: none;
+    -webkit-user-select: none;
 }
 div, input, textarea {
     font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;
diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index b0eece1..1d5d644 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -126,6 +126,7 @@ Lists
     background: rgb(66, 66, 66);
 }
 .OxThemeModern .OxTextList .OxBar .OxSelected {
+    background: -moz-linear-gradient(top, rgb(80, 80, 80), 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)));
     color: rgb(255, 255, 255);
 }
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 8f77fea..4e5a399 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -2387,31 +2387,42 @@ requires
                 .defaults({
                     itemHeight: 16,
                     itemWidth: 16,
+                    keys: [],
+                    listLength: 0,
                     orientation: "vertical",
                     request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
                     rowLength: 1,
                     sort: [],
                     type: "text"
                 })
-                .options(options || {});
+                .options(options || {})
+                .scroll(scroll);
 
-        Ox.print("self1", self)
         $.extend(self, {
             $items: [],
             $pages: [],
             page: 0,
             pageLength: 100,
-            pages: 0,
+            requests: [],
             selected: []
         });
-        Ox.print("self2", self)
-        $.extend(self, {
-            pageWidth: self.options.orientation == "horizontal" ?
-                    self.pageLength * self.options.itemWidth : 0,
-            pageHeight: self.options.orientation == "horizontal" ? 0 :
-                    self.pageLength * self.options.itemHeight / self.options.rowLength
+
+        self.options.request({
+            callback: function(result) {
+                $.extend(self, {
+                    listHeight: result.data.items * self.options.itemHeight,
+                    listLength: result.data.items,
+                    pages: Math.ceil(result.data.items / self.pageLength),
+                    pageWidth: self.options.orientation == "horizontal" ?
+                            self.pageLength * self.options.itemWidth : 0,
+                    pageHeight: self.options.orientation == "horizontal" ? 0 :
+                            self.pageLength * self.options.itemHeight / self.options.rowLength
+                });
+                loadPages(self.page);                
+            }
         });
 
+
         function addAllToSelection(pos) {
             var arr,
                 len = self.$items.length;
@@ -2503,19 +2514,23 @@ requires
         }
 
         function isSelected(pos) {
-            return selected.indexOf(pos) > -1;
+            return self.selected.indexOf(pos) > -1;
         }
 
         function loadPage(page, callback) {
-            if (page < 0 || page >= pages) {
+            Ox.print("loadPage", page, self.pages)
+            if (page < 0 || page >= self.pages) {
                 return;
             }
             var offset = page * self.pageLength,
                 range = [offset, offset + (page < self.pages - 1 ?
                         self.pageLength : self.listLength % self.pageLength)];
+            Ox.print("page", self.$pages[page]);
             if (Ox.isUndefined(self.$pages[page])) {
-                Ox.Request.send({
+                Ox.print("request...")
+                self.requests.push(self.options.request({
                     callback: function(data) {
+                        Ox.print("callback", data)
                         self.$pages[page] = new Ox.ListPage();
                         if (self.options.type == "text") {
                             self.$pages[page].css({
@@ -2534,12 +2549,17 @@ requires
                             }
                             self.$items[pos].appendTo(self.$pages[page])
                         });
+                        self.$pages[page].appendTo(that.$content);
                     },
+                    keys: $.map(self.visibleColumns, function(v, i) {
+                        return v.id;
+                    }),
                     range: range,
                     sort: self.options.sort
-                });
+                }));
+            } else {
+                self.$pages[page].appendTo(that.$content);
             }
-            self.$pages[page].appendTo(that.$content);
         }
 
         function loadPages(page, callback) {
@@ -2554,6 +2574,31 @@ requires
             });
         }
 
+        function scroll() {
+            var page = self.page;
+            self.page = getPage();
+            if (self.page == page - 1) {
+                unloadPage(self.page + 2);
+                loadPage(self.page - 1);
+            } else if (self.page ==page + 1) {
+                unloadPage(self.page - 2);
+                loadPage(self.page + 1);
+            } else if (self.page == page - 2) {
+                unloadPage(self.page + 3);
+                unloadPage(self.page + 2);
+                loadPage(self.page);
+                loadPage(self.page - 1);
+            } else if (self.page == page + 2) {
+                unloadPage(self.page - 3);
+                unloadPage(self.page - 2);
+                loadPage(self.page);
+                loadPage(self.page + 1);                    
+            } else if (self.page != page) {
+                unloadPages(page);
+                loadPages(self.page);
+            }
+        }
+
         function select(pos) {
             if (!isSelected(pos) || selected.length > 1) {
                 selectNone();
@@ -2621,6 +2666,37 @@ requires
             unloadPage(page + 1)
         }
 
+        that.clearCache = function() {
+            self.$pages = [];
+        };
+
+        that.reload = function() {
+            $.each(self.requests, function(i, v) {
+                Ox.Request.cancel(v);
+            });
+            self.requests = [];
+            $.extend(self, {
+                $items: [],
+                $pages: [],
+                page: 0,
+                selected: []
+            });
+            unloadPages(self.page);
+            that.scrollTop(0);
+            loadPages(self.page);
+        }
+
+        that.sort = function(key, operator) {
+            if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
+                self.options.sort[0] = {
+                    key: key,
+                    operator: operator
+                }
+                // trigger sort event
+                that.reload();
+            }
+        }
+
         return that;
 
     };
@@ -2643,7 +2719,7 @@ requires
                 .defaults({
                     columns: [],
                     request: function() {}, // {sort, range, keys, callback}
-                    sort: {}
+                    sort: []
                 })
                 .options(options || {})
                 .addClass("OxTextList");
@@ -2654,7 +2730,10 @@ requires
             page: 0,
             pageLength: 100,
             scrollLeft: 0,
-            selectedColumn: getColumnById(self.options.sort.key)
+            selectedColumn: getColumnById(self.options.sort[0].key),
+            visibleColumns: $.map(self.options.columns, function(v, i) {
+                return v.visible ? v : null;
+            })
         });
         $.extend(self, {
             pageHeight: self.pageLength * self.itemHeight
@@ -2672,7 +2751,7 @@ requires
             .appendTo(that.$bar);
         that.$head.$content.addClass("OxTitles");
         that.$titles = [];
-        $.each(self.options.columns, function(i, v) {
+        $.each(self.visibleColumns, function(i, v) {
             var $order, $resize, $left, $center, $right;
             self.columnWidths[i] = v.width;
             that.$titles[i] = $("<div>")
@@ -2683,7 +2762,7 @@ requires
                 })
                 .html(v.title)
                 .click(function() {
-                    if (self.options.sort.key != v.id) {
+                    if (self.options.sort[0].key != v.id) {
                         that.sort(v.id, v.operator);
                     } else {
                         that.order(self.options.operator == "+" ? "-" : "+");
@@ -2693,7 +2772,7 @@ requires
             $order = $("<div>")
                 .addClass("OxOrder")
                 .html(oxui.symbols["triangle_" + (
-                    self.options.sort.operator == "+" ? "up" : "down"
+                    self.options.sort[0].operator == "+" ? "up" : "down"
                 )])
                 .click(function() {
                     $(this).prev().trigger("click")
@@ -2736,40 +2815,34 @@ requires
 
         // Body
 
-        self.options.request({
-            callback: function(result) {
-                Ox.print("result", result);
-                $.extend(self, {
-                    listHeight: result.data.items * self.itemHeight,
-                    listLength: result.data.items,
-                    pages: Math.ceil(result.data.items / self.pageLength)
-                });
-                Ox.print("self", self);
-                that.$body = new Ox.List({
-                        itemHeight: 16,
-                        itemWidth: Ox.sum(self.columnWidths),
-                        orientation: "vertical",
-                        request: self.options.request,
-                        sort: self.options.sort,
-                        type: "text"
-                    }, self)
-                    .addClass("OxBody")
-                    .scroll(function() {
-                        var scrollLeft = $(this).scrollLeft();
-                        if (scrollLeft != self.scrollLeft) {
-                            self.scrollLeft = scrollLeft;
-                            that.$head.scrollLeft(scrollLeft);
-                        }
-                    })
-                    .appendTo(that);
-                Ox.print("that.$body", that.$body)
-                that.$body.$content.css({
-                    width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px",
-                    height: self.listHeight + "px"
-                });
-            }
+        Ox.print("self", self);
+        that.$body = new Ox.List({
+                itemHeight: 16,
+                itemWidth: Ox.sum(self.columnWidths),
+                orientation: "vertical",
+                request: self.options.request,
+                sort: self.options.sort,
+                type: "text"
+            }, self)
+            .addClass("OxBody")
+            .scroll(function() {
+                var scrollLeft = $(this).scrollLeft();
+                if (scrollLeft != self.scrollLeft) {
+                    self.scrollLeft = scrollLeft;
+                    that.$head.scrollLeft(scrollLeft);
+                }
+            })
+            .appendTo(that);
+        Ox.print("that.$body", that.$body)
+        that.$body.$content.css({
+            width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px",
+            height: self.listHeight + "px"
         });
 
+        function addColumn(id) {
+            
+        }
+
         function constructItem(item, pos) {
             var item = $("<div>")
                     .addClass("OxListItem")
@@ -2802,6 +2875,14 @@ requires
             return pos;
         }
 
+        function moveColumn(id) {
+            
+        }
+
+        function removeColumn(id) {
+            
+        }
+
         function resizeColumn(pos, width) {
             self.columnWidths[pos] = width;
             that.$head.$content.css({
@@ -2816,7 +2897,7 @@ requires
             that.$body.$content.css({
                 width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
             });
-            $(".OxColumn" + Ox.toTitleCase(args.columns[pos].id)).css({
+            $(".OxColumn" + Ox.toTitleCase(self.options.columns[pos].id)).css({
                 width: (width - 9) + "px"
             });
             that.$body.clearCache();
@@ -2848,14 +2929,6 @@ requires
             
         }
 
-        that.order = function(operator) {
-            if (operator != self.options.sort.operator) {
-                self.options.sort.operator = operator;
-                toggleOrder(self.selectedColumn);
-                that.$body.order(operator);
-            }
-        };
-
         that.sort = function(key, operator) {
             if (key != self.options.sort.key || operator != self.options.sort.operator) {
                 self.options.sort = {
diff --git a/demos/test/list.js b/demos/test/list.js
index 5d271f6..4969bf7 100644
--- a/demos/test/list.js
+++ b/demos/test/list.js
@@ -2,7 +2,7 @@ $(function() {
     Ox.theme("modern");
     var $body = $("body"),
         app = new Ox.App({
-            requestURL: "http://blackbook.local:8000/api/"
+            requestURL: "http://lion.oil21.org:8000/api/"
         }),
         $list = new Ox.TextList({
             columns: [
@@ -11,6 +11,7 @@ $(function() {
                     id: "title",
                     operator: "+",
                     title: "Title",
+                    visible: true,
                     width: 160
                 },
                 {
@@ -18,13 +19,31 @@ $(function() {
                     id: "director",
                     operator: "+",
                     title: "Director",
+                    visible: true,
                     width: 160
                 },
+                {
+                    align: "left",
+                    id: "country",
+                    operator: "+",
+                    title: "Country",
+                    visible: true,
+                    width: 120
+                },
                 {
                     align: "right",
                     id: "year",
                     operator: "-",
                     title: "Year",
+                    visible: true,
+                    width: 80
+                },
+                {
+                    align: "right",
+                    id: "runtime",
+                    operator: "-",
+                    title: "Runtime",
+                    visible: false,
                     width: 80
                 }
             ],
@@ -42,9 +61,11 @@ $(function() {
                     }
                 }), options.callback);
             },
-            sort: {
-                key: "year",
-                operator: "-"
-            }
+            sort: [
+                {
+                    key: "year",
+                    operator: "-"
+                }
+            ]
         }).appendTo($body);
 });