Multiple CSS Units in Morph

[zeos90+mootools@…]

When morphing between css classes Fx.Morph seems to ignore the units of the css properties.

[anonymous]

Patch - Works in IE. Doesn't seem to work in Firefox(not sure why)

Example Site
http://www.digitalmoosetracks.com/mootools/CSSUnitsPatch/

---

Index: Source/Fx/Fx.CSS.js
===================================================================
--- Source/Fx/Fx.CSS.js (revision 1317)
+++ Source/Fx/Fx.CSS.js (working copy)
@@ -109,7 +109,53 @@

}

},

+
+ emNumber:{

+ parse: function(value){
+ if (value.contains("em"))
+ {
+ return parseFloat(value);
+ }
+ else
+ {
+ return NaN;
+ }
+ },
+
+ compute: function(from, to, delta){
+ return Fx.compute(from, to, delta);
+ },
+
+ serve: function(value){
+ return value + "em";
+ }
+
+ },
+
+ percentNumber:{
+
+ parse: function(value){
+ if (value.contains("%"))
+ {
+ return parseFloat(value);
+ }
+ else
+ {
+ return NaN;
+ }
+ },
+
+ compute: function(from, to, delta){
+ return Fx.compute(from, to, delta);
+ },
+
+ serve: function(value){
+ return value + "%";
+ }
+
+ },
+

Number: {

parse: function(value){

[mattcoz]

It seems to me that this would be a simpler solution:

Index: /Source/Fx/Fx.CSS.js
===================================================================
--- /Source/Fx/Fx.CSS.js	(revision 1348)
+++ /Source/Fx/Fx.CSS.js	(working copy)
@@ -34,7 +34,11 @@
 			Fx.CSS.Parsers.each(function(parser, key){
 				if (found) return;
 				var parsed = parser.parse(val);
-				if ($chk(parsed)) found = {'value': parsed, 'parser': parser};
+				if ($chk(parsed)) {
+					found = {'value': parsed, 'parser': parser };
+					if (parser === Fx.CSS.Parsers.Number && !this.options.unit)
+						this.options.unit = val.match(/\D+$/);
+				}
 			});
 			found = found || {value: val, parser: Fx.CSS.Parsers.String};
 			return found;

Since it already supports the unit option, might as well use it.

[mattcoz]

Here is a new patch that works with the latest revision:

Index: trunk/Source/Fx/Fx.CSS.js
===================================================================
--- trunk/Source/Fx/Fx.CSS.js	(revision 1394)
+++ trunk/Source/Fx/Fx.CSS.js	(working copy)
@@ -34,7 +34,7 @@
 			Fx.CSS.Parsers.each(function(parser, key){
 				if (found) return;
 				var parsed = parser.parse(val);
-				if ($chk(parsed)) found = {value: parsed, parser: parser};
+				if ($chk(parsed)) found = {value: parsed, parser: parser, unit: (parser === Fx.CSS.Parsers.Number) ? val.match(/\D+$/) : false};
 			});
 			found = found || {value: val, parser: Fx.CSS.Parsers.String};
 			return found;
@@ -46,7 +46,7 @@
 	compute: function(from, to, delta){
 		var computed = [];
 		(Math.min(from.length, to.length)).times(function(i){
-			computed.push({value: from[i].parser.compute(from[i].value, to[i].value, delta), parser: from[i].parser});
+			computed.push({value: from[i].parser.compute(from[i].value, to[i].value, delta), parser: from[i].parser, unit: from[i].unit});
 		});
 		computed.$family = {name: 'fx:css:value'};
 		return computed;
@@ -58,7 +58,7 @@
 		if ($type(value) != 'fx:css:value') value = this.parse(value);
 		var returned = [];
 		value.each(function(bit){
-			returned = returned.concat(bit.parser.serve(bit.value, unit));
+			returned = returned.concat(bit.parser.serve(bit.value, unit || bit.unit));
 		});
 		return returned;
 	},