automatically wrap lines

Signed-off-by: Florian Pritz <bluewind@xinu.at>

5 files changed, 94 insertions, 50 deletions

diff --git a/application/controllers/file.php b/application/controllers/file.php
index 333602fbf..5bd829713 100644
--- a/application/controllers/file.php
+++ b/application/controllers/file.php
@@ -203,19 +203,43 @@ class File extends CI_Controller {
 	private function _pygmentize($file, $lexer)
 	{
 		$return_value = 0;
+		$output = "";
 
-		ob_start();
+		$output .= '<div class="code content table">'."\n";
+		$output .= '<div class="highlight"><pre>'."\n";
 
-		echo '<table class="content"><tr>';
-		echo '<td class="numbers"><pre>';
-		// generate line numbers (links)
-		passthru('perl -ne \'print "<a href=\"#n$.\" ><span class=\"anchor\" id=\"n$.\"> </span>$.</a>\n"\' '.escapeshellarg($file), $return_value);
-		echo '</pre></td><td class="code">'."\n";
+		ob_start();
 		passthru('pygmentize -F codetagify -O encoding=guess,outencoding=utf8 -l '.escapeshellarg($lexer).' -f html '.escapeshellarg($file), $return_value);
-
-		$output = ob_get_contents();
+		$buf = ob_get_contents();
 		ob_end_clean();
 
+
+		$buf = explode("\n", $buf);
+		$line_count = count($buf);
+
+		// Last 2 items are just "</pre></div>" and ""
+		// We don't need those
+		unset($buf[$line_count - 2]);
+		unset($buf[$line_count - 1]);
+
+		foreach ($buf as $key => $line) {
+			$line_number = $key + 1;
+			if ($key == 0) {
+				$line = str_replace("<div class=\"highlight\"><pre>", "", $line);
+			}
+
+			// Be careful not to add superflous whitespace here (we are in a <pre>)
+			$output .= "<div class=\"table-row\">"
+							."<a href=\"#n$line_number\" class=\"linenumber table-cell\">"
+								."<span class=\"anchor\" id=\"n$line_number\"> </span>"
+							."</a>"
+							."<span class=\"line table-cell\">".$line."</span>\n";
+			$output .= "</div>";
+		}
+
+		$output .= "</pre></div>";
+		$output .= "</div>";
+
 		return array(
 			"return_value" => $return_value,
 			"output" => $output
diff --git a/application/views/file/html_footer.php b/application/views/file/html_footer.php
index 3a4b05505..bbec7ebd1 100644
--- a/application/views/file/html_footer.php
+++ b/application/views/file/html_footer.php
@@ -1,6 +1,3 @@
-        </td>
-      </tr>
-    </table>
     </div>
     </div>
 
diff --git a/application/views/file/html_header.php b/application/views/file/html_header.php
index e14bad6f5..b861e0a39 100644
--- a/application/views/file/html_header.php
+++ b/application/views/file/html_header.php
@@ -74,7 +74,7 @@ include(FCPATH."application/views/header.php"); ?>
 					</li>
 				</ul>
 				<div class="btn-group pull-right" style="margin-top: 7px; margin-right:-10px;">
-					<a id="linewrap" class="btn btn-small" rel="tooltip" title="Wrap long lines">Linewrap</a>
+					<a id="linewrap" class="btn btn-small" rel="tooltip" title="Toggle wrapping of long lines">Linewrap</a>
 					<a href="<?php echo site_url($id."/plain") ?>" class="btn btn-small" rel="tooltip" title="View as plain text">Plain</a>
 					<a href="<?php echo site_url($id) ?>" class="btn btn-small" rel="tooltip" title="View as raw file (org. mime type)">Raw</a>
 					<?php if ($current_highlight === 'rmd') { ?>
diff --git a/data/css/style.css b/data/css/style.css
index ce8052142..454d7f9ea 100644
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -54,7 +54,53 @@ code, pre, textarea {
 	margin-right: 20px;
 }
 
-.content .numbers > pre, .content .highlight > pre {
+.code pre {
+	counter-reset: line-numbering;
+}
+
+.code {display: table; margin: 0;}
+.code .table-row {display: table-row;}
+.code .table-cell {display: table-cell;}
+
+.code pre a.linenumber {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.code pre a.linenumber::before {
+	content: counter(line-numbering);
+	counter-increment: line-numbering;
+}
+
+.code pre a.linenumber {
+	padding: 0 6px; /* space after numbers */
+	text-align: right;
+
+	background: #ececec;
+	border-right: 1px solid #ddd;
+	text-align: right;
+	margin-left: -2px;
+	color: #aaa;
+	word-break: normal;
+}
+
+.code pre :last-child a {
+	padding-bottom: 10px;
+}
+
+.code pre :first-child a {
+	padding-top: 10px;
+}
+
+.code pre .table-row .line {
+	padding-left: 10px;
+}
+
+.content .highlight > pre {
 	background-color: transparent;
 	border: 0;
 	border-radius: 0;
@@ -62,41 +108,23 @@ code, pre, textarea {
 	padding: 0;
 	font-size: 12px;
 	line-height: 1.4;
-	white-space: pre;
-	word-break: normal;
+	white-space: pre-wrap;
+	word-break: break-all;
 	word-wrap: normal;
 }
-.content .numbers {
-	background: #ececec;
-	border-right: 1px solid #ddd;
-	text-align: right;
-	padding: 10px 6px;
-	vertical-align: top;
-}
-.content .numbers a {
-	color: #aaa;
-}
-.content .code {
+.code {
 	width: 100%;
-	vertical-align: top;
-	padding-top: 10px;
+	padding-top: 0;
 }
-.content .code > .highlight {
+.code .highlight {
 	position: relative;
-	padding-left: 10px;
+	padding-left: 0;
 }
-.content .code > .highlight > pre {
+.code .highlight pre {
 	position: relative;
-	z-index: 2;
 }
-#highlight_line {
+.highlight_line {
 	background: #ffffcc;
-	position: absolute;
-	left: 0;
-	right: 0;
-	width: 100%;
-	height: 16px;
-	z-index: 1;
 }
 #file-info {
 	display: none;
diff --git a/data/js/script.js b/data/js/script.js
index ffa036280..7d84eb9a1 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -9,17 +9,14 @@ function fixedEncodeURIComponent (str) {
 		$(window).bind('hashchange', function(e) {
 			var hash = window.location.hash;
 
-			$('#highlight_line').remove();
+			$('.highlight_line').removeClass("highlight_line");
 
 			if (hash.match(/^#n\d+$/) === null) {
 				return;
 			}
 
-			var link = $(hash);
-
-			$('<div id="highlight_line" />').prependTo('.highlight').css({
-				top: link.get(0).offsetTop - 10 + parseInt(link.css("padding-top")) + 'px'
-			});
+			var line = $(hash).parent().parent();
+			line.addClass("highlight_line");
 		});
 
 		$(window).trigger('hashchange');
@@ -59,14 +56,12 @@ function fixedEncodeURIComponent (str) {
 		return this;
 		});
 
-		window.lines_wrapped = false;
+		window.lines_wrapped = true;
 		$('#linewrap').click(function() {
 			if (window.lines_wrapped == true) {
-				$(".content .numbers").show();
-				$(".content .code > .highlight > pre").css("white-space", "pre");
+				$(".highlight > pre").css("white-space", "pre");
 			} else {
-				$(".content .numbers").hide();
-				$(".content .code > .highlight > pre").css("white-space", "pre-wrap");
+				$(".highlight > pre").css("white-space", "pre-wrap");
 			}
 			window.lines_wrapped = !window.lines_wrapped;
 		});