Improved table layout.

ioquatix · ioquatix · commit 8d1d99b99751 · 2010-02-14T17:20:36.000+13:00
diff --git a/jquery.syntax.layout.table.css b/jquery.syntax.layout.table.css
@@ -11,6 +11,10 @@ table.syntax {
 	-webkit-box-shadow: 5px 5px 5px #eee;
 }
 
+table.syntax tr.alt td.source {
+	background-color: #f6f6f6;
+}
+
 table.syntax td {
 	padding-left: 0.4em;
 	padding-right: 0.4em;
@@ -22,5 +26,14 @@ table.syntax td.number {
 	
 	width: 2.5em;
 	color: #555;
-	background-color: #dadada;
+	background-color: #e0e0e0;
+}
+
+table.syntax .toolbar {
+	float: right;
+}
+
+table.syntax .toolbar a {
+	margin-left: 1em;
+	margin-right: 1em;
 }
diff --git a/jquery.syntax.layout.table.js b/jquery.syntax.layout.table.js
@@ -1,22 +1,98 @@
+function createWindow (url, name, width, height, options) {
+	var x = (screen.width - width) / 2, y = (screen.height - height) / 2;
+		
+	//options +=	',left=' + x +
+	//				',top=' + y +
+	//				',width=' + width +
+	//				',height=' + height;
+	//				
+	options = options.replace(/^,/, '');
+
+	var win = window.open(url, name, options);
+	
+	win.focus();
+	
+	return win;
+}
+
 Syntax.layouts.table = function(options, code, container) {
-	var table = $('<table>'), tr = null, td = null;
+	var table = $('<table>'), tr = null, td = null, a = null, toolbar = null
 	var line = 1;
 	
 	table.addClass('syntax');
 	
+	// Toolbar
+	toolbar = document.createElement('div');
+	toolbar.className = "toolbar";
+	
+	a = document.createElement('a');
+	a.href = "#";
+	a.innerHTML = "View Raw Code";
+	
+	a.onclick = function() {
+		var win = createWindow('#', '_blank', 700, 500, 'location=0, resizable=1, menubar=0, scrollbars=1, title=Raw');
+
+		win.document.write('<html><head></head><body><pre class="syntax">' + code.html() + '</pre></body></html>');
+
+		$('link').each(function(){
+			if (this.rel != 'stylesheet') {
+				return;
+			}
+			
+			window.console.log(this.href);
+			var link = $('<link rel="stylesheet">', win.document);
+			
+			link.attr('type', this.type);
+			link.attr('href', this.href);
+			link.attr('media', this.media);
+			
+			$("head", win.document).append(link);
+		});
+		
+		debugger
+		
+		win.document.close();
+		win.document.title = "Raw Source Code";
+	};
+	
+	toolbar.appendChild(a);
+
+	a = document.createElement('a');
+	a.href = "http://www.oriontransfer.co.nz/software/jquery-syntax/";
+	a.innerHTML = "?";
+	toolbar.appendChild(a);
+	
+	// Source code
 	code.children().each(function() {
-		tr = $('<tr>').addClass('line', 'line-' + line);
+		tr = document.createElement('tr');
+		tr.className = "line ln" + line;
+		
+		if (line % 2) {
+			tr.className += " alt";
+		}
 		
-		td = $('<td>').addClass('number').text(line);
-		tr.append(td);
+		td = document.createElement('td');
+		td.className = "number";
+		td.innerHTML = line;
+		tr.appendChild(td);
 		
-		td = $('<td>').addClass('source');
-		td.append(this);
-		tr.append(td);
+		td = document.createElement('td');
+		td.className = "source " + this.className;
+		td.innerHTML = this.innerHTML;
+		tr.appendChild(td);
 		
-		table.append(tr);
+		if (toolbar) {
+			td.appendChild(toolbar);
+			toolbar = null;
+		}
+		
+		table[0].appendChild(tr);
 		line = line + 1;
 	});
 	
+	$('.href', table).each(function(){
+		$(this).replaceWith($('<a>').attr('href', this.innerHTML).text(this.innerHTML));
+	});
+	
 	return table;
-}
+};
