Removed jquery.curStyles pluging and replaced all uses of curStyles a…

…nd the now deprecated curCSS with the regular jQuery css() since it now returns computed styles and normalizes the units. Changed dimensions variables from ints to floats to better work with browser zooming. Zooming is still mostly broken though due to buggy browser implementations. IE and FF can be worked around, but Chrome rounds up all returned computed styles, so we're out of luck.
mleibman · Dec 20, 2010 · 9e40119 · 9e40119
1 parent d3879b9
commit 9e40119
Show file tree

Hide file tree

Showing 22 changed files with 12 additions and 38 deletions.
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html
@@ -30,7 +30,6 @@ <h2>Demonstrates:</h2>
 <script src="../lib/jquery-1.4.3.min.js"></script>
 <script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 <script src="../lib/jquery.event.drag-2.0.min.js"></script>
-<script src="../lib/jquery.curstyles.min.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.checkboxselectcolumn.js"></script>

diff --git a/examples/example-header-row.html b/examples/example-header-row.html
@@ -34,7 +34,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
 		<script src="../slick.dataview.js"></script>

diff --git a/examples/example-spreadsheet.html b/examples/example-spreadsheet.html
@@ -34,7 +34,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
 		<script src="../plugins/slick.autotooltips.js"></script>

diff --git a/examples/example1-simple.html b/examples/example1-simple.html
@@ -11,7 +11,7 @@
 		<table width="100%">
 		<tr>
 			<td valign="top" width="50%">
-				<div id="myGrid" style="width:600px;height:500px;"></div>
+				<div id="myGrid" style="width:600px;height:500px;display:none;"></div>
 			</td>
 			<td valign="top">
 				<h2>Demonstrates:</h2>
@@ -24,7 +24,6 @@ <h2>Demonstrates:</h2>
 
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
         <script src="../slick.grid.js"></script>
@@ -61,6 +60,8 @@ <h2>Demonstrates:</h2>
 			}
 
 			grid = new Slick.Grid("#myGrid", data, columns, options);
+
+            $("#myGrid").show();
 		})
 
 		</script>

diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html
@@ -53,7 +53,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
 		<script src="../lib/jquery.sparkline.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.editors.js"></script>

diff --git a/examples/example11-autoheight.html b/examples/example11-autoheight.html
@@ -25,7 +25,6 @@ <h2>Demonstrates:</h2>
         <script src="../lib/jquery-1.4.3.min.js"></script>
         <script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
         <script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
         <script src="../slick.grid.js"></script>

diff --git a/examples/example12-fillbrowser.html b/examples/example12-fillbrowser.html
@@ -27,7 +27,6 @@ <h2>Demonstrates:</h2>
 
         <script src="../lib/jquery-1.4.3.min.js"></script>
         <script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
         <script src="../slick.grid.js"></script>

diff --git a/examples/example13-getItem-sorting.html b/examples/example13-getItem-sorting.html
@@ -26,7 +26,6 @@ <h2>Demonstrates:</h2>
 
         <script src="../lib/jquery-1.4.3.min.js"></script>
         <script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
         <script src="../slick.core.js"></script>
         <script src="../slick.grid.js"></script>
 

diff --git a/examples/example14-highlighting.html b/examples/example14-highlighting.html
@@ -50,7 +50,6 @@ <h2>Controls</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
         <script src="../plugins/slick.cellselectionmodel.js"></script>

diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html
@@ -38,7 +38,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.editors.js"></script>

diff --git a/examples/example3-editing.html b/examples/example3-editing.html
@@ -40,7 +40,6 @@ <h2>Options:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
 		<script src="../plugins/slick.cellrangeselector.js"></script>

diff --git a/examples/example3a-compound-editors.html b/examples/example3a-compound-editors.html
@@ -33,7 +33,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.editors.js"></script>

diff --git a/examples/example3b-editing-with-undo.html b/examples/example3b-editing-with-undo.html
@@ -36,7 +36,6 @@ <h2>Controls:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.editors.js"></script>

diff --git a/examples/example4-model.html b/examples/example4-model.html
@@ -87,7 +87,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.editors.js"></script>

diff --git a/examples/example5-collapsing.html b/examples/example5-collapsing.html
@@ -61,7 +61,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.editors.js"></script>

diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html
@@ -65,7 +65,6 @@ <h2>WARNING:</h2>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
 		<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.remotemodel.js"></script>

diff --git a/examples/example7-events.html b/examples/example7-events.html
@@ -67,7 +67,6 @@ <h2>Demonstrates:</h2>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.editors.js"></script>

diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html
@@ -91,7 +91,6 @@ <h2>Demonstrates:</h2>
 
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.grid.js"></script>

diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html
@@ -81,7 +81,6 @@
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
 		<script src="../lib/jquery.event.drop-2.0.min.js"></script>
-        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
         <script src="../plugins/slick.cellrangeselector.js"></script>

diff --git a/lib/jquery.curstyles.min.js b/lib/jquery.curstyles.min.js
diff --git a/slick.grid.js b/slick.grid.js
@@ -22,9 +22,6 @@ if (typeof jQuery === "undefined") {
 if (!jQuery.fn.drag) {
     throw "SlickGrid requires jquery.event.drag module to be loaded";
 }
-if (!jQuery.fn.curStyles) {
-    throw "SlickGrid requires jquery.curstyles module to be loaded";
-}
 if (typeof Slick === "undefined") {
     throw "slick.core.js not loaded";
 }
@@ -245,7 +242,7 @@ if (typeof Slick === "undefined") {
             setupColumnSort();
             createCssRules();
 
-            viewportW = parseInt($.curCSS($container[0], "width", true));
+            viewportW = parseFloat($.css($container[0], "width", true));
 
             resizeAndRender();
 
@@ -661,30 +658,27 @@ if (typeof Slick === "undefined") {
 
         function getVBoxDelta($el) {
             var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
-            var s = $el.curStyles.apply($el, p);
             var delta = 0;
-            $.each(p, function(n,val) { delta += parseInt(s[val]) || 0; });
+            $.each(p, function(n,val) { delta += parseFloat($el.css(val)) || 0; });
             return delta;
         }
 
         function measureCellPaddingAndBorder() {
-            var el, s;
+            var el;
             var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
             var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
 
             el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
             headerColumnWidthDiff = headerColumnHeightDiff = 0;
-            s = el.curStyles.apply(el, h.concat(v));
-            $.each(h, function(n,val) { headerColumnWidthDiff += parseInt(s[val]) || 0; });
-            $.each(v, function(n,val) { headerColumnHeightDiff += parseInt(s[val]) || 0; });
+            $.each(h, function(n,val) { headerColumnWidthDiff += parseFloat(el.css(val)) || 0; console.log(el.css(val)) });
+            $.each(v, function(n,val) { headerColumnHeightDiff += parseFloat(el.css(val)) || 0; });
             el.remove();
 
             var r = $("<div class='slick-row' />").appendTo($canvas);
             el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
             cellWidthDiff = cellHeightDiff = 0;
-            s = el.curStyles.apply(el, h.concat(v));
-            $.each(h, function(n,val) { cellWidthDiff += parseInt(s[val]) || 0; });
-            $.each(v, function(n,val) { cellHeightDiff += parseInt(s[val]) || 0; });
+            $.each(h, function(n,val) { cellWidthDiff += parseFloat(el.css(val)) || 0; });
+            $.each(v, function(n,val) { cellHeightDiff += parseFloat(el.css(val)) || 0; });
             r.remove();
 
             absoluteColumnMinWidth = Math.max(headerColumnWidthDiff,cellWidthDiff);
@@ -1141,7 +1135,7 @@ if (typeof Slick === "undefined") {
         }
 
         function getViewportHeight() {
-            return parseInt($.curCSS($container[0], "height", true)) -
+            return parseFloat($.css($container[0], "height", true)) -
                 options.headerHeight -
                 getVBoxDelta($headers) -
                 (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) -
@@ -1157,7 +1151,7 @@ if (typeof Slick === "undefined") {
             }
 
             numVisibleRows = Math.ceil(viewportH / options.rowHeight);
-            viewportW = parseInt($.curCSS($container[0], "width", true));
+            viewportW = parseFloat($.css($container[0], "width", true));
             $viewport.height(viewportH);
 
             var w = 0, i = columns.length;

diff --git a/tests/scrolling benchmarks.html b/tests/scrolling benchmarks.html
@@ -19,7 +19,6 @@
 	<body>
 		<script src="../lib/firebugx.js"></script>
 		<script src="../lib/jquery-1.4.3.min.js"></script>
-		<script src="../lib/jquery.curstyles.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>