This project is archived and is in readonly mode.

#31 ✓resolved
Thomas Aylott

Multiple CSS Units in Morph

Reported by Thomas Aylott | May 28th, 2008 @ 10:05 AM | in 2.0 (closed)

Originally posted on Trac by zeos90+mootools@…

Original Trac Ticket

Description

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

Trac Attachments

Trac Comments

Changed 5 months ago by anonymous


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

Example Site 
http://www.digitalmoosetracks.co... 

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){ 

      

Changed 5 months ago by anonymous



                  Changed 5 months ago by anonymous

          type
              changed from enhancement to defect

          type
              changed from enhancement to defect
        
      

Changed 4 months ago by 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. 

      

Changed 3 months ago by 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;
 	},

      

Changed 2 weeks ago by JanK



                  Changed 2 weeks ago by JanK

          type
              changed from defect to enhancement
        
          milestone
              changed from Mootools version 1.2 to Mootools version 1.3

          type
              changed from defect to enhancement
        
          milestone
              changed from Mootools version 1.2 to Mootools version 1.3
        
      

Comments and changes to this ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Pages