From 97f657ac3bacab1f44526a4b85687a3964c87a17 Mon Sep 17 00:00:00 2001 From: Mottie Date: Mon, 8 Apr 2013 00:40:39 -0500 Subject: [PATCH] Added scroller widget --- docs/example-widget-scroller.html | 221 +++++++++++++++++++++++++++ js/widgets/widget-scroller.js | 240 ++++++++++++++++++++++++++++++ test.html | 4 +- 3 files changed, 464 insertions(+), 1 deletion(-) create mode 100644 docs/example-widget-scroller.html create mode 100644 js/widgets/widget-scroller.js diff --git a/docs/example-widget-scroller.html b/docs/example-widget-scroller.html new file mode 100644 index 00000000..db335f9a --- /dev/null +++ b/docs/example-widget-scroller.html @@ -0,0 +1,221 @@ + + + + + jQuery plugin: Tablesorter 2.0 - Scroller Widget + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

+ NOTE! +

+

+ +

Javascript

+
+ 

+	

+
+	
Demo

+	Choose Theme:
+	

+	

+	 scroller_jumpToHeader : true (see the note above)*
+	

+
+	
+	
+		
+	
+	
+		
+	
+	
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+	
+	
NameMajorSexEnglishJapaneseCalculusGeometry
NameMajorSexEnglishJapaneseCalculusGeometry
Student01Languagesmale80707580
Student02Mathematicsmale908810090
Student03Languagesfemale85958085
Student04Languagesmale6055100100
Student05Languagesfemale68809580
Student06Mathematicsmale1009910090
Student07Mathematicsmale85689090
Student08Languagesmale100909085
Student09Mathematicsmale80506575
Student10Languagesmale8510010090
Student11Languagesmale8685100100
Student12Mathematicsfemale100757085
Student13Languagesfemale1008010090
Student14Languagesfemale50455590
Student15Languagesmale953510090
Student16Languagesfemale100503070
Student17Languagesfemale801005565
Student18Mathematicsmale30495575
Student19Languagesmale68908870
Student20Mathematicsmale40454080
Student21Languagesmale5045100100
Student22Mathematicsmale1009910090
Student23Languagesfemale85808080
student23Mathematicsmale8277079
student24Languagesfemale100911382
student25Mathematicsmale22968253
student26Languagesfemale37295659
student27Mathematicsmale86826923
student28Languagesfemale4425431
student29Mathematicsmale77472238
student30Languagesfemale19352310
student31Mathematicsmale90271750
student32Languagesfemale60753338
student33Mathematicsmale4313715
student34Languagesfemale77978144
student35Mathematicsmale5815195
student36Languagesfemale70617094
student37Mathematicsmale6036184
student38Languagesfemale6339011
student39Mathematicsmale50463238
student40Languagesfemale5175253
student41Mathematicsmale43342878
student42Languagesfemale11896095
student43Mathematicsmale48921888
student44Languagesfemale8225973
student45Mathematicsmale91733739
student46Languagesfemale481210
student47Mathematicsmale8910611
student48Languagesfemale90322118
student49Mathematicsmale42494972
student50Languagesfemale56376754

+
+	

+	
+		
+			
+		
+		
+			
+			
+			
+			
+			
+			
+			
+			
+			
+			
+			
+			
+			
+			
+			
+		
+	
Account #First NameLast NameAgeTotalDiscountDiff
A43PeterParker289.9920.3%+3
A255JohnHood3319.9925.1%-7
A33ClarkKent1815.4944.2%-13
A11BruceAlmighty45153.1944%+19
A102BruceEvans56153.1923%+9
A23MikePeters225.6920.3%+2
A55LeslieKent3315.9925.1%-3
A3FrankMint4412.5944.2%-12
A21JoeThomas4515.2544%+12
A12TessEvans6613.5923%+4
A21PeterDunn122.9921.1%+2
A33HarryJones1319.4922.2%-6
A13JohnJames1613.8942.1%-13
A71NickParker4513.8944%+29
A21CharlesDunn1915.4922%+3

+	

+
+	

+
+

+
+
+
diff --git a/js/widgets/widget-scroller.js b/js/widgets/widget-scroller.js
new file mode 100644
index 00000000..5e9b7339
--- /dev/null
+++ b/js/widgets/widget-scroller.js
@@ -0,0 +1,240 @@
+/*!
+	Copyright (C) 2011 T. Connell & Associates, Inc.
+
+	Dual-licensed under the MIT and GPL licenses
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+	MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+	FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+	WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+	Resizable scroller widget for the jQuery tablesorter plugin
+
+	Version 2.0 - modified by Rob Garrison (4/4/2013)
+	Requires jQuery, v1.2.3 or higher
+	Requires the tablesorter plugin, v2.0 or higher, available at http://mottie.github.com/tablesorter/docs/
+
+	Usage:
+
+		$(function() {
+
+			$('table.tablesorter').tablesorter({
+				widgets: ['zebra', 'scroller'],
+				widgetOptions : {
+					scroller_height       : 300,  // height of scroll window
+					scroller_barWidth     : 17,   // scroll bar width
+					scroller_jumpToHeader : true, // header snap to browser top when scrolling the tbody
+					scroller_idPrefix     : 's_'  // cloned thead id prefix (random number added to end)
+				}
+			});
+
+		});
+
+	Website: www.tconnell.com
+*/
+/*jshint browser:true, jquery:true, unused:false */
+;(function($){
+"use strict";
+
+$.fn.hasScrollBar = function(){
+	return this.get(0).scrollHeight > this.height();
+};
+
+$.tablesorter.window_resize = function(){
+	if (this.resize_timer) {
+		clearTimeout(this.resize_timer); 
+	}
+	this.resize_timer = setTimeout(function(){
+		$(this).trigger('resizeEnd');
+	}, 250);
+};
+
+// Add extra scroller css
+$(function(){
+	var s = '';
+	$(s).appendTo('body');
+});
+
+$.tablesorter.addWidget({
+	id: 'scroller',
+	priority: 60, // run after the filter widget
+	options: {
+		scroller_height : 300,
+		scroller_barWidth : 17,
+		scroller_jumpToHeader: true,
+		scroller_idPrefix : 's_'
+	},
+	init: function(table, thisWidget, c, wo){
+		var $win = $(window);
+		//Setup window.resizeEnd event
+		$win
+			.bind('resize', $.tablesorter.window_resize)
+			.bind('resizeEnd', function(e) {
+				// 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.
+					$win.unbind('resize', $.tablesorter.window_resize);
+					table.config.widgetOptions.scroller_resizeWidth();
+					$win.bind('resize', $.tablesorter.window_resize);
+				}
+			});
+	},
+	format: function(table, c, wo) {
+		var h, $hdr, id, t, resize, $cells,
+			$win = $(window),
+			$tbl = c.$table,
+			flag = false,
+			filterInputs = 'input, select';
+
+		if (!c.isScrolling) {
+			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);
+
+			$hdr = $('' + $tbl.find('thead:first').html() + '
');
+			$tbl
+				.wrap('
')
+				.before($hdr)
+				.find('.tablesorter-filter-row').addClass('hideme');
+
+			$cells = $hdr
+				.wrap('
')
+				.find('.' + c.cssHeader)
+				.bind('mousedown', function(){
+					this.onselectstart = function(){ return false; };
+					return false;
+				});
+
+			$tbl
+				.wrap('
')
+				.unbind('sortEnd.tsScroller')
+				.bind('sortEnd.tsScroller', function(){
+					c.$headers.each(function(i){
+						var t = $cells.eq(i);
+						t
+							.attr('class', $(this).attr('class'))
+							// remove processing icon
+							.removeClass(c.cssProcessing);
+						if (c.cssIcon){
+							t
+								.find('.' + c.cssIcon)
+								.attr('class', $(this).find('.' + c.cssIcon).attr('class'));
+						}
+					});
+				});
+
+			// make scroller header sortable
+			c.$headers.find('*')[ $.fn.addBack ? 'addBack': 'andSelf' ]().filter(c.selectorSort).each(function(i){
+				var t = $(this);
+				$cells.eq(i)
+				// clicking on new header will trigger a sort
+				.bind('mouseup', function(e){
+					t.trigger(e, true); // external mouseup flag (click timer is ignored)
+				})
+				// prevent header text selection
+				.bind('mousedown', function(){
+					this.onselectstart = function(){ return false; };
+					return false;
+				});
+			});
+
+			// look for filter widget
+			$tbl.bind('filterEnd', function(){
+				if (flag) { return; }
+				$cells.each(function(i){
+					$(this).find(filterInputs).val( c.$filters.find(filterInputs).eq(i).val() );
+				});
+			});
+			$hdr.find(filterInputs).bind('keyup search', function(e){
+				// ignore arrow and meta keys; allow backspace
+				if ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40)) { return; }
+				flag = true;
+				var $f = $(this), col = $f.attr('data-column');
+				c.$filters.find(filterInputs).eq(col)
+					.val( $f.val() )
+					.trigger('search');
+				setTimeout(function(){
+					flag = false;
+				}, wo.filter_searchDelay);
+			});
+
+			resize = function(){
+				var d,
+					//Hide other scrollers so we can resize
+					$div = $('div.scroller[id != "' + id + '"]').hide();
+
+				$tbl.find('thead').show();
+
+				//Reset sizes so parent can resize.
+				$hdr
+					.width(0)
+					.parent().width(0)
+					.find('th,td').width(0);
+
+				$tbl
+					.width(0)
+					.find('thead').find('th,td').width(0);
+				d = $tbl.parent();
+				d.width(0);
+
+				d.parent().trigger('resize');
+				// Shrink a bit to accommodate scrollbar
+				d.width( d.parent().innerWidth() - ( d.parent().hasScrollBar() ? wo.scroller_barWidth : 0 ) );
+
+				$tbl.width( d.innerWidth() - ( d.hasScrollBar() ? wo.scroller_barWidth : 0 ) );
+				$tbl.find('thead').find('th,td').filter(':visible').each(function(i, c){
+					var $th = $(c),
+					//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();
+					}
+					$hdr.find('th,td').eq(i).width(w);
+				});
+
+				$hdr.width($tbl.innerWidth());
+				$div.show();
+			};
+
+			//Expose to external calls
+			wo.scroller_resizeWidth = resize;
+
+			resize();
+
+			$tbl.find('thead').css('visibility', 'hidden');
+			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) {
+					var pos = $win.scrollTop() - $hdr.offset().top;
+					if ($(this).scrollTop() !== 0 && pos < t && pos > 0) {
+						$win.scrollTop( $hdr.offset().top );
+					}
+				}
+			});
+
+		}
+
+		//Sorting, so scroll to top
+		$tbl.parent().animate({ scrollTop: 0 }, 'fast');
+
+	},
+	remove : function(table, c, wo){
+
+	}
+	});
+
+})(jQuery);
diff --git a/test.html b/test.html
index 104ffca1..e1afd81f 100644
--- a/test.html
+++ b/test.html
@@ -45,8 +45,10 @@
 		************************************************/
 		// Run JSHint on main js files
 		tester.jsHintTest('JSHint core', 'js/jquery.tablesorter.js');
-		tester.jsHintTest('JSHint widgets', 'js/jquery.tablesorter.widgets.js');
 		tester.jsHintTest('JSHint pager', 'addons/pager/jquery.tablesorter.pager.js');
+		tester.jsHintTest('JSHint widgets', 'js/jquery.tablesorter.widgets.js');
+		tester.jsHintTest('JSHint group widget', 'js/widgets/widget-grouping.js');
+		tester.jsHintTest('JSHint scroller widget', 'js/widgets/widget-scroller.js');
 
 		/************************************************
 			Initialization