Commits

Wez Furlong committed 13b12b2

experiement with a tablesorter paginator plugin.
Disabled for the moment because there's no simple way to turn it off for
print.

Comments (0)

Files changed (11)

web/css/history.css

+table.history {
+  border-collapse: collapse;
+}
+
+table.history tr {
+  vertical-align: text-top;
+}
+table.history tr th {
+  text-align: left;
+}
+
+table.history tr td.diff {
+  border-bottom: solid 1px #bbb;
+  padding: 1em 4em;
+}
+
+
 div.changesets {
   background-color: #ddd;
 }
   white-space: normal;
 }
 
+div.pager button {
+  height: 16px;
+  width: 16px;
+  border: none;
+  background: transparent;
+  color: transparent;
+}
+
+div.pager button.first {
+  background-image: url(../images/sort/first.png);
+}
+div.pager button.next {
+  background-image: url(../images/sort/next.png);
+}
+div.pager button.prev {
+  background-image: url(../images/sort/prev.png);
+}
+div.pager button.last {
+  background-image: url(../images/sort/last.png);
+}
+
 #wikiview {
   position: absolute;
   left: 0;
     position: relative;
     overflow: visible;
   }
+}
 
+/* vim:ts=2:sw=2:et:
+ */
 
-}

web/images/external.png

Added
New image

web/images/sort/first.png

Added
New image

web/images/sort/last.png

Added
New image

web/images/sort/next.png

Added
New image

web/images/sort/prev.png

Added
New image
   'jquery.MultiFile.pack.js',
   'jquery.cookie.js',
   'jquery.tablesorter.js',
+  'jquery.tablesorter.pager.js',
   'jquery.metadata.js',
   'jquery.markitup.js',
   'jquery.timeago.js',

web/js/jquery.tablesorter.pager.js

+(function($) {
+	$.extend({
+		tablesorterPager: new function() {
+
+			function updatePageDisplay(c) {
+				var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);
+			}
+
+			function setPageSize(table,size) {
+				var c = table.config;
+				c.size = size;
+				c.totalPages = Math.ceil(c.totalRows / c.size);
+				c.pagerPositionSet = false;
+				moveToPage(table);
+				fixPosition(table);
+			}
+
+			function fixPosition(table) {
+				var c = table.config;
+				if(!c.pagerPositionSet && c.positionFixed) {
+					var c = table.config, o = $(table);
+					if(o.offset) {
+						c.container.css({
+							top: o.offset().top + o.height() + 'px',
+							position: 'absolute'
+						});
+					}
+					c.pagerPositionSet = true;
+				}
+			}
+
+			function moveToFirstPage(table) {
+				var c = table.config;
+				c.page = 0;
+				moveToPage(table);
+			}
+
+			function moveToLastPage(table) {
+				var c = table.config;
+				c.page = (c.totalPages-1);
+				moveToPage(table);
+			}
+
+			function moveToNextPage(table) {
+				var c = table.config;
+				c.page++;
+				if(c.page >= (c.totalPages-1)) {
+					c.page = (c.totalPages-1);
+				}
+				moveToPage(table);
+			}
+
+			function moveToPrevPage(table) {
+				var c = table.config;
+				c.page--;
+				if(c.page <= 0) {
+					c.page = 0;
+				}
+				moveToPage(table);
+			}
+
+
+			function moveToPage(table) {
+				var c = table.config;
+				if(c.page < 0 || c.page > (c.totalPages-1)) {
+					c.page = 0;
+				}
+
+				renderTable(table,c.rowsCopy);
+			}
+
+			function renderTable(table,rows) {
+
+				var c = table.config;
+				var l = rows.length;
+				var s = (c.page * c.size);
+				var e = (s + c.size);
+				if(e > rows.length ) {
+					e = rows.length;
+				}
+
+
+				var tableBody = $(table.tBodies[0]);
+
+				// clear the table body
+
+				$.tablesorter.clearTableBody(table);
+
+				for(var i = s; i < e; i++) {
+
+					//tableBody.append(rows[i]);
+
+					var o = rows[i];
+					var l = o.length;
+					for(var j=0; j < l; j++) {
+
+						tableBody[0].appendChild(o[j]);
+
+					}
+				}
+
+				fixPosition(table,tableBody);
+
+				$(table).trigger("applyWidgets");
+
+				if( c.page >= c.totalPages ) {
+        			moveToLastPage(table);
+				}
+
+				updatePageDisplay(c);
+			}
+
+			this.appender = function(table,rows) {
+
+				var c = table.config;
+
+				c.rowsCopy = rows;
+				c.totalRows = rows.length;
+				c.totalPages = Math.ceil(c.totalRows / c.size);
+
+				renderTable(table,rows);
+			};
+
+			this.defaults = {
+				size: 10,
+				offset: 0,
+				page: 0,
+				totalRows: 0,
+				totalPages: 0,
+				container: null,
+				cssNext: '.next',
+				cssPrev: '.prev',
+				cssFirst: '.first',
+				cssLast: '.last',
+				cssPageDisplay: '.pagedisplay',
+				cssPageSize: '.pagesize',
+				seperator: "/",
+				positionFixed: true,
+				appender: this.appender
+			};
+
+			this.construct = function(settings) {
+
+				return this.each(function() {
+
+					config = $.extend(this.config, $.tablesorterPager.defaults, settings);
+
+					var table = this, pager = config.container;
+
+					$(this).trigger("appendCache");
+
+					config.size = parseInt($(".pagesize",pager).val());
+
+					$(config.cssFirst,pager).click(function() {
+						moveToFirstPage(table);
+						return false;
+					});
+					$(config.cssNext,pager).click(function() {
+						moveToNextPage(table);
+						return false;
+					});
+					$(config.cssPrev,pager).click(function() {
+						moveToPrevPage(table);
+						return false;
+					});
+					$(config.cssLast,pager).click(function() {
+						moveToLastPage(table);
+						return false;
+					});
+					$(config.cssPageSize,pager).change(function() {
+						setPageSize(table,parseInt($(this).val()));
+						return false;
+					});
+				});
+			};
+
+		}
+	});
+	// extend plugin scope
+	$.fn.extend({
+        tablesorterPager: $.tablesorterPager.construct
+	});
+
+})(jQuery);
 
 function mtrack_apply_wiki_javascript($ele)
 {
+  var size = 20;
+  var pager_html =
+"<div class='pager'>" +
+"<button class='first'>First</button>" +
+"<button class='prev'>Prev</button>" +
+"<input type='text' readonly='readonly' class='pagedisplay'>" +
+"<button class='next'>Next</button>" +
+"<button class='last'>Last</button>" +
+"<select class='pagesize'>" +
+"      <option value='10'>10</option>" +
+"      <option value='20'>20</option>" +
+"      <option value='30'>30</option>" +
+"      <option value='40'>40</option>" +
+"    </select>" +
+"</div>"
+  ;
+
   $("table.report, table.wiki", $ele).tablesorter({
     textExtraction: function(node) {
       var kid = node.childNodes[0];
       }
       return node.innerHTML;
     }
+  }).each(function () {
+    var tbl = this;
+    /* this works well, but there's no good way to detect if we're
+     * being printed, so we skip it for now */
+    return;
+    if (tbl.tBodies.length && tbl.tBodies[0].rows.length > size) {
+      var p = $(pager_html);
+      $(tbl).after(p);
+      $('.pagesize', p).val(size);
+      $(tbl).tablesorterPager({
+        size: size,
+        container: p,
+        positionFixed: false
+      });
+    }
   });
   function applyhl(name) {
     if (mtrack_hl_color_scheme != '') {
   border: solid 1px red;
 }
 
-table.history {
-  border-collapse: collapse;
-}
-
-table.history tr {
-  vertical-align: text-top;
-}
-table.history tr th {
-  text-align: left;
-}
-
-table.history tr td.diff {
-  border-bottom: solid 1px #bbb;
-  padding: 1em 4em;
-}
-
 table.codeann {
   border-collapse: collapse;
   border: solid 1px #bbb;