Add more specs

dist/jquery.shuffle.js

@@ -925,13 +925,17 @@ Shuffle.prototype = {
       }
     }
 
+    // Use timeouts so that all the items have been set to hidden before the
+    // callbacks are executed.
     if ( this._layoutList.length > 0 && $.inArray( item, this._layoutList ) > -1 ) {
-      this._fire( Shuffle.EventType.LAYOUT );
-      callback.call( this );
+      setTimeout($.proxy(function () {
+        this._fire( Shuffle.EventType.LAYOUT );
+        callback.call( this );
+      }, this), 0);
       this._layoutList.length = 0;
     } else if ( this._shrinkList.length > 0 && $.inArray( item, this._shrinkList ) > -1 ) {
-      callback.call( this );
       this._shrinkList.length = 0;
+      setTimeout( $.proxy( callback, this ), 0 );
     }
 
     if ( !willBeVisible ) {

dist/jquery.shuffle.modernizr.js

@@ -931,13 +931,17 @@ Shuffle.prototype = {
       }
     }
 
+    // Use timeouts so that all the items have been set to hidden before the
+    // callbacks are executed.
     if ( this._layoutList.length > 0 && $.inArray( item, this._layoutList ) > -1 ) {
-      this._fire( Shuffle.EventType.LAYOUT );
-      callback.call( this );
+      setTimeout($.proxy(function () {
+        this._fire( Shuffle.EventType.LAYOUT );
+        callback.call( this );
+      }, this), 0);
       this._layoutList.length = 0;
     } else if ( this._shrinkList.length > 0 && $.inArray( item, this._shrinkList ) > -1 ) {
-      callback.call( this );
       this._shrinkList.length = 0;
+      setTimeout( $.proxy( callback, this ), 0 );
     }
 
     if ( !willBeVisible ) {

src/shuffle.js

@@ -908,13 +908,17 @@ Shuffle.prototype = {
       }
     }
 
+    // Use timeouts so that all the items have been set to hidden before the
+    // callbacks are executed.
     if ( this._layoutList.length > 0 && $.inArray( item, this._layoutList ) > -1 ) {
-      this._fire( Shuffle.EventType.LAYOUT );
-      callback.call( this );
+      setTimeout($.proxy(function () {
+        this._fire( Shuffle.EventType.LAYOUT );
+        callback.call( this );
+      }, this), 0);
       this._layoutList.length = 0;
     } else if ( this._shrinkList.length > 0 && $.inArray( item, this._shrinkList ) > -1 ) {
-      callback.call( this );
       this._shrinkList.length = 0;
+      setTimeout( $.proxy( callback, this ), 0 );
     }
 
     if ( !willBeVisible ) {

test/fixtures/regular.html

@@ -1,12 +1,12 @@
 <div id="regular-shuffle">
-  <div class="item" data-groups='["design", "red"]'>Person 1</div>
-  <div class="item" data-groups='["design", "blue"]'>Person 2</div>
-  <div class="item" data-groups='["strategy", "green"]'>Person 3</div>
-  <div class="item" data-groups='["ux", "green"]'>Person 4</div>
-  <div class="item" data-groups='["ux", "blue"]'>Person 5</div>
-  <div class="item" data-groups='["ux", "red"]'>Person 5</div>
-  <div class="item" data-groups='["newbiz"]'>Person 7</div>
-  <div class="item" data-groups='["technology", "black"]'>Person 8</div>
-  <div class="item" data-groups='["design", "red"]'>Person 9</div>
-  <div class="item" data-groups='["technology", "black"]'>Person 10</div>
+  <div class="item" data-age="21" id="item1" data-groups='["design", "red"]'>Person 1</div>
+  <div class="item" data-age="50" id="item2" data-groups='["design", "blue"]'>Person 2</div>
+  <div class="item" data-age="29" id="item3" data-groups='["strategy", "green"]'>Person 3</div>
+  <div class="item" data-age="27" id="item4" data-groups='["ux", "green"]'>Person 4</div>
+  <div class="item" data-age="35" id="item5" data-groups='["ux", "blue"]'>Person 5</div>
+  <div class="item" data-age="23" id="item6" data-groups='["ux", "red"]'>Person 6</div>
+  <div class="item" data-age="42" id="item7" data-groups='["newbiz"]'>Person 7</div>
+  <div class="item" data-age="31" id="item8" data-groups='["technology", "black"]'>Person 8</div>
+  <div class="item" data-age="28" id="item9" data-groups='["design", "red"]'>Person 9</div>
+  <div class="item" data-age="25" id="item10" data-groups='["technology", "black"]'>Person 10</div>
 </div>

test/specs.js

@@ -106,6 +106,186 @@ describe('Shuffle.js', function() {
       expect(shuffle.colYs).toEqual([600, 450, 450]);
     });
 
+    it('can filter by the data attribute', function(done) {
+      var $shuffle = $('#regular-shuffle');
+      var shuffle = $shuffle.shuffle({
+        speed: 100
+      }).data('shuffle');
+
+      function first() {
+        shuffle.shuffle('design');
+        $shuffle.one('layout.shuffle', second);
+      }
+
+      function second() {
+        expect(shuffle.visibleItems).toBe(3);
+        var $concealedItems = $('#item3, #item4, #item5, #item6, #item7, #item8, #item10');
+        var $filteredItems = $('#item1, #item2, #item9');
+        expect($concealedItems).toHaveClass('concealed');
+        expect($filteredItems).toHaveClass('filtered');
+        expect($concealedItems).toHaveCss({
+          visibility: 'hidden'
+        });
+
+        // Filter by green.
+        shuffle.shuffle('green');
+        $shuffle.one('layout.shuffle', third);
+      }
+
+      function third() {
+        expect(shuffle.visibleItems).toBe(2);
+        var $concealedItems = $('#item1, #item2, #item5, #item6, #item7, #item8, #item9, #item10');
+        var $filteredItems = $('#item3, #item4');
+        expect($concealedItems).toHaveClass('concealed');
+        expect($filteredItems).toHaveClass('filtered');
+        done();
+      }
+
+      setTimeout(first, 32);
+    });
+
+    it('can shuffle by function', function() {
+      var $shuffle = $('#regular-shuffle');
+      var shuffle = $shuffle.shuffle({
+        speed: 100
+      }).data('shuffle');
+
+      function first() {
+        shuffle.shuffle(function($el) {
+          return parseInt($el.attr('id').substring(4), 10) <= 5;
+        });
+        $shuffle.one('layout.shuffle', second);
+      }
+
+      function second() {
+        expect(shuffle.visibleItems).toBe(5);
+        var $concealedItems = $('#item6, #item7, #item8, #item9, #item10');
+        var $filteredItems = $('#item1, #item2, #item3, #item4, #item5');
+        expect($concealedItems).toHaveClass('concealed');
+        expect($filteredItems).toHaveClass('filtered');
+      }
+
+      // First shuffle is async.
+      setTimeout(first, 32);
+    });
+
+
+  });
+
+
+  describe('the sorted plugin', function() {
+
+    beforeEach(function() {
+      loadFixtures('regular.html');
+    });
+
+    afterEach(function() {
+    });
+
+
+    it('will catch empty jQuery objects', function() {
+      var $items = $();
+      expect($items.sorted()).toEqual([]);
+    });
+
+    it('can randomize the elements', function() {
+      var $items = $('#regular-shuffle').children();
+      var array = $items.toArray();
+      expect($items.length).toBe(10);
+      expect($items.sorted({
+        randomize: true
+      })).not.toEqual(array);
+    });
+
+    it('can sort by a function', function() {
+      var $items = $('#regular-shuffle').children();
+      var array = $items.toArray();
+      array.sort(function(a, b) {
+        var age1 = parseInt(a.getAttribute('data-age'), 10);
+        var age2 = parseInt(b.getAttribute('data-age'), 10);
+        return age1 - age2;
+      });
+      var result = $items.sorted({
+        by: function($el) {
+          expect($el).toExist();
+          return parseInt($el.attr('data-age'), 10);
+        }
+      });
+      expect(result).toEqual(array);
+    });
+
+    it('can sort by a function and reverse it', function() {
+      var $items = $('#regular-shuffle').children();
+      var array = $items.toArray();
+      array.sort(function(a, b) {
+        var age1 = parseInt(a.getAttribute('data-age'), 10);
+        var age2 = parseInt(b.getAttribute('data-age'), 10);
+        return age1 - age2;
+      }).reverse();
+      var result = $items.sorted({
+        reverse: true,
+        by: function($el) {
+          expect($el).toExist();
+          return parseInt($el.attr('data-age'), 10);
+        }
+      });
+      expect(result).toEqual(array);
+    });
+
+    it('will not sort without a `by` function', function() {
+      var $items = $('#regular-shuffle').children();
+      var array = $items.toArray();
+      expect($items.sorted()).toEqual(array);
+      expect($items.sorted({})).toEqual(array);
+      expect($items.sorted({
+        reverse: true
+      })).toEqual(array.reverse());
+    });
+
+    it('will revert to DOM order if the `by` function returns undefined', function() {
+      var $items = $('#regular-shuffle').children();
+      var array = $items.toArray();
+      var count = 0;
+      expect($items.sorted({
+        by: function() {
+          count++;
+          return count < 5 ? Math.random() : undefined;
+        }
+      })).toEqual(array);
+    });
+
+    it('can sort elements first', function() {
+      var $items = $('#regular-shuffle').children().slice(0, 4);
+      var array = $items.toArray();
+      array = [ array[1], array[0], array[3], array[2] ];
+      expect($items.sorted({
+        by: function($el) {
+          var age = $el.data('age');
+          if (age === 50) {
+            return 'sortFirst';
+          } else {
+            return age;
+          }
+        }
+      })).toEqual(array);
+    });
+
+    it('can sort elements last', function() {
+      var $items = $('#regular-shuffle').children().slice(0, 4);
+      var array = $items.toArray();
+      array = [ array[0], array[2], array[1], array[3] ];
+      expect($items.sorted({
+        by: function($el) {
+          var age = $el.data('age');
+          if (age === 27) {
+            return 'sortLast';
+          } else {
+            return age;
+          }
+        }
+      })).toEqual(array);
+    });
+
   });
 
 });