Permalink
Browse files

* Add set/getStyle overwrites, so we can use Fx.Tween and Fx.Morph

* Remove Fx.Transform
* Remove Closure arguments since they were not used enough
  • Loading branch information...
arian committed Sep 12, 2010
1 parent 680e60c commit 2c94306d178658540859aaf273f9c0edb22e6118
Showing with 41 additions and 45 deletions.
  1. +2 −0 .gitignore
  2. +17 −0 README.md
  3. +22 −7 Source/Element.Style.Transform.js
  4. +0 −37 Source/Fx.Transform.js
  5. 0 Specs/Tests/.tmp_index.html.24854~
  6. +0 −1 package.yml
View
@@ -0,0 +1,2 @@
+mootools-more.js
+*.tmp*
View
@@ -1,6 +1,8 @@
Element.Style.Transform
=======================
+**STATE: very alpha, API is likely to change and is not well tested yet.**
+
Brings a simple cross browser API for CSS3 transforms. It will use the CSS transform property if it exists, or the MS filter property.
Usage
@@ -79,3 +81,18 @@ should be a custom function that mimics the transform behaviour in IE.
fn (value)
+
+Element methods: setStyle and getStyle
+--------------------------------------
+
+It is possible to use setStyle and getStyle as well if you prepend `transform-` to the property, e.g. `transform-scale`.
+
+Fx
+--
+
+Since setStyle and getStyle methods are supported, it is possible to use Fx.Tween and Fx.Morph with transforms.
+
+ new Fx.Tween('element').start('transform-rotate', 20, 40); // rotates the element from 20 to 40 degrees
+
+
+
@@ -7,9 +7,9 @@ provides: Element.Style.Transform
...
*/
-(function(global, doc, undef){
+(function(){
-var testElement = doc.createElement('div'),
+var testElement = document.createElement('div'),
transformProperty = null,
msFilter = 'filter',
transformStoreKey = 'Element.Styles.Transforms:properties';
@@ -19,12 +19,12 @@ var testElement = doc.createElement('div'),
var properties = ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'];
for (var i = 0, l = properties.length; i < l; i++){
- if (testElement.style[properties[i]] !== undef) transformProperty = properties[i];
+ if (testElement.style[properties[i]] != null) transformProperty = properties[i];
}
// test for IE filter
-if (!transformProperty && testElement.style.filter !== undef) transformProperty = msFilter;
+if (!transformProperty && testElement.style.filter != null) transformProperty = msFilter;
// Define custom functions for special properties or MS Filters
@@ -60,7 +60,7 @@ var parseTransforms = function(properties){
var parseFilter = function(properties){
var styles = [];
for (var name in properties){
- if (name in filter_transforms) styles.push(filter_transforms[name].call(this, properties[name]));
+ if (name in filterTransforms) styles.push(filterTransforms[name].call(this, properties[name]));
}
return styles.join(' ');
};
@@ -100,6 +100,21 @@ Element.Transforms.defineTransforms({
Element.Transforms.defaults = {
rotate: 0,
scale: 1
-}
+};
+
+
+// Overwrite setStyle/getStyle for Fx.Tween and Fx.Morph
+var setStyle = Element.prototype.setStyle;
+Element.prototype.setStyle = function(property, value){
+ if (property.substr(0, 10) == 'transform-') return this.setTransform(property.substr(10), value);
+ return setStyle.call(this, property, value);
+};
+
+var getStyle = Element.prototype.getStyle;
+Element.prototype.getStyle = function(property){
+ if (property.substr(0, 10) == 'transform-') return this.getTransform(property.substr(10));
+ return getStyle.call(this, property);
+};
+
-})(this, document);
+})();
View
@@ -1,37 +0,0 @@
-/*
----
-name: Fx.Transform
-description: Tween CSS Transforms
-requires: [Core/Fx.Tween, Element.Style.Transform, Element.Style.Transform.Filter]
-provides: Fx.Transform
-...
-*/
-
-
-Fx.Transform = new Class({
-
- Extends: Fx.Tween,
-
- prepare: function(element, property, values){
- values = Array.from(values);
- if (values[1] == null){
- values[1] = values[0];
- values[0] = element.getTransform(property);
- }
- values = values.map(this.parse);
- return {from: values[0], to: values[1]};
- },
-
- compute: function(from, to, delta){
- return (to - from) * delta + from;
- },
-
- parse: function(value){
- return parseFloat(value);
- },
-
- render: function(element, property, value){
- element.setTransform(property, value);
- }
-
-});
No changes.
View
@@ -11,4 +11,3 @@ authors: "[Arian Stolwijk](http://www.aryweb.nl)"
sources:
- "Source/Element.Style.Transform.js"
- "Source/Element.Style.Transform.Filter.js"
- - "Source/Fx.Transform.js"

0 comments on commit 2c94306

Please sign in to comment.