@qooxdoo/framework
Version:
The JS Framework for Coders
281 lines (243 loc) • 8.31 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2012 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Martin Wittemann (wittemann)
************************************************************************ */
/**
* This class is responsible for applying CSS3 transforms to the collection.
* The implementation is mostly a cross browser wrapper for applying the
* transforms.
* The API is keep to the spec as close as possible.
*
* http://www.w3.org/TR/css3-3d-transforms/
*/
qx.Bootstrap.define("qx.module.Transform",
{
members :
{
/**
* Method to apply multiple transforms at once to the given element. It
* takes a map containing the transforms you want to apply plus the values
* e.g.<code>{scale: 2, rotate: "5deg"}</code>.
* The values can be either singular, which means a single value will
* be added to the CSS. If you give an array, the values will be split up
* and each array entry will be used for the X, Y or Z dimension in that
* order e.g. <code>{scale: [2, 0.5]}</code> will result in a element
* double the size in X direction and half the size in Y direction.
* Make sure your browser supports all transformations you apply.
*
* @attach {qxWeb}
* @param transforms {Map} The map containing the transforms and value.
* @return {qxWeb} This reference for chaining.
*/
transform : function(transforms) {
this._forEachElement(function(el) {
qx.bom.element.Transform.transform(el, transforms);
});
return this;
},
/**
* Translates by the given value. For further details, take
* a look at the {@link #transform} method.
*
* @attach {qxWeb}
* @param value {String|Array} The value to translate e.g. <code>"10px"</code>.
* @return {qxWeb} This reference for chaining.
*/
translate : function(value) {
return this.transform({translate: value});
},
/**
* Scales by the given value. For further details, take
* a look at the {@link #transform} method.
*
* @attach {qxWeb}
* @param value {Number|Array} The value to scale.
* @return {qxWeb} This reference for chaining.
*/
scale : function(value) {
return this.transform({scale: value});
},
/**
* Rotates by the given value. For further details, take
* a look at the {@link #transform} method.
*
* @attach {qxWeb}
* @param value {String|Array} The value to rotate e.g. <code>"90deg"</code>.
* @return {qxWeb} This reference for chaining.
*/
rotate : function(value) {
return this.transform({rotate: value});
},
/**
* Skews by the given value. For further details, take
* a look at the {@link #transform} method.
*
* @attach {qxWeb}
* @param value {String|Array} The value to skew e.g. <code>"90deg"</code>.
* @return {qxWeb} This reference for chaining.
*/
skew : function(value) {
return this.transform({skew: value});
},
/**
* Sets the transform-origin property.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property
*
* @attach {qxWeb}
* @param value {String} CSS position values like <code>50% 50%</code> or
* <code>left top</code>.
* @return {qxWeb} This reference for chaining.
*/
setTransformOrigin : function(value) {
this._forEachElement(function(el) {
qx.bom.element.Transform.setOrigin(el, value);
});
return this;
},
/**
* Returns the transform-origin property of the first element.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property
*
* @attach {qxWeb}
* @return {String} The set property, e.g. <code>50% 50%</code> or null,
* of the collection is empty.
*/
getTransformOrigin : function() {
if (this[0] && this[0].nodeType === 1) {
return qx.bom.element.Transform.getOrigin(this[0]);
}
return "";
},
/**
* Sets the transform-style property.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#transform-style-property
*
* @attach {qxWeb}
* @param value {String} Either <code>flat</code> or <code>preserve-3d</code>.
* @return {qxWeb} This reference for chaining.
*/
setTransformStyle : function(value) {
this._forEachElement(function(el) {
qx.bom.element.Transform.setStyle(el, value);
});
return this;
},
/**
* Returns the transform-style property of the first element.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#transform-style-property
*
* @attach {qxWeb}
* @return {String} The set property, either <code>flat</code> or
* <code>preserve-3d</code>.
*/
getTransformStyle : function() {
if (this[0] && this[0].nodeType === 1) {
return qx.bom.element.Transform.getStyle(this[0]);
}
return "";
},
/**
* Sets the perspective property.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#perspective-property
*
* @attach {qxWeb}
* @param value {Number} The perspective layer. Numbers between 100
* and 5000 give the best results.
* @return {qxWeb} This reference for chaining.
*/
setTransformPerspective : function(value) {
this._forEachElement(function(el) {
qx.bom.element.Transform.setPerspective(el, value);
});
return this;
},
/**
* Returns the perspective property of the first element.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#perspective-property
*
* @attach {qxWeb}
* @return {String} The set property, e.g. <code>500</code>
*/
getTransformPerspective : function() {
if (this[0] && this[0].nodeType === 1) {
return qx.bom.element.Transform.getPerspective(this[0]);
}
return "";
},
/**
* Sets the perspective-origin property.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#perspective-origin-property
*
* @attach {qxWeb}
* @param value {String} CSS position values like <code>50% 50%</code> or
* <code>left top</code>.
* @return {qxWeb} This reference for chaining.
*/
setTransformPerspectiveOrigin : function(value) {
this._forEachElement(function(el) {
qx.bom.element.Transform.setPerspectiveOrigin(el, value);
});
return this;
},
/**
* Returns the perspective-origin property of the first element.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#perspective-origin-property
*
* @attach {qxWeb}
* @return {String} The set property, e.g. <code>50% 50%</code>
*/
getTransformPerspectiveOrigin : function() {
if (this[0] && this[0].nodeType === 1) {
return qx.bom.element.Transform.getPerspectiveOrigin(this[0]);
}
return "";
},
/**
* Sets the backface-visibility property.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property
*
* @attach {qxWeb}
* @param value {Boolean} <code>true</code> if the backface should be visible.
* @return {qxWeb} This reference for chaining.
*/
setTransformBackfaceVisibility : function(value) {
this._forEachElement(function(el) {
qx.bom.element.Transform.setBackfaceVisibility(el, value);
});
return this;
},
/**
* Returns the backface-visibility property of the first element.
*
* Spec: http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property
*
* @attach {qxWeb}
* @return {Boolean} <code>true</code>, if the backface is visible.
*/
getTransformBackfaceVisibility : function() {
if (this[0] && this[0].nodeType === 1) {
return qx.bom.element.Transform.getBackfaceVisibility(this[0]);
}
return "";
}
},
defer : function(statics) {
qxWeb.$attachAll(this);
}
});