effects.*: Style Guidance

1 files changed, 179 insertions, 109 deletions

diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js
index fa8087fe3..ec707c2b5 100644
--- a/ui/jquery.effects.scale.js
+++ b/ui/jquery.effects.scale.js
@@ -12,13 +12,17 @@
  */
 (function( $, undefined ) {
 
-$.effects.puff = function(o) {
-	return this.queue(function() {
-		var elem = $(this),
-			mode = $.effects.setMode(elem, o.mode || 'hide'),
-			percent = parseInt(o.percent, 10) || 150,
+$.effects.puff = function( o ) {
+	console.log(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() };
+			original = { 
+				height: elem.height(), 
+				width: elem.width() 
+			};
 
 		$.extend(o, {
 			effect: 'scale',
@@ -32,147 +36,213 @@ $.effects.puff = function(o) {
 					width: original.width * factor
 				}
 		});
-console.log(o);debugger;
-		elem.effect(o);
-		elem.dequeue();
+
+		elem.effect( o ).dequeue();
 	});
 };
 
-$.effects.scale = function(o) {
+$.effects.scale = function( o ) {
 
-	return this.queue(function() {
+	return this.queue( function() {
 
 		// Create element
-		var el = $(this);
-
-		// Set options
-		var options = $.extend(true, {}, o);
-		var mode = $.effects.setMode(el, o.mode || 'effect'); // Set Mode
-		var percent = parseInt(o.percent,10) || (parseInt(o.percent,10) == 0 ? 0 : (mode == 'hide' ? 0 : 100)); // Set default scaling percent
-		var direction = o.direction || 'both'; // Set default axis
-		var origin = o.origin; // The origin of the scaling
-		if (mode != 'effect') { // Set default origin and restore for show/hide
+		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()
+			},
+			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";
+
+		// Set default origin and restore for show/hide
+		if ( mode != 'effect' ) { 
 			options.origin = origin || ['middle','center'];
 			options.restore = true;
 		}
-		var original = {height: el.height(), width: el.width()}; // Save original
-		el.from = o.from || (mode == 'show' ? {height: 0, width: 0} : original); // Default from state
 
-		// Adjust
-		var factor = { // Set scaling factor
-			y: direction != 'horizontal' ? (percent / 100) : 1,
-			x: direction != 'vertical' ? (percent / 100) : 1
-		};
-		el.to = {height: original.height * factor.y, width: original.width * factor.x}; // Set to state
+		options.from = o.from || ( mode == 'show' ? { height: 0, width: 0 } : original ); 
+		options.to = {
+			height: original.height * factor.y, 
+			width: original.width * factor.x
+		}; 
 
-		if (o.fade) { // Fade option to support puff
-			if (mode == 'show') {el.from.opacity = 0; el.to.opacity = 1;};
-			if (mode == 'hide') {el.from.opacity = 1; el.to.opacity = 0;};
+		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;
+			}
 		};
 
-		// Animation
-		options.from = el.from; options.to = el.to; options.mode = mode;
-		
-		options.effect = "size";
-
 		// Animate
-		el.effect(options);
-		el.dequeue();
+		el.effect(options).dequeue();
 	});
 
 };
 
-$.effects.size = function(o) {
-
-	return this.queue(function() {
+$.effects.size = function( o ) {
 
+	return this.queue( function() {
 		// Create element
-		var el = $(this), props = ['position','top','bottom','left','right','width','height','overflow','opacity'];
-		var props1 = ['position','top','bottom','left','right','overflow','opacity']; // Always restore
-		var props2 = ['width','height','overflow']; // Copy for children
-		var cProps = ['fontSize'];
-		var vProps = ['borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom'];
-		var hProps = ['borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight'];
-
-		// Set options
-		var mode = $.effects.setMode(el, o.mode || 'effect'); // Set Mode
-		var restore = o.restore || false; // Default restore
-		var scale = o.scale || 'both'; // Default scale mode
-		var origin = o.origin; // The origin of the sizing
-		var original = {height: el.height(), width: el.width()}; // Save original
-		el.from = o.from || original; // Default from state
-		el.to = o.to || original; // Default to state
+		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 || false,
+			scale = o.scale || 'both',
+			origin = o.origin,
+			original = {
+				height: el.height(), 
+				width: el.width()
+			},
+			baseline, factor;
+
+		el.from = o.from || original;
+		el.to = o.to || original;
+
 		// Adjust
 		if (origin) { // Calculate baseline shifts
-			var baseline = $.effects.getBaseline(origin, original);
-			el.from.top = (original.height - el.from.height) * baseline.y;
-			el.from.left = (original.width - el.from.width) * baseline.x;
-			el.to.top = (original.height - el.to.height) * baseline.y;
-			el.to.left = (original.width - el.to.width) * baseline.x;
-		};
-		var factor = { // Set scaling 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}
+			baseline = $.effects.getBaseline( origin, original );
+			el.from.top = ( original.height - el.from.height ) * baseline.y;
+			el.from.left = ( original.width - el.from.width ) * baseline.x;
+			el.to.top = ( original.height - el.to.height ) * baseline.y;
+			el.to.left = ( original.width - el.to.width ) * baseline.x;
+		}
+
+		// 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
+			}
 		};
-		if (scale == 'box' || scale == 'both') { // Scale the css box
-			if (factor.from.y != factor.to.y) { // Vertical props scaling
-				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 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 );
 			};
-			if (factor.from.x != factor.to.x) { // Horizontal props scaling
-				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);
+
+			// 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 );
 			};
 		};
-		if (scale == 'content' || scale == 'both') { // Scale the content
-			if (factor.from.y != factor.to.y) { // Vertical props scaling
-				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(); // Save & Show
-		$.effects.createWrapper(el); // Create Wrapper
-		el.css('overflow','hidden').css(el.from); // Shift
+		
+		$.effects.save( el, restore ? props : props1 ); 
+		el.show(); 
+		$.effects.createWrapper( el );
+		el.css( 'overflow', 'hidden' ).css( el.from ); 
 
 		// Animate
-		if (scale == 'content' || scale == 'both') { // Scale the children
-			vProps = vProps.concat(['marginTop','marginBottom']).concat(cProps); // Add margins/font-size
-			hProps = hProps.concat(['marginLeft','marginRight']); // Add margins
-			props2 = props.concat(vProps).concat(hProps); // Concat
-			el.find("*[width]").each(function(){
-				var child = $(this);
+		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);
-				var c_original = {height: child.height(), width: child.width()}; // Save original
-				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};
-				if (factor.from.y != factor.to.y) { // Vertical props scaling
-					child.from = $.effects.setTransition(child, vProps, factor.from.y, child.from);
-					child.to = $.effects.setTransition(child, vProps, factor.to.y, child.to);
+				
+				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
 				};
-				if (factor.from.x != factor.to.x) { // Horizontal props scaling
-					child.from = $.effects.setTransition(child, hProps, factor.from.x, child.from);
-					child.to = $.effects.setTransition(child, hProps, factor.to.x, 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 );
 				};
-				child.css(child.from); // Shift children
-				child.animate(child.to, o.duration, o.easing, function(){
-					if (restore) $.effects.restore(child, props2); // Restore children
-				}); // Animate children
+
+				// Animate children
+				child.css( child.from );
+				child.animate( child.to, o.duration, o.easing, function() {
+
+					// 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);
+		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 ); 
+				$.effects.removeWrapper( el ); 
+				$.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback
+				el.dequeue();
 			}
-			if(mode == 'hide') el.hide(); // Hide
-			$.effects.restore(el, restore ? props : props1); $.effects.removeWrapper(el); // Restore
-			if(o.complete) o.complete.apply(this, arguments); // Callback
-			el.dequeue();
-		}});
+		});
 
 	});