Added rotation stuff for IE - first phase (no translation midpoint en…

…forced ... yet ;-) )
uxder · Mar 26, 2010 · 2c9d511 · 2c9d511
1 parent 11f17cd
commit 2c9d511
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 52 deletions.
diff --git a/.project b/.project
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>css3please</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>
diff --git a/index.html b/index.html
@@ -4,28 +4,28 @@
   <meta charset="UTF-8" />
   <title>CSS3 Please! The Cross-Browser CSS3 Rule Generator</title>
   <link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen"  />
+</head>
 
+<!-- its only up here because the js does syntax highlighting so i want the js loaded before the page loads. bad practice i know... -->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
-  <!-- its only up here because the js does syntax highlighting so i want the js loaded before the page loads. bad practice i know... -->
-  <script src="javascript/jquery-1.4.2.js" type="text/javascript"></script>
-  <script src="javascript/jquery.plugins.min.js" type="text/javascript"></script>
-  <script src="javascript/javascript.js" type="text/javascript"></script>
+<script src="../../shared/js/helpers.js" type="text/javascript"></script>
+
+<script src="javascript/jquery.plugins.min.js" type="text/javascript"></script>
+<script src="javascript/jcoglan.com/sylvester.js" type="text/javascript"></script>
+<script src="javascript/javascript.js" type="text/javascript"></script>
 
-</head>
 <body>
 
-<div id="sandboxwrap">
-    <div id="sandbox">
-      <h1>
-        <abbr title="Cascading Style Sheets Level 3">CSS3</abbr>, please!
-      </h1>
-      <p>
-        This element will receive inline changes as you edit the CSS rules on the left. Enjoy!
-      </p>
-    </div>
+<div id="sandbox">
+  <h1>
+    <abbr title="Cascading Style Sheets Level 3">CSS3</abbr>, please!
+  </h1>
+  <p>
+    This element will receive inline changes as you edit the CSS rules on the left. Enjoy!
+  </p>
 </div>
 
-
 <pre class="rule">
 /* -------------------------------------------------------------
       CSS3, Please! The Cross-Browser CSS3 Rule Generator
@@ -71,8 +71,8 @@ <h1>
      -moz-box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3" i="s2Hex" o="sHex">#ffffff</b>; <span class="comment">/* FF3.5+ <span class="endcomment">*/</span></span>
   -webkit-box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3" i="s2Hex" o="sHex">#ffffff</b>; <span class="comment">/* Saf3.0+, Chrome <span class="endcomment">*/</span></span>
           box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3" i="s2Hex" o="sHex">#ffffff</b>; <span class="comment">/* Opera 10.5, IE 9.0 <span class="endcomment">*/</span></span>
-              filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">0px</b>, OffY=<b g="1">0px</b>, Color='<b g="3" i="s2Hex" o="lHex">#ffffff</b>'); <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
-          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">0px</b>, OffY=<b g="1">0px</b>, Color='<b g="3" i="s2Hex" o="lHex">#ffffff</b>')"; <span class="comment">/* IE8 <span class="endcomment">*/</span></span>
+<!--              filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">0px</b>, OffY=<b g="1">0px</b>, Color='<b g="3" i="s2Hex" o="lHex">#ffffff</b>'); <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
+          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=<b g="0">0px</b>, OffY=<b g="1">0px</b>, Color='<b g="3" i="s2Hex" o="lHex">#ffffff</b>')"; <span class="comment">/* IE8 <span class="endcomment">*/</span></span> -->
 }
   </pre>
   <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
@@ -93,9 +93,9 @@ <h1>
   <pre class="rule">
 .box_gradient {
   background-image: -moz-linear-gradient(top, <b g="0" i="s2Hex">#444444</b>, <b g="1" i="s2Hex">#999999</b>); <span class="comment">/* FF3.6 <span class="endcomment">*/</span></span>
-  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, <b g="0" i="s2Hex">#444444</b>),color-stop(1, <b g="1" i="s2Hex">#999999</b>)); <span class="comment">/* Saf4+, Chrome <span class="endcomment">*/</span></span>
-            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2Hex">#444444</b>', endColorstr='<b g="1" i="s2Hex">#999999</b>'); <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
-        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2Hex">#444444</b>', endColorstr='<b g="1" i="s2Hex">#999999</b>')"; <span class="comment">/* IE8 <span class="endcomment">*/</span></span>
+  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, <b g="0" i="s2Hex">#444444</b>),color-stop(1, <b g="1" i="s2Hex">#999999</b>)); <span class="comment">/* Saf4+, Chrome <span class="endcomment">*/</span></span>
+<!--            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2Hex">#444444</b>', endColorstr='<b g="1" i="s2Hex">#999999</b>'); <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
+        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2Hex">#444444</b>', endColorstr='<b g="1" i="s2Hex">#999999</b>')"; <span class="comment">/* IE8 <span class="endcomment">*/</span></span> -->
 }
   </pre>
   <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
@@ -117,8 +117,8 @@ <h1>
 .box_rgba {
   background-color: <b g="0" i="ch" o="shortHex">#B4B490</b>;
   background-color: <b g="0" i="s2aHex" o="aCh">rgba(180, 180, 144, 0.6)</b>;  <span class="comment">/* FF3+, Saf3+, Opera 10.10+, Chrome <span class="endcomment">*/</span></span>
-            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#99B4B490</b>',endColorstr='<b g="0" i="s2aHex">#99B4B490</b>'); <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
-        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#99B4B490</b>',endColorstr='<b g="0" i="s2aHex">#99B4B490</b>')"; <span class="comment">/* IE8 <span class="endcomment">*/</span></span>
+ <!--           filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#99B4B490</b>',endColorstr='<b g="0" i="s2aHex">#99B4B490</b>'); <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
+        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='<b g="0" i="s2aHex">#99B4B490</b>',endColorstr='<b g="0" i="s2aHex">#99B4B490</b>')"; <span class="comment">/* IE8 <span class="endcomment">*/</span></span> -->
 }
   </pre>
   <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
@@ -141,8 +141,10 @@ <h1>
      -moz-transform: rotate(<b g="0">7.5</b>deg);  <span class="comment">/* FF3.5+ <span class="endcomment">*/</span></span>
        -o-transform: rotate(<b g="0">7.5</b>deg);  <span class="comment">/* Opera 10.5 <span class="endcomment">*/</span></span>
   -webkit-transform: rotate(<b g="0">7.5</b>deg);  <span class="comment">/* Saf3.1+, Chrome <span class="endcomment">*/</span></span>
-             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=<b g="0" i="s2deg" o="rot">0.083</b>);  <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
-         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=<b g="0" i="s2deg" o="rot">0.083</b>)"; <span class="comment">/* IE8 <span class="endcomment">*/</span></span>
+               zoom: 1;
+             filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', <b g="0" i="matrix2deg" o="deg2matrix">M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104</b>) <span class="comment">/* IE6,IE7 <span class="endcomment">*/</span></span>
+         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', <b g="0" i="matrix2deg" o="deg2matrix">M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104</b>)" <span class="comment">/* IE8 <span class="endcomment">*/</span></span>
+
 }
   </pre>
   <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
@@ -196,22 +198,11 @@ <h1>
     &copy; 2010; a <a href="http://paulirish.com">Paul Irish</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a> joint, <small>in association w/ <a href="http://www.boazsender.com/">Boaz Sender</a></small>
 
 	        if you like this, you'll probably also dig <a href="http://yayquery.com">yayQuery</a>. <3
-
 */
 
 
-</span></pre>
-
-
-<pre class="rule changelog">
-/*  
-    __Changelog__
-    2010.03.25: Fixed the gradient flipflop. Fixed fixed positioning bug.
-*/
-
-
-
 
+</span>
 </pre>
 
 

diff --git a/javascript/javascript.js b/javascript/javascript.js
@@ -27,6 +27,36 @@ window.cssMath = {
 	d2r: function (d) {
 		return d / 90;
 	},
+
+	/* Degrees to Radians */
+	d2rad: function (d){
+        return (d) * Math.PI / 180;
+    },
+
+	/* Radians to Degrees */
+	rad2d: function (r) {
+		return (180*r)/Math.PI + 360;
+	},
+
+	/* matrix to IE String */
+	m2s: function (M) {
+		return 'M11=' + M.e(1, 1) + ', M12=' + M.e(1,2) + ', M21=' + M.e(2,1) + ', M22=' + M.e(2,2);
+	},
+
+	s2m: function (s) {
+
+		var entries = s.split(',');
+		var values = new Array();
+
+		for (var i=0; i<entries.length; i++) {
+			var e = entries[i];
+
+			values[i] = e.split('=')[1];
+		}
+
+		return $M([[values[0], values[1]], [values[2], values[3]]]);
+	},
+
 	/* Hexadecimal to Decimal */
 	h2d: function (h) {
 		return '' + parseInt(h, 16);
@@ -112,6 +142,16 @@ window.cssMath = {
 	ah2ac: function (h) {
 		return 'rgba(' + this.aha2ada(h.replace(/^#?(.{1,2})(.{1,2})(.{1,2})(.{1,2})$/, '$3,$4,$1,$2').split(',')).join(', ') + ')';
 	},
+
+	/* Are two numbers close enough.  Needed for matrices because of rounding errors in JavaScript */
+	areClose: function (x, y) {
+		if (Math.abs(x-y) < 0.001) {
+			return true;
+		} else {
+			return false;
+		}
+	},
+
 	eval: {
 		/* String to Hexadecimals */
 		s2Hex: function (value, allValues) {
@@ -156,6 +196,7 @@ window.cssMath = {
 			return cssMath.ah2ac(value);
 		},
 		s2deg: function (value, allValues) {
+
 			if (value > 4) {
 				return value;
 			}
@@ -165,14 +206,31 @@ window.cssMath = {
 		},
 		rot: function (value, allValues) {
 			return cssMath.round(cssMath.d2r(value), 3);
+		} ,
+
+		matrix2deg: function (value, allValues) {
+
+
+			var M = cssMath.s2m(value);
+			var asin1 = Math.asin(M.e(2,1));
+			var asin2 = Math.asin(M.e(1,2));
+			var cos = Math.acos(M.e(1,1));
+
+
+			if (cssMath.areClose(asin1, -asin2)  && cssMath.areClose(M.e(1,1),M.e(2,2))) {
+				return asin1;
+			} else {
+				return "NaN";
+			}
 		},
-		xy2rs : function( value, allValues ,elem){
-		    var children = $(elem).parent().parent().parent().find('b'),
-		        x = parseInt(children.eq(0).text(),10),
-		        y = parseInt(children.eq(1).text(),10);
-		    console.log( elem, cssMath.xy2rs(x,y) );
-		    return  cssMath.xy2rs(x,y).r;
+
+		deg2matrix: function (value, allValues) {
+			var num = cssMath.d2rad(value);
+
+       		return cssMath.m2s(Matrix.Rotation(num));
 		}
+
+
 	}
 };
 
@@ -235,13 +293,13 @@ window.generator = {
         itemValue = '';
 
         if (input) {
-        	value = cssMath.eval[input](value, allValues,elem);
+        	value = cssMath.eval[input](value, allValues);
         }
 
         while (++item < allValues.length) {
         	if (allValues[item].group == group) {
         		if (allValues[item].output) {
-        			itemValue = cssMath.eval[ allValues[item].output ](value, allValues, elem);
+        			itemValue = cssMath.eval[ allValues[item].output ](value, allValues);
         		} else {
         			itemValue = value; 
         		}
@@ -412,11 +470,3 @@ $('.rule_wrapper .comment a').live('click',function(){
     return false;
 })
 
-
-
-
-
-
-
-
-