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