Daniel@0: /*
Daniel@0: 
Daniel@0: Quicksand 1.4
Daniel@0: 
Daniel@0: Reorder and filter items with a nice shuffling animation.
Daniel@0: 
Daniel@0: Copyright (c) 2010 Jacek Galanciak (razorjack.net) and agilope.com
Daniel@0: Big thanks for Piotr Petrus (riddle.pl) for deep code review and wonderful docs & demos.
Daniel@0: 
Daniel@0: Dual licensed under the MIT and GPL version 2 licenses.
Daniel@0: http://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt
Daniel@0: http://github.com/jquery/jquery/blob/master/GPL-LICENSE.txt
Daniel@0: 
Daniel@0: Project site: http://razorjack.net/quicksand
Daniel@0: Github site: http://github.com/razorjack/quicksand
Daniel@0: 
Daniel@0:  */
Daniel@0: 
Daniel@0: (function($) {
Daniel@0:   
Daniel@0:   var cloneWithCanvases = function(jqueryObject) {
Daniel@0:       var clonedJqueryObject =  jqueryObject.clone();
Daniel@0:       var canvases = jqueryObject.find('canvas');
Daniel@0:       if (canvases.length) {
Daniel@0:           var clonedCanvases = clonedJqueryObject.find('canvas');
Daniel@0:           clonedCanvases.each(function(index) {
Daniel@0:               var context = this.getContext('2d');
Daniel@0:               context.drawImage(canvases.get(index), 0, 0);
Daniel@0:           });
Daniel@0:       }
Daniel@0:       return clonedJqueryObject;
Daniel@0:   };
Daniel@0:     
Daniel@0:   $.fn.quicksand = function(collection, customOptions) {
Daniel@0:     var options = {
Daniel@0:       duration : 750,
Daniel@0:       easing : 'swing',
Daniel@0:       attribute : 'data-id',        // attribute to recognize same items within source and dest
Daniel@0:       adjustHeight : 'auto',        // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it
Daniel@0:                                     // before or after the animation, false leaves height constant
Daniel@0:       adjustWidth : 'auto',         // 'dynamic' animates width during shuffling (slow), 
Daniel@0:                                     // 'auto' adjusts it before or after the animation, false leaves width constant
Daniel@0:       useScaling : false,           // enable it if you're using scaling effect
Daniel@0:       enhancement : function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
Daniel@0:       selector : '> *',
Daniel@0:       atomic : false,
Daniel@0:       dx : 0,
Daniel@0:       dy : 0,
Daniel@0:       maxWidth : 0,
Daniel@0:       retainExisting : true         // disable if you want the collection of items to be replaced completely by incoming items.
Daniel@0:     },
Daniel@0: 
Daniel@0:     nativeScaleSupport = (function() {
Daniel@0:       var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
Daniel@0:         el = document.createElement('div');
Daniel@0:       for (var i = 0; i < prefixes.length; i++) {
Daniel@0:         if (typeof el.style[prefixes[i]] != 'undefined') {
Daniel@0:           return true;
Daniel@0:         }
Daniel@0:       }
Daniel@0:       return false;
Daniel@0:     })();
Daniel@0: 
Daniel@0:     $.extend(options, customOptions);
Daniel@0: 
Daniel@0:     // Can the browser do scaling?
Daniel@0:     if (!nativeScaleSupport || (typeof ($.fn.scale) == 'undefined')) {
Daniel@0:       options.useScaling = false;
Daniel@0:     }
Daniel@0: 
Daniel@0:     var callbackFunction;
Daniel@0:     if (typeof (arguments[1]) == 'function') {
Daniel@0:       callbackFunction = arguments[1];
Daniel@0:     } else if (typeof (arguments[2] == 'function')) {
Daniel@0:       callbackFunction = arguments[2];
Daniel@0:     }
Daniel@0: 
Daniel@0:     return this.each(function(i) {
Daniel@0:       var val;
Daniel@0:       var animationQueue = []; // used to store all the animation params before starting the animation;
Daniel@0:       // solves initial animation slowdowns
Daniel@0:       var $collection;
Daniel@0:       if (typeof(options.attribute) == 'function') {
Daniel@0:         $collection = $(collection);
Daniel@0:       } else {
Daniel@0:         $collection = cloneWithCanvases($(collection).filter('[' + options.attribute + ']')); // destination (target) collection
Daniel@0:       }
Daniel@0:       var $sourceParent = $(this); // source, the visible container of source collection
Daniel@0:       var sourceHeight = $(this).css('height'); // used to keep height and document flow during the animation
Daniel@0:       var sourceWidth = $(this).css('width'); // used to keep  width and document flow during the animation
Daniel@0:       var destHeight, destWidth;
Daniel@0:       var adjustHeightOnCallback = false;
Daniel@0:       var adjustWidthOnCallback = false;
Daniel@0:       var offset = $($sourceParent).offset(); // offset of visible container, used in animation calculations
Daniel@0:       var offsets = []; // coordinates of every source collection item
Daniel@0:       var $source = $(this).find(options.selector); // source collection items
Daniel@0:       var width = $($source).innerWidth(); // need for the responsive design
Daniel@0: 
Daniel@0:       // Replace the collection and quit if IE6
Daniel@0:       if (navigator.userAgent.match(/msie [6]/i)) {
Daniel@0:         $sourceParent.html('').append($collection);
Daniel@0:         return;
Daniel@0:       }
Daniel@0: 
Daniel@0:       // Gets called when any animation is finished
Daniel@0:       var postCallbackPerformed = 0; // prevents the function from being called more than one time
Daniel@0:       var postCallback = function() {
Daniel@0:         $(this).css('margin', '').css('position', '').css('top', '').css('left', '').css('opacity', '');
Daniel@0:         if (!postCallbackPerformed) {
Daniel@0:           postCallbackPerformed = 1;
Daniel@0: 
Daniel@0:           if (!options.atomic) {
Daniel@0:             // hack: used to be: $sourceParent.html($dest.html()); 
Daniel@0:             // put target HTML into visible source container  
Daniel@0:             // but new webkit builds cause flickering when replacing the collections
Daniel@0:             var $toDelete = $sourceParent.find(options.selector);
Daniel@0:             if (!options.retainExisting) {
Daniel@0:               $sourceParent.prepend($dest.find(options.selector));
Daniel@0:               $toDelete.remove();
Daniel@0:             } else {
Daniel@0:               // Avoid replacing elements because we may have already altered items in significant
Daniel@0:               // ways and it would be bad to have to do it again. (i.e. lazy load images) 
Daniel@0:               // But $dest holds the correct ordering. So we must re-sequence items in $sourceParent to match.
Daniel@0:               var $keepElements = $([]);
Daniel@0:               $dest.find(options.selector).each(function(i) {
Daniel@0:                 var $matchedElement = $([]);
Daniel@0:                 if (typeof (options.attribute) == 'function') {
Daniel@0:                   var val = options.attribute($(this));
Daniel@0:                   $toDelete.each(function() {
Daniel@0:                     if (options.attribute(this) == val) {
Daniel@0:                       $matchedElement = $(this);
Daniel@0:                       return false;
Daniel@0:                     }
Daniel@0:                   });
Daniel@0:                 } else {
Daniel@0:                   $matchedElement = $toDelete.filter(
Daniel@0:                     '[' + options.attribute + '="'+ 
Daniel@0:                     $(this).attr(options.attribute) + '"]');
Daniel@0:                 }
Daniel@0:                 if ($matchedElement.length > 0) {
Daniel@0:                   // There is a matching element in the $toDelete list and in $dest
Daniel@0:                   // list, so make sure it is in the right location within $sourceParent
Daniel@0:                   // and put it in the list of elements we need to not delete.
Daniel@0:                   $keepElements = $keepElements.add($matchedElement);
Daniel@0:                   if (i === 0) {
Daniel@0:                     $sourceParent.prepend($matchedElement);
Daniel@0:                   } else {
Daniel@0:                     $matchedElement.insertAfter($sourceParent.find(options.selector).get(i - 1));
Daniel@0:                   }
Daniel@0:                 }
Daniel@0:               });
Daniel@0:               // Remove whatever is remaining from the DOM
Daniel@0:               $toDelete.not($keepElements).remove();
Daniel@0:             }
Daniel@0: 
Daniel@0:             if (adjustHeightOnCallback) {
Daniel@0:               $sourceParent.css('height', destHeight);
Daniel@0:             }
Daniel@0:             if (adjustWidthOnCallback) {
Daniel@0:               $sourceParent.css('width', sourceWidth);
Daniel@0:             }
Daniel@0:           }
Daniel@0:           options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
Daniel@0:           if (typeof callbackFunction == 'function') {
Daniel@0:             callbackFunction.call(this);
Daniel@0:           }
Daniel@0:         }
Daniel@0: 
Daniel@0:         if (false === options.adjustHeight) {
Daniel@0:           $sourceParent.css('height', 'auto');
Daniel@0:         }
Daniel@0: 
Daniel@0:         if (false === options.adjustWidth) {
Daniel@0:           $sourceParent.css('width', 'auto');
Daniel@0:         }
Daniel@0:       };
Daniel@0: 
Daniel@0:       // Position: relative situations
Daniel@0:       var $correctionParent = $sourceParent.offsetParent();
Daniel@0:       var correctionOffset = $correctionParent.offset();
Daniel@0:       if ($correctionParent.css('position') == 'relative') {
Daniel@0:         if ($correctionParent.get(0).nodeName.toLowerCase() != 'body') {
Daniel@0:           correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0);
Daniel@0:           correctionOffset.left += (parseFloat($correctionParent.css('border-left-width')) || 0);
Daniel@0:         }
Daniel@0:       } else {
Daniel@0:         correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0);
Daniel@0:         correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0);
Daniel@0:         correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0);
Daniel@0:         correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0);
Daniel@0:       }
Daniel@0: 
Daniel@0:       // perform custom corrections from options (use when Quicksand fails to detect proper correction)
Daniel@0:       if (isNaN(correctionOffset.left)) {
Daniel@0:         correctionOffset.left = 0;
Daniel@0:       }
Daniel@0:       if (isNaN(correctionOffset.top)) {
Daniel@0:         correctionOffset.top = 0;
Daniel@0:       }
Daniel@0: 
Daniel@0:       correctionOffset.left -= options.dx;
Daniel@0:       correctionOffset.top -= options.dy;
Daniel@0: 
Daniel@0:       // keeps nodes after source container, holding their position
Daniel@0:       $sourceParent.css('height', $(this).height());
Daniel@0:       $sourceParent.css('width', $(this).width());
Daniel@0: 
Daniel@0:       // get positions of source collections
Daniel@0:       $source.each(function(i) {
Daniel@0:         offsets[i] = $(this).offset();
Daniel@0:       });
Daniel@0: 
Daniel@0:       // stops previous animations on source container
Daniel@0:       $(this).stop();
Daniel@0:       var dx = 0;
Daniel@0:       var dy = 0;
Daniel@0:       $source.each(function(i) {
Daniel@0:         $(this).stop(); // stop animation of collection items
Daniel@0:         var rawObj = $(this).get(0);
Daniel@0:         if (rawObj.style.position == 'absolute') {
Daniel@0:           dx = -options.dx;
Daniel@0:           dy = -options.dy;
Daniel@0:         } else {
Daniel@0:           dx = options.dx;
Daniel@0:           dy = options.dy;
Daniel@0:         }
Daniel@0: 
Daniel@0:         rawObj.style.position = 'absolute';
Daniel@0:         rawObj.style.margin = '0';
Daniel@0: 
Daniel@0:         if (!options.adjustWidth) {
Daniel@0:           rawObj.style.width = (width + 'px'); // sets the width to the current element
Daniel@0:           // with even if it has been changed
Daniel@0:           // by a responsive design
Daniel@0:         }
Daniel@0: 
Daniel@0:         rawObj.style.top = (offsets[i].top- parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
Daniel@0:         rawObj.style.left = (offsets[i].left- parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
Daniel@0: 
Daniel@0:         if (options.maxWidth > 0 && offsets[i].left > options.maxWidth) {
Daniel@0:           rawObj.style.display = 'none';
Daniel@0:         }
Daniel@0:       });
Daniel@0: 
Daniel@0:       // create temporary container with destination collection
Daniel@0:       var $dest = cloneWithCanvases($($sourceParent));
Daniel@0:       var rawDest = $dest.get(0);
Daniel@0:       rawDest.innerHTML = '';
Daniel@0:       rawDest.setAttribute('id', '');
Daniel@0:       rawDest.style.height = 'auto';
Daniel@0:       rawDest.style.width = $sourceParent.width() + 'px';
Daniel@0:       $dest.append($collection);
Daniel@0:       // Inserts node into HTML. Note that the node is under visible source container in the exactly same position
Daniel@0:       // The browser render all the items without showing them (opacity: 0.0) No offset calculations are needed, 
Daniel@0:       // the browser just extracts position from underlayered destination items and sets animation to destination positions.
Daniel@0:       $dest.insertBefore($sourceParent);
Daniel@0:       $dest.css('opacity', 0.0);
Daniel@0:       rawDest.style.zIndex = -1;
Daniel@0: 
Daniel@0:       rawDest.style.margin = '0';
Daniel@0:       rawDest.style.position = 'absolute';
Daniel@0:       rawDest.style.top = offset.top - correctionOffset.top + 'px';
Daniel@0:       rawDest.style.left = offset.left - correctionOffset.left + 'px';
Daniel@0: 
Daniel@0:       if (options.adjustHeight === 'dynamic') {
Daniel@0:         // If destination container has different height than source container the height can be animated,
Daniel@0:         // adjusting it to destination height
Daniel@0:         $sourceParent.animate({ height : $dest.height() }, options.duration, options.easing);
Daniel@0:       } else if (options.adjustHeight === 'auto') {
Daniel@0:         destHeight = $dest.height();
Daniel@0:         if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
Daniel@0:           // Adjust the height now so that the items don't move out of the container
Daniel@0:           $sourceParent.css('height', destHeight);
Daniel@0:         } else {
Daniel@0:           // Adjust later, on callback
Daniel@0:           adjustHeightOnCallback = true;
Daniel@0:         }
Daniel@0:       }
Daniel@0: 
Daniel@0:       if (options.adjustWidth === 'dynamic') {
Daniel@0:         // If destination container has different width than source container the width can be animated, 
Daniel@0:         // adjusting it to destination width
Daniel@0:         $sourceParent.animate({ width : $dest.width() }, options.duration, options.easing);
Daniel@0:       } else if (options.adjustWidth === 'auto') {
Daniel@0:         destWidth = $dest.width();
Daniel@0:         if (parseFloat(sourceWidth) < parseFloat(destWidth)) {
Daniel@0:           // Adjust the height now so that the items don't move out of the container
Daniel@0:           $sourceParent.css('width', destWidth);
Daniel@0:         } else {
Daniel@0:           // Adjust later, on callback
Daniel@0:           adjustWidthOnCallback = true;
Daniel@0:         }
Daniel@0:       }
Daniel@0: 
Daniel@0:       // Now it's time to do shuffling animation. First of all, we need to identify same elements within
Daniel@0:       // source and destination collections
Daniel@0:       $source.each(function(i) {
Daniel@0:         var destElement = [];
Daniel@0:         if (typeof (options.attribute) == 'function') {
Daniel@0:           val = options.attribute($(this));
Daniel@0:           $collection.each(function() {
Daniel@0:             if (options.attribute(this) == val) {
Daniel@0:               destElement = $(this);
Daniel@0:               return false;
Daniel@0:             }
Daniel@0:           });
Daniel@0:         } else {
Daniel@0:           destElement = $collection.filter('[' + options.attribute + '="' + $(this).attr(options.attribute) + '"]');
Daniel@0:         }
Daniel@0:         if (destElement.length) {
Daniel@0:           // The item is both in source and destination collections. It it's under different position, let's move it
Daniel@0:           if (!options.useScaling) {
Daniel@0:             animationQueue.push({
Daniel@0:               element : $(this), dest : destElement,
Daniel@0:               style : {
Daniel@0:                 top : $(this).offset().top,
Daniel@0:                 left : $(this).offset().left,
Daniel@0:                 opacity : ""
Daniel@0:               },
Daniel@0:               animation : {
Daniel@0:                 top : destElement.offset().top - correctionOffset.top,
Daniel@0:                 left : destElement.offset().left - correctionOffset.left,
Daniel@0:                 opacity : 1.0
Daniel@0:               }
Daniel@0:             });
Daniel@0:           } else {
Daniel@0:             animationQueue.push({
Daniel@0:               element : $(this), dest : destElement,
Daniel@0:               style : {
Daniel@0:                 top : $(this).offset().top,
Daniel@0:                 left : $(this).offset().left,
Daniel@0:                 opacity : ""
Daniel@0:               },
Daniel@0:               animation : {
Daniel@0:                 top : destElement.offset().top - correctionOffset.top,
Daniel@0:                 left : destElement.offset().left - correctionOffset.left,
Daniel@0:                 opacity : 1.0,
Daniel@0:                 scale : '1.0'
Daniel@0:               }
Daniel@0:             });
Daniel@0:           }
Daniel@0:         } else {
Daniel@0:           // The item from source collection is not present in destination collections.  Let's remove it
Daniel@0:           if (!options.useScaling) {
Daniel@0:             animationQueue.push({
Daniel@0:               element : $(this),
Daniel@0:               style : {
Daniel@0:                 top : $(this).offset().top,
Daniel@0:                 left : $(this).offset().left,
Daniel@0:                 opacity : ""
Daniel@0:               },
Daniel@0:               animation : {
Daniel@0:                 opacity : '0.0'
Daniel@0:               }
Daniel@0:             });
Daniel@0:           } else {
Daniel@0:             animationQueue.push({
Daniel@0:               element : $(this),
Daniel@0:               animation : {
Daniel@0:                 opacity : '0.0',
Daniel@0:                 style : {
Daniel@0:                   top : $(this).offset().top,
Daniel@0:                   left : $(this).offset().left,
Daniel@0:                   opacity : ""
Daniel@0:                 },
Daniel@0:                 scale : '0.0'
Daniel@0:               }
Daniel@0:             });
Daniel@0:           }
Daniel@0:         }
Daniel@0:       });
Daniel@0: 
Daniel@0:       $collection.each(function(i) {
Daniel@0:         // Grab all items from target collection not present in visible source collection
Daniel@0:         var sourceElement = [];
Daniel@0:         var destElement = [];
Daniel@0:         if (typeof (options.attribute) == 'function') {
Daniel@0:           val = options.attribute($(this));
Daniel@0:           $source.each(function() {
Daniel@0:             if (options.attribute(this) == val) {
Daniel@0:               sourceElement = $(this);
Daniel@0:               return false;
Daniel@0:             }
Daniel@0:           });
Daniel@0: 
Daniel@0:           $collection.each(function() {
Daniel@0:             if (options.attribute(this) == val) {
Daniel@0:               destElement = $(this);
Daniel@0:               return false;
Daniel@0:             }
Daniel@0:           });
Daniel@0:         } else {
Daniel@0:           sourceElement = $source.filter('[' + options.attribute + '="' + $(this).attr(options.attribute) + '"]');
Daniel@0:           destElement = $collection.filter('[' + options.attribute + '="' + $(this).attr(options.attribute) + '"]');
Daniel@0:         }
Daniel@0: 
Daniel@0:         var animationOptions;
Daniel@0:         if (sourceElement.length === 0 && destElement.length > 0) {
Daniel@0: 
Daniel@0:           // No such element in source collection...
Daniel@0:           if (!options.useScaling) {
Daniel@0:             animationOptions = {opacity : '1.0'};
Daniel@0:           } else {
Daniel@0:             animationOptions = {opacity : '1.0', scale : '1.0'};
Daniel@0:           }
Daniel@0: 
Daniel@0:           // Let's create it
Daniel@0:           var d = cloneWithCanvases(destElement);
Daniel@0:           var rawDestElement = d.get(0);
Daniel@0:           rawDestElement.style.position = 'absolute';
Daniel@0:           rawDestElement.style.margin = '0';
Daniel@0: 
Daniel@0:           if (!options.adjustWidth) {
Daniel@0:             // sets the width to the current element with even if it has been changed by a responsive design
Daniel@0:             rawDestElement.style.width = width + 'px'; 
Daniel@0:           }
Daniel@0: 
Daniel@0:           rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
Daniel@0:           rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
Daniel@0: 
Daniel@0:           d.css('opacity', 0.0); // IE
Daniel@0: 
Daniel@0:           if (options.useScaling) {
Daniel@0:             d.scale(0.0);
Daniel@0:           }
Daniel@0:           d.appendTo($sourceParent);
Daniel@0: 
Daniel@0:           if (options.maxWidth === 0 || destElement.offset().left < options.maxWidth) {
Daniel@0:             animationQueue.push({element : $(d), dest : destElement,animation : animationOptions});
Daniel@0:           }
Daniel@0:         }
Daniel@0:       });
Daniel@0: 
Daniel@0:       $dest.remove();
Daniel@0:       if (!options.atomic) {
Daniel@0:         options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
Daniel@0:         for (i = 0; i < animationQueue.length; i++) {
Daniel@0:           animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
Daniel@0:         }
Daniel@0:       } else {
Daniel@0:         $toDelete = $sourceParent.find(options.selector);
Daniel@0:         $sourceParent.prepend($dest.find(options.selector));
Daniel@0:         for (i = 0; i < animationQueue.length; i++) {
Daniel@0:           if (animationQueue[i].dest && animationQueue[i].style) {
Daniel@0:             var destElement = animationQueue[i].dest;
Daniel@0:             var destOffset = destElement.offset();
Daniel@0: 
Daniel@0:             destElement.css({
Daniel@0:               position : 'relative',
Daniel@0:               top : (animationQueue[i].style.top - destOffset.top),
Daniel@0:               left : (animationQueue[i].style.left - destOffset.left)
Daniel@0:             });
Daniel@0: 
Daniel@0:             destElement.animate({top : "0", left : "0"}, 
Daniel@0:                                 options.duration, 
Daniel@0:                                 options.easing, 
Daniel@0:                                 postCallback);
Daniel@0:           } else {
Daniel@0:             animationQueue[i].element.animate(animationQueue[i].animation, 
Daniel@0:                                               options.duration, 
Daniel@0:                                               options.easing,
Daniel@0:                                               postCallback);
Daniel@0:           }
Daniel@0:         }
Daniel@0:         $toDelete.remove();
Daniel@0:       }
Daniel@0:     });
Daniel@0:   };
Daniel@0: })(jQuery);