diff src/DML/VendorAssetsBundle/Resources/assets/jquery.quicksand/1.4/jquery.quicksand.js @ 0:493bcb69166c

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