Permalink
Browse files

Merge remote-tracking branch 'remotes/JonMcL/master' into pull-request

  • Loading branch information...
2 parents 1238cf0 + bbab214 commit 6177ddc3dace848e4f6d0faa405780020537e81c @arlm arlm committed Oct 29, 2012
Showing with 51 additions and 5 deletions.
  1. +4 −0 README.textile
  2. +47 −5 jquery.quicksand.js
View
@@ -1,3 +1,7 @@
+h1. Forked
+
+This fork was created to allow for re-use of visible elements rather than replacing them with the new incoming elements (via AJAX).
+
h1. Quicksand
jQuery plugin for reordering and filtering items with a nice shuffling animation like the one "in this video":http://www.viddler.com/explore/37signals/videos/90/8.805/.
View
@@ -1,6 +1,7 @@
/*
Quicksand 1.2.2
+ 1.2.2-forked-2012-09-24-jonmcl
Reorder and filter items with a nice shuffling animation.
@@ -28,7 +29,8 @@ Github site: http://github.com/razorjack/quicksand
enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
selector: '> *',
dx: 0,
- dy: 0
+ dy: 0,
+ retainExisting: true // disable if you want the collection of items to be replaced completely by incoming items.
};
$.extend(options, customOptions);
@@ -79,10 +81,46 @@ Github site: http://github.com/razorjack/quicksand
// 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
- $toDelete = $sourceParent.find('> *');
- $sourceParent.prepend($dest.find('> *'));
- $toDelete.remove();
-
+ var $toDelete = $sourceParent.find('> *');
+ if (!options.retainExisting) {
+ $sourceParent.prepend($dest.find('> *'));
+ $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('> *').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.find('> *').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('> *').get(i - 1));
+ }
+ }
+ });
+ // Remove whatever is remaining from the DOM
+ $toDelete.not($keepElements).remove();
+ // Remove all element styles added for the animation. @todo restore original values?
+ $sourceParent.find('> *').removeAttr('style').addClass('testing');
+ }
+
if (adjustHeightOnCallback) {
$sourceParent.css('height', destHeight);
}
@@ -331,7 +369,11 @@ Github site: http://github.com/razorjack/quicksand
$dest.remove();
options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
for (i = 0; i < animationQueue.length; i++) {
+ if (i == animationQueue.length - 1) {
animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
+ } else {
+ animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing);
+ }
}
});
};

0 comments on commit 6177ddc

Please sign in to comment.