Effects.*: Updating Effect Method API to avoid duplicating the queue call - Fixes #7318 - Add the queue functions to $.fn.effect()

1 files changed, 227 insertions, 220 deletions

diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js
index e00d82497..614943cfb 100644
--- a/ui/jquery.effects.scale.js
+++ b/ui/jquery.effects.scale.js
@@ -12,249 +12,255 @@
  */
 (function( $, undefined ) {
 
-$.effects.effect.puff = function( o ) {
-	return this.queue( function() {
-		var elem = $( this ),
-			mode = $.effects.setMode( elem, o.mode || 'hide' ),
-			percent = parseInt( o.percent, 10 ) || 150,
-			factor = percent / 100,
-			original = { 
-				height: elem.height(), 
-				width: elem.width() 
-			};
-
-		$.extend(o, {
-			effect: 'scale',
-			queue: false,
-			fade: true,
-			mode: mode,
-			percent: mode == 'hide' ? percent : 100,
-			from: mode == 'hide'
-				? original
-				: {
-					height: original.height * factor,
-					width: original.width * factor
-				}
-		});
-
-		elem.effect( o );
-	});
-};
-
-$.effects.effect.scale = function( o ) {
-
-	return this[ o.queue === false ? "each" : "queue" ]( function() {
-
-		// Create element
-		var el = $( this ),
-			options = $.extend( true, {}, o ),
-			mode = $.effects.setMode( el, o.mode || 'effect' ),
-			percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == 'hide' ? 0 : 100 ) ),
-			direction = o.direction || 'both',
-			origin = o.origin,
-			original = { 
-				height: el.height(), 
-				width: el.width(),
-				outerHeight: el.outerHeight(),
-				outerWidth: el.outerWidth()
-			},
-			factor = {
-				y: direction != 'horizontal' ? (percent / 100) : 1,
-				x: direction != 'vertical' ? (percent / 100) : 1
-			}; 
-
-		// We are going to pass this effect to the size effect:
-		options.effect = "size";
-		options.queue = false;
-
-		// Set default origin and restore for show/hide
-		if ( mode != 'effect' ) { 
-			options.origin = origin || ['middle','center'];
-			options.restore = true;
+function compFunction( el, complete, next ) {
+	return function() {
+		if ( $.isFunction( complete ) ) {
+			complete.apply( el );
 		}
+		next();
+	};
+};
 
-		options.from = o.from || ( mode == 'show' ? { height: 0, width: 0 } : original ); 
-		options.to = {
-			height: original.height * factor.y, 
-			width: original.width * factor.x,
-			outerHeight: original.outerHeight * factor.y, 
-			outerWidth: original.outerWidth * factor.x
-		}; 
-
-		if ( options.fade ) { // Fade option to support puff
-			if ( mode == 'show' ) {
-				options.from.opacity = 0; 
-				options.to.opacity = 1;
-			}
-			if ( mode == 'hide' ) {
-				options.from.opacity = 1; 
-				options.to.opacity = 0;
-			}
+$.effects.effect.puff = function( o, next ) {
+	var elem = $( this ),
+		mode = $.effects.setMode( elem, o.mode || "hide" ),
+		percent = parseInt( o.percent, 10 ) || 150,
+		factor = percent / 100,
+		original = { 
+			height: elem.height(), 
+			width: elem.width() 
 		};
 
-		// Animate
-		el.effect(options);
+	$.extend( o, {
+		effect: "scale",
+		queue: false,
+		fade: true,
+		mode: mode,
+		complete: compFunction( this, o.complete, next ),
+		percent: mode == "hide" ? percent : 100,
+		from: mode == "hide"
+			? original
+			: {
+				height: original.height * factor,
+				width: original.width * factor
+			}
 	});
 
+	elem.effect( o );
 };
 
-$.effects.effect.size = function( o ) {
-
-	return this[ o.queue === false ? "each" : "queue" ]( function() {
-		// Create element
-		var el = $( this ), 
-			props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],
-
-			// Always restore
-			props1 = [ 'position', 'top', 'bottom', 'left', 'right', 'overflow', 'opacity' ],
-
-			// Copy for children
-			props2 = [ 'width', 'height', 'overflow' ],
-			cProps = [ 'fontSize' ],
-			vProps = [ 'borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom' ],
-			hProps = [ 'borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight' ],
-
-			// Set options
-			mode = $.effects.setMode( el, o.mode || 'effect' ),
-			restore = o.restore || mode !== "effect",
-			scale = o.scale || 'both',
-			origin = o.origin || [ "middle", "center" ],
-			original, baseline, factor,
-			position = el.css( "position" ),
-			originalVerticalPositioning = el.css( "bottom" ) !== "auto" ? "bottom" : "top";
-			originalHorizontalPositioning = el.css( "right" ) !== "auto" ? "right" : "left";
-
-		if ( mode === "show" ) {
-			el.show();
-		}
-		original = {
+$.effects.effect.scale = function( o, next ) {
+
+	// Create element
+	var el = $( this ),
+		options = $.extend( true, {}, o ),
+		mode = $.effects.setMode( el, o.mode || "effect" ),
+		percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == "hide" ? 0 : 100 ) ),
+		direction = o.direction || "both",
+		origin = o.origin,
+		original = { 
 			height: el.height(), 
 			width: el.width(),
 			outerHeight: el.outerHeight(),
 			outerWidth: el.outerWidth()
-		};
+		},
+		factor = {
+			y: direction != "horizontal" ? (percent / 100) : 1,
+			x: direction != "vertical" ? (percent / 100) : 1
+		}; 
 
-		el.from = o.from || original;
-		el.to = o.to || original;
+	// We are going to pass this effect to the size effect:
+	options.effect = "size";
+	options.queue = false;
+	options.complete = compFunction( this, options.complete, next );
+
+	// Set default origin and restore for show/hide
+	if ( mode != "effect" ) { 
+		options.origin = origin || ["middle","center"];
+		options.restore = true;
+	}
+
+	options.from = o.from || ( mode == "show" ? { height: 0, width: 0 } : original ); 
+	options.to = {
+		height: original.height * factor.y, 
+		width: original.width * factor.x,
+		outerHeight: original.outerHeight * factor.y, 
+		outerWidth: original.outerWidth * factor.x
+	}; 
+
+	if ( options.fade ) { // Fade option to support puff
+		if ( mode == "show" ) {
+			options.from.opacity = 0; 
+			options.to.opacity = 1;
+		}
+		if ( mode == "hide" ) {
+			options.from.opacity = 1; 
+			options.to.opacity = 0;
+		}
+	};
 
-		// Set scaling factor
-		factor = {
-			from: {
-				y: el.from.height / original.height, 
-				x: el.from.width / original.width
-			},
-			to: {
-				y: el.to.height / original.height, 
-				x: el.to.width / original.width
-			}
-		};
+	// Animate
+	el.effect( options );
 
-		// Scale the css box
-		if ( scale == 'box' || scale == 'both' ) {
+};
 
-			// Vertical props scaling
-			if ( factor.from.y !== factor.to.y ) { 
-				props = props.concat( vProps );
-				el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from );
-				el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to );
-			};
+$.effects.effect.size = function( o, next ) {
+
+	// Create element
+	var el = $( this ), 
+		props = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ],
+
+		// Always restore
+		props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ],
+
+		// Copy for children
+		props2 = [ "width", "height", "overflow" ],
+		cProps = [ "fontSize" ],
+		vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
+		hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],
+
+		// Set options
+		mode = $.effects.setMode( el, o.mode || "effect" ),
+		restore = o.restore || mode !== "effect",
+		scale = o.scale || "both",
+		origin = o.origin || [ "middle", "center" ],
+		original, baseline, factor,
+		position = el.css( "position" ),
+		originalVerticalPositioning = el.css( "bottom" ) !== "auto" ? "bottom" : "top";
+		originalHorizontalPositioning = el.css( "right" ) !== "auto" ? "right" : "left";
+
+	if ( mode === "show" ) {
+		el.show();
+	}
+	original = {
+		height: el.height(), 
+		width: el.width(),
+		outerHeight: el.outerHeight(),
+		outerWidth: el.outerWidth()
+	};
+
+	el.from = o.from || original;
+	el.to = o.to || original;
+
+	// Set scaling factor
+	factor = {
+		from: {
+			y: el.from.height / original.height, 
+			x: el.from.width / original.width
+		},
+		to: {
+			y: el.to.height / original.height, 
+			x: el.to.width / original.width
+		}
+	};
 
-			// Horizontal props scaling
-			if ( factor.from.x !== factor.to.x ) { 
-				props = props.concat( hProps );
-				el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from );
-				el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to );
-			};
+	// Scale the css box
+	if ( scale == "box" || scale == "both" ) {
+
+		// Vertical props scaling
+		if ( factor.from.y !== factor.to.y ) { 
+			props = props.concat( vProps );
+			el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from );
+			el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to );
 		};
 
-		// Scale the content
-		if ( scale == 'content' || scale == 'both' ) { 
+		// Horizontal props scaling
+		if ( factor.from.x !== factor.to.x ) { 
+			props = props.concat( hProps );
+			el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from );
+			el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to );
+		};
+	};
 
-			// Vertical props scaling
-			if ( factor.from.y !== factor.to.y ) { 
-				props = props.concat( cProps );
-				el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
-				el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
-			};
+	// Scale the content
+	if ( scale == "content" || scale == "both" ) { 
+
+		// Vertical props scaling
+		if ( factor.from.y !== factor.to.y ) { 
+			props = props.concat( cProps );
+			el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
+			el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
 		};
-		
-		$.effects.save( el, restore ? props : props1 ); 
-		el.show(); 
-		$.effects.createWrapper( el );
-		el.css( 'overflow', 'hidden' ).css( el.from ); 
-
-		// Adjust
-		if (origin) { // Calculate baseline shifts
-			baseline = $.effects.getBaseline( origin, original );
-			el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y;
-			el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x;
-			el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y;
-			el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x;
-		}
-		el.css( el.from ); // set top & left
-
-		// Animate
-		if ( scale == 'content' || scale == 'both' ) { // Scale the children
-
-			// Add margins/font-size
-			vProps = vProps.concat([ 'marginTop', 'marginBottom' ]).concat(cProps);
-			hProps = hProps.concat([ 'marginLeft', 'marginRight' ]);
-			props2 = props.concat(vProps).concat(hProps);
-
-			el.find( "*[width]" ).each( function(){
-				var child = $( this ),
-					c_original = { 
-						height: child.height(), 
-						width: child.width()
-					};
-				if (restore) $.effects.save(child, props2);
-				
-				child.from = {
-					height: c_original.height * factor.from.y, 
-					width: c_original.width * factor.from.x
-				};
-				child.to = {
-					height: c_original.height * factor.to.y, 
-					width: c_original.width * factor.to.x
+	};
+	
+	$.effects.save( el, restore ? props : props1 ); 
+	el.show(); 
+	$.effects.createWrapper( el );
+	el.css( "overflow", "hidden" ).css( el.from ); 
+
+	// Adjust
+	if (origin) { // Calculate baseline shifts
+		baseline = $.effects.getBaseline( origin, original );
+		el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y;
+		el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x;
+		el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y;
+		el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x;
+	}
+	el.css( el.from ); // set top & left
+
+	// Animate
+	if ( scale == "content" || scale == "both" ) { // Scale the children
+
+		// Add margins/font-size
+		vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps);
+		hProps = hProps.concat([ "marginLeft", "marginRight" ]);
+		props2 = props.concat(vProps).concat(hProps);
+
+		el.find( "*[width]" ).each( function(){
+			var child = $( this ),
+				c_original = { 
+					height: child.height(), 
+					width: child.width()
 				};
+			if (restore) $.effects.save(child, props2);
+			
+			child.from = {
+				height: c_original.height * factor.from.y, 
+				width: c_original.width * factor.from.x
+			};
+			child.to = {
+				height: c_original.height * factor.to.y, 
+				width: c_original.width * factor.to.x
+			};
 
-				// Vertical props scaling
-				if ( factor.from.y != factor.to.y ) { 
-					child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from );
-					child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to );
-				};
+			// Vertical props scaling
+			if ( factor.from.y != factor.to.y ) { 
+				child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from );
+				child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to );
+			};
 
-				// Horizontal props scaling
-				if ( factor.from.x != factor.to.x ) {
-					child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from );
-					child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to );
-				};
+			// Horizontal props scaling
+			if ( factor.from.x != factor.to.x ) {
+				child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from );
+				child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to );
+			};
 
-				// Animate children
-				child.css( child.from );
-				child.animate( child.to, o.duration, o.easing, function() {
+			// Animate children
+			child.css( child.from );
+			child.animate( child.to, o.duration, o.easing, function() {
 
-					// Restore children
-					if (restore) $.effects.restore( child, props2 ); 
-				});
+				// Restore children
+				if (restore) $.effects.restore( child, props2 ); 
 			});
-		};
-
-		// Animate
-		el.animate( el.to, { 
-			queue: false, 
-			duration: o.duration, 
-			easing: o.easing, 
-			complete: function() {
-				if ( el.to.opacity === 0 ) {
-					el.css( 'opacity', el.from.opacity );
-				}
-				if( mode == 'hide' ) {
-					el.hide();
-				}
-				$.effects.restore( el, restore ? props : props1 );
+		});
+	};
+
+	// Animate
+	el.animate( el.to, { 
+		queue: false, 
+		duration: o.duration, 
+		easing: o.easing, 
+		complete: function() {
+			if ( el.to.opacity === 0 ) {
+				el.css( "opacity", el.from.opacity );
+			}
+			if( mode == "hide" ) {
+				el.hide();
+			}
+			$.effects.restore( el, restore ? props : props1 );
+			if ( !restore ) {
 
-				// we need to recalculate our positioning based on the new scaling
+				// we need to calculate our new positioning based on the scaling
 				if ( position === "static" ) {
 					el.css({
 						position: "relative",
@@ -292,13 +298,14 @@ $.effects.effect.size = function( o ) {
 						});
 					});
 				}
-
-				$.effects.removeWrapper( el ); 
-				$.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback
-				el.dequeue();
 			}
-		});
 
+			$.effects.removeWrapper( el );
+			if ( $.isFunction( o.complete ) ) {
+				o.complete.apply( this, arguments );
+			}
+			next();
+		}
 	});
 
 };