Made tablesorter work without inline-js

Signed-off-by: Roman Schmerold (BNoiZe) <bnoize@froxlor.org>

js/plugins/jquery.tablesorter.sizeparser.min.js

@@ -0,0 +1,23 @@
+$.tablesorter.addParser({
+	id: 'filesize',
+	is: function(s) {
+		return s.match(new RegExp(/[0-9]+(\.[0-9]+)?\ (KiB|B|GiB|MiB|TiB)/));
+	},
+	format: function(s) {
+		var suf = s.match(new RegExp(/(KiB|B|GiB|MiB|TiB)/))[1];
+		var num = parseFloat(s.match(new RegExp(/^[0-9]+(\.[0-9]+)?/))[0]);
+		switch (suf) {
+		case 'B':
+			return num;
+		case 'KiB':
+			return num * 1024;
+		case 'MiB':
+			return num * 1024 * 1024;
+		case 'GiB':
+			return num * 1024 * 1024 * 1024;
+		case 'TiB':
+			return num * 1024 * 1024 * 1024 * 1024;
+		}
+	},
+	type: 'numeric'
+});

templates/Sparkle/admin/traffic/index.tpl

@@ -1,37 +1,10 @@
 $header
-	<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
+	<article>
-	<script type="text/javascript">
+		<header>
-		$.tablesorter.addParser( {
+			<h2>
-			id: 'filesize',
+				<img src="templates/{$theme}/assets/img/icons/traffic_big.png" alt="{$lng['admin']['traffic']}" />&nbsp;{$lng['admin']['traffic']} &nbsp;
-			is: function(s) {
+			</h2>
-				return s.match( new RegExp( /[0-9]+(\.[0-9]+)?\ (KiB|B|GiB|MiB|TiB)/ ) );
+		</header>
-			},
+		{$stats_tables}
-			format: function(s) {
+	</article>
-				var suf = s.match( new RegExp( /(KiB|B|GiB|MiB|TiB)/) )[1];
-				var num = parseFloat( s.match( new RegExp( /^[0-9]+(\.[0-9]+)?/ ) )[0] );
-				switch( suf ) {
-					case 'B':
-						return num;
-					case 'KiB':
-						return num * 1024;
-					case 'MiB':
-						return num * 1024 * 1024;
-					case 'GiB':
-						return num * 1024 * 1024 * 1024;
-					case 'TiB':
-						return num * 1024 * 1024 * 1024 * 1024;
-				}
-			},
-			type: 'numeric'
-		});
-	</script>
-		<article>
-			<header>
-				<h2>
-					<img src="templates/{$theme}/assets/img/icons/traffic_big.png" alt="{$lng['admin']['traffic']}" />&nbsp;{$lng['admin']['traffic']} &nbsp;
-				</h2>
-			</header>
-			{$stats_tables}
-		</article>
-	</div>
 $footer

templates/Sparkle/admin/traffic/index_table.tpl

@@ -1,6 +1,6 @@
 	<h3>{$lng['traffic']['trafficoverview']}&nbsp;{$overview['type']}&nbsp;{$overview['year']}</h3>
 	<section>
-	<table class="full" id="stats{$overview['year']}">
+	<table class="full" id="stats{$overview['year']}" data-toggle="table">
 		<thead>
 			<tr>
 				<th>{$overview['type']}</th>
@@ -26,38 +26,5 @@
 		</tfoot>
 	</table>
 	</section>
-	<script type="text/javascript">
-		var myTextExtraction = function(node)  
-		{  
-		    // extract data from markup and return it  
-		    if(node.innerHTML != '-') {
-			return 1 + node.innerHTML.substr(0,node.innerHTML.length); 
-		    } else {
-			return '0 B';
-		    }
-		} 
-		$(document).ready(function() 
-		{ 
-			$("#stats{$overview['year']}").tablesorter( {
-				textExtraction: myTextExtraction,
-				headers: {
-					1: {sorter: 'filesize'},
-					2: {sorter: 'filesize'},
-					3: {sorter: 'filesize'},
-					4: {sorter: 'filesize'},
-					5: {sorter: 'filesize'},
-					6: {sorter: 'filesize'},
-					7: {sorter: 'filesize'},
-					8: {sorter: 'filesize'},
-					9: {sorter: 'filesize'},
-					10: {sorter: 'filesize'},
-					11: {sorter: 'filesize'},
-					12: {sorter: 'filesize'}
-				},
-			});
-		} 
-		); 
-	</script>
 	<br />
 	<br />
-

templates/Sparkle/assets/css/main.css

@@ -1044,6 +1044,26 @@ div.right {
 	margin-left: 50%;
 }
 
+/* TABLESORTER */
+.tablesorter-header-inner {
+	margin-left: 15px;
+}
+table thead th.tablesorter-headerUnSorted {
+	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+	background-repeat: no-repeat;
+	background-position: left center;
+}
+table thead th.tablesorter-headerAsc {
+	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+	background-repeat: no-repeat;
+	background-position: left center;
+}
+table thead th.tablesorter-headerDesc {
+	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+	background-repeat: no-repeat;
+	background-position: left center;
+}
+
 /* PROGRESS */
 .bar[aria-valuemax="100"][aria-valuemin="0"][aria-valuenow="0"] {
   width: 0%;

templates/Sparkle/assets/js/main.js

@@ -1,10 +1,9 @@
 function twoDigits(value) {
-   if(value < 10) {
+	if (value < 10) {
-    return '0' + value;
+		return '0' + value;
-   }
+	}
-   return value;
+	return value;
 }
-
 $(document).ready(function() {
 	// Scroll to top
 	$(window).scroll(function() {
@@ -14,18 +13,17 @@ $(document).ready(function() {
 			$('.scrollup').fadeOut();
 		}
 	});
-	
 	$('.scrollup').click(function() {
-		$("html, body").animate({ scrollTop: 0 }, 600);
+		$("html, body").animate({
+			scrollTop: 0
+		}, 600);
 		return false;
 	});
-	
 	// Back buttons
 	$('#historyback, .historyback').click(function() {
 		parent.history.back();
 		return false;
 	});
-	
 	// Load Newsfeed
 	var ajax_load = "<div id='newsitem'>Loading newsfeed...</div>";
 	var role = "";
@@ -37,32 +35,28 @@ $(document).ready(function() {
 			$(window).trigger('resize');
 			$("#newsfeed").slideDown();
 		}
-	});	
+	});
-
 	// Enable Infobubbles
 	$(".tipper").tipper({
 		direction: "right"
 	});
-	
 	// Enable reset search click
 	$(".resetsearch").click(function() {
 		$(".searchtext").val("");
 		$(".submitsearch").click();
 	});
-	
 	// Height of divs fix
 	var snheight = $('#sidenavigation').height();
 	var mainheight = $('#maincontent').height();
 	if (snheight > mainheight && !$('#newsfeed').length) {
 		$('#maincontent').height(snheight);
 	}
-
 	// this is necessary for the special setting feature (ref #1010)
 	$.getQueryVariable = function(key) {
-		var urlParams = decodeURI( window.location.search.substring(1) );
+		var urlParams = decodeURI(window.location.search.substring(1));
-		if(urlParams === false | urlParams === '') return null;
+		if (urlParams === false | urlParams === '') return null;
 		var vars = urlParams.split("&");
-		for (var i=0;i<vars.length;i++) {
+		for (var i = 0; i < vars.length; i++) {
 			var pair = vars[i].split("=");
 			if (pair[0] == key) {
 				return pair[1];
@@ -70,65 +64,85 @@ $(document).ready(function() {
 		}
 		return null;
 	};
-
 	if ($('#speciallogwarningpopup').length) {
-		var $speciallogdialog = $('#speciallogwarningpopup')
+		var $speciallogdialog = $('#speciallogwarningpopup').dialog({
-			.dialog({
+			autoOpen: false,
-				autoOpen: false,
+			closeOnEscape: false,
-				closeOnEscape: false,
+			draggable: false,
-				draggable: false,
+			modal: true,
-				modal: true,
+			resizable: false
-				resizable: false
+		});
-			});
 	}
-	
-
 	// make rel="external" links open in a new window
 	$("a[rel='external']").attr('target', '_blank');
-	
 	// set focus on username-field if on loginpage
 	$("#loginname").focus();
-
 	// Auto-select next field in configfile - wizard
-	$('#config_distribution').change(function (){
+	$('#config_distribution').change(function() {
-		window.location.href=window.location.href + '&distribution=' + this.options[ this.selectedIndex ].value;
+		window.location.href = window.location.href + '&distribution=' + this.options[this.selectedIndex].value;
 	});
-	$('#config_service').change(function (){
+	$('#config_service').change(function() {
-		window.location.href=window.location.href + '&service=' + this.options[ this.selectedIndex ].value;
+		window.location.href = window.location.href + '&service=' + this.options[this.selectedIndex].value;
 	});
-	$('#config_daemon').change(function (){
+	$('#config_daemon').change(function() {
-		window.location.href=window.location.href + '&daemon=' + this.options[ this.selectedIndex ].value;
+		window.location.href = window.location.href + '&daemon=' + this.options[this.selectedIndex].value;
 	});
-
 	// Speciallogfile popup dialog
-    $('input[name=speciallogfile]').click(function () {
+	$('input[name=speciallogfile]').click(function() {
-            if($.getQueryVariable("page") == "domains" && $.getQueryVariable("action") == "edit") {
+		if ($.getQueryVariable("page") == "domains" && $.getQueryVariable("action") == "edit") {
-                    $speciallogdialog.dialog("open");
+			$speciallogdialog.dialog("open");
-                    $(".ui-dialog-titlebar").hide();
+			$(".ui-dialog-titlebar").hide();
-            }
+		}
-    });
+	});
-
+	$('#speciallogyesbutton').click(function() {
-    $('#speciallogyesbutton').click(function () {
+		$speciallogdialog.dialog("close");
-            $speciallogdialog.dialog("close");
+		if ($('#delete_stats').val().toLowerCase() != $('#delete_statistics_str').val().toLowerCase()) {
-            if($('#delete_stats').val().toLowerCase() != $('#delete_statistics_str').val().toLowerCase()) {
+			$("#speciallogverified").val("0");
-                    $("#speciallogverified").val("0");
+			if ($('input[name=speciallogfile]').prop("checked") !== false) {
-                    if($('input[name=speciallogfile]').prop("checked") !== false) {
+				$('input[name=speciallogfile]').attr("checked", false);
-                            $('input[name=speciallogfile]').attr("checked", false);
+			} else {
-                    } else {
+				$('input[name=speciallogfile]').attr("checked", true);
-                            $('input[name=speciallogfile]').attr("checked", true);
+			}
-                    }
+		} else {
-            } else {
+			$("#speciallogverified").val("1");
-                    $("#speciallogverified").val("1");
+		}
-            }
+	});
-    });
+	$('input[id=speciallognobutton]').click(function() {
-
+		$speciallogdialog.dialog("close");
-    $('input[id=speciallognobutton]').click(function () {
+		$("#speciallogverified").val("0");
-            $speciallogdialog.dialog("close");
+		if ($('input[name=speciallogfile]').prop("checked") !== false) {
-            $("#speciallogverified").val("0");
+			$('input[name=speciallogfile]').attr("checked", false);
-            if($('input[name=speciallogfile]').prop("checked") !== false) {
+		} else {
-                    $('input[name=speciallogfile]').attr("checked", false);
+			$('input[name=speciallogfile]').attr("checked", true);
-            } else {
+		}
-                    $('input[name=speciallogfile]').attr("checked", true);
+	});
-            }
+	// Tablesorting on admin traffic
-    });
+	$("table").each(function(index) {
-});
+		if ($(this).data("toggle") == "table") {
+			$(this).tablesorter({
+				textExtraction: (function(node) {
+					// extract data from markup and return it
+					if (node.innerText != '-') {
+						return node.innerText;
+					} else {
+						return '0 B';
+					}
+				}),
+				headers: {
+					1: { sorter: 'filesize' },
+					2: { sorter: 'filesize' },
+					3: { sorter: 'filesize' },
+					4: { sorter: 'filesize' },
+					5: { sorter: 'filesize' },
+					6: { sorter: 'filesize' },
+					7: { sorter: 'filesize' },
+					8: { sorter: 'filesize' },
+					9: { sorter: 'filesize' },
+					10: { sorter: 'filesize' },
+					11: { sorter: 'filesize' },
+					12: { sorter: 'filesize' }
+				},
+			});
+		}
+	});
+});

templates/Sparkle/header.tpl

@@ -9,6 +9,8 @@
 	</if>
 	<script type="text/javascript" src="js/jquery.min.js"></script>
 	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
+	<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
+	<script type="text/javascript" src="js/plugins/jquery.tablesorter.sizeparser.min.js"></script>
 	<!--[if lt IE 9]><script type="text/javascript" src="js/html5shiv.min.js"></script><![endif]-->
 	<if isset($intrafficpage)>
 	<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->