add scale toggle and size to functional demos + move origin calculations to size

Author: aaronchi

demos/functional/templates/ui.effects.general.html

@@ -59,7 +59,7 @@
 
 			{
 				title: 'Scale',
-				desc: 'Change the size of an element.',
+				desc: 'Scales and element by a percentage.',
 				html: '<button id="doScale">Scale</button> \n' +
 					'<button onclick="$(\'#scale\').css({width: 144, height: 108});">Reset</button><br/>\n' +
 					'<div style="height: 108px;"><img id="scale" src="templates/images/P1010063.JPG"/></div>',
@@ -75,6 +75,22 @@
 					{	desc: 'Scale from bottom-right',	source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 2000); });' }
 				]
 			},
+			
+			{
+				title: 'Size',
+				desc: 'Change the size of an element.',
+				html: '<button id="doSize">Size</button> \n' +
+					'<button onclick="$(\'#size\').css({width: 144, height: 108});">Reset</button><br/>\n' +
+					'<div style="height: 108px;"><img id="size" src="templates/images/P1010063.JPG"/></div>',
+				destroy: '$("#doSize").unbind();',
+
+				options: [
+					{	desc: 'Size to 75x200',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 2000); });' },
+					{	desc: 'Size to 200x75',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 2000); });' },
+					{	desc: 'Size (125x210) from middle-center',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 2000); });' },
+					{	desc: 'Size (210x125) from bottom-right',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 2000); });' }
+				]
+			},
 
 			{
 				title: 'Shake',

demos/functional/templates/ui.effects.showhide.html

@@ -103,6 +103,21 @@
 					{	desc: 'Puff to 200%',	source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 2000); });' }
 				]
 			},
+			
+			{
+				title: 'Scale',
+				desc: 'Grow/Shrink an element.',
+				html: '<button id="doScale">Toggle</button><br/>\n' +
+					'<ul><li style="float: left; width: 144px; height: 108px;"><img class="scalefx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' +
+					'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="scalefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+					'<div style="clear: both;"></div>',
+				destroy: '$("#doPuff").unbind();',
+
+				options: [
+					{	desc: 'Scale defaults',	source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 2000); });' }
+				]
+			},
+
 
 			{
 				title: 'Slide',

ui/effects.scale.js

@@ -56,7 +56,7 @@ $.effects.scale = function(o) {
 		var direction = o.options.direction || 'both'; // Set default axis
 		var origin = o.options.origin; // The origin of the scaling
 		if (mode != 'effect') { // Set default origin and restore for show/hide
-			origin = origin || ['middle','center'];
+			options.origin = origin || ['middle','center'];
 			options.restore = true;
 		}
 		var original = {height: el.height(), width: el.width()}; // Save original
@@ -68,13 +68,7 @@ $.effects.scale = function(o) {
 			x: direction != 'vertical' ? (percent / 100) : 1
 		};
 		el.to = {height: original.height * factor.y, width: original.width * factor.x}; // Set to state
-		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;
-		};
+		
 		if (o.options.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;};
@@ -106,11 +100,18 @@ $.effects.size = function(o) {
 		var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
 		var restore = o.options.restore || false; // Default restore
 		var scale = o.options.scale || 'both'; // Default scale mode
+		var origin = o.options.origin; // The origin of the sizing
 		var original = {height: el.height(), width: el.width()}; // Save original
 		el.from = o.options.from || original; // Default from state
 		el.to = o.options.to || original; // Default to state
-		
 		// 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}