Web   ·   Wiki   ·   Activities   ·   Blog   ·   Lists   ·   Chat   ·   Meeting   ·   Bugs   ·   Git   ·   Translate   ·   Archive   ·   People   ·   Donate
summaryrefslogtreecommitdiffstats
path: root/websdk/static/js/jquery.quicksand.js
diff options
context:
space:
mode:
Diffstat (limited to 'websdk/static/js/jquery.quicksand.js')
-rw-r--r--websdk/static/js/jquery.quicksand.js307
1 files changed, 307 insertions, 0 deletions
diff --git a/websdk/static/js/jquery.quicksand.js b/websdk/static/js/jquery.quicksand.js
new file mode 100644
index 0000000..626f490
--- /dev/null
+++ b/websdk/static/js/jquery.quicksand.js
@@ -0,0 +1,307 @@
+/*
+
+Quicksand 1.2.2
+
+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 ($) {
+ $.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
+ useScaling: true, // disable it if you're not using scaling effect or want to improve performance
+ enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
+ selector: '> *',
+ dx: 0,
+ dy: 0
+ };
+ $.extend(options, customOptions);
+
+ if ($.browser.msie || (typeof($.fn.scale) == 'undefined')) {
+ // Got IE and want scaling effect? Kiss my ass.
+ options.useScaling = false;
+ }
+
+ var callbackFunction;
+ if (typeof(arguments[1]) == 'function') {
+ var callbackFunction = arguments[1];
+ } else if (typeof(arguments[2] == 'function')) {
+ var 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 = $(collection).clone(); // 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 destHeight;
+ var adjustHeightOnCallback = 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
+
+ // Replace the collection and quit if IE6
+ if ($.browser.msie && $.browser.version.substr(0,1)<7) {
+ $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 () {
+
+ if (!postCallbackPerformed) {
+ postCallbackPerformed = 1;
+
+ // 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();
+
+ if (adjustHeightOnCallback) {
+ $sourceParent.css('height', destHeight);
+ }
+ options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
+ if (typeof callbackFunction == 'function') {
+ callbackFunction.call(this);
+ }
+ }
+ };
+
+ // Position: relative situations
+ var $correctionParent = $sourceParent.offsetParent();
+ var correctionOffset = $correctionParent.offset();
+ if ($correctionParent.css('position') == 'relative') {
+ if ($correctionParent.get(0).nodeName.toLowerCase() == 'body') {
+
+ } else {
+ 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());
+
+ // 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';
+
+ 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';
+ });
+
+ // create temporary container with destination collection
+ var $dest = $($sourceParent).clone();
+ var rawDest = $dest.get(0);
+ rawDest.innerHTML = '';
+ rawDest.setAttribute('id', '');
+ rawDest.style.height = 'auto';
+ rawDest.style.width = $sourceParent.width() + 'px';
+ $dest.append($collection);
+ // insert 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;
+ }
+ }
+
+ // 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),
+ animation:
+ {top: destElement.offset().top - correctionOffset.top,
+ left: destElement.offset().left - correctionOffset.left,
+ opacity: 1.0
+ }
+ });
+
+ } else {
+ animationQueue.push({
+ element: $(this),
+ 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),
+ animation: {opacity: '0.0'}});
+ } else {
+ animationQueue.push({element: $(this), animation: {opacity: '0.0',
+ 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) {
+ // 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
+ d = destElement.clone();
+ var rawDestElement = d.get(0);
+ rawDestElement.style.position = 'absolute';
+ rawDestElement.style.margin = '0';
+ 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.css('transform', 'scale(0.0)');
+ }
+ d.appendTo($sourceParent);
+
+ animationQueue.push({element: $(d),
+ animation: animationOptions});
+ }
+ });
+
+ $dest.remove();
+ 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);
+ }
+ });
+ };
+})(jQuery); \ No newline at end of file