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 @@