angelovcom.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

effect-explode.js (2882B)


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