Ticket #7105: Improving internal effects api

ui/jquery.effects.blind.js

@@ -17,30 +17,26 @@ $.effects.effect.blind = function( o ) {
 	return this.queue( function() {
 
 		// Create element
-		var el = $( this ),
+		var el = $.effects.$( this ),
 			props = [ 'position', 'top', 'bottom', 'left', 'right' ],
 			mode = $.effects.setMode( el, o.mode || 'hide' ),
 			direction = o.direction || 'vertical',
 			ref = ( direction == 'vertical' ) ? 'height' : 'width',
 			animation = {},
-			wrapper, distance;
-
-		$.effects.save( el, props ); 
-		el.show(); 
-		wrapper = $.effects.createWrapper( el ).css({ 
-			overflow: 'hidden'
-		});
+			wrapper = el.save( props ).show().createWrapper({
+				overflow: 'hidden'
+			}),
+			distance;
 
 		animation[ ref ] = ( mode == 'show' ? wrapper[ ref ]() : 0 );
 
-		// start at 0 if we are showing
+		// reset to 0 if we are showing
 		( mode == 'show' && wrapper.css( ref, 0 ) );
 
 		// Animate
 		wrapper.animate( animation, o.duration, o.easing, function() {
-			( mode == 'hide' && el.hide() ); 
-			$.effects.restore( el, props ); 
-			$.effects.removeWrapper( el );
+			( mode == 'hide' && el.hide() );
+			el.restore( props ).removeWrapper();
 			$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
 			el.dequeue();
 		});

ui/jquery.effects.bounce.js

@@ -19,10 +19,10 @@ $.effects.effect.bounce = function(o) {
 	return this.queue(function() {
 
 		// Create element
-		var el = $( this ), 
+		var el = $.effects.$( this ), 
 			props = [ 'position', 'top', 'bottom', 'left', 'right' ],
 			// defaults:
-			mode = $.effects.setMode( el, o.mode || 'effect' ),
+			mode = el.setMode( o.mode || 'effect' ),
 			direction = o.direction || 'up', 
 			distance = o.distance || 20,
 			times = o.times || 5, 
@@ -37,9 +37,7 @@ $.effects.effect.bounce = function(o) {
 			props.push( 'opacity' );
 		} 
 
-		$.effects.save( el, props ); 
-		el.show(); 
-		$.effects.createWrapper( el ); // Create Wrapper
+		el.save( props ).show().createWrapper();
 
 		if ( !distance ) {
 			distance = el[ ref == 'top' ? 'outerHeight' : 'outerWidth' ]({ margin:true }) / 3;
@@ -76,9 +74,9 @@ $.effects.effect.bounce = function(o) {
 			};
 			animation[ ref ] = ( motion ? '-=' : '+=' ) + distance;
 			el.animate( animation, speed / 2, o.easing, function(){
-				el.hide();
-				$.effects.restore( el, props );
-				$.effects.removeWrapper( el );
+				el.hide()
+					.restore( props )
+					.removeWrapper();
 				$.isFunction( o.complete ) && o.complete.apply( this, arguments );
 			});
 		} else {
@@ -89,11 +87,11 @@ $.effects.effect.bounce = function(o) {
 			el
 				.animate( animation1, speed / 2, o.easing )
 				.animate( animation2, speed / 2, o.easing, function() {
-					$.effects.restore( el, props );
-					$.effects.removeWrapper( el );
+					el.restore( props ).removeWrapper();
 					$.isFunction( o.complete ) && o.complete.apply( this, arguments );
 				});
 		}
+
 		el.dequeue();
 	});
 

ui/jquery.effects.clip.js

@@ -17,26 +17,20 @@ $.effects.effect.clip = function( o ) {
 	return this.queue( function() {
 
 		// Create element
-		var el = $( this ), 
+		var el = $.effects.$( this ), 
 			props = ['position','top','bottom','left','right','height','width'], 
-			mode = $.effects.setMode( el, o.mode || 'hide' ),
+			mode = el.setMode( o.mode || 'hide' ),
 			direction = o.direction || 'vertical',
 			ref = {
 				size: (direction == 'vertical') ? 'height' : 'width',
 				position: (direction == 'vertical') ? 'top' : 'left'
 			},
 			animation = {},
-			wrapper, animate, distance;
-
-		// Save & Show
-		$.effects.save( el, props ); el.show(); 
-
-		// Create Wrapper
-		wrapper = $.effects.createWrapper( el ).css({ 
-			overflow: 'hidden' 
-		});
-		animate = ( el[0].tagName == 'IMG' ) ? wrapper : el;
-		distance = animate[ ref.size ]();
+			wrapper = el.save( props ).show().createWrapper({ 
+				overflow: 'hidden' 
+			}),
+			animate = ( el[0].tagName == 'IMG' ) ? wrapper : el,
+			distance = animate[ ref.size ]();
 
 		// Shift
 		if ( mode == 'show' ) {
@@ -55,8 +49,7 @@ $.effects.effect.clip = function( o ) {
 			easing: o.easing, 
 			complete: function() {
 				mode == 'hide' && el.hide(); 
-				$.effects.restore( el, props ); 
-				$.effects.removeWrapper( el ); 
+				el.restore( props ).removeWrapper(); 
 				$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
 				el.dequeue();
 			}

ui/jquery.effects.core.js

@@ -12,9 +12,11 @@
 var backCompat = $.uiBackCompat !== false;
 
 $.effects = {
+	$: $.sub(),
+
+	// contains effects 1.9+ API effect functions
 	effect: {}
 };
-
 /******************************************************************************/
 /****************************** COLOR ANIMATIONS ******************************/
 /******************************************************************************/
@@ -323,34 +325,9 @@ $.fn.extend({
 $.extend( $.effects, {
 	version: "@VERSION",
 
-	// Saves a set of properties in a data storage
-	save: function( element, set ) {
-		for( var i=0; i < set.length; i++ ) {
-			if ( set[ i ] !== null ) {
-				element.data( "ec.storage." + set[ i ], element[ 0 ].style[ set[ i ] ] );
-			}
-		}
-	},
-
-	// Restores a set of previously saved properties from a data storage
-	restore: function( element, set ) {
-		for( var i=0; i < set.length; i++ ) {
-			if ( set[ i ] !== null ) {
-				element.css( set[ i ], element.data( "ec.storage." + set[ i ] ) );
-			}
-		}
-	},
-
-	setMode: function( el, mode ) {
-		if (mode == 'toggle') {
-			mode = el.is( ':hidden' ) ? 'show' : 'hide'; 
-		}
-		return mode;
-	},
-
 	// Translates a [top,left] array into a baseline value
 	// this should be a little more flexible in the future to handle a string & hash
-	getBaseline: function( origin, original ) { 
+	getBaseline: function( origin, original ) {
 		var y, x;
 		switch ( origin[ 0 ] ) {
 			case 'top': y = 0; break;
@@ -368,18 +345,41 @@ $.extend( $.effects, {
 			x: x,
 			y: y
 		};
+	}
+});
+
+// Effects 1.9 Helper jQuery.sub()
+$.effects.$.fn.extend({
+
+	// Saves a set of properties in a data storage
+	save: function( set ) {
+		for( var i=0; i < set.length; i++ ) {
+			if ( set[ i ] !== null ) {
+				this.data( "ec.storage." + set[ i ], this[ 0 ].style[ set[ i ] ] );
+			}
+		}
+		return this;
 	},
 
-	// Wraps the element around a wrapper that copies position properties
-	createWrapper: function( element ) {
+	// Restores a set of previously saved properties from a data storage
+	restore: function( set ) {
+		for( var i=0; i < set.length; i++ ) {
+			if ( set[ i ] !== null ) {
+				this.css( set[ i ], this.data( "ec.storage." + set[ i ] ) );
+			}
+		}
+		return this;
+	},
 
+	createWrapper: function( css ) {
 		// if the element is already wrapped, return it
-		if ( element.parent().is( '.ui-effects-wrapper' )) {
-			return element.parent();
+		if ( this.parent().is( '.ui-effects-wrapper' )) {
+			return this.parent();
 		}
 
 		// wrap the element
-		var props = {
+		var element = this,
+			props = {
 				width: element.outerWidth(true),
 				height: element.outerHeight(true),
 				'float': element.css( 'float' )
@@ -421,25 +421,51 @@ $.extend( $.effects, {
 			});
 		}
 
-		return wrapper.css( props ).show();
+		if ( $.type( css ) == 'object' ) {
+			props = $.extend( props, css );
+		}
+
+		return wrapper.css( props ).show();		
+	},
+	setMode: function( mode ) {
+		if (mode == 'toggle') {
+			mode = this.is( ':hidden' ) ? 'show' : 'hide'; 
+		}
+		return mode;
 	},
 
-	removeWrapper: function( element ) {
-		if ( element.parent().is( '.ui-effects-wrapper' ) )
-			return element.parent().replaceWith( element );
-		return element;
+	removeWrapper: function() {
+		if ( this.parent().is( '.ui-effects-wrapper' ) )
+			return this.parent().replaceWith( this );
+		return this;
 	},
 
-	setTransition: function( element, list, factor, value ) {
+	setTransition: function( list, factor, value ) {
+		var el = this;
 		value = value || {};
 		$.each( list, function(i, x){
-			unit = element.cssUnit( x );
+			unit = el.cssUnit( x );
 			if ( unit[ 0 ] > 0 ) value[ x ] = unit[ 0 ] * factor + unit[ 1 ];
 		});
 		return value;
 	}
+
 });
 
+// Effects 1.8 API -> 1.9
+if ( BC ) {
+
+	$.each( [ "save", "restore", "createWrapper", "setMode", "removeWrapper", "setTransition" ], function( i, fnName ) {
+		$.effects[ fnName ] = function() {
+			var args = [].slice.call( arguments ),
+				el = args.shift();
+
+			return $.effects.$.fn[ fnName ].apply( el, args );
+		};	
+	});
+
+}
+
 // return an effect options object for the given parameters:
 function _normalizeArguments( effect, options, speed, callback ) {
 

ui/jquery.effects.drop.js

@@ -16,9 +16,9 @@ $.effects.effect.drop = function( o ) {
 
 	return this.queue( function() {
 
-		var el = $( this ), 
+		var el = $.effects.$( this ), 
 			props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ],
-			mode = $.effects.setMode( el, o.mode || 'hide' ),
+			mode = el.setMode( o.mode || 'hide' ),
 			direction = o.direction || 'left',
 			ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
 			motion = ( direction == 'up' || direction == 'left' ) ? 'pos' : 'neg',
@@ -28,15 +28,12 @@ $.effects.effect.drop = function( o ) {
 			distance;
 
 		// Adjust
-		$.effects.save( el, props ); 
-		el.show(); 
-		$.effects.createWrapper( el ); 
+		el.save( props ).show().createWrapper(); 
 
 		distance = o.distance || el[ ref == 'top' ? 'outerHeight': 'outerWidth' ]({ margin: true }) / 2;
 
 		if ( mode == 'show' ) {
-			el
-				.css( 'opacity', 0 )
+			el.css( 'opacity', 0 )
 				.css( ref, motion == 'pos' ? -distance : distance );
 		}
 
@@ -50,8 +47,7 @@ $.effects.effect.drop = function( o ) {
 			easing: o.easing, 
 			complete: function() {
 				mode == 'hide' && el.hide();
-				$.effects.restore( el, props ); 
-				$.effects.removeWrapper( el ); 
+				el.restore( props ).removeWrapper(); 
 				$.isFunction( o.complete ) && o.complete.apply(this, arguments);
 				el.dequeue();
 			}

ui/jquery.effects.explode.js

@@ -18,8 +18,8 @@ $.effects.effect.explode = function( o ) {
 
 		var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3,
 			cells = rows,
-			el = $( this ),
-			mode = $.effects.setMode( el, o.mode || 'hide' ),
+			el = $.effects.$( this )
+			mode = el.setMode( o.mode || 'hide' ),
 			show = ( mode == 'show' ),
 
 			// show and then visibility:hidden the element before calculating offset

ui/jquery.effects.fade.js

@@ -14,8 +14,8 @@
 
 $.effects.effect.fade = function( o ) {
 	return this.queue( function() {
-		var el = $( this ),
-			mode = $.effects.setMode( el, o.mode || 'hide' );
+		var el = $.effects.$( this ),
+			mode = el.setMode( o.mode || 'hide' );
 
 		el.animate({ 
 			opacity: mode 

ui/jquery.effects.fold.js

@@ -17,27 +17,21 @@ $.effects.effect.fold = function( o ) {
 	return this.queue( function() {
 
 		// Create element
-		var el = $( this ),
+		var el = $.effects.$( this ),
 			props = ['position','top','bottom','left','right'],
-			mode = $.effects.setMode(el, o.mode || 'hide'),
+			mode = el.setMode( o.mode || 'hide' ),
 			size = o.size || 15,
 			percent = /([0-9]+)%/.exec(size),
 			horizFirst = !!o.horizFirst,
 			widthFirst = ((mode == 'show') != horizFirst),
 			ref = widthFirst ? ['width', 'height'] : ['height', 'width'],
 			duration = o.duration / 2,
-			wrapper, distance;
-
-		$.effects.save( el, props ); 
-		el.show();
-
-		// Create Wrapper
-		wrapper = $.effects.createWrapper( el ).css({ 
-			overflow: 'hidden' 
-		}); 
-		distance = widthFirst ? 
-			[ wrapper.width(), wrapper.height() ] : 
-			[ wrapper.height(), wrapper.width() ];
+			wrapper = el.save( props ).show().createWrapper({ 
+				overflow: 'hidden' 
+			}), 
+			distance = widthFirst ? 
+				[ wrapper.width(), wrapper.height() ] : 
+				[ wrapper.height(), wrapper.width() ];
 
 		if ( percent ) { 
 			size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == 'hide') ? 0 : 1 ];
@@ -60,8 +54,7 @@ $.effects.effect.fold = function( o ) {
 			.animate( animation1, duration, o.easing )
 			.animate( animation2, duration, o.easing, function() {
 				(mode == 'hide') && el.hide();
-				$.effects.restore( el, props ); 
-				$.effects.removeWrapper( el ); 
+				el.restore( props ).removeWrapper(); 
 				jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments ); 
 				el.dequeue();
 			});