Fix index async and add possibility to add handlers on init

javve · Aug 30, 2014 · 27e2d6f · 27e2d6f
1 parent 40d3c5e
commit 27e2d6f
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 12 deletions.
diff --git a/History.md b/History.md
@@ -1,7 +1,10 @@
 # Changelog
 
 ### 2014-07
+- *[Feature]* Make it possble to add event handlers on init `new List('listId', { searchComplete: function(list) {} })`.
 - *[Bugfix]* Include reference to List when initializing plugins. Fix for require.js which don't have a global reference to List.
+- *[Bugfix]* Fix index async
+  - https://github.com/javve/list.js/issues/268
 
 ### 2014-02-03: 1.1.1
 - *[Bugfix]* Update `javve/events` version which fixes critical bugs in Safari for PC and PhantomJS (which makes the command line tests work again).

diff --git a/index.js b/index.js
@@ -13,10 +13,9 @@ var document = window.document,
 var List = function(id, options, values) {
 
     var self = this,
-		init,
+        init,
         Item = require('./src/item')(self),
-        addAsync = require('./src/add-async')(self),
-        parse = require('./src/parse')(self);
+        addAsync = require('./src/add-async')(self);
 
     init = {
         start: function() {
@@ -44,17 +43,26 @@ var List = function(id, options, values) {
             if (!self.listContainer) { return; }
             self.list           = getByClass(self.listContainer, self.listClass, true);
 
+            self.parse          = require('./src/parse')(self);
             self.templater      = require('./src/templater')(self);
             self.search         = require('./src/search')(self);
             self.filter         = require('./src/filter')(self);
             self.sort           = require('./src/sort')(self);
 
+            this.handlers();
             this.items();
             self.update();
             this.plugins();
         },
+        handlers: function() {
+            for (var handler in self.handlers) {
+                if (self[handler]) {
+                    self.on(handler, self[handler]);
+                }
+            }
+        },
         items: function() {
-            parse(self.list);
+            self.parse(self.list);
             if (values !== undefined) {
                 self.add(values);
             }
@@ -207,12 +215,12 @@ var List = function(id, options, values) {
                 is[i].show();
                 self.visibleItems.push(is[i]);
                 self.matchingItems.push(is[i]);
-			} else if (is[i].matching()) {
+            } else if (is[i].matching()) {
                 self.matchingItems.push(is[i]);
                 is[i].hide();
-			} else {
+            } else {
                 is[i].hide();
-			}
+            }
         }
         self.trigger('updated');
         return self;

diff --git a/src/parse.js b/src/parse.js
@@ -20,18 +20,20 @@ module.exports = function(list) {
         }
     };
     var parseAsync = function(itemElements, valueNames) {
-        var itemsToIndex = itemElements.splice(0, 100); // TODO: If < 100 items, what happens in IE etc?
+        var itemsToIndex = itemElements.splice(0, 50); // TODO: If < 100 items, what happens in IE etc?
         parse(itemsToIndex, valueNames);
         if (itemElements.length > 0) {
             setTimeout(function() {
-                init.items.indexAsync(itemElements, valueNames);
-            }, 10);
+                parseAsync(itemElements, valueNames);
+            }, 1);
         } else {
             list.update();
-            // TODO: Add indexed callback
+            list.trigger('parseComplete');
         }
     };
 
+    list.handlers.parseComplete = list.handlers.parseComplete || [];
+
     return function() {
         var itemsToIndex = getChildren(list.list),
             valueNames = list.valueNames;

diff --git a/test/test.create.js b/test/test.create.js
@@ -85,5 +85,105 @@ describe('Create', function() {
         templateEl.remove();
     });
 
+    describe('Asyn index with existing list', function() {
+        var listEl = $('<div id="list">\
+            <ul class="list">\
+                <li><span class="name">Jonny</span></li><li><span class="name">Sven</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+                <li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>\
+                <li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>\
+                <li><span class="name">Maj-britt</span></li><li><span class="name">Fredrik</span></li>\
+                <li><span class="name">Torbjorn</span></li><li><span class="name">Lolzor</span></li>\
+                <li><span class="name">Sandra</span></li><li><span class="name">Gottfrid</span></li>\
+                <li><span class="name">Tobias</span></li><li><span class="name">Martina</span></li>\
+                <li><span class="name">Johannes</span></li><li><span class="name">Ted</span></li>\
+                <li><span class="name">Malin</span></li><li><span class="name">Filippa</span></li>\
+                <li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>\
+                <li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>\
+            </ul>\
+        </div>');
+
+        it('should contain one item', function(done) {
+            $(document.body).append(listEl);
+            var list = new List('list', {
+                valueNames: ['name'],
+                indexAsync: true,
+                parseComplete: function(list) {
+                  expect(listEl.find('li').size()).to.equal(162);
+                  listEl.remove();
+                  done();
+                }
+            });
+        });
+    });
 
-});
+});