Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial Commit

  • Loading branch information...
commit b9e1faffc6d4d403fa12d465eda126085f2d6706 0 parents
@arian authored
3  .gitmodules
@@ -0,0 +1,3 @@
+[submodule "Specs/Runner"]
+ path = Specs/Runner
+ url = http://github.com/mootools/mootools-runner.git
81 README.md
@@ -0,0 +1,81 @@
+Element.Style.Transform
+=======================
+
+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
+=====
+
+Each method or function has a plural function that accepts an object with key/value pairs. For example `setTransform` becomse `setTransforms`.
+
+Element method: setTransform
+----------------------------
+
+Transform an element.
+
+ myElement.setTransform(property, value);
+
+### Arguments
+
+1. property - (*string*) Transform Property, e.g. rotate or scale
+2. value - (*mixed*) The value
+
+### Returns
+
+- The Element Instance
+
+### Example
+
+ myElement.setTransform('rotate', 30); // myElement will rotate 30 degrees
+
+
+Element method: getTransform
+----------------------------
+
+Get the value of a transform.
+
+ myElement.getTransform(property)
+
+### Argument
+
+1. property - (*string*) Transform Property, e.g. rotate or scale
+
+### Returns
+
+- The value which is set by the setTransform method, a default value from `Element.Transform.defaults` or `null`
+
+
+Function Element.Transforms.defineTransform
+-------------------------------------------
+
+Define a custom function for special transforms
+
+ Element.Transforms.defineTransform(property, fn);
+
+### Arguments
+
+1. property - (*string*) Transform Property, e.g. rotate or scale
+2. fn - (*function*) A function that returns a string that will be set in the css transform property.
+
+### Signature
+
+ fn (value)
+
+Function Element.Transforms.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);
+
+### Arguments
+
+1. property - (*string*) Transform Property, e.g. rotate or scale
+2. fn - (*function*) A function that returns a string that will be set in the filter property.
+
+### Signature
+
+ fn (value)
+
+
37 Source/Element.Style.Transform.Filter.js
@@ -0,0 +1,37 @@
+/*
+---
+name: Element.Style.Transform.Filter
+description: Mimics CSS3 Transforms in IE
+requires: [Element.Style.Transform]
+provides: Element.Style.Transform.Filter
+...
+*/
+
+
+Element.Transforms.defineFilters({
+
+ rotate: function(value){
+ var rad = value * Math.PI / 180,
+ costheta = Math.cos(rad),
+ sintheta = Math.sin(rad),
+
+ M11 = parseFloat(costheta).toFixed(8),
+ M12 = parseFloat(-sintheta).toFixed(8),
+ M21 = parseFloat(sintheta).toFixed(8),
+ M22 = parseFloat(costheta).toFixed(8);
+
+ return "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + M11 + ', M12=' + M12 + ', M21=' + M21 + ', M22=' + M22 + ')';
+ },
+
+ matrix: function(value){
+ var l = 4;
+ while (l--) (value[l] == null) ? value[l] = 0 : value[l];
+ return "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + value[0] + ', M12=' + value[1] + ', M21=' + value[2] + ', M22=' + value[3] + ')';
+ }
+ /* @todo,
+
+ scale: function(value){
+
+ }
+*/
+});
105 Source/Element.Style.Transform.js
@@ -0,0 +1,105 @@
+/*
+---
+name: Element.Style.Transform
+description: A simple API for the css transform styles
+requires: [Core/Element.Style]
+provides: Element.Style.Transform
+...
+*/
+
+(function(global, doc, undef){
+
+var testElement = doc.createElement('div'),
+ PROPERTY = null,
+ MS_FILTER = 'filter',
+ TRANSFORMS_STORE_KEY = 'Element.Styles.Transforms:properties';
+
+
+// Test for transform properties
+var PROPERTIES = ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'];
+
+for (var i = 0, l = PROPERTIES.length; i < l; i++){
+ if (testElement.style[PROPERTIES[i]] !== undef) PROPERTY = PROPERTIES[i];
+}
+
+
+// test for IE filter
+if (!PROPERTY && testElement.style.filter != undef) PROPERTY = MS_FILTER;
+
+
+// Define custom functions for special properties or MS Filters
+var TRANSFORMS = {},
+ FILTER_TRANSFORMS = {};
+
+var defines = Element.Transforms = {
+ // define custom transforms
+ defineTransform: function(name, fn){
+ if (Type.isFunction(fn)) TRANSFORMS[name] = fn;
+ },
+
+ // define functions that will be used to mimic transforms with MS filter
+ defineFilter: function(name, fn){
+ if (Type.isFunction(fn)) FILTER_TRANSFORMS[name] = fn;
+ }.overloadSetter()
+};
+
+defines.defineTransforms = defines.defineTransform.overloadSetter();
+defines.defineFilters = defines.defineFilter.overloadSetter();
+
+
+// Parse the transform or filter strings
+var parseTransforms = function(properties){
+ var styles = [];
+ for (var name in properties){
+ if (name in TRANSFORMS) styles.push(TRANSFORMS[name].call(this, properties[name]));
+ else styles.push(name + '(' + (Type.isArray(properties[name]) ? properties[name].join(', ') : properties[name]) + ')');
+ }
+ return styles.join(' ');
+};
+
+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]));
+ }
+ return styles.join(' ');
+};
+
+// Implement the element methods
+var ELEMENT_METHODS = {
+
+ setTransform: function(property, value){
+ var properties = this.retrieve(TRANSFORMS_STORE_KEY, {});
+ properties[property] = value;
+
+ this.style[PROPERTY] = (PROPERTY == MS_FILTER) ? parseFilter.call(this, properties) : parseTransforms.call(this, properties);
+ this.store(TRANSFORMS_STORE_KEY, properties);
+ return this;
+ },
+
+ getTransform: function(property){
+ var properties = this.retrieve(TRANSFORMS_STORE_KEY, {});
+ return properties[property] || Element.Transforms.defaults[property];
+ }
+
+};
+
+Element.implement(Object.append(ELEMENT_METHODS, {
+ setTransforms: ELEMENT_METHODS.setTransform.overloadSetter(),
+ getTransforms: ELEMENT_METHODS.getTransform.overloadGetter()
+}));
+
+
+// Implement special transform handling
+Element.Transforms.defineTransforms({
+ rotate: function(value){
+ return 'rotate(' + parseFloat(value) + 'deg)';
+ }
+});
+
+Element.Transforms.defaults = {
+ rotate: 0,
+ scale: 1
+}
+
+})(this, document);
37 Source/Fx.Transform.js
@@ -0,0 +1,37 @@
+/*
+---
+name: Fx.Transform
+description: Tween CSS Transforms
+requires: [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);
+ }
+
+});
98 Specs/Configuration.js
@@ -0,0 +1,98 @@
+// Put this file in the parent directory of the runner folder. Also rename the file to Configuration.js
+
+(function(context){
+
+var Configuration = context.Configuration = {};
+
+// Runner name
+Configuration.name = 'Element.Style.Transform';
+
+
+// Presets - combine the sets and the source to a preset to easily run a test
+Configuration.presets = {
+
+ 'all': {
+ sets: ['all'],
+ source: ['mootools-core', 'all']
+ }
+
+};
+
+// An object with default presets
+Configuration.defaultPresets = {
+ browser: 'all',
+ jstd: 'all'
+};
+
+
+/*
+ * An object with sets. Each item in the object should have an path key,
+ * that specifies where the spec files are and an array with all the files
+ * without the .js extension relative to the given path
+ */
+Configuration.sets = {
+
+ 'all': {
+ path: 'Element.Style.Transform/',
+ files: ['Element.Style.Transform']
+ }
+
+};
+
+
+/*
+ * An object with the source files. Each item should have an path key,
+ * that specifies where the source files are and an array with all the files
+ * without the .js extension relative to the given path
+ */
+Configuration.source = {
+
+
+ 'mootools-core': {
+ path: '../../mootools-core/Source/',
+ files: [
+ 'Core/Core',
+
+ 'Slick/Slick.Parser',
+
+ 'Types/Array',
+ 'Types/Function',
+ 'Types/Number',
+ 'Types/String',
+ 'Types/Object',
+
+ 'Class/Class',
+ 'Class/Class.Extras',
+
+ 'Types/Event',
+
+ 'Browser/Browser',
+
+ 'Slick/Slick.Parser',
+ 'Slick/Slick.Finder',
+
+ 'Element/Element',
+ 'Element/Element.Event',
+ 'Element/Element.Style',
+ 'Element/Element.Dimensions',
+
+ 'Fx/Fx',
+ 'Fx/Fx.CSS',
+ 'Fx/Fx.Tween',
+ 'Fx/Fx.Morph',
+ 'Fx/Fx.Transitions',
+
+ ]
+ },
+ 'all': {
+ path: '../Source/',
+ files: [
+ 'Element.Style.Transform',
+ 'Element.Style.Transform.Filter',
+ 'Fx.Transform'
+ ]
+ }
+
+};
+
+})(typeof exports != 'undefined' ? exports : this);
20 Specs/Element.Style.Transform/Element.Style.Transform.js
@@ -0,0 +1,20 @@
+
+var testElement = new Element('div', {
+ styles: {
+ width: 100,
+ height: 100,
+ background: 'red',
+ margin: 100
+ }
+});
+
+describe('Element.Style.Transform', function(){
+
+ it('should rotate the element with 45 degrees', function(){
+ testElement.inject(document.body);
+
+ testElement.setTransform('rotate', 40);
+ });
+
+
+});
1  Specs/Runner
@@ -0,0 +1 @@
+Subproject commit 975582958b7453e7723fe89533ef53015044e1f8
14 package.yml
@@ -0,0 +1,14 @@
+name: "Element.Style.Transform"
+
+description: "Simple Cross Browser CSS3 Transforms API"
+
+license: "[MIT License](http://mootools.net/license.txt)"
+
+copyright: "&copy; [Arian Stolwijk](http://www.aryweb.nl)"
+
+authors: "[Arian Stolwijk](http://www.aryweb.nl)"
+
+sources:
+ - "Source/Element.Style.Transform.js"
+ - "Source/Element.Style.Transform.Filter.js"
+ - "Source/Fx.Transform.js"
Please sign in to comment.
Something went wrong with that request. Please try again.