Show nicely formatted diff

This steals the idea and markup from Gitnub. Thanks! :)
This commit is contained in:
Pieter de Bie
2008-06-15 18:22:00 +02:00
parent 62e739bfc0
commit 3432e514b8
7 changed files with 74 additions and 9 deletions
+3 -1
View File
@@ -2,8 +2,10 @@
<header>
<title>Details for commit</title>
<link rel="stylesheet" href="commits.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="diff_style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="commit.js" type="text/javascript" charset="utf-8"></script>
<script src="diffHighlighter.js" type="text/javascript" charset="utf-8"></script>
</header>
<body style="padding: 0px; border: 0px">
@@ -27,5 +29,5 @@
</table>
<hr>
<div id="message"></div>
<pre><code id="details"></code></pre>
<pre><code class="diffcode" id='details'></code></pre>
</body>
+4 -1
View File
@@ -48,8 +48,11 @@ var doeHet = function() {
});
$("message").innerHTML = commit.message.replace(/\n/g,"<br>");
if (commit.diff.length < 10000) {
if (commit.diff.length < 1000000) {
$("details").hide();
$("details").innerHTML = commit.diff;
highlightDiffs();
$("details").show();
} else {
$("details").innerHTML = "This diff is currently too large to watch in detailed mode";
}
-7
View File
@@ -27,11 +27,4 @@ hr {
background-color: #999;
}
pre {
overflow-y: auto;
}
pre code {
display: table-cell;
width: 100%;
}
+29
View File
@@ -0,0 +1,29 @@
var highlightDiffs = function() {
var diffs = document.getElementsByClassName("diffcode");
$A(diffs).each(function(diff) {
var content = diff.innerHTML;
diff.innerHTML = "";
var newContent = "";
var lines = $A(content.split("\n"));
var start = new Date();
lines.each(function(l) {
if (l.length > 100)
l = l.substring(0, 100);
l = l.escapeHTML().gsub("\t", " ");
if (l.startsWith("+"))
newContent += "<div class='addline'>" + l + "</div>";
else if (l.startsWith("-"))
newContent += "<div class='delline'>" + l + "</div>";
else if (l.startsWith("@"))
newContent += "<div class='meta'>" + l + "</div>";
else
newContent += l + "\n";
});
var duration = new Date() - start;
diff.innerHTML = newContent;
});
}
+25
View File
@@ -0,0 +1,25 @@
code .delline {
background-color: #FEE;
color: #B00;
}
code .addline {
background-color: #DFD;
color: #080;
}
code .meta {
background-color: #f7f7f7;
color: #bbb;
}
pre {
overflow-y: auto;
width: 100%;
}
pre code {
display: table-cell;
padding: 9px;
width: 100%;
}