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];
 	
@@ -255,12 +254,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	        // Check for an element
 	      } else if (option && option.nodeType && option.nodeType === 1) {
-	          return option;
+	        return option;
 	
-	          // Check for jQuery object
+	        // Check for jQuery object
-	        } else if (option && option.jquery) {
+	      } else if (option && option.jquery) {
-	            return option[0];
+	        return option[0];
-	          }
+	      }
 	
 	      return null;
 	    }
@@ -341,14 +340,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        // Loop through each item and use provided function to determine
 	        // whether to hide it or not.
 	      } else {
-	          items.forEach(function (item) {
+	        items.forEach(function (item) {
-	            if (_this._doesPassFilter(category, item.element)) {
+	          if (_this._doesPassFilter(category, item.element)) {
-	              visible.push(item);
+	            visible.push(item);
-	            } else {
+	          } else {
-	              hidden.push(item);
+	            hidden.push(item);
-	            }
+	          }
-	          });
+	        });
-	        }
+	      }
 	
 	      return {
 	        visible: visible,
@@ -373,16 +372,15 @@ 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 attr = element.getAttribute('data-' + Shuffle.FILTER_ATTRIBUTE_KEY);
-	          var groups = JSON.parse(attr);
+	        var keys = this.options.delimeter ? attr.split(this.options.delimeter) : JSON.parse(attr);
-	          var keys = this.delimeter && !Array.isArray(groups) ? groups.split(this.delimeter) : groups;
-	
-	          if (Array.isArray(category)) {
-	            return category.some(arrayIncludes(keys));
-	          }
 	
-	          return arrayIncludes(keys, category);
+	        if (Array.isArray(category)) {
+	          return category.some(arrayIncludes(keys));
 	        }
+	
+	        return arrayIncludes(keys, category);
+	      }
 	    }
 	
 	    /**
@@ -536,20 +534,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	        // columnWidth option isn't a function, are they using a sizing element?
 	      } else if (this.useSizer) {
-	          size = Shuffle.getSize(this.options.sizer).width;
+	        size = Shuffle.getSize(this.options.sizer).width;
 	
-	          // if not, how about the explicitly set option?
+	        // if not, how about the explicitly set option?
-	        } else if (this.options.columnWidth) {
+	      } else if (this.options.columnWidth) {
-	            size = this.options.columnWidth;
+	        size = this.options.columnWidth;
 	
-	            // or use the size of the first item
+	        // or use the size of the first item
-	          } else if (this.items.length > 0) {
+	      } else if (this.items.length > 0) {
-	              size = Shuffle.getSize(this.items[0].element, true).width;
+	        size = Shuffle.getSize(this.items[0].element, true).width;
 	
-	              // if there's no items, use size of container
+	        // if there's no items, use size of container
-	            } else {
+	      } else {
-	                size = containerWidth;
+	        size = containerWidth;
-	              }
+	      }
 	
 	      // Don't let them set a column width of zero.
 	      if (size === 0) {
@@ -907,8 +905,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        // change position or the transition duration is zero, which will not trigger
 	        // the transitionend event.
 	      } else {
-	          this._dispatchLayout();
+	        this._dispatchLayout();
-	        }
+	      }
 	
 	      // Remove everything in the style queue
 	      this._queue.length = 0;
@@ -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.options.delimeter ?
-      let keys = this.delimeter && !Array.isArray(groups) ?
+          attr.split(this.options.delimeter) :
-          groups.split(this.delimeter) :
+          JSON.parse(attr);
-          groups;
 
       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;