making groups work

build/js/ox.ui.js

@@ -45,6 +45,7 @@ requires
             }(),
             path: $("script[src*=ox.ui.js]").attr("src")
                 .replace("js/ox.ui.js", ""),
+            scrollbarSize: $.browser.mozilla ? 16 : 12,
             symbols: {
                 alt: "\u2325",
                 apple: "\uF8FF",
@@ -290,6 +291,7 @@ requires
             blur: function(id) {
                 if (stack.indexOf(id) > -1) {
                     $elements[Ox.Focus.focused()].removeClass("OxFocus");
+                    $(".OxFocus").removeClass("OxFocus"); // fixme: the above is better, and should work
                     stack.splice(stack.length - 2, 0, stack.pop());
                     Ox.Event.unbindKeyboard(id);
                     Ox.Event.bindKeyboard(stack[stack.length - 1]);
@@ -656,7 +658,7 @@ requires
                                     }
                                 ],
                                 width: 400,
-                                height: 100
+                                height: 200
                             })
                             .append("Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.")
                             .open();
@@ -2383,12 +2385,15 @@ requires
                     request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
                     rowLength: 1,
                     sort: [],
-                    type: "text"
+                    type: "text",
+                    unique: ""
                 })
                 .options(options || {})
                 .click(click)
                 .scroll(scroll);
 
+        Ox.print("self.options.unique", self.options.unique)
+
         $.extend(self, {
             $items: [],
             $pages: [],
@@ -2412,26 +2417,8 @@ requires
         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({
+        updateQuery();
-            callback: function(result) {
-                var keys = {};
-                Ox.print("items", result.data.items);
-                $.extend(self, {
-                    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" ?
-                            self.pageLength * self.options.itemWidth : 0,
-                    pageHeight: self.options.orientation == "horizontal" ? 0 :
-                            self.pageLength * self.options.itemHeight / self.options.rowLength
-                });
-                that.$content.css({
-                    height: self.listHeight + "px"
-                });
-                loadPages(self.page);
         that.bindEvent(self.keyboardEvents);
-            }
-        });
 
         function addAllToSelection(pos) {
             var arr,
@@ -2488,15 +2475,28 @@ requires
             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, {
-                    items: self.selected.length
+                    ids: $.map(self.selected, function(v, i) {
+                        return self.ids[v];
+                    })
                 });
             }
         }
 
+        function clear() {
+            $.each(self.requests, function(i, v) {
+                Ox.Request.cancel(v);
+            });
+            $.extend(self, {
+                $items: [],
+                $pages: [],
+                page: 0,
+                requests: []
+            });
+        }
+
         function click(e) {
             var $element = $(e.target), pos;
             that.gainFocus();
@@ -2525,13 +2525,15 @@ requires
                     self.$items[pos].removeClass("OxSelected");
                 }
                 Ox.Event.trigger("select_" + self.options.id, {
-                    items: self.selected.length
+                    ids: $.map(self.selected, function(v, i) {
+                        return self.ids[v];
+                    })
                 });
             }
         }
 
         function getHeight() {
-            return that.height() - (that.$content.width() > that.width() ? 12 : 0);
+            return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
         }
 
         function getNext() {
@@ -2551,6 +2553,39 @@ requires
                 : Math.floor(that.scrollLeft() / self.pageWidth);
         }
 
+        function getPositions() {
+            Ox.print("getPositions", $.map(self.selected, function(v, i) {
+                return self.ids[v];
+            }));
+            // fixme: optimize: send non-selected ids if more than half of the items are selected
+            if (self.selected.length /*&& self.selected.length < self.listLength*/) {
+                self.requests.push(self.options.request({
+                    callback: getPositionsCallback,
+                    ids: $.map(self.selected, function(v, i) {
+                        return self.ids[v];
+                    }),
+                    sort: self.options.sort
+                }));
+            } else {
+                getPositionsCallback();
+            }
+        }
+
+        function getPositionsCallback(result) {
+            Ox.print("getPositionsCallback", result)
+            if (result) {
+                $.extend(self, {
+                    ids: {},
+                    selected: []
+                });
+                $.each(result.data.positions, function(id, pos) {
+                    Ox.print("id", id, "pos", pos)
+                    self.selected.push(pos);
+                });
+            }
+            load();
+        }
+
         function getPrevious() {
             var pos = -1;
             if (self.selected.length) {
@@ -2560,7 +2595,7 @@ requires
         }
 
         function getWidth() {
-            return that.width() - (that.$content.height() > that.height() ? 12 : 0);
+            return that.width() - (that.$content.height() > that.height() ? oxui.scrollbarSize : 0);
         }
 
         function invertSelection() {
@@ -2573,9 +2608,16 @@ requires
             return self.selected.indexOf(pos) > -1;
         }
 
+        function load() {
+            that.scrollTop(0);
+            that.$content.empty();
+            loadPages(self.page);
+        }
+
         function loadPage(page, callback) {
             Ox.print("loadPage", page)
-            if (page < 0 || page >= self.pages) { // fixme: callback doesn't get called
+            if (page < 0 || page >= self.pages) {
+                !Ox.isUndefined(callback) && callback();
                 return;
             }
             var keys = $.inArray("id", self.options.keys) > -1 ? self.options.keys :
@@ -2598,22 +2640,20 @@ requires
                         }
                         $.each(result.data.items, function(i, v) {
                             var pos = offset + i;
-                            if (Ox.isUndefined(v.id)) {
-                                 v.id = pos;
-                            }
                             self.$items[pos] = new Ox.ListItem({
                                 construct: self.options.construct,
                                 data: v,
+                                id: v[self.options.unique],
                                 position: pos
                             });
-                            self.ids[pos] = v.id;
+                            self.ids[pos] = v[self.options.unique];
                             if (isSelected(pos)) {
                                 self.$items[pos].addClass("OxSelected");
                             }
                             self.$items[pos].appendTo(self.$pages[page]);
                         });
                         self.$pages[page].appendTo(that.$content);
-                        callback();
+                        !Ox.isUndefined(callback) && callback();
                     },
                     keys: keys,
                     range: range,
@@ -2697,7 +2737,7 @@ requires
         }
 
         function scrollToLast() {
-            
+            that.scrollTop(self.listHeight);
         }
 
         function select(pos) {
@@ -2770,56 +2810,44 @@ requires
             unloadPage(page + 1)
         }
 
-        that.clearCache = function() {
+        function updateQuery() {
-            self.$pages = [];
+            clear();
+            self.requests.push(self.options.request({
+                callback: function(result) {
+                    var keys = {};
+                    Ox.print("items", result.data.items);
+                    $.extend(self, {
+                        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" ?
+                                self.pageLength * self.options.itemWidth : 0,
+                        pageHeight: self.options.orientation == "horizontal" ? 0 :
+                                self.pageLength * self.options.itemHeight / self.options.rowLength
+                    });
+                    that.$content.css({
+                        height: self.listHeight + "px"
+                    });
+                    getPositions();
+                }
+            }));
+        }
+
+        function updateSort() {
+            clear();
+            getPositions();
+        }
+
+        self.onChange = function(key, value) {
+            Ox.print("list onChange", key, value);
+            if (key == "request") {
+                updateQuery();
+            }
         };
 
-        that.reload = function() {
+        that.clearCache = function() { // fixme: unused? make private?
-
+            self.$pages = [];
-            $.each(self.requests, function(i, v) {
+        };
-                Ox.Request.cancel(v);
-            });
-            $.extend(self, {
-                $items: [],
-                $pages: [],
-                page: 0,
-                requests: []
-            });
-
-            // fixme: optimize: send non-selected ids if more than half of the items are selected
-            Ox.print(self.selected.length, self.listLength);
-            if (self.selected.length && self.selected.length < self.listLength) {
-                Ox.print("sort", self.options.sort, "ids", $.map(self.selected, function(v, i) {
-                    return self.ids[v];
-                }));
-                self.requests.push(self.options.request({
-                    callback: callback,
-                    ids: $.map(self.selected, function(v, i) {
-                        return self.ids[v];
-                    }),
-                    sort: self.options.sort
-                }));
-            } else {
-                callback();
-            }
-
-            function callback(result) {
-                if (result) {
-                    $.extend(self, {
-                        ids: {},
-                        selected: []
-                    });
-                    $.each(result.data.positions, function(id, pos) {
-                        Ox.print("id", id, "pos", pos)
-                        self.selected.push(pos);
-                    });
-                }
-                that.$content.empty();
-                that.scrollTop(0);
-                loadPages(self.page);
-            }
-
-        }
 
         that.sort = function(key, operator) {
             if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
@@ -2828,7 +2856,7 @@ requires
                     operator: operator
                 }
                 // fixme: trigger sort event here
-                that.reload();
+                updateSort();
             }
         }
 
@@ -2843,6 +2871,7 @@ requires
                 .defaults({
                     construct: function() {},
                     data: {},
+                    id: "",
                     position: 0
                 })
                 .options(options || {});
@@ -2853,7 +2882,7 @@ requires
 
         that.$element = self.options.construct(self.options.data)
             .attr({
-                id: self.options.data.id
+                id: self.options.id
             })
             .data("position", self.options.position);
 
@@ -2882,6 +2911,18 @@ requires
                 .options(options || {})
                 .addClass("OxTextList");
 
+        $.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
+            if (Ox.isUndefined(v.unique)) {
+                v.unique = false;
+            }
+            if (Ox.isUndefined(v.visible)) {
+                v.visible = false;
+            }
+            if (v.unique) {
+                self.unique = v.id;
+            }
+        });
+
         $.extend(self, {
             columnWidths: [],
             itemHeight: 16,
@@ -2984,7 +3025,8 @@ requires
                 orientation: "vertical",
                 request: self.options.request,
                 sort: self.options.sort,
-                type: "text"
+                type: "text",
+                unique: self.unique
             })
             .addClass("OxBody")
             .scroll(function() {
@@ -3017,7 +3059,7 @@ requires
             var $item = $("<div>")
                     .addClass("OxItem")
                     .css({
-                        width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px"
+                        width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + "px"
                     });
             $.each(self.visibleColumns, function(i, v) {
                 var $cell = $("<div>")
@@ -3055,7 +3097,7 @@ requires
         }
 
         function getItemWidth() {
-            return Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12)
+            return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
         }
 
         function moveColumn(id) {
@@ -3114,6 +3156,12 @@ requires
             ]);
         }
 
+        self.onChange = function(key, value) {
+            if (key == "request") {
+                that.$body.options(key, value);
+            }
+        };
+
         that.sort = function(key, operator) {
             var isSelected = key == self.options.sort[0].key;
             self.options.sort = [
@@ -4087,7 +4135,6 @@ requires
             length = self.options.elements.length,
             dimensions = oxui.getDimensions(self.options.orientation),
             edges = oxui.getEdges(self.options.orientation);
-        Ox.print("dimensions, edges", dimensions, edges)
         $.each(self.options.elements, function(i, v) {
             var element = v.element
                 .css({

demos/test/list.js

@@ -58,21 +58,21 @@ $(function() {
             }
             */
         ],
+        $group = [],
         elements = [],
         documentWidth = $document.width();
-    Ox.print("documentWidth", documentWidth)
     $.each(groups, function(i, v) {
         var size = documentWidth / 3 + (documentWidth % 3 > i);
-        elements.push({
+        $group[i] = new Ox.TextList({
-            element: new Ox.TextList({
             columns: [
                 {
                     align: "left",
                     id: "name",
-                        operator: "+",
+                    operator: v.id == "year" ? "-" : "+",
-                        title: "Name",
+                    title: v.title,
+                    unique: true,
                     visible: true,
-                        width: size - 72
+                    width: size - 50 - ($.browser.mozilla ? 16 : 12)
                 },
                 {
                     align: "right",
@@ -80,7 +80,7 @@ $(function() {
                     operator: "-",
                     title: "Items",
                     visible: true,
-                        width: 60
+                    width: 50
                 }
             ],
             id: "group_" + v.id,
@@ -106,7 +106,9 @@ $(function() {
                     operator: "+"
                 }
             ]
-            }),
+        });
+        elements.push({
+            element: $group[i],
             size: size
         });
     });
@@ -141,6 +143,7 @@ $(function() {
                     id: "id",
                     operator: "+",
                     title: "ID",
+                    unique: true,
                     visible: true,
                     width: 80
                 },
@@ -205,7 +208,6 @@ $(function() {
                     id: "rating",
                     operator: "-",
                     title: "Rating",
-                    visible: false,
                     width: 80
                 },
                 {
@@ -213,7 +215,6 @@ $(function() {
                     id: "votes",
                     operator: "-",
                     title: "Votes",
-                    visible: false,
                     width: 80
                 }
             ],
@@ -267,4 +268,47 @@ $(function() {
             ],
             orientation: "vertical"
         }).appendTo($body);
+    $.each(groups, function(i, group) {
+        Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
+            Ox.print("OK")
+            $list.options({
+                request: function(options) {
+                    app.request("find", $.extend(options, {
+                        query: {
+                            conditions: $.map(data.ids, function(v, j) {
+                                return {
+                                    key: group.id,
+                                    value: v,
+                                    operator: "="
+                                }
+                            }),
+                            operator: "|"
+                        }
+                    }), options.callback);
+                }
+            });
+            $.each(groups, function(i_, group_) {
+                if (i_ != i) {
+                    $group[i_].options({
+                        request: function(options) {
+                            delete options.keys;
+                            app.request("find", $.extend(options, {
+                                group: group_.id,
+                                query: {
+                                    conditions: $.map(data.ids, function(v, j) {
+                                        return {
+                                            key: group.id,
+                                            value: v,
+                                            operator: "="
+                                        }
+                                    }),
+                                    operator: "|"
+                                }
+                            }), options.callback);
+                        }
+                    })
+                }
+            });
+        });
+    });
 });