|
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 } ) ); |