Permalink
Browse files

making some small edits to the comments. Creating a new angle object …

…in the hopes of intelligently converting angles in the future.
  • Loading branch information...
1 parent f538f83 commit 964fa2ebf23afcdfa6c8c929da6863482b7813bf @heygrady committed May 20, 2010
Showing with 165 additions and 52 deletions.
  1. +165 −52 lib/jquery.transform.js
View
@@ -1,3 +1,123 @@
+/*!
+ * jQuery 2d Transform
+ * http://wiki.github.com/heygrady/transform/
+ *
+ * Copyright 2010, Grady Kuhnline
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+///////////////////////////////////////////////////////
+// Angle
+///////////////////////////////////////////////////////
+(function($, window, document, undefined) {
+ /**
+ * Converting a radian to a degree
+ * @const
+ */
+ var RAD_DEG = 180/Math.PI;
+
+ /**
+ * Converting a radian to a grad
+ * @const
+ */
+ var RAD_GRAD = 200/Math.PI;
+
+ /**
+ * Converting a degree to a radian
+ * @const
+ */
+ var DEG_RAD = Math.PI/180;
+
+ /**
+ * Converting a degree to a grad
+ * @const
+ */
+ var DEG_GRAD = 2/1.8;
+
+ /**
+ * Converting a grad to a degree
+ * @const
+ */
+ var GRAD_DEG = .9;
+
+ /**
+ * Converting a grad to a radian
+ * @const
+ */
+ var GRAD_RAD = Math.PI/200;
+
+ /**
+ * Functions for converting angles
+ * @var Object
+ */
+ $.extend({
+ angle: {
+ /**
+ * available units for an angle
+ * @var Regex
+ */
+ runit: /(deg|g?rad)/,
+
+ /**
+ * Convert a radian into a degree
+ * @param Number rad
+ * @returm Number
+ */
+ radianToDegree: function(rad) {
+ return rad * RAD_DEG;
+ },
+
+ /**
+ * Convert a radian into a degree
+ * @param Number rad
+ * @returm Number
+ */
+ radianToGrad: function(rad) {
+ return rad * RAD_GRAD;
+ },
+
+ /**
+ * Convert a degree into a radian
+ * @param Number deg
+ * @returm Number
+ */
+ degreeToRadian: function(deg) {
+ return deg * DEG_RAD;
+ },
+
+ /**
+ * Convert a degree into a radian
+ * @param Number deg
+ * @returm Number
+ */
+ degreeToGrad: function(deg) {
+ return deg * DEG_GRAD;
+ },
+
+ /**
+ * Convert a grad into a degree
+ * @param Number grad
+ * @returm Number
+ */
+ gradToDegree: function(grad) {
+ return grad * GRAD_DEG;
+ },
+
+ /**
+ * Convert a grad into a radian
+ * @param Number grad
+ * @returm Number
+ */
+ gradToRadian: function(grad) {
+ return grad * GRAD_RAD;
+ }
+ }
+ };
+})(jQuery, this, this.document);
+
+///////////////////////////////////////////////////////
+// Transform
+///////////////////////////////////////////////////////
(function($, window, document, undefined) {
/**
* @var Regex identify the matrix filter in IE
@@ -6,7 +126,7 @@
/**
* Class for creating cross-browser transformations
- * @var Object
+ * @class
*/
$.extend({
transform: function(elem) {
@@ -145,6 +265,7 @@
args = $.isArray(funcs[func]) ? funcs[func] : [funcs[func]];
// strip the units
+ // TODO: should probably convert the units properly instead of just stripping them
$.each(args, function(i, arg) {
args[i] = parseFloat(arg);
});
@@ -415,12 +536,15 @@
* @return void
*/
setAttr: function(func, value) {
+ //TODO: since we're stripping units, we need to normalize on deg and px
if ($.isArray(value)) {
$.each(value, function(i){value[i] = parseFloat(value[i]);});
value = value.join(' ');
} else if (value || value === 0) {
value = parseFloat(value);
}
+
+ //TODO: does this still need to be unitless since we've hacked animate to pieces?
this.$elem[0][func] = value; //should be unitless
},
@@ -475,24 +599,39 @@
};
/**
- * Ensure that the appropriate values have units on them
+ * Ensure that values have the appropriate units on them
* @param string funcName
* @param Mixed value
*/
var rfxnum = /^([+\-]=)?([\d+.\-]+)(.*)$/;
function _correctUnits(funcName, value) {
- var result = !$.isArray(value)? [value] : [value[0], value[1]];
+ var result = !$.isArray(value)? [value] : [value[0], value[1]],
+ rangle = $.transform.rfunc.angle,
+ rlength = $.transform.rfunc.length;
- //TODO: what does jQuery do for units? I may be complicating this.
for (var i = 0, len = result.length; i < len; i++) {
- var parts = rfxnum.exec(result[i]);
+ var parts = rfxnum.exec(result[i]),
+ unit = '';
- //TODO: we also need to know what units are being used, not just if they're missing
- if ($.transform.rfunc.angle.test(funcName) && (!parts || !parts[3])) {
- result[i] += "deg";
- } else if ($.transform.rfunc.length.test(funcName) && (!parts || !parts[3])) {
- result[i] += "px";
+ // Use an appropriate unit
+ if (rangle.test(funcName)) {
+ unit = 'deg';
+
+ // remove nonsense units
+ if (part[3] && !$.angle.runit.test(part[3])) {
+ part[3] = null;
+ }
+ } else if (rlength.test(funcName)) {
+ unit = 'px';
+ }
+
+ // ensure a value and appropriate unit
+ if (!parts) {
+ result[i] = 0 + unit;
+ } else if(!parts[3]) {
+ result[i] += unit;
}
+
}
return len == 1 ? result[0] : result;
}
@@ -517,6 +656,7 @@
* @param Matrix matrix
* @param Number outerHeight
* @param Number outerWidth
+ * @class
*/
calc: function(matrix, outerHeight, outerWidth) {
/**
@@ -541,7 +681,8 @@
* @returm Matrix
*/
rotate: function(deg) {
- var rad = degreeToRadian(deg),
+ //TODO: detect units
+ var rad = $.angle.degreeToRadian(deg),
costheta = Math.cos(rad),
sintheta = Math.sin(rad);
@@ -599,8 +740,9 @@
* @returm Matrix
*/
skew: function (degX, degY) {
- var radX = degreeToRadian(degX),
- radY = degreeToRadian(degY),
+ //TODO: detect units
+ var radX = $.angle.degreeToRadian(degX),
+ radY = $.angle.degreeToRadian(degY),
x = Math.tan(radX),
y = Math.tan(radY);
@@ -617,7 +759,8 @@
* @returm Matrix
*/
skewX: function (deg) {
- var rad = degreeToRadian(deg),
+ //TODO: detect units
+ var rad = $.angle.degreeToRadian(deg),
x = Math.tan(rad);
return $M([
@@ -634,7 +777,8 @@
* @returm Matrix
*/
skewY: function (deg) {
- var rad = degreeToRadian(deg),
+ //TODO: detect units
+ var rad = $.angle.degreeToRadian(deg),
y = Math.tan(rad);
return $M([
@@ -647,8 +791,8 @@
/**
* Offset for the transformation
- * @param Number tx
- * @param Number ty
+ * @param Number tx in pixels
+ * @param Number ty in pixels
* @returm Matrix
*/
translate: function (tx, ty) {
@@ -664,7 +808,7 @@
/**
* Offset on the X-axis
- * @param Number sx
+ * @param Number tx in pixels
* @returm Matrix
*/
translateX: function (tx) {
@@ -673,7 +817,7 @@
/**
* Offset on the Y-axis
- * @param Number sy
+ * @param Number ty in pixels
* @returm Matrix
*/
translateY: function (ty) {
@@ -796,37 +940,6 @@
}
}
};
-
- /**
- * Converting a radian to a degree
- * @const
- */
- var RAD_DEG = 180/Math.PI;
-
- /**
- * Converting a degree to a radian
- * @const
- */
- var DEG_RAD = (Math.PI/180);
-
- /**
- * Convert a radian into a degree
- * @param Number rad
- * @returm Number
- */
- function radianToDegree(rad) {
- return rad * RAD_DEG;
- }
-
- /**
- * Convert a degree into a radian
- * @param Number deg
- * @returm Number
- */
- function degreeToRadian(deg) {
- return deg * DEG_RAD;
- }
-
})(jQuery, this, this.document);
///////////////////////////////////////////////////////
@@ -910,7 +1023,7 @@
$.fx.prototype.cur = function(force) {
//NOTE: The cur function tries to look things up on the element
// itself as a native property first instead of as a style
- // property. However, the animate function is a big just
+ // property. However, the animate function is a big jerk
// and it's extremely easy to poison the element.style
// with a random property and ruin all of the fun. So, it's
// easier to just look it up ourselves.
@@ -919,7 +1032,7 @@
// space-seperated and without units
var value = this.elem[this.prop];
if (rfxmultinum.test(value)) {
- value = value.split(/\s/)[0];
+ value = value.split(/\s/)[0]; // only grab the first value
}
// Scale needs to have 1 as the default, all others take 0;

0 comments on commit 964fa2e

Please sign in to comment.