diff --git a/README.md b/README.md index e898946..1068b32 100644 --- a/README.md +++ b/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(); diff --git a/flickity-sync.js b/flickity-sync.js index 58449b8..1f823db 100644 --- a/flickity-sync.js +++ b/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 ); + }); }; /** diff --git a/package.json b/package.json index d37b429..bb46d90 100644 --- a/package.json +++ b/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": { diff --git a/test/index.html b/test/index.html index e821a99..79aa20e 100644 --- a/test/index.html +++ b/test/index.html @@ -80,5 +80,14 @@

sync

6
+ + diff --git a/test/test-sync.js b/test/test-sync.js index bd02db0..5983180 100644 --- a/test/test-sync.js +++ b/test/test-sync.js @@ -2,11 +2,13 @@ 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(); @@ -14,28 +16,37 @@ test( 'sync', function( assert ) { 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 );