Fix delimeter option #108

_includes/changelog.html

@@ -1,5 +1,6 @@
 <h2>Changes<a href="#changelog"></a></h2>
 <ul>
+  <li><code>v4.0.1</code> 7/30/16 - Fix <code>delimeter</code> option.</li>
   <li><code>v4.0.0</code> 4/20/16 - Rewrite in ES6 with babel. Remove jQuery and Modernizr dependencies. Remove support for IE&lt;11. Docs improvements. Switch to gulp build system with webpack.</li>
   <li><code>v3.1.0</code> 3/23/15 - Allow zero speed option (<a href="https://github.com/Vestride/Shuffle/issues/64">#64</a>) and cancel previous animations instead of ignoring new ones (<a href="https://github.com/Vestride/Shuffle/issues/69">#69</a>). Handle non-integer columns better (<a href="https://github.com/Vestride/Shuffle/issues/46">#46</a>)</li>
   <li><code>v3.0.4</code> 2/16/15 - Publish to NPM.</li>

dist/shuffle.js

@@ -150,7 +150,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	   * @param {Object} [options=Shuffle.options] Options object.
 	   * @constructor
 	   */
-	
 	  function Shuffle(element) {
 	    var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
 	
@@ -374,8 +373,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        // Check each element's data-groups attribute against the given category.
 	      } else {
 	        var attr = element.getAttribute('data-' + Shuffle.FILTER_ATTRIBUTE_KEY);
-	          var groups = JSON.parse(attr);
-	          var keys = this.delimeter && !Array.isArray(groups) ? groups.split(this.delimeter) : groups;
+	        var keys = this.options.delimeter ? attr.split(this.options.delimeter) : JSON.parse(attr);
 	
 	        if (Array.isArray(category)) {
 	          return category.some(arrayIncludes(keys));
@@ -1502,6 +1500,8 @@ return /******/ (function(modules) { // webpackBootstrap
 				seen.add(el);
 				return true;
 			}
+	
+			return false;
 		});
 	}
 	

src/shuffle.js

@@ -240,10 +240,9 @@ class Shuffle {
     // Check each element's data-groups attribute against the given category.
     } else {
       let attr = element.getAttribute('data-' + Shuffle.FILTER_ATTRIBUTE_KEY);
-      let groups = JSON.parse(attr);
-      let keys = this.delimeter && !Array.isArray(groups) ?
-          groups.split(this.delimeter) :
-          groups;
+      let keys = this.options.delimeter ?
+          attr.split(this.options.delimeter) :
+          JSON.parse(attr);
 
       if (Array.isArray(category)) {
         return category.some(arrayIncludes(keys));

test/fixtures/delimeter.html

@@ -0,0 +1,12 @@
+<div id="delimeter">
+  <div class="item" id="item1" data-groups='design,red'>Person 1</div>
+  <div class="item" id="item2" data-groups='design,blue'>Person 2</div>
+  <div class="item" id="item3" data-groups='strategy,green'>Person 3</div>
+  <div class="item" id="item4" data-groups='ux,green'>Person 4</div>
+  <div class="item" id="item5" data-groups='ux,blue'>Person 5</div>
+  <div class="item" id="item6" data-groups='ux,red'>Person 6</div>
+  <div class="item" id="item7" data-groups='newbiz'>Person 7</div>
+  <div class="item" id="item8" data-groups='technology,black'>Person 8</div>
+  <div class="item" id="item9" data-groups='design,red'>Person 9</div>
+  <div class="item" id="item10" data-groups='technology,black'>Person 10</div>
+</div>

test/test.js

@@ -555,6 +555,31 @@ describe('shuffle', function () {
     });
   });
 
+  describe('delimeter fixture', function () {
+    beforeEach(function (done) {
+      // Mock the transition end event wrapper.
+      sinon.stub(Shuffle.prototype, '_whenTransitionDone', function (element, itemCallback, done) {
+        setTimeout(done, 0);
+      });
+
+      appendFixture('delimeter').then(done);
+    });
+
+    afterEach(function () {
+      Shuffle.prototype._whenTransitionDone.restore();
+      removeFixture();
+    });
+
+    it('can have a custom delimeter', function () {
+      instance = new Shuffle(fixture, {
+        delimeter: ',',
+        group: 'design',
+      });
+
+      expect(instance.visibleItems).to.equal(3);
+    });
+  });
+
   describe('the sorter', function () {
     var items;
     var clone;