List: add query option; fix a bug related to Ox.api returning -1 as position (as opposed to the pandora backend, which doesn't include the id in that case); fix a bug related to determining sizes when items is an array

source/Ox.UI/js/List/List.js

@@ -15,6 +15,15 @@ Ox.List <f> List constructor
         min <n|0> Minimum number of items that must be selected
         orientation <s|vertical> 'horizontal', 'vertical' or 'both'
         pageLength <n|100> number of items per page
+        query <o> Query
+            conditions <[o]> Conditions
+                key <s> Key
+                operator <s> Operator (like `'='` or `'!='`)
+                    Can be `'='` (contains) `'=='` (is), `'^'` (starts with),
+                    `'$'` (ends with), `'<'`, `'<='`,  `'>'`, `'>='`, optionally
+                    prefixed with `'!'` (not)
+                value <*> Value
+            operator <s> Operator (`'&'` or `'|'`)
         selected <a|[]> ids of the selected elements
         sort <a|[]> sort order
         sortable <b|false> If true, items can be re-ordered
@@ -64,6 +73,7 @@ Ox.List = function(options, self) {
                 min: 0,
                 orientation: 'vertical',
                 pageLength: 100,
+                query: {conditions: [], operator: '&'},
                 selected: [],
                 sort: [],
                 sortable: false,
@@ -93,6 +103,9 @@ Ox.List = function(options, self) {
                         updateQuery();
                     }
                 },
+                query: function() {
+                    that.reloadList();
+                },
                 selected: function() {
                     var previousSelected = self.selected;
                     setSelected(self.options.selected);
@@ -643,6 +656,7 @@ Ox.List = function(options, self) {
         if (self.options.selected.length/* && ids.length < self.listLength*/) {
             self.requests.push(self.options.items({
                 positions: self.options.selected,
+                query: self.options.query,
                 sort: self.options.sort
             }, function(result) {
                 getPositionsCallback(result, callback);
@@ -662,8 +676,10 @@ Ox.List = function(options, self) {
             Ox.forEach(result.data.positions, function(pos, id) {
                 // fixme: in case the order of self.options.selected
                 // is important - it may get lost here
-                self.options.selected.push(id);
+                if (pos > -1) {
-                self.selected.push(pos);
+                    self.options.selected.push(id);
+                    self.selected.push(pos);
+                }
             });
             if (self.selected.length) {
                 pos = Ox.min(self.selected);
@@ -697,9 +713,10 @@ Ox.List = function(options, self) {
     }
 
     function getRowLength() {
-        return self.options.orientation == 'both'
+        return self.options.orientation == 'both' ? Math.floor(
-            ? Math.floor((getWidth() - self.listMargin) /
+            (getWidth() - self.listMargin)
-            (self.options.itemWidth + self.itemMargin)) : 1;
+            / (self.options.itemWidth + self.itemMargin)
+        ) : 1;
     }
 
     function getScrollPosition() {
@@ -727,6 +744,7 @@ Ox.List = function(options, self) {
                 // selection across items that are not in the DOM
                 self.options.items({
                     keys: [self.options.unique],
+                    query: self.options.query,
                     range: [0, self.listLength],
                     sort: self.options.sort
                 }, function(result) {
@@ -749,7 +767,9 @@ Ox.List = function(options, self) {
 
     function getWidth() {
         //Ox.Log('List', 'LIST THAT.WIDTH()', that.width())
-        return that.width() - (that.$content.height() > that.height() ? Ox.UI.SCROLLBAR_SIZE : 0);
+        return that.width() - (
+            that.$content.height() > that.height() ? Ox.UI.SCROLLBAR_SIZE : 0
+        );
     }
 
     function invertSelection() {
@@ -821,6 +841,7 @@ Ox.List = function(options, self) {
             self.$pages[page].appendTo(that.$content);
             self.requests.push(self.options.items({
                 keys: keys,
+                query: self.options.query,
                 range: range,
                 sort: self.options.sort
             }, function(result) {
@@ -1204,6 +1225,7 @@ Ox.List = function(options, self) {
                 // async and id not in current view
                 self.options.items({
                     positions: [id],
+                    query: self.options.query,
                     sort: self.options.sort
                 }, function(result) {
                     pos = result.data.positions[id];
@@ -1336,39 +1358,41 @@ Ox.List = function(options, self) {
     }
 
     function updateQuery(callback) { // fixme: shouldn't this be setQuery?
-        //Ox.Log('List', 'updateQuery', self.options)
         clear(); // fixme: bad function name ... clear what?
-        self.requests.push(self.options.items({}, function(result) {
+        self.requests.push(self.options.items({
+            query: self.options.query
+        }, function(result) {
             var keys = {};
             //Ox.Log('List', 'INIT!!!', result.data)
             // timeout needed since a synchronous items function
-            // will reach here before one can bind to the init event
+            // will reach here before one can bind to the init event,
+            // and before any sizes can be determined via the DOM
             setTimeout(function() {
                 that.triggerEvent('init', result.data);
+                self.rowLength = getRowLength();
+                self.pageLength = self.options.orientation == 'both'
+                    ? self.pageLengthByRowLength[self.rowLength]
+                    : self.options.pageLength;
+                Ox.extend(self, {
+                    listLength: result.data.items,
+                    pages: Math.max(Math.ceil(result.data.items / self.pageLength), 1),
+                    pageWidth: self.options.orientation == 'vertical'
+                            ? 0 : (self.options.itemWidth + self.itemMargin) * (
+                                self.options.orientation == 'horizontal'
+                                ? self.pageLength : self.rowLength
+                            ),
+                    pageHeight: self.options.orientation == 'horizontal'
+                        ? 0 : Math.ceil(self.pageLength * (
+                            self.options.itemHeight + self.itemMargin
+                        ) / self.rowLength)
+                });
+                self.listSize = getListSize();
+                that.$content.css(
+                    self.options.orientation == 'horizontal' ? 'width' : 'height',
+                    self.listSize + 'px'
+                );
+                getPositions(callback);
             });
-            self.rowLength = getRowLength();
-            self.pageLength = self.options.orientation == 'both'
-                ? self.pageLengthByRowLength[self.rowLength]
-                : self.options.pageLength;
-            Ox.extend(self, {
-                listLength: result.data.items,
-                pages: Math.max(Math.ceil(result.data.items / self.pageLength), 1),
-                pageWidth: self.options.orientation == 'vertical'
-                        ? 0 : (self.options.itemWidth + self.itemMargin) * (
-                            self.options.orientation == 'horizontal'
-                            ? self.pageLength : self.rowLength
-                        ),
-                pageHeight: self.options.orientation == 'horizontal'
-                    ? 0 : Math.ceil(self.pageLength * (
-                        self.options.itemHeight + self.itemMargin
-                    ) / self.rowLength)
-            });
-            self.listSize = getListSize();
-            that.$content.css(
-                self.options.orientation == 'horizontal' ? 'width' : 'height',
-                self.listSize + 'px'
-            );
-            getPositions(callback);
         }));
     }