source: trunk/themes/default/js/ui/jquery.ui.effect-scale.js @ 20824

Last change on this file since 20824 was 20824, checked in by rvelices, 11 years ago

upgraded jquery ui from 1.9.0 to 1.10.1

File size: 8.1 KB
Line 
1/*!
2 * jQuery UI Effects Scale 1.10.1
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);
Note: See TracBrowser for help on using the repository browser.