/** * jquery.swatchbook.js v1.1.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2012, Codrops * http://www.codrops.com */ ; (function($, window, undefined) { 'use strict'; // global var Modernizr = window.Modernizr; jQuery.fn.reverse = [].reverse; $.SwatchBook = function(options, element) { this.$el = $(element); this._init(options); }; $.SwatchBook.defaults = { // index of initial centered item center: 6, // number of degrees that is between each item angleInc: 8, speed: 700, easing: 'ease', // amount in degrees for the opened item's next sibling proximity: 45, // amount in degrees between the opened item's next siblings neighbor: 4, // animate on load onLoadAnim: true, // if it should be closed by default initclosed: false, // index of the element that when clicked, triggers the open/close function // by default there is no such element closeIdx: -1, // open one specific item initially (overrides initclosed) openAt: -1 }; $.SwatchBook.prototype = { _init: function(options) { this.options = $.extend(true, {}, $.SwatchBook.defaults, options); this.$items = this.$el.children('div'); this.itemsCount = this.$items.length; this.current = -1; this.support = Modernizr.csstransitions; this.cache = []; if (this.options.onLoadAnim) { this._setTransition(); } if (!this.options.initclosed) { this._center(this.options.center, this.options.onLoadAnim); } else { this.isClosed = true; if (!this.options.onLoadAnim) { this._setTransition(); } } if (this.options.openAt >= 0 && this.options.openAt < this.itemsCount) { this._openItem(this.$items.eq(this.options.openAt)); } this._initEvents(); }, _setTransition: function() { if (this.support) { this.$items.css({ 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing }); } }, _openclose: function() { this.isClosed ? this._center(this.options.center, true) : this.$items.css({ 'transform': 'rotate(0deg)' }); this.isClosed = !this.isClosed; }, _center: function(idx, anim) { var self = this; this.$items.each(function(i) { var transformStr = 'rotate(' + (self.options.angleInc * (i - idx)) + 'deg)'; $(this).css({ 'transform': transformStr }); }); }, _openItem: function($item) { var itmIdx = $item.index(); if (itmIdx !== this.current) { if (this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx) { this._openclose(); this._setCurrent(); } else { this._setCurrent($item); $item.css({ 'transform': 'rotate(0deg)' }); this._rotateSiblings($item); } } }, _initEvents: function() { var self = this; this.$items.on('click.swatchbook', function(event) { self._openItem($(this)); }); }, _rotateSiblings: function($item) { var self = this, idx = $item.index(), $cached = this.cache[idx], $siblings; if ($cached) { $siblings = $cached; } else { $siblings = $item.siblings(); this.cache[idx] = $siblings; } $siblings.each(function(i) { var rotateVal = i < idx ? self.options.angleInc * (i - idx) : i - idx === 1 ? self.options.proximity : self.options.proximity + (i - idx - 1) * self.options.neighbor; var transformStr = 'rotate(' + rotateVal + 'deg)'; $(this).css({ 'transform': transformStr }); }); }, _setCurrent: function($el) { this.current = $el ? $el.index() : -1; this.$items.removeClass('ff-active'); if ($el) { $el.addClass('ff-active'); } } }; var logError = function(message) { if (window.console) { window.console.error(message); } }; $.fn.swatchbook = function(options) { var instance = $.data(this, 'swatchbook'); if (typeof options === 'string') { var args = Array.prototype.slice.call(arguments, 1); this.each(function() { if (!instance) { logError("cannot call methods on swatchbook prior to initialization; " + "attempted to call method '" + options + "'"); return; } if (!$.isFunction(instance[options]) || options.charAt(0) === "_") { logError("no such method '" + options + "' for swatchbook instance"); return; } instance[options].apply(instance, args); }); } else { this.each(function() { if (instance) { instance._init(); } else { instance = $.data(this, 'swatchbook', new $.SwatchBook(options, this)); } }); } return instance; }; })(jQuery, window);