allow for setting the selected id of an Ox.List to an id that is currently not in view

demos/listmap2/js/listmap.js

@@ -71,7 +71,7 @@ Ox.load('Geo', function() {
                     } else {
                         data.items = places;
                         if (options.query) {
-                            // only case is key: 'id', value: ..., operator: '='
+                            // only case is key: 'id', value: ..., operator: '^$'
                             data.items = data.items.filter(function(place) {
                                 return place[options.query.key] == options.query.value;
                             });

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

@@ -87,6 +87,7 @@ Ox.List = function(options, self) {
         clickTimeout: 0,
         dragTimeout: 0,
         format: {},
+        isAsync: Ox.isFunction(self.options.items),
         itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
         keyboardEvents: {
             key_control_c: copyItems,
@@ -163,7 +164,7 @@ Ox.List = function(options, self) {
         });
     }
 
-    if (Ox.isArray(self.options.items)) {
+    if (!self.isAsync) {
         self.listLength = self.options.items.length;
         loadItems();
     } else {
@@ -556,7 +557,6 @@ Ox.List = function(options, self) {
     }
 
     function getPositions(ids) {
-        // Ox.print('getPositions', ids)
         ids = ids || getSelectedIds();
         Ox.print('getPositions', ids)
         // fixme: optimize: send non-selected ids if more than half of the items are selected
@@ -629,7 +629,7 @@ Ox.List = function(options, self) {
         //Ox.print('gSI', self.selected, self.$items)
         return $.map(self.selected, function(pos) {
             //Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique])
-            //Ox.print('2222', self.$items, pos)
+            Ox.print('gsI', pos)
             return self.$items[pos].options('data')[self.options.unique];
         });
     }
@@ -916,7 +916,7 @@ Ox.List = function(options, self) {
     }
 
     function scroll() {
-        if (Ox.isFunction(self.options.items)) {
+        if (self.isAsync) {
             var page = self.page;
             self.scrollTimeout && clearTimeout(self.scrollTimeout);
             self.scrollTimeout = setTimeout(function() {
@@ -1079,10 +1079,12 @@ Ox.List = function(options, self) {
         });
     }
 
-    function setSelected(ids) {
+    function setSelected(ids, callback) {
+        // fixme: no case where callback is set
         // fixme: can't use selectNone here,
         // since it'd trigger a select event
         Ox.print('setSelected', ids)
+        var counter = 0;
         self.$items.forEach(function($item, pos) {
             if (isSelected(pos)) {
                 self.selected.splice(self.selected.indexOf(pos), 1);
@@ -1092,12 +1094,27 @@ Ox.List = function(options, self) {
         });
         ids.forEach(function(id, i) {
             var pos = getPositionById(id);
+            if (pos > -1) {
+                select(pos, i);
+            } else {
+                // async and id not in current view
+                self.options.items({
+                    ids: [id],
+                    sort: self.options.sort
+                }, function(results) {
+                    pos = results.data.positions[id];
+                    select(pos, i);
+                });
+            }
+        });
+        function select(pos, i) {
             Ox.print('pushing', pos, 'onto self.selected')
             self.selected.push(pos);
             !Ox.isUndefined(self.$items[pos]) &&
                 self.$items[pos].addClass('OxSelected');
             i == 0 && scrollToPosition(pos);
-        });
+            ++counter == ids.length && callback && callback();
+        }
     }
 
     function toggleSelection(pos) {
@@ -1118,7 +1135,8 @@ Ox.List = function(options, self) {
     }
 
     function triggerSelectEvent() {
-        var ids = self.options.selected = getSelectedIds();
+        ids = self.options.selected = getSelectedIds();
+        self.options.selected = ids;
         setTimeout(function() {
             var ids_ = getSelectedIds();
             Ox.print('ids', ids, 'ids after 100 msec', ids_, Ox.isEqual(ids, ids_))
@@ -1240,7 +1258,7 @@ Ox.List = function(options, self) {
             selectedIds,
             sort = {};
         if (self.listLength > 1) {
-            if (Ox.isArray(self.options.items)) {
+            if (!self.isAsync) {
                 selectedIds = getSelectedIds();
                 self.options.items.forEach(function(item) {
                     sort[item.id] = map ? map(item[key]) : item[key];
@@ -1278,7 +1296,9 @@ Ox.List = function(options, self) {
         //Ox.print('list setOption', key, value);
         var selectedIds;
         if (key == 'items') {
-            if (Ox.typeOf(value) == 'array') {
+            // fixme: this could be used to change the list
+            // from sync to async or vice versa, which wouldn't work
+            if (Ox.isArray(value)) {
                 updateSelected();
                 updateSort();
             } else {
@@ -1287,7 +1307,9 @@ Ox.List = function(options, self) {
         } else if (key == 'selected') {
             Ox.print('setOption selected', value)
             setSelected(value);
-            triggerSelectEvent(); // fixme: added to make text list find-as-you-type work, may break other things
+            // fixme: next line added to make text list find-as-you-type work,
+            // may break other things
+            !self.isAsync && triggerSelectEvent(value);
         } else if (key == 'sort') {
             Ox.print('---sort---')
             updateSort();

source/Ox.UI/js/Map/Ox.ListMap.js

@@ -490,8 +490,8 @@ Ox.ListMap = function(options, self) {
         self.placesLength = self.options.places.length;
         setStatus();
     } else {
-        self.options.places({}, function(result) {
-            self.placesLength = result.data.items;
+        self.options.places({}, function(results) {
+            self.placesLength = results.data.items;
             setStatus();
         });
     }
@@ -610,8 +610,8 @@ Ox.ListMap = function(options, self) {
 
     function setStatus() {
         self.$status.html(
-            self.options.placesLength + ' Place' + (
-                self.options.placesLength == 1 ? '' : 's'
+            Ox.formatNumber(self.placesLength) + ' Place' + (
+                self.placesLength == 1 ? '' : 's'
             )
         );
     }

source/Ox.UI/js/Map/Ox.Map.js

@@ -939,7 +939,7 @@ Ox.Map = function(options, self) {
                         query: {
                             key: 'id',
                             value: id,
-                            operator: '='
+                            operator: '^$'
                         }
                     }, function(results) {
                         place = new Ox.MapPlace(Ox.extend({