From 46f2561f324be9bcacc6def2ba4406bfadaddf81 Mon Sep 17 00:00:00 2001
From: Mottie <wowmotty@gmail.com>
Date: Wed, 18 Jun 2014 14:37:24 -0500
Subject: [PATCH] Scroller: behaves properly with overflow scroll & column
 alignment. Fixes #340 & #333

---
 docs/example-widget-scroller.html | 24 +++++++++-
 docs/index.html                   |  2 +-
 js/widgets/widget-scroller.js     | 77 ++++++++++++++++++-------------
 3 files changed, 69 insertions(+), 34 deletions(-)

diff --git a/docs/example-widget-scroller.html b/docs/example-widget-scroller.html
index a06ca06f..e596de05 100644
--- a/docs/example-widget-scroller.html
+++ b/docs/example-widget-scroller.html
@@ -30,6 +30,14 @@
 	<script src="../js/jquery.tablesorter.widgets.js"></script>
 	<script src="../js/widgets/widget-scroller.js"></script>
 
+	<style id="css">.name { width: 20%; }
+.major { width: 35%; }
+.sex { width: 16%; }
+.english{ width: 8%; }
+.japanese { width: 8%; }
+.calculus { width: 8%; }
+.geometry { width: 100px; }</style>
+
 	<script id="js">$(function(){
 
 	$("table").tablesorter({
@@ -104,6 +112,13 @@ $(function() {
 	<p class="tip">
 		<em>NOTE!</em>
 		<ul>
+			<li>In <span class="version">v2.17.2</span>
+				<ul>
+					<li>The scroller widget will now work properly with predefined column widths.</li>
+					<li>Shrinking the browser window will now hide the header overflow.</li>
+					<li>Horizontal scrolling of the table body will now properly horizontally scroll the header.</li>
+				</ul>
+			</li>
 			<li>This widget can not be applied to the original plugin and requires jQuery version 1.4+ to function properly; if you need to make it work with older versions of jQuery and the plugin, please use <a href="http://tconnell.com/samples/scroller/">this version</a> of the widget.</li>
 			<li>This widget was originally written by <a href="http://tconnell.com/samples/scroller/">Connell & Associates, Inc.</a> and is dual-licensed under the MIT and GPL licenses. It has been modified to work with tablesorter version 2.9+.</li>
 			<li>Scroller widget options include:
@@ -134,7 +149,14 @@ $(function() {
 
 	<table class="tablesorter">
 	<thead>
-		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
+		<tr>
+			<th class="name">Name</th>
+			<th class="major">Major</th><th>Sex</th>
+			<th class="english">English</th>
+			<th class="japanese">Japanese</th>
+			<th class="calculus">Calculus</th>
+			<th class="geometry filter-false sorter-false">Geometry</th>
+		</tr>
 	</thead>
 	<tfoot>
 		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
diff --git a/docs/index.html b/docs/index.html
index 6fdf5594..03d7dbbc 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -505,7 +505,7 @@
 		<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.9</span>)</li>
 		<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.15.12</span>)</li>
 		<li><span class="results">&dagger;</span> <a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
-		<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.17.0</span>).</li>
+		<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.17.2</span>).</li>
 		<li><span class="label label-info">Beta</span> <a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>).</li>
 		<li><span class="results">&dagger;</span> <a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.16.2</span>)</li>
 		<li><a href="example-widget-css-sticky-header.html">Sticky header (css3) widget</a> (<span class="version">v2.14.2</span>; <span class="version updated">v2.16.4</span>).</li>
diff --git a/js/widgets/widget-scroller.js b/js/widgets/widget-scroller.js
index a8b29bed..b7e5278f 100644
--- a/js/widgets/widget-scroller.js
+++ b/js/widgets/widget-scroller.js
@@ -53,8 +53,12 @@ ts.window_resize = function(){
 // Add extra scroller css
 $(function(){
 	var s = '<style>' +
+		'.tablesorter-scroller-reset { width: auto !important; } ' +
+		'.tablesorter-scroller { text-align: left; overflow: hidden;  }' +
+		'.tablesorter-scroller-header { overflow: hidden; }' +
 		'.tablesorter-scroller-header table.tablesorter { margin-bottom: 0; }' +
-		'.tablesorter-scroller-table table.tablesorter { margin-top: 0; } ' + 
+		'.tablesorter-scroller-table { overflow-y: scroll; }' +
+		'.tablesorter-scroller-table table.tablesorter { margin-top: 0; overflow: scroll; } ' +
 		'.tablesorter-scroller-table .tablesorter-filter-row, .tablesorter-scroller-table tfoot { display: none; }' +
 		'.tablesorter-scroller-table table.tablesorter thead tr.tablesorter-headerRow * {' +
 			'line-height:0;height:0;border:none;background-image:none;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;overflow:hidden;' +
@@ -73,22 +77,20 @@ ts.addWidget({
 	},
 	init: function(table, thisWidget, c, wo){
 		var $win = $(window);
-		//Setup window.resizeEnd event
+		// Setup window.resizeEnd event
 		$win
 			.bind('resize', ts.window_resize)
 			.bind('resizeEnd', function() {
 				// init is run before format, so scroller_resizeWidth
 				// won't be defined within the "c" or "wo" parameters
 				if (typeof table.config.widgetOptions.scroller_resizeWidth === 'function') {
-					//IE calls resize when you modify content, so we have to unbind the resize event
-					//so we don't end up with an infinite loop. we can rebind after we're done.
+					// IE calls resize when you modify content, so we have to unbind the resize event
+					// so we don't end up with an infinite loop. we can rebind after we're done.
 					$win.unbind('resize', ts.window_resize);
 					table.config.widgetOptions.scroller_resizeWidth();
 					$win.bind('resize', ts.window_resize);
 				}
 			});
-		// required css definition
-		$('body').append('<style>.ts-scroller-reset { width: auto !important; }</style>');
 	},
 	format: function(table, c, wo) {
 		var h, $hdr, id, t, resize, $cells,
@@ -99,11 +101,11 @@ ts.addWidget({
 			h = wo.scroller_height || 300;
 			t = $tbl.find('tbody').height();
 			if (t !== 0 && h > t) { h = t + 10; }  // Table is less than h px
-			id = wo.scroller_id = wo.scroller_idPrefix + Math.floor(Math.random() * 101);
+			id = wo.scroller_id = wo.scroller_idPrefix + Math.floor(Math.random() * 1001);
 
 			$hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $tbl.find('thead:first').html() + '</thead></table>');
 			$tbl
-				.wrap('<div id="' + id + '" class="tablesorter-scroller" style="text-align:left;" />')
+				.wrap('<div id="' + id + '" class="tablesorter-scroller" />')
 				.before($hdr)
 				.find('.tablesorter-filter-row').addClass('hideme');
 
@@ -111,7 +113,7 @@ ts.addWidget({
 				.wrap('<div class="tablesorter-scroller-header" style="width:' + $tbl.width() + ';" />')
 				.find('.' + ts.css.header);
 
-			$tbl.wrap('<div class="tablesorter-scroller-table" style="height:' + h + 'px;width:' + $tbl.width() + ';overflow-y:scroll;" />');
+			$tbl.wrap('<div class="tablesorter-scroller-table" style="height:' + h + 'px;width:' + $tbl.width() + ';" />');
 
 			// make scroller header sortable
 			ts.bindEvents(table, $cells);
@@ -122,48 +124,57 @@ ts.addWidget({
 			}
 
 			resize = function(){
-				var d, b,
-					//Hide other scrollers so we can resize
+				var d, b, $h, $th, w,
+					// Hide other scrollers so we can resize
 					$div = $('div.scroller[id != "' + id + '"]').hide();
 
 				$tbl.find('thead').show();
 
-				//Reset sizes so parent can resize.
+				// Reset sizes so parent can resize.
 				$tbl
-					.addClass('ts-scroller-reset')
-					.find('thead').find('.tablesorter-header-inner').addClass('ts-scroller-reset');
+					.addClass('tablesorter-scroller-reset')
+					.find('thead').find('.tablesorter-header-inner').addClass('tablesorter-scroller-reset');
 				d = $tbl.parent();
-				d.addClass('ts-scroller-reset');
+				d.addClass('tablesorter-scroller-reset');
 
 				d.parent().trigger('resize');
+
 				// Shrink a bit to accommodate scrollbar
 				d.width( d.parent().innerWidth() - ( d.parent().hasScrollBar() ? wo.scroller_barWidth : 0 ) );
+				w = d.innerWidth() - ( d.hasScrollBar() ? wo.scroller_barWidth : 0 );
+				$tbl.width( w );
+				$hdr.width( w );
+				$hdr.parent().width( w );
 
-				$tbl.width( d.innerWidth() - ( d.hasScrollBar() ? wo.scroller_barWidth : 0 ) );
-
-				$tbl.parent().find('.ts-scroller-reset').removeClass('ts-scroller-reset');
+				$tbl.closest('.tablesorter-scroller').find('.tablesorter-scroller-reset').removeClass('tablesorter-scroller-reset');
 
+				// include left & right border widths
 				b = parseInt( $tbl.css('border-left-width'), 10 ) + parseInt( $tbl.css('border-right-width'), 10 );
+				$h = $hdr.find('thead').children().children();
 
-				$tbl.find('thead').find('th,td').filter(':visible').each(function(i, c){
-					var $th = $(c).find('.tablesorter-header-inner'),
-					// wrap in browser detect??
-					w = parseInt( $th.css('min-width').replace('auto', '0').replace(/(px|em)/, ''), 10 );
-					if ( $th.width() < w ) {
-						$th.width(w);
-					} else {
-						w = $th.width();
+				// adjust cloned header to match original table width - includes wrappers, headers, and header inner div
+				$tbl.find('thead').children().children().each(function(i, c){
+					$th = $(c).find('.tablesorter-header-inner');
+					if ($th.length) {
+						// I have no idea why this is in here anymore LOL
+						w = parseInt( $th.css('min-width').replace('auto', '0').replace(/(px|em)/, ''), 10 );
+						if ( $th.width() < w ) {
+							$th.width(w);
+						} else {
+							w = $th.width();
+						}
+						$h.eq(i)
+							.find('.tablesorter-header-inner').width(w - b)
+							// set inner width first
+							.parent()
+							.width( $th.parent().width() - b )
 					}
-					$hdr.find('th,td').filter(':visible').eq(i).find('.tablesorter-header-inner').width(w - b);
 				});
 
-				$hdr.width($tbl.innerWidth());
-				$hdr.parent().width($tbl.innerWidth());
-
 				$div.show();
 			};
 
-			//Expose to external calls
+			// Expose to external calls
 			wo.scroller_resizeWidth = resize;
 
 			resize();
@@ -172,6 +183,7 @@ ts.addWidget({
 			c.isScrolling = true;
 
 			t = $tbl.parent().parent().height();
+
 			// The header will always jump into view if scrolling the table body
 			$tbl.parent().bind('scroll', function(){
 				if (wo.scroller_jumpToHeader) {
@@ -180,11 +192,12 @@ ts.addWidget({
 						$win.scrollTop( $hdr.offset().top );
 					}
 				}
+				$hdr.parent().scrollLeft( $(this).scrollLeft() );
 			});
 
 		}
 
-		//Sorting, so scroll to top
+		// Sorting, so scroll to top
 		$tbl.parent().animate({ scrollTop: 0 }, 'fast');
 
 	},