Permalink
Browse files

* Can handle more transforms with CSS Transform (no IE yet)

* getTransform returns the actual value now (needs a better RegEx though)
  • Loading branch information...
1 parent 2c94306 commit 406b0f9e7043fcfa1643a0adf648e76a2a1a9ecd @arian committed Sep 12, 2010
Showing with 49 additions and 16 deletions.
  1. +11 −4 README.md
  2. +1 −1 Source/Element.Style.Transform.Filter.js
  3. +37 −10 Source/Element.Style.Transform.js
  4. +0 −1 Specs/Tests/index.html
View
@@ -47,12 +47,12 @@ Get the value of a transform.
- The value which is set by the setTransform method, a default value from `Element.Transform.defaults` or `null`
-Function Element.Transforms.defineTransform
+Function Element.Transform.defineTransform
-------------------------------------------
Define a custom function for special transforms
- Element.Transforms.defineTransform(property, fn);
+ Element.Transform.defineTransform(property, fn);
### Arguments
@@ -63,13 +63,13 @@ Define a custom function for special transforms
fn (value)
-Function Element.Transforms.defineFilter
+Function Element.Transform.defineFilter
----------------------------------------
Define a custom function for IE filter transforms. Because it is only possible to mimic CSS3 Transforms in IE, there
should be a custom function that mimics the transform behaviour in IE.
- Element.Transforms.defineFilter(property, fn);
+ Element.Transform.defineFilter(property, fn);
### Arguments
@@ -92,7 +92,14 @@ Fx
Since setStyle and getStyle methods are supported, it is possible to use Fx.Tween and Fx.Morph with transforms.
+### Examples
+
new Fx.Tween('element').start('transform-rotate', 20, 40); // rotates the element from 20 to 40 degrees
+ new Fx.Morph('rotate').start({
+ 'transform-rotate': [0, 80],
+ 'transform-scale': [1, 2]
+ });
+
@@ -8,7 +8,7 @@ provides: Element.Style.Transform.Filter
*/
-Element.Transforms.defineFilters({
+Element.Transform.defineFilters({
rotate: function(value){
value = parseFloat(value) % 90;
@@ -31,7 +31,7 @@ if (!transformProperty && testElement.style.filter != null) transformProperty =
var transforms = {},
filterTransforms = {};
-var defines = Element.Transforms = {
+var defines = Element.Transform = {
// define custom transforms
defineTransform: function(name, fn){
if (Type.isFunction(fn)) transforms[name] = fn;
@@ -65,11 +65,24 @@ var parseFilter = function(properties){
return styles.join(' ');
};
+var parseStyle = function(){
+ var properties = this.retrieve(transformStoreKey, {});
+ if (transformProperty != msFilter){
+ var text = this.style[transformProperty];
+ text.split(')').each(function(part){ // nice regex for matching "rotate(40deg) translate(200px)" 40deg and 200px would be cool
+ if (!part) return;
+ var parts = part.split('(');
+ properties[parts[0].trim()] = parts[1];
+ });
+ }
+ return properties;
+};
+
// Implement the element methods
var elementMethods = {
setTransform: function(property, value){
- var properties = this.retrieve(transformStoreKey, {});
+ var properties = parseStyle.call(this);
properties[property] = value;
this.style[transformProperty] = (transformProperty == msFilter) ? parseFilter.call(this, properties) : parseTransforms.call(this, properties);
@@ -78,8 +91,8 @@ var elementMethods = {
},
getTransform: function(property){
- var properties = this.retrieve(transformStoreKey, {});
- return properties[transformProperty] || Element.Transforms.defaults[property];
+ var properties = parseStyle.call(this);
+ return properties[property] || Element.Transform.defaults[property];
}
};
@@ -91,15 +104,29 @@ Element.implement(Object.append(elementMethods, {
// Implement special transform handling
-Element.Transforms.defineTransforms({
- rotate: function(value){
- return 'rotate(' + parseFloat(value) + 'deg)';
- }
+
+var parseUnit = function(property, defaultUnit){
+ return function(value){
+ if (parseFloat(value) == value) value += defaultUnit;
+ return property + '(' + value + ')';
+ };
+};
+
+Element.Transform.defineTransforms({
+ rotate: parseUnit('rotate', 'deg'),
+ skew: parseUnit('skew', 'deg'),
+ skewX: parseUnit('skewX', 'deg'),
+ skewY: parseUnit('skewY', 'deg'),
+ translate: parseUnit('translate', 'px'),
+ translateX: parseUnit('translateX', 'px'),
+ translateY: parseUnit('translateY', 'px')
});
-Element.Transforms.defaults = {
+Element.Transform.defaults = {
rotate: 0,
- scale: 1
+ skew: 0, skewX: 0, skewY: 0,
+ scale: 1, scaleX: 1, scaleY: 1,
+ translate: 0, translateX: 0, translateY: 0
};
View
@@ -26,7 +26,6 @@
<script src="../../../mootools-core/Source/Fx/Fx.Transitions.js"></script>
<script src="../../Source/Element.Style.Transform.js"></script>
<script src="../../Source/Element.Style.Transform.Filter.js"></script>
-<script src="../../Source/Fx.Transform.js"></script>
<style>

0 comments on commit 406b0f9

Please sign in to comment.