1 /*! |
|
2 * jQuery UI Effects Scale 1.10.3 |
|
3 * http://jqueryui.com |
|
4 * |
|
5 * Copyright 2013 jQuery Foundation and other contributors |
|
6 * Released under the MIT license. |
|
7 * http://jquery.org/license |
|
8 * |
|
9 * http://api.jqueryui.com/scale-effect/ |
|
10 * |
|
11 * Depends: |
|
12 * jquery.ui.effect.js |
|
13 */ |
|
14 (function( $, undefined ) { |
|
15 |
|
16 $.effects.effect.puff = function( o, done ) { |
|
17 var elem = $( this ), |
|
18 mode = $.effects.setMode( elem, o.mode || "hide" ), |
|
19 hide = mode === "hide", |
|
20 percent = parseInt( o.percent, 10 ) || 150, |
|
21 factor = percent / 100, |
|
22 original = { |
|
23 height: elem.height(), |
|
24 width: elem.width(), |
|
25 outerHeight: elem.outerHeight(), |
|
26 outerWidth: elem.outerWidth() |
|
27 }; |
|
28 |
|
29 $.extend( o, { |
|
30 effect: "scale", |
|
31 queue: false, |
|
32 fade: true, |
|
33 mode: mode, |
|
34 complete: done, |
|
35 percent: hide ? percent : 100, |
|
36 from: hide ? |
|
37 original : |
|
38 { |
|
39 height: original.height * factor, |
|
40 width: original.width * factor, |
|
41 outerHeight: original.outerHeight * factor, |
|
42 outerWidth: original.outerWidth * factor |
|
43 } |
|
44 }); |
|
45 |
|
46 elem.effect( o ); |
|
47 }; |
|
48 |
|
49 $.effects.effect.scale = function( o, done ) { |
|
50 |
|
51 // Create element |
|
52 var el = $( this ), |
|
53 options = $.extend( true, {}, o ), |
|
54 mode = $.effects.setMode( el, o.mode || "effect" ), |
|
55 percent = parseInt( o.percent, 10 ) || |
|
56 ( parseInt( o.percent, 10 ) === 0 ? 0 : ( mode === "hide" ? 0 : 100 ) ), |
|
57 direction = o.direction || "both", |
|
58 origin = o.origin, |
|
59 original = { |
|
60 height: el.height(), |
|
61 width: el.width(), |
|
62 outerHeight: el.outerHeight(), |
|
63 outerWidth: el.outerWidth() |
|
64 }, |
|
65 factor = { |
|
66 y: direction !== "horizontal" ? (percent / 100) : 1, |
|
67 x: direction !== "vertical" ? (percent / 100) : 1 |
|
68 }; |
|
69 |
|
70 // We are going to pass this effect to the size effect: |
|
71 options.effect = "size"; |
|
72 options.queue = false; |
|
73 options.complete = done; |
|
74 |
|
75 // Set default origin and restore for show/hide |
|
76 if ( mode !== "effect" ) { |
|
77 options.origin = origin || ["middle","center"]; |
|
78 options.restore = true; |
|
79 } |
|
80 |
|
81 options.from = o.from || ( mode === "show" ? { |
|
82 height: 0, |
|
83 width: 0, |
|
84 outerHeight: 0, |
|
85 outerWidth: 0 |
|
86 } : original ); |
|
87 options.to = { |
|
88 height: original.height * factor.y, |
|
89 width: original.width * factor.x, |
|
90 outerHeight: original.outerHeight * factor.y, |
|
91 outerWidth: original.outerWidth * factor.x |
|
92 }; |
|
93 |
|
94 // Fade option to support puff |
|
95 if ( options.fade ) { |
|
96 if ( mode === "show" ) { |
|
97 options.from.opacity = 0; |
|
98 options.to.opacity = 1; |
|
99 } |
|
100 if ( mode === "hide" ) { |
|
101 options.from.opacity = 1; |
|
102 options.to.opacity = 0; |
|
103 } |
|
104 } |
|
105 |
|
106 // Animate |
|
107 el.effect( options ); |
|
108 |
|
109 }; |
|
110 |
|
111 $.effects.effect.size = function( o, done ) { |
|
112 |
|
113 // Create element |
|
114 var original, baseline, factor, |
|
115 el = $( this ), |
|
116 props0 = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ], |
|
117 |
|
118 // Always restore |
|
119 props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ], |
|
120 |
|
121 // Copy for children |
|
122 props2 = [ "width", "height", "overflow" ], |
|
123 cProps = [ "fontSize" ], |
|
124 vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ], |
|
125 hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ], |
|
126 |
|
127 // Set options |
|
128 mode = $.effects.setMode( el, o.mode || "effect" ), |
|
129 restore = o.restore || mode !== "effect", |
|
130 scale = o.scale || "both", |
|
131 origin = o.origin || [ "middle", "center" ], |
|
132 position = el.css( "position" ), |
|
133 props = restore ? props0 : props1, |
|
134 zero = { |
|
135 height: 0, |
|
136 width: 0, |
|
137 outerHeight: 0, |
|
138 outerWidth: 0 |
|
139 }; |
|
140 |
|
141 if ( mode === "show" ) { |
|
142 el.show(); |
|
143 } |
|
144 original = { |
|
145 height: el.height(), |
|
146 width: el.width(), |
|
147 outerHeight: el.outerHeight(), |
|
148 outerWidth: el.outerWidth() |
|
149 }; |
|
150 |
|
151 if ( o.mode === "toggle" && mode === "show" ) { |
|
152 el.from = o.to || zero; |
|
153 el.to = o.from || original; |
|
154 } else { |
|
155 el.from = o.from || ( mode === "show" ? zero : original ); |
|
156 el.to = o.to || ( mode === "hide" ? zero : original ); |
|
157 } |
|
158 |
|
159 // Set scaling factor |
|
160 factor = { |
|
161 from: { |
|
162 y: el.from.height / original.height, |
|
163 x: el.from.width / original.width |
|
164 }, |
|
165 to: { |
|
166 y: el.to.height / original.height, |
|
167 x: el.to.width / original.width |
|
168 } |
|
169 }; |
|
170 |
|
171 // Scale the css box |
|
172 if ( scale === "box" || scale === "both" ) { |
|
173 |
|
174 // Vertical props scaling |
|
175 if ( factor.from.y !== factor.to.y ) { |
|
176 props = props.concat( vProps ); |
|
177 el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from ); |
|
178 el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to ); |
|
179 } |
|
180 |
|
181 // Horizontal props scaling |
|
182 if ( factor.from.x !== factor.to.x ) { |
|
183 props = props.concat( hProps ); |
|
184 el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from ); |
|
185 el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to ); |
|
186 } |
|
187 } |
|
188 |
|
189 // Scale the content |
|
190 if ( scale === "content" || scale === "both" ) { |
|
191 |
|
192 // Vertical props scaling |
|
193 if ( factor.from.y !== factor.to.y ) { |
|
194 props = props.concat( cProps ).concat( props2 ); |
|
195 el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from ); |
|
196 el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to ); |
|
197 } |
|
198 } |
|
199 |
|
200 $.effects.save( el, props ); |
|
201 el.show(); |
|
202 $.effects.createWrapper( el ); |
|
203 el.css( "overflow", "hidden" ).css( el.from ); |
|
204 |
|
205 // Adjust |
|
206 if (origin) { // Calculate baseline shifts |
|
207 baseline = $.effects.getBaseline( origin, original ); |
|
208 el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y; |
|
209 el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x; |
|
210 el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y; |
|
211 el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x; |
|
212 } |
|
213 el.css( el.from ); // set top & left |
|
214 |
|
215 // Animate |
|
216 if ( scale === "content" || scale === "both" ) { // Scale the children |
|
217 |
|
218 // Add margins/font-size |
|
219 vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps); |
|
220 hProps = hProps.concat([ "marginLeft", "marginRight" ]); |
|
221 props2 = props0.concat(vProps).concat(hProps); |
|
222 |
|
223 el.find( "*[width]" ).each( function(){ |
|
224 var child = $( this ), |
|
225 c_original = { |
|
226 height: child.height(), |
|
227 width: child.width(), |
|
228 outerHeight: child.outerHeight(), |
|
229 outerWidth: child.outerWidth() |
|
230 }; |
|
231 if (restore) { |
|
232 $.effects.save(child, props2); |
|
233 } |
|
234 |
|
235 child.from = { |
|
236 height: c_original.height * factor.from.y, |
|
237 width: c_original.width * factor.from.x, |
|
238 outerHeight: c_original.outerHeight * factor.from.y, |
|
239 outerWidth: c_original.outerWidth * factor.from.x |
|
240 }; |
|
241 child.to = { |
|
242 height: c_original.height * factor.to.y, |
|
243 width: c_original.width * factor.to.x, |
|
244 outerHeight: c_original.height * factor.to.y, |
|
245 outerWidth: c_original.width * factor.to.x |
|
246 }; |
|
247 |
|
248 // Vertical props scaling |
|
249 if ( factor.from.y !== factor.to.y ) { |
|
250 child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from ); |
|
251 child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to ); |
|
252 } |
|
253 |
|
254 // Horizontal props scaling |
|
255 if ( factor.from.x !== factor.to.x ) { |
|
256 child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from ); |
|
257 child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to ); |
|
258 } |
|
259 |
|
260 // Animate children |
|
261 child.css( child.from ); |
|
262 child.animate( child.to, o.duration, o.easing, function() { |
|
263 |
|
264 // Restore children |
|
265 if ( restore ) { |
|
266 $.effects.restore( child, props2 ); |
|
267 } |
|
268 }); |
|
269 }); |
|
270 } |
|
271 |
|
272 // Animate |
|
273 el.animate( el.to, { |
|
274 queue: false, |
|
275 duration: o.duration, |
|
276 easing: o.easing, |
|
277 complete: function() { |
|
278 if ( el.to.opacity === 0 ) { |
|
279 el.css( "opacity", el.from.opacity ); |
|
280 } |
|
281 if( mode === "hide" ) { |
|
282 el.hide(); |
|
283 } |
|
284 $.effects.restore( el, props ); |
|
285 if ( !restore ) { |
|
286 |
|
287 // we need to calculate our new positioning based on the scaling |
|
288 if ( position === "static" ) { |
|
289 el.css({ |
|
290 position: "relative", |
|
291 top: el.to.top, |
|
292 left: el.to.left |
|
293 }); |
|
294 } else { |
|
295 $.each([ "top", "left" ], function( idx, pos ) { |
|
296 el.css( pos, function( _, str ) { |
|
297 var val = parseInt( str, 10 ), |
|
298 toRef = idx ? el.to.left : el.to.top; |
|
299 |
|
300 // if original was "auto", recalculate the new value from wrapper |
|
301 if ( str === "auto" ) { |
|
302 return toRef + "px"; |
|
303 } |
|
304 |
|
305 return val + toRef + "px"; |
|
306 }); |
|
307 }); |
|
308 } |
|
309 } |
|
310 |
|
311 $.effects.removeWrapper( el ); |
|
312 done(); |
|
313 } |
|
314 }); |
|
315 |
|
316 }; |
|
317 |
|
318 })(jQuery); |
|