[Summary view] [Print] [Text view]

   1  /*!
   2   * jQuery UI Effects Explode 1.14.2
   3   * https://jqueryui.com
   4   *
   5   * Copyright OpenJS Foundation and other contributors
   6   * Released under the MIT license.
   7   * https://jquery.org/license
   8   */
   9  
  10  //>>label: Explode Effect
  11  //>>group: Effects
  12  //>>description: Explodes an element in all directions into n pieces. Implodes an element to its original wholeness.
  13  //>>docs: https://api.jqueryui.com/explode-effect/
  14  //>>demos: https://jqueryui.com/effect/
  15  
  16  ( function( factory ) {
  17      "use strict";
  18  
  19      if ( typeof define === "function" && define.amd ) {
  20  
  21          // AMD. Register as an anonymous module.
  22          define( [
  23              "jquery",
  24              "../version",
  25              "../effect"
  26          ], factory );
  27      } else {
  28  
  29          // Browser globals
  30          factory( jQuery );
  31      }
  32  } )( function( $ ) {
  33  "use strict";
  34  
  35  return $.effects.define( "explode", "hide", function( options, done ) {
  36  
  37      var i, j, left, top, mx, my,
  38          rows = options.pieces ? Math.round( Math.sqrt( options.pieces ) ) : 3,
  39          cells = rows,
  40          element = $( this ),
  41          mode = options.mode,
  42          show = mode === "show",
  43  
  44          // Show and then visibility:hidden the element before calculating offset
  45          offset = element.show().css( "visibility", "hidden" ).offset(),
  46  
  47          // Width and height of a piece
  48          width = Math.ceil( element.outerWidth() / cells ),
  49          height = Math.ceil( element.outerHeight() / rows ),
  50          pieces = [];
  51  
  52      // Children animate complete:
  53  	function childComplete() {
  54          pieces.push( this );
  55          if ( pieces.length === rows * cells ) {
  56              animComplete();
  57          }
  58      }
  59  
  60      // Clone the element for each row and cell.
  61      for ( i = 0; i < rows; i++ ) { // ===>
  62          top = offset.top + i * height;
  63          my = i - ( rows - 1 ) / 2;
  64  
  65          for ( j = 0; j < cells; j++ ) { // |||
  66              left = offset.left + j * width;
  67              mx = j - ( cells - 1 ) / 2;
  68  
  69              // Create a clone of the now hidden main element that will be absolute positioned
  70              // within a wrapper div off the -left and -top equal to size of our pieces
  71              element
  72                  .clone()
  73                  .appendTo( "body" )
  74                  .wrap( "<div></div>" )
  75                  .css( {
  76                      position: "absolute",
  77                      visibility: "visible",
  78                      left: -j * width,
  79                      top: -i * height
  80                  } )
  81  
  82                  // Select the wrapper - make it overflow: hidden and absolute positioned based on
  83                  // where the original was located +left and +top equal to the size of pieces
  84                  .parent()
  85                      .addClass( "ui-effects-explode" )
  86                      .css( {
  87                          position: "absolute",
  88                          overflow: "hidden",
  89                          width: width,
  90                          height: height,
  91                          left: left + ( show ? mx * width : 0 ),
  92                          top: top + ( show ? my * height : 0 ),
  93                          opacity: show ? 0 : 1
  94                      } )
  95                      .animate( {
  96                          left: left + ( show ? 0 : mx * width ),
  97                          top: top + ( show ? 0 : my * height ),
  98                          opacity: show ? 1 : 0
  99                      }, options.duration || 500, options.easing, childComplete );
 100          }
 101      }
 102  
 103  	function animComplete() {
 104          element.css( {
 105              visibility: "visible"
 106          } );
 107          $( pieces ).remove();
 108          done();
 109      }
 110  } );
 111  
 112  } );