Allow multiple instances to be synced

README.md

@@ -14,12 +14,11 @@ You can sync two Flickity galleries. Whenever one selects a cell, its companion
 ```
 
 ``` js
-// options
-sync: 'carousel-b'
-// set as a selector string
-
-sync: document.querySelector('carousel-b')
-// set as an element
+var options = {
+  sync: '.carousel-b', // Selector String
+  sync: '.carousel-b, .carousel-c', // Multiple elements in a selector
+  sync: document.querySelector('carousel-b'), // DOM Node
+}
 ```
 
 [See demo on CodePen](http://codepen.io/desandro/pen/OPZJmE).
@@ -28,7 +27,7 @@ sync: document.querySelector('carousel-b')
 
 ``` js
 $('.carousel-a').flickity({
-  sync: 'carousel-b'
+  sync: '.carousel-b'
 });
 // only need to set sync on one of the Flickity galleries
 $('.carousel-b').flickity();

flickity-sync.js

@@ -1,5 +1,5 @@
 /*!
- * Flickity sync v2.0.0
+ * Flickity sync v2.0.1
  * enable sync for Flickity
  */
 
@@ -32,6 +32,17 @@
 
 'use strict';
 
+function normalizeElements(elems) {
+  if (typeof elems === "string") {
+    elems = elems.split(',').map(function (selector) {
+    	return selector.trim();
+    });
+  } else if (!Array.isArray(elems)) {
+    elems = [elems];
+  }
+  return elems;
+}
+
 // -------------------------- sync prototype -------------------------- //
 
 // Flickity.defaults.sync = false;
@@ -58,15 +69,19 @@ Flickity.prototype._createSync = function() {
  * sync
  * @param {Element} or {String} elem
  */
-Flickity.prototype.sync = function( elem ) {
-  elem = utils.getQueryElement( elem );
-  var companion = Flickity.data( elem );
-  if ( !companion ) {
-    return;
-  }
-  // two hearts, that beat as one
-  this._syncCompanion( companion );
-  companion._syncCompanion( this );
+Flickity.prototype.sync = function( elems ) {
+	var self = this;
+  elems = normalizeElements(elems);
+  elems.forEach(function (elem) {
+  	elem = utils.getQueryElement( elem );
+    var companion = Flickity.data( elem );
+    if ( !companion ) {
+      return;
+    }
+    // many hearts, that beat as one
+    self._syncCompanion( companion );
+    companion._syncCompanion( self );
+  });
 };
 
 /**
@@ -84,6 +99,7 @@ Flickity.prototype._syncCompanion = function( companion ) {
   this.on( 'select', syncListener );
   // keep track of all synced flickities
   // hold on to listener to unsync
+  console.log("GUID", companion.guid);
   this.syncers[ companion.guid ] = {
     flickity: companion,
     listener: syncListener
@@ -94,10 +110,14 @@ Flickity.prototype._syncCompanion = function( companion ) {
  * unsync
  * @param {Element} or {String} elem
  */
-Flickity.prototype.unsync = function( elem ) {
-  elem = utils.getQueryElement( elem );
-  var companion = Flickity.data( elem );
-  this._unsync( companion );
+Flickity.prototype.unsync = function( elems ) {
+  var self = this;
+  elems = normalizeElements(elems);
+  elems.forEach(function (elem) {
+    elem = utils.getQueryElement( elem );
+    var companion = Flickity.data( elem );
+    self._unsync( companion );
+  });
 };
 
 /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flickity-sync",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Enable sync for Flickity",
   "main": "flickity-sync.js",
   "dependencies": {

test/index.html

@@ -80,5 +80,14 @@ <h2>sync</h2>
     <div class="cell">6</div>
   </div>
 
+  <div id="sync-c" class="gallery variable-width">
+    <div class="cell">1</div>
+    <div class="cell">2</div>
+    <div class="cell">3</div>
+    <div class="cell">4</div>
+    <div class="cell">5</div>
+    <div class="cell">6</div>
+  </div>
+
 </body>
 </html>

test/test-sync.js

@@ -2,40 +2,51 @@ test( 'sync', function( assert ) {
   'use strict';
 
   var flktyA = new Flickity( '#sync-a', {
-    sync: '#sync-b'
+    sync: '#sync-b, #sync-c'
   });
 
   var elemB = document.querySelector('#sync-b');
   var flktyB = new Flickity( elemB );
+  var elemC = document.querySelector('#sync-c');
+  var flktyC = new Flickity( elemC );
 
   // HACK do async because syncing is async
   var done = assert.async();
 
   setTimeout( function() {
     flktyA.next();
     equal( flktyB.selectedIndex, 1, 'A.next() syncs to B' );
+    equal( flktyC.selectedIndex, 1, 'A.next() syncs to C' );
     flktyB.previous();
     equal( flktyA.selectedIndex, 0, 'B.previous() syncs to A' );
+    equal( flktyC.selectedIndex, 0, 'B.previous() syncs to C' );
     flktyA.select( 3 );
     equal( flktyB.selectedIndex, 3, 'A.select() syncs to B' );
+    equal( flktyC.selectedIndex, 3, 'A.select() syncs to C' );
     // usync()
-    flktyA.unsync('#sync-b');
+    flktyA.unsync('#sync-b, #sync-c');
     flktyA.select( 1 );
     equal( flktyB.selectedIndex, 3, 'A.unsync() unsyncs A from B' );
+    equal( flktyC.selectedIndex, 3, 'A.unsync() unsyncs A from C' );
     flktyB.select( 4 );
     equal( flktyA.selectedIndex, 1, 'A.unsync() unsyncs B from A' );
+    equal( flktyC.selectedIndex, 1, 'A.unsync() unsyncs C from A' );
     // sync()
-    flktyB.sync('#sync-a');
+    flktyB.sync('#sync-a, #sync-c');
     flktyB.select( 0 );
     equal( flktyA.selectedIndex, 0, 'B.sync() syncs B to A' );
+    equal( flktyC.selectedIndex, 0, 'B.sync() syncs B to C' );
     flktyA.select( 2 );
     equal( flktyB.selectedIndex, 2, 'B.sync() syncs A to B' );
+    equal( flktyC.selectedIndex, 2, 'B.sync() syncs C to B' );
     // unsyncAll()
     flktyA.unsyncAll();
     flktyA.select( 1 );
     equal( flktyB.selectedIndex, 2, 'A.unsyncAll() unsyncs A from B' );
+    equal( flktyC.selectedIndex, 2, 'A.unsyncAll() unsyncs A from C' );
     flktyB.select( 4 );
     equal( flktyA.selectedIndex, 1, 'A.unsyncAll() unsyncs B from A' );
+    equal( flktyC.selectedIndex, 1, 'A.unsyncAll() unsyncs B from C' );
 
     done();
   }, 100 );