Permalink
Browse files

Reuse elements instead of replacing. On by default.

A new option has been added, retainExisting, that I have set to be on by default.
Instead of replacing collection elements in the DOM with the new elements, the ones
that will remain are left in the DOM, but resequenced.
  • Loading branch information...
1 parent 84df2d5 commit 7c6575f3d3fcd4883634c934f20e068f81a06f07 @JonMcL JonMcL committed Sep 24, 2012
Showing with 47 additions and 5 deletions.
  1. +47 −5 jquery.quicksand.js
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.
@@ -27,7 +28,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);
@@ -75,10 +77,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);
}
@@ -300,7 +338,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 7c6575f

Please sign in to comment.