effects.explode: rework math used to split the div into peices - split the box disreg...

Fixes #3968 - effects explode: explodes from the right instead of from the center

diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js
index 79cf1a9fbbf9efb6747683c0ab2459382f62f12f..d8f8c8c3931a413df035d4ea2bf6eabf679e086b 100644 (file)
--- a/ui/jquery.effects.explode.js
+++ b/ui/jquery.effects.explode.js
@@ -18,45 +18,62 @@ $.effects.explode = function( o ) {
 
                var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3,
                        cells = rows,
-                       el = $( this ).show().css( 'visibility', 'hidden' ),
+                       el = $( this ),
                        mode = $.effects.setMode( el, o.mode || 'hide' ),
-                       offset = el.offset(),
-                       width = el.outerWidth( true ),
-                       height = el.outerHeight( true ),
-                       peices = [];
+                       show = ( mode == 'show' ),
 
-               //Substract the margins - not fixing the problem yet.
-               offset.top -= parseInt( el.css( "marginTop" ), 10 ) || 0;
-               offset.left -= parseInt( el.css( "marginLeft" ), 10 ) || 0;
+                       // show and then visibility:hidden the element before calculating offset
+                       offset = el.show().css( 'visibility', 'hidden' ).offset(),
+
+                       // width and height of a piece
+                       width = Math.ceil( el.outerWidth() / cells ),
+                       height = Math.ceil( el.outerHeight() / rows ),
+                       peices = [],
+                       i, j, pos;
 
                // clone the element for each row and cell.
-               for( var i = 0; i < rows ; i++ ) { // =
-                       for( var j = 0; j < cells ; j++ ) { // ||
+               for( i = 0; i < rows ; i++ ) { // ===>
+                       for( j = 0; j < cells ; j++ ) { // |||
+                               pos = {
+                                       // wrapper base position in body
+                                       left: offset.left + j * width,
+                                       top: offset.top + i * height,
+
+                                       // x position in matrix with 0,0 at the center
+                                       rx: j - cells / 2,
+                                       ry: i - rows / 2
+                               };
+
+                               // Create a clone of the now hidden main element that will be absolute positioned
+                               // within a wrapper div off the -left and -top equal to size of our pieces
                                el
                                        .clone()
-                                       .appendTo('body')
-                                       .wrap('<div></div>')
+                                       .appendTo( 'body' )
+                                       .wrap( '<div></div>' )
                                        .css({
                                                position: 'absolute',
                                                visibility: 'visible',
-                                               left: -j*(width/cells),
-                                               top: -i*(height/rows)
+                                               left: -j * width,
+                                               top: -i * height
                                        })
+
+                               // select the wrapper - make it overflow: hidden and absolute positioned based on
+                               // where the original was located +left and +top equal to the size of pieces
                                        .parent()
-                                       .addClass('ui-effects-explode')
+                                       .addClass( 'ui-effects-explode' )
                                        .css({
                                                position: 'absolute',
                                                overflow: 'hidden',
-                                               width: width/cells,
-                                               height: height/rows,
-                                               left: offset.left + j*(width/cells) + (o.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0),
-                                               top: offset.top + i*(height/rows) + (o.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0),
-                                               opacity: mode == 'show' ? 0 : 1
+                                               width: width,
+                                               height: height,
+                                               left: pos.left + ( show ? pos.rx * width : 0 ),
+                                               top: pos.top + ( show ? pos.ry * height : 0 ),
+                                               opacity: show ? 0 : 1
                                        }).animate({
-                                               left: offset.left + j*(width/cells) + (o.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)),
-                                               top: offset.top + i*(height/rows) + (o.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)),
-                                               opacity: mode == 'show' ? 1 : 0
-                                       }, o.duration || 500, childComplete );
+                                               left: pos.left + ( show ? 0 : pos.rx * width ),
+                                               top: pos.top + ( show ? 0 : pos.ry * height ),
+                                               opacity: show ? 1 : 0
+                                       }, o.duration || 500, o.easing, childComplete );
                        }
                }
 
@@ -69,9 +86,11 @@ $.effects.explode = function( o ) {
                }
 
                function animComplete() {
-                       el.css({ visibility: 'visible' });
+                       el.css({
+                               visibility: 'visible'
+                       });
                        $( peices ).remove();
-                       if ( mode != 'show' ) {
+                       if ( !show ) {
                                el.hide();
                        }
                        if ( $.isFunction( o.complete ) ) {