Fix misspelled delimiter option #215

dist/shuffle.js

@@ -888,6 +888,12 @@ var Shuffle = function (_TinyEmitter) {
 
     _this.options = Object.assign({}, Shuffle.options, options);
 
+    // Allow misspelling of delimiter since that's how it used to be.
+    // Remove in v6.
+    if (_this.options.delimeter) {
+      _this.options.delimiter = _this.options.delimeter;
+    }
+
     _this.lastSort = {};
     _this.group = Shuffle.ALL_ITEMS;
     _this.lastFilter = Shuffle.ALL_ITEMS;
@@ -1112,7 +1118,7 @@ var Shuffle = function (_TinyEmitter) {
 
       // Check each element's data-groups attribute against the given category.
       var attr = element.getAttribute('data-' + Shuffle.FILTER_ATTRIBUTE_KEY);
-      var keys = this.options.delimeter ? attr.split(this.options.delimeter) : JSON.parse(attr);
+      var keys = this.options.delimiter ? attr.split(this.options.delimiter) : JSON.parse(attr);
 
       function testCategory(category) {
         return keys.includes(category);
@@ -2207,9 +2213,9 @@ Shuffle.options = {
   // how wide the columns are (in pixels).
   columnWidth: 0,
 
-  // If your group is not json, and is comma delimeted, you could set delimeter
+  // If your group is not json, and is comma delimeted, you could set delimiter
   // to ','.
-  delimeter: null,
+  delimiter: null,
 
   // Useful for percentage based heights when they might not always be exactly
   // the same (in pixels).

docs/_includes/changelog.html

@@ -11,7 +11,7 @@
   <li><code>v4.1.1</code> 3/21/17 - the <code>before</code> styles for a <code>ShuffleItem</code> were not applied if the item didn&rsquo;t move.</li>
   <li><code>v4.1.0</code> 1/30/17 - Use webpack-2 to bundle Shuffle.</li>
   <li><code>v4.0.2</code> 9/15/16 - Update <code>custom-event-polyfill</code> dependency.</li>
-  <li><code>v4.0.1</code> 7/30/16 - Fix <code>delimeter</code> option.</li>
+  <li><code>v4.0.1</code> 7/30/16 - Fix <code>delimiter</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>

docs/_includes/options.html

@@ -7,7 +7,7 @@ Shuffle.options = {
   buffer: 0, // Useful for percentage based heights when they might not always be exactly the same (in pixels).
   columnThreshold: 0.01, // Reading the width of elements isn't precise enough and can cause columns to jump between values.
   columnWidth: 0, // A static number or function that returns a number which tells the plugin how wide the columns are (in pixels).
-  delimeter: null, // If your group is not json, and is comma delimeted, you could set delimeter to ','.
+  delimiter: null, // If your group is not json, and is comma delimeted, you could set delimiter to ','.
   easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)', // CSS easing function to use.
   filterMode: Shuffle.FilterMode.ANY, // When using an array with filter(), the element passes the test if any of its groups are in the array. With "all", the element only passes if all groups are in the array.
   group: Shuffle.ALL_ITEMS, // Initial filter group.

docs/_includes/usage.html

@@ -1,7 +1,7 @@
 <h2>Usage<a href="#usage"></a></h2>
 
 <h3>The HTML Structure</h3>
-<p>The only real important thing here is the <code class="language-markup token attr-name">data-groups</code> attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings. It can also be a string delimeted by a value you provide with the <code>delimeter</code> option.</p>
+<p>The only real important thing here is the <code class="language-markup token attr-name">data-groups</code> attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings. It can also be a string delimeted by a value you provide with the <code>delimiter</code> option.</p>
 
 <p>This example is using this site's grid. Each item would be 4 columns at the "sm" breakpoint (768px).</p>
 

docs/dist/shuffle.js

@@ -888,6 +888,12 @@ var Shuffle = function (_TinyEmitter) {
 
     _this.options = Object.assign({}, Shuffle.options, options);
 
+    // Allow misspelling of delimiter since that's how it used to be.
+    // Remove in v6.
+    if (_this.options.delimeter) {
+      _this.options.delimiter = _this.options.delimeter;
+    }
+
     _this.lastSort = {};
     _this.group = Shuffle.ALL_ITEMS;
     _this.lastFilter = Shuffle.ALL_ITEMS;
@@ -1112,7 +1118,7 @@ var Shuffle = function (_TinyEmitter) {
 
       // Check each element's data-groups attribute against the given category.
       var attr = element.getAttribute('data-' + Shuffle.FILTER_ATTRIBUTE_KEY);
-      var keys = this.options.delimeter ? attr.split(this.options.delimeter) : JSON.parse(attr);
+      var keys = this.options.delimiter ? attr.split(this.options.delimiter) : JSON.parse(attr);
 
       function testCategory(category) {
         return keys.includes(category);
@@ -2207,9 +2213,9 @@ Shuffle.options = {
   // how wide the columns are (in pixels).
   columnWidth: 0,
 
-  // If your group is not json, and is comma delimeted, you could set delimeter
+  // If your group is not json, and is comma delimeted, you could set delimiter
   // to ','.
-  delimeter: null,
+  delimiter: null,
 
   // Useful for percentage based heights when they might not always be exactly
   // the same (in pixels).

index.d.ts

@@ -258,8 +258,9 @@ declare namespace Shuffle {
     columnWidth?: number;
 
     /**
-     * If your group is not json, and is comma delimeted, you could set delimeter to ','.
+     * If your group is not json, and is comma delimeted, you could set delimiter to ','.
      */
+    delimiter?: string;
     delimeter?: string;
 
     /**

src/shuffle.js

@@ -39,6 +39,12 @@ class Shuffle extends TinyEmitter {
     super();
     this.options = Object.assign({}, Shuffle.options, options);
 
+    // Allow misspelling of delimiter since that's how it used to be.
+    // Remove in v6.
+    if (this.options.delimeter) {
+      this.options.delimiter = this.options.delimeter;
+    }
+
     this.lastSort = {};
     this.group = Shuffle.ALL_ITEMS;
     this.lastFilter = Shuffle.ALL_ITEMS;
@@ -239,8 +245,8 @@ class Shuffle extends TinyEmitter {
 
     // Check each element's data-groups attribute against the given category.
     const attr = element.getAttribute('data-' + Shuffle.FILTER_ATTRIBUTE_KEY);
-    const keys = this.options.delimeter ?
-      attr.split(this.options.delimeter) :
+    const keys = this.options.delimiter ?
+      attr.split(this.options.delimiter) :
       JSON.parse(attr);
 
     function testCategory(category) {
@@ -1150,9 +1156,9 @@ Shuffle.options = {
   // how wide the columns are (in pixels).
   columnWidth: 0,
 
-  // If your group is not json, and is comma delimeted, you could set delimeter
+  // If your group is not json, and is comma delimeted, you could set delimiter
   // to ','.
-  delimeter: null,
+  delimiter: null,
 
   // Useful for percentage based heights when they might not always be exactly
   // the same (in pixels).

test/fixtures/delimiter.html

@@ -1,4 +1,4 @@
-<div id="delimeter">
+<div id="delimiter">
   <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>

test/test.js

@@ -94,7 +94,7 @@ describe('shuffle', function () {
       expect(instance.options.sizer).to.equal(null);
       expect(instance.options.columnWidth).to.equal(0);
       expect(instance.options.gutterWidth).to.equal(0);
-      expect(instance.options.delimeter).to.equal(null);
+      expect(instance.options.delimiter).to.equal(null);
       expect(instance.options.initialSort).to.equal(null);
       expect(instance.options.throttleTime).to.equal(300);
       expect(instance.id).to.equal('shuffle_0');
@@ -606,12 +606,12 @@ describe('shuffle', function () {
     });
   });
 
-  describe('delimeter fixture', function () {
+  describe('delimiter fixture', function () {
     beforeEach(function (done) {
       // Mock the transition end event wrapper.
       sinon.stub(Shuffle.prototype, '_whenTransitionDone').callsFake(whenTransitionDoneStub);
 
-      appendFixture('delimeter').then(done);
+      appendFixture('delimiter').then(done);
     });
 
     afterEach(function () {
@@ -619,7 +619,16 @@ describe('shuffle', function () {
       removeFixture();
     });
 
-    it('can have a custom delimeter', function () {
+    it('can have a custom delimiter', function () {
+      instance = new Shuffle(fixture, {
+        delimiter: ',',
+        group: 'design',
+      });
+
+      expect(instance.visibleItems).to.equal(3);
+    });
+
+    it('can use the old misspelled delimiter option', function () {
       instance = new Shuffle(fixture, {
         delimeter: ',',
         group: 'design',