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