default css names & widget fixes

Mottie · Mar 27, 2012 · ac26e94 · ac26e94
1 parent 0642f8e
commit ac26e94
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 84 deletions.
diff --git a/README.markdown b/README.markdown
@@ -34,6 +34,23 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
 
 View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
 
+#### Version 2.1.7 (3/26/2012)
+
+* Changed default css options to use more unique names:
+  * `cssHeader` is now `"tablesorter-header"`
+  * `cssAsc` is now `"tablesorter-headerSortUp"`
+  * `cssDesc` is now `"tablesorter-headerSortDown"`
+  * Updated blue &amp; green styles to use the appropriate names.
+  * Left the original css definitions to keep the styles backward compatible.
+* Table header cell content wrapper modification:
+  * Previously the content was wrapped with a `span`, now wrapped with a `div`
+  * Content wrapping div now as the class name of `tablesorter-header-inner` applied to it.
+* Various widget fixes:
+  * The `$.tablesorter.storage` code now loads saved variables before updating. Fix for [issue #41](https://github.com/Mottie/tablesorter/issues/41).
+  * Reverted the "filter" widget code to work like it is supposed to. Fix for [issue #40](https://github.com/Mottie/tablesorter/issues/40).
+  * Modified the "stickHeaders" widget to now set the width of the content instead of the table cell. It seems to work better. Fix for [issue #37](https://github.com/Mottie/tablesorter/issues/37)
+  * Fixed the "uitheme" widget code to update the sorting icon correctly.
+
 #### Version 2.1.6 (3/22/2012)
 
 * Pager updates

diff --git a/changelog.txt b/changelog.txt
@@ -1,5 +1,23 @@
 TableSorter Change Log
 
+Version 2.1.7 (3/26/2012)
+============================
+
+* Changed default css options to use more unique names:
+  * `cssHeader` is now `"tablesorter-header"`
+  * `cssAsc` is now `"tablesorter-headerSortUp"`
+  * `cssDesc` is now `"tablesorter-headerSortDown"`
+  * Updated blue &amp; green styles to use the appropriate names.
+  * Left the original css definitions to keep the styles backward compatible.
+* Table header cell content wrapper modification:
+  * Previously the content was wrapped with a `span`, now wrapped with a `div`
+  * Content wrapping div now as the class name of `tablesorter-header-inner` applied to it.
+* Various widget fixes:
+  * The `$.tablesorter.storage` code now loads saved variables before updating. Fix for [issue #41](https://github.com/Mottie/tablesorter/issues/41).
+  * Reverted the "filter" widget code to work like it is supposed to. Fix for [issue #40](https://github.com/Mottie/tablesorter/issues/40).
+  * Modified the "stickHeaders" widget to now set the width of the content instead of the table cell. It seems to work better. Fix for [issue #37](https://github.com/Mottie/tablesorter/issues/37)
+  * Fixed the "uitheme" widget code to update the sorting icon correctly.
+
 Version 2.1.6 (3/22/2012)
 ============================
 

diff --git a/css/blue/blue.zip b/css/blue/blue.zip
diff --git a/css/blue/style.css b/css/blue/style.css
@@ -8,17 +8,23 @@ table.tablesorter {
 	text-align: left;
 	border-spacing: 0;
 }
-table.tablesorter, table.tablesorter th, table.tablesorter tr.tablesorter-stickyHeader th, table.tablesorter td {
+table.tablesorter,
+table.tablesorter th,
+table.tablesorter tr.tablesorter-stickyHeader th,
+table.tablesorter td {
 	border: #cdcdcd 1px solid;
 }
 
-table.tablesorter thead tr th, tr.tablesorter-stickyHeader th, table.tablesorter tfoot tr th {
+table.tablesorter thead tr th,
+tr.tablesorter-stickyHeader th,
+table.tablesorter tfoot tr th {
 	background-color: #e6eeee;
 	border-collapse: collapse;
 	font-size: 12px;
 	padding: 4px 20px 4px 4px;
 }
-table.tablesorter thead tr .header, tr.tablesorter-stickyHeader .header {
+table.tablesorter thead tr .tablesorter-header,
+tr.tablesorter-stickyHeader .tablesorter-header {
 	background-image: url(black-bg.gif);
 	background-repeat: no-repeat;
 	background-position: center right;
@@ -30,11 +36,13 @@ table.tablesorter tbody td {
 	background-color: #fff;
 	vertical-align: top;
 }
-table.tablesorter thead tr .headerSortUp {
+table.tablesorter thead tr .headerSortUp,
+table.tablesorter thead tr .tablesorter-headerSortUp {
 	background-color: #8dbdd8;
 	background-image: url(black-asc.gif);
 }
-table.tablesorter thead tr .headerSortDown {
+table.tablesorter thead tr .headerSortDown,
+table.tablesorter thead tr .tablesorter-headerSortDown {
 	background-color: #8dbdd8;
 	background-image: url(black-desc.gif);
 }

diff --git a/css/green/green.zip b/css/green/green.zip
diff --git a/css/green/style.css b/css/green/style.css
@@ -8,11 +8,16 @@ table.tablesorter {
 	text-align: left;
 	border-spacing: 0;
 }
-table.tablesorter, table.tablesorter th, table.tablesorter tr.tablesorter-stickyHeader th, table.tablesorter td {
+table.tablesorter,
+table.tablesorter th,
+table.tablesorter tr.tablesorter-stickyHeader th,
+table.tablesorter td {
 	border: #cdcdcd 1px solid;
 }
 
-table.tablesorter thead tr th, tr.tablesorter-stickyHeader th, table.tablesorter tfoot tr th {
+table.tablesorter thead tr th,
+tr.tablesorter-stickyHeader th,
+table.tablesorter tfoot tr th {
 	border-collapse: collapse;
 	font-size: 12px;
 	padding: 5px;
@@ -21,24 +26,32 @@ table.tablesorter td {
 	color: #3d3d3d;
 	padding: 5px;
 }
-table.tablesorter thead tr, table.tablesorter tfoot tr {
+table.tablesorter thead tr.tablesorter-header,
+table.tablesorter thead tr.tablesorter-stickyHeader,
+table.tablesorter tfoot tr {
 	background: url(bkgd.png) center center repeat-x;
 }
-table.tablesorter .header {
+table.tablesorter .header,
+table.tablesorter .tablesorter-header {
 	background: transparent;
 	border-right: #cdcdcd 1px solid;
 	padding: 9px;
 	height: auto;
 	cursor: pointer;
 }
-table.tablesorter .header span:first-child, .tablesorter-stickyHeader .header span:first-child {
+table.tablesorter .header span:first-child,
+.tablesorter-stickyHeader .header span:first-child,
+table.tablesorter th.tablesorter-header .tablesorter-header-inner,
+.tablesorter-stickyHeader th.tablesorter-header .tablesorter-header-inner {
 	background: url(none.png) no-repeat;
 	padding: 2px 0 2px 25px;
 }
-table.tablesorter .headerSortUp span:first-child {
+table.tablesorter .headerSortUp span:first-child,
+table.tablesorter .tablesorter-headerSortUp .tablesorter-header-inner {
 	background: url(asc.png) no-repeat;
 }
-table.tablesorter .headerSortDown span:first-child {
+table.tablesorter .headerSortDown span:first-child,
+table.tablesorter .tablesorter-headerSortDown .tablesorter-header-inner {
 	background: url(desc.png) no-repeat;
 }
 
@@ -51,21 +64,24 @@ table.tablesorter tr.even td {
 }
 
 /* Column Widget - column sort colors */
-table.tablesorter tbody td.primary, table.tablesorter tbody tr.odd td.primary {
+table.tablesorter tbody td.primary,
+table.tablesorter tbody tr.odd td.primary {
 	background-color: #c0ffc0;
 }
 table.tablesorter tbody tr.even td.primary {
 	background-color: #e8ffe8;
 }
 
-table.tablesorter tbody td.secondary, table.tablesorter tbody tr.odd td.secondary {
+table.tablesorter tbody td.secondary,
+table.tablesorter tbody tr.odd td.secondary {
 	background-color: #d6ffd6;
 }
 table.tablesorter tbody tr.even td.secondary {
 	background-color: #e8ffe8;
 }
 
-table.tablesorter tbody td.tertiary, table.tablesorter tbody tr.odd td.tertiary {
+table.tablesorter tbody td.tertiary,
+table.tablesorter tbody tr.odd td.tertiary {
 	background-color: #eaffea;
 }
 table.tablesorter tbody tr.even td.tertiary {
@@ -79,7 +95,8 @@ table.tablesorter thead tr.tablesorter-filter input.tablesorter-filter {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-table.tablesorter thead tr.tablesorter-filter, table.tablesorter thead tr.tablesorter-filter td {
+table.tablesorter thead tr.tablesorter-filter,
+table.tablesorter thead tr.tablesorter-filter td {
 	text-align: center;
 	background: #fff;
 }

diff --git a/css/ui/style.css b/css/ui/style.css
@@ -7,7 +7,8 @@ table.tablesorter {
 	text-align: left;
 	padding: 5px;
 }
-table.tablesorter thead tr th, table.tablesorter tfoot tr th {
+table.tablesorter thead tr th,
+table.tablesorter tfoot tr th {
 	border-collapse: collapse;
 	font-size: 8pt;
 	padding: 4px;
@@ -47,7 +48,8 @@ table.tablesorter thead tr.tablesorter-filter input.tablesorter-filter {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-table.tablesorter thead tr.tablesorter-filter, table.tablesorter thead tr.tablesorter-filter td {
+table.tablesorter thead tr.tablesorter-filter,
+table.tablesorter thead tr.tablesorter-filter td {
 	text-align: center;
 }
 /* optional disabled input styling */ 

diff --git a/docs/example-option-render-header.html b/docs/example-option-render-header.html
@@ -27,7 +27,7 @@
 	-moz-border-radius: 1em;
 	-webkit-border-radius: 1em;
 }
-.headerSortDown .roundedCorners {
+.tablesorter-headerSortDown .roundedCorners {
 	border-color: #fff;
 }
 </style>

diff --git a/docs/index.html b/docs/index.html
@@ -403,12 +403,12 @@ <h1>Configuration</h1>
 			<tr id="cssasc">
 				<td><a href="#" class="toggle2">cssAsc</a></td>
 				<td>String</td>
-				<td>"headerSortUp"</td>
+				<td>"tablesorter-headerSortUp"</td>
 				<td>The CSS style used to style the header when sorting ascending.  Example from the blue skin:
 					<div class="collapsible">
-						<pre class="css">th.headerSortUp {
-  background-image: url(../img/small_asc.gif);
-  background-color: #3399FF;
+						<pre class="css">th.tablesorter-headerSortUp {
+  background-color: #8dbdd8;
+  background-image: url(black-asc.gif);
 }</pre></div>
 				</td>
 				<td></td>
@@ -472,12 +472,12 @@ <h1>Configuration</h1>
 			<tr id="cssdesc">
 				<td><a href="#" class="toggle2">cssDesc</a></td>
 				<td>String</td>
-				<td>"headerSortDown"</td>
+				<td>"tablesorter-headerSortDown"</td>
 				<td>The CSS style used to style the header when sorting descending.  Example from the blue skin:
 					<div class="collapsible">
-						<pre class="css">th.headerSortDown {
-  background-image: url(../img/small_desc.gif);
-  background-color: #3399FF;
+						<pre class="css">th.tablesorter-headerSortDown {
+  background-color: #8dbdd8;
+  background-image: url(black-desc.gif);
 }</pre></div>
 				</td>
 				<td></td>
@@ -486,18 +486,18 @@ <h1>Configuration</h1>
 			<tr id="cssheader">
 				<td><a href="#" class="toggle2">cssHeader</a></td>
 				<td>String</td>
-				<td>"header"</td>
+				<td>"tablesorter-header"</td>
 				<td>The CSS style used to style the header in its unsorted state.  Example from the blue skin:
 					<div class="collapsible">
-						<pre class="css">th.header {
-  background-image: url(../img/small.gif);
-  cursor: pointer;
-  font-weight: bold;
+						<pre class="css">th.tablesorter-header {
+  background-color: #e6eeee;
+  background-image: url(black-bg.gif);
   background-repeat: no-repeat;
-  background-position: center left;
-  padding-left: 20px;
-  border-right: 1px solid #dad9c7;
-  margin-left: -1px;
+  background-position: center right;
+  border-collapse: collapse;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 4px 20px 4px 4px;
 }</pre></div>
 				</td>
 				<td></td>
@@ -564,7 +564,7 @@ <h1>Configuration</h1>
 			<tr id="headerlist">
 				<td>headerList</td>
 				<td>Array</td>
-				<td>[] (empty array)</td>
+				<td>[ ] (empty array)</td>
 				<td>Internal list of each header element as selected using jQuery selectors in the <a href="#selectorheaders"><code class="hilight">selectorHeaders</code></a> option. Not really useful for normal usage.</td>
 				<td></td>
 			</tr>
@@ -647,7 +647,7 @@ <h1>Configuration</h1>
 			<tr id="parsers">
 				<td><a href="#" class="toggle2">parsers</a></td>
 				<td>Object</td>
-				<td>{}</td>
+				<td>{ }</td>
 				<td>Internal list of all of the parsers. Here is a complete list of default parsers:
 					<div class="collapsible">
 					<br>
@@ -865,7 +865,7 @@ <h1>Configuration</h1>
 			<tr id="widgets">
 				<td>widgets</td>
 				<td>Array</td>
-				<td>[] (empty array)</td>
+				<td>[ ] (empty array)</td>
 				<td>
 					Initialize widgets using this option ( e.g. <code class="hilight">widgets : ['zebra']</code>, or custom widgets <code class="hilight">widgets: ['zebra', 'myCustomWidget'];</code>, see <a href="example-widgets.html">this demo</a> on how to write your own custom widget ).
 				</td>
@@ -886,7 +886,7 @@ <h1>Configuration</h1>
 			<tr id="widgetoptions">
 				<td><a href="#" class="toggle2">widgetOptions</a></td>
 				<td>Object</td>
-				<td>{}</td>
+				<td>{ }</td>
 				<td>
 					As of version 2.1, all widget options have been moved into this option. This is a move to store all widget specific options in one place so as not to polute the main table options. All current widgets have been modified to use this new option. <span class="tip"><em>New!</em></span> in v2.1.
 					<div class="collapsible">
@@ -1485,7 +1485,7 @@ <h1>Download</h1>
 
 	<strong id="Download-Addons">Optional / Add-Ons:</strong>
 	<ul>
-		<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (3,7kb, required for setting <a href="#Examples">inline options</a>)</li>
+		<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (6kb, required for setting <a href="#Examples">inline options</a>)</li>
 		<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (30kb/<a href="../js/jquery.tablesorter.min.js">17kb min</a>)</li>
 		<li><a href="../addons/pager/jquery.tablesorter.pager.js">jquery.tablesorter.pager.js</a> (14kb/<a href="../addons/pager/jquery.tablesorter.pager.min.js">7kb min</a>, <a href="example-pager.html">demo</a>)</li>
 		<li><a href="../js/jquery.tablesorter.widgets.js">jquery.tablesorter.widgets.js</a> (15kb/<a href="../js/jquery.tablesorter.widgets.min.js">7kb min</a>, includes the jQuery UI theme, columns styling, resizable columns, filter, sticky header and save sort widgets. <span class="tip"><em>Updated!</em></span> in v2.1.)</li>

diff --git a/js/jquery.tablesorter.js b/js/jquery.tablesorter.js
@@ -1,5 +1,5 @@
 /*!
-* TableSorter 2.1.6 - Client-side table sorting with ease!
+* TableSorter 2.1.7 - Client-side table sorting with ease!
 * @requires jQuery v1.2.6+
 *
 * Copyright (c) 2007 Christian Bach
@@ -18,13 +18,13 @@
 	$.extend({
 		tablesorter: new function(){
 
-			this.version = "2.1.6";
+			this.version = "2.1.7";
 
 			var parsers = [], widgets = [], tbl;
 			this.defaults = {
-				cssHeader: "header",
-				cssAsc: "headerSortUp",
-				cssDesc: "headerSortDown",
+				cssHeader: "tablesorter-header",
+				cssAsc: "tablesorter-headerSortUp",
+				cssDesc: "tablesorter-headerSortDown",
 				cssChildRow: "expand-child",
 				sortInitialOrder: "asc",
 				sortMultiSortKey: "shiftKey",
@@ -347,12 +347,12 @@
 					time = new Date();
 				}
 				$tableHeaders = $(c.selectorHeaders, table)
-				.wrapInner("<span/>")
+				.wrapInner("<div class='tablesorter-header-inner' />")
 				.each(function (index) {
 					this.column = header_index[this.parentNode.rowIndex + "-" + this.cellIndex];
 					this.order = formatSortingOrder( checkHeaderOrder(table, index) ) ? [1,0,2] : [0,1,2];
 					this.count = -1; // set to -1 because clicking on the header automatically adds one
-					if (checkHeaderMetadata(this) || checkHeaderOptions(table, index) || $(this).is('.sorter-false')) { this.sortDisabled = true; }
+					if (checkHeaderMetadata(this) || checkHeaderOptions(table, index) || $(this).hasClass('sorter-false')) { this.sortDisabled = true; }
 					this.lockedOrder = false;
 					lock = checkHeaderLocked(table, index);
 					if (typeof(lock) !== 'undefined' && lock !== false) {
@@ -364,7 +364,7 @@
 					}
 					// add cell to headerList
 					c.headerList[index] = this;
-					$(this).parent().addClass('tablesorter-header');
+					$(this).parent().addClass(c.cssHeader);
 				});
 				if (c.debug) {
 					benchmark("Built headers", time);

diff --git a/js/jquery.tablesorter.min.js b/js/jquery.tablesorter.min.js