root / drupal7 / sites / all / themes / simplecorp / js / plugins / jquery.quicksand.js @ b9383c72
| 1 |
/*
|
|---|---|
| 2 |
|
| 3 |
Quicksand 1.3
|
| 4 |
|
| 5 |
Reorder and filter items with a nice shuffling animation.
|
| 6 |
|
| 7 |
Copyright (c) 2010 Jacek Galanciak (razorjack.net) and agilope.com
|
| 8 |
Big thanks for Piotr Petrus (riddle.pl) for deep code review and wonderful docs & demos.
|
| 9 |
|
| 10 |
Dual licensed under the MIT and GPL version 2 licenses.
|
| 11 |
http://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt
|
| 12 |
http://github.com/jquery/jquery/blob/master/GPL-LICENSE.txt
|
| 13 |
|
| 14 |
Project site: http://razorjack.net/quicksand
|
| 15 |
Github site: http://github.com/razorjack/quicksand
|
| 16 |
|
| 17 |
*/
|
| 18 |
|
| 19 |
(function($) { |
| 20 |
$.fn.quicksand = function(collection, customOptions) { |
| 21 |
var options = {
|
| 22 |
duration : 750, |
| 23 |
easing : 'swing', |
| 24 |
attribute : 'data-id', // attribute to recognize same items within source and dest |
| 25 |
adjustHeight : 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it |
| 26 |
// before or after the animation, false leaves height constant
|
| 27 |
adjustWidth : 'auto', // 'dynamic' animates width during shuffling (slow), |
| 28 |
// 'auto' adjusts it before or after the animation, false leaves width constant
|
| 29 |
useScaling : false, // enable it if you're using scaling effect |
| 30 |
enhancement : function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements |
| 31 |
selector : '> *', |
| 32 |
atomic : false, |
| 33 |
dx : 0, |
| 34 |
dy : 0, |
| 35 |
maxWidth : 0, |
| 36 |
retainExisting : true // disable if you want the collection of items to be replaced completely by incoming items. |
| 37 |
}; |
| 38 |
$.extend(options, customOptions);
|
| 39 |
|
| 40 |
// Got IE and want scaling effect? Kiss my ass.
|
| 41 |
if ($.browser.msie || (typeof ($.fn.scale) == 'undefined')) { |
| 42 |
options.useScaling = false;
|
| 43 |
} |
| 44 |
|
| 45 |
var callbackFunction;
|
| 46 |
if (typeof (arguments[1]) == 'function') { |
| 47 |
callbackFunction = arguments[1]; |
| 48 |
} else if (typeof (arguments[2] == 'function')) { |
| 49 |
callbackFunction = arguments[2]; |
| 50 |
} |
| 51 |
|
| 52 |
return this.each(function(i) { |
| 53 |
var val;
|
| 54 |
var animationQueue = []; // used to store all the animation params before starting the animation; |
| 55 |
// solves initial animation slowdowns
|
| 56 |
var $collection; |
| 57 |
if (typeof(options.attribute) == 'function') { |
| 58 |
$collection = $(collection); |
| 59 |
} else {
|
| 60 |
$collection = $(collection).filter('[' + options.attribute + ']').clone(); // destination (target) collection |
| 61 |
} |
| 62 |
var $sourceParent = $(this); // source, the visible container of source collection |
| 63 |
var sourceHeight = $(this).css('height'); // used to keep height and document flow during the animation |
| 64 |
var sourceWidth = $(this).css('width'); // used to keep width and document flow during the animation |
| 65 |
var destHeight, destWidth;
|
| 66 |
var adjustHeightOnCallback = false; |
| 67 |
var adjustWidthOnCallback = false; |
| 68 |
var offset = $($sourceParent).offset(); // offset of visible container, used in animation calculations |
| 69 |
var offsets = []; // coordinates of every source collection item |
| 70 |
var $source = $(this).find(options.selector); // source collection items |
| 71 |
var width = $($source).innerWidth(); // need for the responsive design |
| 72 |
|
| 73 |
// Replace the collection and quit if IE6
|
| 74 |
if ($.browser.msie && parseInt($.browser.version, 10) < 7) { |
| 75 |
$sourceParent.html('').append($collection); |
| 76 |
return;
|
| 77 |
} |
| 78 |
|
| 79 |
// Gets called when any animation is finished
|
| 80 |
var postCallbackPerformed = 0; // prevents the function from being called more than one time |
| 81 |
var postCallback = function() { |
| 82 |
$(this).css('margin', '').css('position', '').css('top', '').css('left', '').css('opacity', ''); |
| 83 |
if (!postCallbackPerformed) {
|
| 84 |
postCallbackPerformed = 1;
|
| 85 |
|
| 86 |
if (!options.atomic) {
|
| 87 |
// hack: used to be: $sourceParent.html($dest.html());
|
| 88 |
// put target HTML into visible source container
|
| 89 |
// but new webkit builds cause flickering when replacing the collections
|
| 90 |
var $toDelete = $sourceParent.find(options.selector); |
| 91 |
if (!options.retainExisting) {
|
| 92 |
$sourceParent.prepend($dest.find(options.selector)); |
| 93 |
$toDelete.remove();
|
| 94 |
} else {
|
| 95 |
// Avoid replacing elements because we may have already altered items in significant
|
| 96 |
// ways and it would be bad to have to do it again. (i.e. lazy load images)
|
| 97 |
// But $dest holds the correct ordering. So we must re-sequence items in $sourceParent to match.
|
| 98 |
var $keepElements = $([]); |
| 99 |
$dest.find(options.selector).each(function(i) { |
| 100 |
var $matchedElement = $([]); |
| 101 |
if (typeof (options.attribute) == 'function') { |
| 102 |
var val = options.attribute($(this)); |
| 103 |
$toDelete.each(function() { |
| 104 |
if (options.attribute(this) == val) { |
| 105 |
$matchedElement = $(this); |
| 106 |
return false; |
| 107 |
} |
| 108 |
}); |
| 109 |
} else {
|
| 110 |
$matchedElement = $toDelete.filter( |
| 111 |
'[' + options.attribute + '="'+ |
| 112 |
$(this).attr(options.attribute) + '"]'); |
| 113 |
} |
| 114 |
if ($matchedElement.length > 0) { |
| 115 |
// There is a matching element in the $toDelete list and in $dest
|
| 116 |
// list, so make sure it is in the right location within $sourceParent
|
| 117 |
// and put it in the list of elements we need to not delete.
|
| 118 |
$keepElements = $keepElements.add($matchedElement); |
| 119 |
if (i === 0) { |
| 120 |
$sourceParent.prepend($matchedElement); |
| 121 |
} else {
|
| 122 |
$matchedElement.insertAfter($sourceParent.find(options.selector).get(i - 1)); |
| 123 |
} |
| 124 |
} |
| 125 |
}); |
| 126 |
// Remove whatever is remaining from the DOM
|
| 127 |
$toDelete.not($keepElements).remove(); |
| 128 |
} |
| 129 |
|
| 130 |
if (adjustHeightOnCallback) {
|
| 131 |
$sourceParent.css('height', destHeight); |
| 132 |
} |
| 133 |
if (adjustWidthOnCallback) {
|
| 134 |
$sourceParent.css('width', sourceWidth); |
| 135 |
} |
| 136 |
} |
| 137 |
options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection |
| 138 |
if (typeof callbackFunction == 'function') { |
| 139 |
callbackFunction.call(this);
|
| 140 |
} |
| 141 |
} |
| 142 |
|
| 143 |
if (false === options.adjustHeight) { |
| 144 |
$sourceParent.css('height', 'auto'); |
| 145 |
} |
| 146 |
|
| 147 |
if (false === options.adjustWidth) { |
| 148 |
$sourceParent.css('width', 'auto'); |
| 149 |
} |
| 150 |
}; |
| 151 |
|
| 152 |
// Position: relative situations
|
| 153 |
var $correctionParent = $sourceParent.offsetParent(); |
| 154 |
var correctionOffset = $correctionParent.offset(); |
| 155 |
if ($correctionParent.css('position') == 'relative') { |
| 156 |
if ($correctionParent.get(0).nodeName.toLowerCase() != 'body') { |
| 157 |
correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0); |
| 158 |
correctionOffset.left += (parseFloat($correctionParent.css('border-left-width')) || 0); |
| 159 |
} |
| 160 |
} else {
|
| 161 |
correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0); |
| 162 |
correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0); |
| 163 |
correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0); |
| 164 |
correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0); |
| 165 |
} |
| 166 |
|
| 167 |
// perform custom corrections from options (use when Quicksand fails to detect proper correction)
|
| 168 |
if (isNaN(correctionOffset.left)) {
|
| 169 |
correctionOffset.left = 0;
|
| 170 |
} |
| 171 |
if (isNaN(correctionOffset.top)) {
|
| 172 |
correctionOffset.top = 0;
|
| 173 |
} |
| 174 |
|
| 175 |
correctionOffset.left -= options.dx; |
| 176 |
correctionOffset.top -= options.dy; |
| 177 |
|
| 178 |
// keeps nodes after source container, holding their position
|
| 179 |
$sourceParent.css('height', $(this).height()); |
| 180 |
$sourceParent.css('width', $(this).width()); |
| 181 |
|
| 182 |
// get positions of source collections
|
| 183 |
$source.each(function(i) { |
| 184 |
offsets[i] = $(this).offset(); |
| 185 |
}); |
| 186 |
|
| 187 |
// stops previous animations on source container
|
| 188 |
$(this).stop(); |
| 189 |
var dx = 0; |
| 190 |
var dy = 0; |
| 191 |
$source.each(function(i) { |
| 192 |
$(this).stop(); // stop animation of collection items |
| 193 |
var rawObj = $(this).get(0); |
| 194 |
if (rawObj.style.position == 'absolute') { |
| 195 |
dx = -options.dx; |
| 196 |
dy = -options.dy; |
| 197 |
} else {
|
| 198 |
dx = options.dx; |
| 199 |
dy = options.dy; |
| 200 |
} |
| 201 |
|
| 202 |
rawObj.style.position = 'absolute';
|
| 203 |
rawObj.style.margin = '0';
|
| 204 |
|
| 205 |
if (!options.adjustWidth) {
|
| 206 |
rawObj.style.width = (width + 'px'); // sets the width to the current element |
| 207 |
// with even if it has been changed
|
| 208 |
// by a responsive design
|
| 209 |
} |
| 210 |
|
| 211 |
rawObj.style.top = (offsets[i].top- parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
|
| 212 |
rawObj.style.left = (offsets[i].left- parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
|
| 213 |
|
| 214 |
if (options.maxWidth > 0 && offsets[i].left > options.maxWidth) { |
| 215 |
rawObj.style.display = 'none';
|
| 216 |
} |
| 217 |
}); |
| 218 |
|
| 219 |
// create temporary container with destination collection
|
| 220 |
var $dest = $($sourceParent).clone(); |
| 221 |
var rawDest = $dest.get(0); |
| 222 |
rawDest.innerHTML = '';
|
| 223 |
rawDest.setAttribute('id', ''); |
| 224 |
rawDest.style.height = 'auto';
|
| 225 |
rawDest.style.width = $sourceParent.width() + 'px'; |
| 226 |
$dest.append($collection); |
| 227 |
// Inserts node into HTML. Note that the node is under visible source container in the exactly same position
|
| 228 |
// The browser render all the items without showing them (opacity: 0.0) No offset calculations are needed,
|
| 229 |
// the browser just extracts position from underlayered destination items and sets animation to destination positions.
|
| 230 |
$dest.insertBefore($sourceParent); |
| 231 |
$dest.css('opacity', 0.0); |
| 232 |
rawDest.style.zIndex = -1;
|
| 233 |
|
| 234 |
rawDest.style.margin = '0';
|
| 235 |
rawDest.style.position = 'absolute';
|
| 236 |
rawDest.style.top = offset.top - correctionOffset.top + 'px';
|
| 237 |
rawDest.style.left = offset.left - correctionOffset.left + 'px';
|
| 238 |
|
| 239 |
if (options.adjustHeight === 'dynamic') { |
| 240 |
// If destination container has different height than source container the height can be animated,
|
| 241 |
// adjusting it to destination height
|
| 242 |
$sourceParent.animate({ height : $dest.height() }, options.duration, options.easing); |
| 243 |
} else if (options.adjustHeight === 'auto') { |
| 244 |
destHeight = $dest.height();
|
| 245 |
if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
|
| 246 |
// Adjust the height now so that the items don't move out of the container
|
| 247 |
$sourceParent.css('height', destHeight); |
| 248 |
} else {
|
| 249 |
// Adjust later, on callback
|
| 250 |
adjustHeightOnCallback = true;
|
| 251 |
} |
| 252 |
} |
| 253 |
|
| 254 |
if (options.adjustWidth === 'dynamic') { |
| 255 |
// If destination container has different width than source container the width can be animated,
|
| 256 |
// adjusting it to destination width
|
| 257 |
$sourceParent.animate({ width : $dest.width() }, options.duration, options.easing); |
| 258 |
} else if (options.adjustWidth === 'auto') { |
| 259 |
destWidth = $dest.width();
|
| 260 |
if (parseFloat(sourceWidth) < parseFloat(destWidth)) {
|
| 261 |
// Adjust the height now so that the items don't move out of the container
|
| 262 |
$sourceParent.css('width', destWidth); |
| 263 |
} else {
|
| 264 |
// Adjust later, on callback
|
| 265 |
adjustWidthOnCallback = true;
|
| 266 |
} |
| 267 |
} |
| 268 |
|
| 269 |
// Now it's time to do shuffling animation. First of all, we need to identify same elements within
|
| 270 |
// source and destination collections
|
| 271 |
$source.each(function(i) { |
| 272 |
var destElement = [];
|
| 273 |
if (typeof (options.attribute) == 'function') { |
| 274 |
val = options.attribute($(this)); |
| 275 |
$collection.each(function() { |
| 276 |
if (options.attribute(this) == val) { |
| 277 |
destElement = $(this); |
| 278 |
return false; |
| 279 |
} |
| 280 |
}); |
| 281 |
} else {
|
| 282 |
destElement = $collection.filter('[' + options.attribute + '="' + $(this).attr(options.attribute) + '"]'); |
| 283 |
} |
| 284 |
if (destElement.length) {
|
| 285 |
// The item is both in source and destination collections. It it's under different position, let's move it
|
| 286 |
if (!options.useScaling) {
|
| 287 |
animationQueue.push({
|
| 288 |
element : $(this), dest : destElement, |
| 289 |
style : {
|
| 290 |
top : $(this).offset().top, |
| 291 |
left : $(this).offset().left, |
| 292 |
opacity : "" |
| 293 |
}, |
| 294 |
animation : {
|
| 295 |
top : destElement.offset().top - correctionOffset.top,
|
| 296 |
left : destElement.offset().left - correctionOffset.left,
|
| 297 |
opacity : 1.0 |
| 298 |
} |
| 299 |
}); |
| 300 |
} else {
|
| 301 |
animationQueue.push({
|
| 302 |
element : $(this), dest : destElement, |
| 303 |
style : {
|
| 304 |
top : $(this).offset().top, |
| 305 |
left : $(this).offset().left, |
| 306 |
opacity : "" |
| 307 |
}, |
| 308 |
animation : {
|
| 309 |
top : destElement.offset().top - correctionOffset.top,
|
| 310 |
left : destElement.offset().left - correctionOffset.left,
|
| 311 |
opacity : 1.0, |
| 312 |
scale : '1.0' |
| 313 |
} |
| 314 |
}); |
| 315 |
} |
| 316 |
} else {
|
| 317 |
// The item from source collection is not present in destination collections. Let's remove it
|
| 318 |
if (!options.useScaling) {
|
| 319 |
animationQueue.push({
|
| 320 |
element : $(this), |
| 321 |
style : {
|
| 322 |
top : $(this).offset().top, |
| 323 |
left : $(this).offset().left, |
| 324 |
opacity : "" |
| 325 |
}, |
| 326 |
animation : {
|
| 327 |
opacity : '0.0' |
| 328 |
} |
| 329 |
}); |
| 330 |
} else {
|
| 331 |
animationQueue.push({
|
| 332 |
element : $(this), |
| 333 |
animation : {
|
| 334 |
opacity : '0.0', |
| 335 |
style : {
|
| 336 |
top : $(this).offset().top, |
| 337 |
left : $(this).offset().left, |
| 338 |
opacity : "" |
| 339 |
}, |
| 340 |
scale : '0.0' |
| 341 |
} |
| 342 |
}); |
| 343 |
} |
| 344 |
} |
| 345 |
}); |
| 346 |
|
| 347 |
$collection.each(function(i) { |
| 348 |
// Grab all items from target collection not present in visible source collection
|
| 349 |
var sourceElement = [];
|
| 350 |
var destElement = [];
|
| 351 |
if (typeof (options.attribute) == 'function') { |
| 352 |
val = options.attribute($(this)); |
| 353 |
$source.each(function() { |
| 354 |
if (options.attribute(this) == val) { |
| 355 |
sourceElement = $(this); |
| 356 |
return false; |
| 357 |
} |
| 358 |
}); |
| 359 |
|
| 360 |
$collection.each(function() { |
| 361 |
if (options.attribute(this) == val) { |
| 362 |
destElement = $(this); |
| 363 |
return false; |
| 364 |
} |
| 365 |
}); |
| 366 |
} else {
|
| 367 |
sourceElement = $source.filter('[' + options.attribute + '="' + $(this).attr(options.attribute) + '"]'); |
| 368 |
destElement = $collection.filter('[' + options.attribute + '="' + $(this).attr(options.attribute) + '"]'); |
| 369 |
} |
| 370 |
|
| 371 |
var animationOptions;
|
| 372 |
if (sourceElement.length === 0 && destElement.length > 0) { |
| 373 |
|
| 374 |
// No such element in source collection...
|
| 375 |
if (!options.useScaling) {
|
| 376 |
animationOptions = {opacity : '1.0'};
|
| 377 |
} else {
|
| 378 |
animationOptions = {opacity : '1.0', scale : '1.0'};
|
| 379 |
} |
| 380 |
|
| 381 |
// Let's create it
|
| 382 |
var d = destElement.clone();
|
| 383 |
var rawDestElement = d.get(0); |
| 384 |
rawDestElement.style.position = 'absolute';
|
| 385 |
rawDestElement.style.margin = '0';
|
| 386 |
|
| 387 |
if (!options.adjustWidth) {
|
| 388 |
// sets the width to the current element with even if it has been changed by a responsive design
|
| 389 |
rawDestElement.style.width = width + 'px';
|
| 390 |
} |
| 391 |
|
| 392 |
rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
|
| 393 |
rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
|
| 394 |
|
| 395 |
d.css('opacity', 0.0); // IE |
| 396 |
|
| 397 |
if (options.useScaling) {
|
| 398 |
d.css('transform', 'scale(0.0)'); |
| 399 |
} |
| 400 |
d.appendTo($sourceParent);
|
| 401 |
|
| 402 |
if (options.maxWidth === 0 || destElement.offset().left < options.maxWidth) { |
| 403 |
animationQueue.push({element : $(d), dest : destElement,animation : animationOptions});
|
| 404 |
} |
| 405 |
} |
| 406 |
}); |
| 407 |
|
| 408 |
$dest.remove();
|
| 409 |
if (!options.atomic) {
|
| 410 |
options.enhancement($sourceParent); // Perform custom visual enhancements during the animation |
| 411 |
for (i = 0; i < animationQueue.length; i++) { |
| 412 |
animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback); |
| 413 |
} |
| 414 |
} else {
|
| 415 |
$toDelete = $sourceParent.find(options.selector); |
| 416 |
$sourceParent.prepend($dest.find(options.selector)); |
| 417 |
for (i = 0; i < animationQueue.length; i++) { |
| 418 |
if (animationQueue[i].dest && animationQueue[i].style) {
|
| 419 |
var destElement = animationQueue[i].dest;
|
| 420 |
var destOffset = destElement.offset();
|
| 421 |
|
| 422 |
destElement.css({
|
| 423 |
position : 'relative', |
| 424 |
top : (animationQueue[i].style.top - destOffset.top),
|
| 425 |
left : (animationQueue[i].style.left - destOffset.left)
|
| 426 |
}); |
| 427 |
|
| 428 |
destElement.animate({top : "0", left : "0"},
|
| 429 |
options.duration, |
| 430 |
options.easing, |
| 431 |
postCallback); |
| 432 |
} else {
|
| 433 |
animationQueue[i].element.animate(animationQueue[i].animation, |
| 434 |
options.duration, |
| 435 |
options.easing, |
| 436 |
postCallback); |
| 437 |
} |
| 438 |
} |
| 439 |
$toDelete.remove();
|
| 440 |
} |
| 441 |
}); |
| 442 |
}; |
| 443 |
})(jQuery); |