merged cont.
[opensuse:yast-rest-service.git] / webservice / public / javascripts / jquery.quicksand.js
1 /*
2
3 Quicksand 1.2.2
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 before or after the animation, false leaves height constant
26             useScaling: true, // disable it if you're not using scaling effect or want to improve performance
27             enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
28             selector: '> *',
29             dx: 0,
30             dy: 0
31         };
32         $.extend(options, customOptions);
33
34         if ($.browser.msie || (typeof($.fn.scale) == 'undefined')) {
35             // Got IE and want scaling effect? Kiss my ass.
36             options.useScaling = false;
37         }
38
39         var callbackFunction;
40         if (typeof(arguments[1]) == 'function') {
41             var callbackFunction = arguments[1];
42         } else if (typeof(arguments[2] == 'function')) {
43             var callbackFunction = arguments[2];
44         }
45
46
47         return this.each(function (i) {
48             var val;
49             var animationQueue = []; // used to store all the animation params before starting the animation; solves initial animation slowdowns
50             var $collection = $(collection).clone(); // destination (target) collection
51             var $sourceParent = $(this); // source, the visible container of source collection
52             var sourceHeight = $(this).css('height'); // used to keep height and document flow during the animation
53
54             var destHeight;
55             var adjustHeightOnCallback = false;
56
57             var offset = $($sourceParent).offset(); // offset of visible container, used in animation calculations
58             var offsets = []; // coordinates of every source collection item
59
60             var $source = $(this).find(options.selector); // source collection items
61
62             // Replace the collection and quit if IE6
63
64
65             if($.browser.msie && parseInt($.browser.version) == 7) {
66 //            if ($.browser.msie && $.browser.version.number()< 7) {
67                 $sourceParent.html('').append($collection);
68                 return;
69             }
70
71             // Gets called when any animation is finished
72             var postCallbackPerformed = 0; // prevents the function from being called more than one time
73             var postCallback = function () {
74
75                 if (!postCallbackPerformed) {
76                     postCallbackPerformed = 1;
77
78                     // hack:
79                     // used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container
80                     // but new webkit builds cause flickering when replacing the collections
81                     $toDelete = $sourceParent.find('> *');
82                     $sourceParent.prepend($dest.find('> *'));
83                     $toDelete.remove();
84
85                     if (adjustHeightOnCallback) {
86                         $sourceParent.css('height', destHeight);
87                     }
88                     options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
89                     if (typeof callbackFunction == 'function') {
90                         callbackFunction.call(this);
91                     }
92                 }
93             };
94
95             // Position: relative situations
96             var $correctionParent = $sourceParent.offsetParent();
97             var correctionOffset = $correctionParent.offset();
98             if ($correctionParent.css('position') == 'relative') {
99                 if ($correctionParent.get(0).nodeName.toLowerCase() == 'body') {
100
101                 } else {
102                     correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0);
103                     correctionOffset.left +=( parseFloat($correctionParent.css('border-left-width')) || 0);
104                 }
105             } else {
106                 correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0);
107                 correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0);
108                 correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0);
109                 correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0);
110             }
111
112             // perform custom corrections from options (use when Quicksand fails to detect proper correction)
113             if (isNaN(correctionOffset.left)) {
114                 correctionOffset.left = 0;
115             }
116             if (isNaN(correctionOffset.top)) {
117                 correctionOffset.top = 0;
118             }
119
120             correctionOffset.left -= options.dx;
121             correctionOffset.top -= options.dy;
122
123             // keeps nodes after source container, holding their position
124             $sourceParent.css('height', $(this).height());
125
126             // get positions of source collections
127             $source.each(function (i) {
128                 offsets[i] = $(this).offset();
129             });
130
131             // stops previous animations on source container
132             $(this).stop();
133             var dx = 0; var dy = 0;
134             $source.each(function (i) {
135                 $(this).stop(); // stop animation of collection items
136                 var rawObj = $(this).get(0);
137                 if (rawObj.style.position == 'absolute') {
138                     dx = -options.dx;
139                     dy = -options.dy;
140                 } else {
141                     dx = options.dx;
142                     dy = options.dy;
143                 }
144
145                 rawObj.style.position = 'absolute';
146                 rawObj.style.margin = '0';
147
148                 rawObj.style.top = (offsets[i].top - parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
149                 rawObj.style.left = (offsets[i].left - parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
150             });
151
152             // create temporary container with destination collection
153             var $dest = $($sourceParent).clone();
154             var rawDest = $dest.get(0);
155             rawDest.innerHTML = '';
156             rawDest.setAttribute('id', '');
157             rawDest.style.height = 'auto';
158             rawDest.style.width = $sourceParent.width() + 'px';
159             $dest.append($collection);
160             // insert node into HTML
161             // Note that the node is under visible source container in the exactly same position
162             // The browser render all the items without showing them (opacity: 0.0)
163             // No offset calculations are needed, the browser just extracts position from underlayered destination items
164             // and sets animation to destination positions.
165             $dest.insertBefore($sourceParent);
166             $dest.css('opacity', 0.0);
167             rawDest.style.zIndex = -1;
168
169             rawDest.style.margin = '0';
170             rawDest.style.position = 'absolute';
171             rawDest.style.top = offset.top - correctionOffset.top + 'px';
172             rawDest.style.left = offset.left - correctionOffset.left + 'px';
173
174
175
176
177
178             if (options.adjustHeight === 'dynamic') {
179                 // If destination container has different height than source container
180                 // the height can be animated, adjusting it to destination height
181                 $sourceParent.animate({height: $dest.height()}, options.duration, options.easing);
182             } else if (options.adjustHeight === 'auto') {
183                 destHeight = $dest.height();
184                 if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
185                     // Adjust the height now so that the items don't move out of the container
186                     $sourceParent.css('height', destHeight);
187                 } else {
188                     //  Adjust later, on callback
189                     adjustHeightOnCallback = true;
190                 }
191             }
192
193             // Now it's time to do shuffling animation
194             // First of all, we need to identify same elements within source and destination collections
195             $source.each(function (i) {
196                 var destElement = [];
197                 if (typeof(options.attribute) == 'function') {
198
199                     val = options.attribute($(this));
200                     $collection.each(function() {
201                         if (options.attribute(this) == val) {
202                             destElement = $(this);
203                             return false;
204                         }
205                     });
206                 } else {
207                     destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
208                 }
209                 if (destElement.length) {
210                     // The item is both in source and destination collections
211                     // It it's under different position, let's move it
212                     if (!options.useScaling) {
213                         animationQueue.push(
214                                             {
215                                                 element: $(this),
216                                                 animation:
217                                                     {top: destElement.offset().top - correctionOffset.top,
218                                                      left: destElement.offset().left - correctionOffset.left,
219                                                      opacity: 1.0
220                                                     }
221                                             });
222
223                     } else {
224                         animationQueue.push({
225                                             element: $(this),
226                                             animation: {top: destElement.offset().top - correctionOffset.top,
227                                                         left: destElement.offset().left - correctionOffset.left,
228                                                         opacity: 1.0,
229                                                         scale: '1.0'
230                                                        }
231                                             });
232
233                     }
234                 } else {
235                     // The item from source collection is not present in destination collections
236                     // Let's remove it
237                     if (!options.useScaling) {
238                         animationQueue.push({element: $(this),
239                                              animation: {opacity: '0.0'}});
240                     } else {
241                         animationQueue.push({element: $(this), animation: {opacity: '0.0',
242                                          scale: '0.0'}});
243                     }
244                 }
245             });
246
247             $collection.each(function (i) {
248                 // Grab all items from target collection not present in visible source collection
249
250                 var sourceElement = [];
251                 var destElement = [];
252                 if (typeof(options.attribute) == 'function') {
253                     val = options.attribute($(this));
254                     $source.each(function() {
255                         if (options.attribute(this) == val) {
256                             sourceElement = $(this);
257                             return false;
258                         }
259                     });
260
261                     $collection.each(function() {
262                         if (options.attribute(this) == val) {
263                             destElement = $(this);
264                             return false;
265                         }
266                     });
267                 } else {
268                     sourceElement = $source.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
269                     destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
270                 }
271
272                 var animationOptions;
273                 if (sourceElement.length === 0) {
274                     // No such element in source collection...
275                     if (!options.useScaling) {
276                         animationOptions = {
277                             opacity: '1.0'
278                         };
279                     } else {
280                         animationOptions = {
281                             opacity: '1.0',
282                             scale: '1.0'
283                         };
284                     }
285                     // Let's create it
286                     d = destElement.clone();
287                     var rawDestElement = d.get(0);
288                     rawDestElement.style.position = 'absolute';
289                     rawDestElement.style.margin = '0';
290                     rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
291                     rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
292                     d.css('opacity', 0.0); // IE
293                     if (options.useScaling) {
294                         d.css('transform', 'scale(0.0)');
295                     }
296                     d.appendTo($sourceParent);
297
298                     animationQueue.push({element: $(d),
299                                          animation: animationOptions});
300                 }
301             });
302
303             $dest.remove();
304             options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
305             for (i = 0; i < animationQueue.length; i++) {
306                 animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
307             }
308         });
309     };
310 })(jQuery);
311