resources/lib/jquery.ui/jquery.ui.effect-explode.js

   1 /*!
   2  * jQuery UI Effects Explode 1.9.2
   3  * http://jqueryui.com
   4  *
   5  * Copyright 2012 jQuery Foundation and other contributors
   6  * Released under the MIT license.
   7  * http://jquery.org/license
   8  *
   9  * http://api.jqueryui.com/explode-effect/
  10  *
  11  * Depends:
  12  *      jquery.ui.effect.js
  13  */
  14 (function( $, undefined ) {
  15
  16 $.effects.effect.explode = function( o, done ) {
  17
  18         var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3,
  19                 cells = rows,
  20                 el = $( this ),
  21                 mode = $.effects.setMode( el, o.mode || "hide" ),
  22                 show = mode === "show",
  23
  24                 // show and then visibility:hidden the element before calculating offset
  25                 offset = el.show().css( "visibility", "hidden" ).offset(),
  26
  27                 // width and height of a piece
  28                 width = Math.ceil( el.outerWidth() / cells ),
  29                 height = Math.ceil( el.outerHeight() / rows ),
  30                 pieces = [],
  31
  32                 // loop
  33                 i, j, left, top, mx, my;
  34
  35         // children animate complete:
  36         function childComplete() {
  37                 pieces.push( this );
  38                 if ( pieces.length === rows * cells ) {
  39                         animComplete();
  40                 }
  41         }
  42
  43         // clone the element for each row and cell.
  44         for( i = 0; i < rows ; i++ ) { // ===>
  45                 top = offset.top + i * height;
  46                 my = i - ( rows - 1 ) / 2 ;
  47
  48                 for( j = 0; j < cells ; j++ ) { // |||
  49                         left = offset.left + j * width;
  50                         mx = j - ( cells - 1 ) / 2 ;
  51
  52                         // Create a clone of the now hidden main element that will be absolute positioned
  53                         // within a wrapper div off the -left and -top equal to size of our pieces
  54                         el
  55                                 .clone()
  56                                 .appendTo( "body" )
  57                                 .wrap( "<div></div>" )
  58                                 .css({
  59                                         position: "absolute",
  60                                         visibility: "visible",
  61                                         left: -j * width,
  62                                         top: -i * height
  63                                 })
  64
  65                         // select the wrapper - make it overflow: hidden and absolute positioned based on
  66                         // where the original was located +left and +top equal to the size of pieces
  67                                 .parent()
  68                                 .addClass( "ui-effects-explode" )
  69                                 .css({
  70                                         position: "absolute",
  71                                         overflow: "hidden",
  72                                         width: width,
  73                                         height: height,
  74                                         left: left + ( show ? mx * width : 0 ),
  75                                         top: top + ( show ? my * height : 0 ),
  76                                         opacity: show ? 0 : 1
  77                                 }).animate({
  78                                         left: left + ( show ? 0 : mx * width ),
  79                                         top: top + ( show ? 0 : my * height ),
  80                                         opacity: show ? 1 : 0
  81                                 }, o.duration || 500, o.easing, childComplete );
  82                 }
  83         }
  84
  85         function animComplete() {
  86                 el.css({
  87                         visibility: "visible"
  88                 });
  89                 $( pieces ).remove();
  90                 if ( !show ) {
  91                         el.hide();
  92                 }
  93                 done();
  94         }
  95 };
  96
  97 })(jQuery);