202 lines
5.2 KiB
HTML
202 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GLSL Sandbox Diff</title>
|
|
<link rel="stylesheet" type="text/css" href="css/diffview.css"/>
|
|
<script type="text/javascript" src="js/difflib.js"></script>
|
|
<script type="text/javascript" src="js/diffview.js"></script>
|
|
<script type="text/javascript" src='js/jquery.js'></script>
|
|
<style type="text/css">
|
|
body {
|
|
background-color: #000000;
|
|
font: 12px Arial, Helvetica, sans-serif;
|
|
color: #888;
|
|
margin: 20px;
|
|
}
|
|
h2 {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
margin: 0px;
|
|
padding-bottom: 20px;
|
|
}
|
|
a, a:visited {
|
|
color: #009DE9;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #FFFFFF;
|
|
}
|
|
button {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #009DE9;
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border: 1px solid #009DE9;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
button:hover {
|
|
color: #FFF;
|
|
border-color: #FFF;
|
|
}
|
|
#subtitle {
|
|
text-align: center;
|
|
clear: both;
|
|
}
|
|
#diffoutput {
|
|
width: 100%;
|
|
}
|
|
/* give jsdiffview the dark theme */
|
|
table.diff {
|
|
white-space: pre-wrap;
|
|
border:1px solid #334;
|
|
width: 100%;
|
|
}
|
|
table.diff tbody th {
|
|
background: #223;
|
|
border:1px solid #334;
|
|
}
|
|
table.diff thead {
|
|
background: #111;
|
|
border-bottom:1px solid #334;
|
|
}
|
|
table.diff .empty {
|
|
background-color:#222;
|
|
}
|
|
table.diff .replace {
|
|
background-color:#431;
|
|
color: #FD8;
|
|
}
|
|
table.diff .delete {
|
|
background-color:#411;
|
|
color: #f88;
|
|
}
|
|
table.diff .skip {
|
|
background-color:#111;
|
|
border:1px solid #555;
|
|
border-right:1px solid #334;
|
|
}
|
|
table.diff .insert {
|
|
background-color:#141;
|
|
color: #0f0;
|
|
}
|
|
table.diff th.author {
|
|
border-top:1px solid #334;
|
|
background:#111;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2 id="subtitle"></h2>
|
|
<div id="diffoutput">Loading...</div>
|
|
<script>
|
|
var leftSide = { id: '', code: '', name: '', parent: null, loaded: false },
|
|
rightSide = { id: '', code: '', name: '', parent: null, loaded: false };
|
|
|
|
function showDiff() {
|
|
var leftText = difflib.stringAsLines(leftSide.code);
|
|
var rightText = difflib.stringAsLines(rightSide.code);
|
|
var sm = new difflib.SequenceMatcher(leftText, rightText);
|
|
var opcodes = sm.get_opcodes();
|
|
var diffoutputdiv = document.getElementById("diffoutput");
|
|
diffoutputdiv.innerHTML = "";
|
|
var table = diffview.buildView({
|
|
baseTextLines: leftText,
|
|
newTextLines: rightText,
|
|
opcodes: opcodes,
|
|
contextSize: null,
|
|
viewType: 1 // sideBySide: 0, viewInline: 1
|
|
});
|
|
table.removeChild(table.firstChild); // not needed
|
|
diffoutputdiv.appendChild(table);
|
|
}
|
|
|
|
function computeNames() {
|
|
if (!leftSide.loaded) {
|
|
leftSide.name = 'Not loaded';
|
|
} else if (rightSide.parent === leftSide.id) {
|
|
leftSide.name = 'parent ' + leftSide.id;
|
|
} else {
|
|
leftSide.name = leftSide.id;
|
|
}
|
|
|
|
if (!rightSide.loaded) {
|
|
rightSide.name = 'Not loaded';
|
|
} else if (leftSide.parent === rightSide.id) {
|
|
rightSide.name = 'parent ' + rightSide.id;
|
|
} else {
|
|
rightSide.name = rightSide.id;
|
|
}
|
|
|
|
document.getElementById('subtitle').innerHTML =
|
|
'<a href="e#' + leftSide.id + '"><button>' + leftSide.name + '</button></a>' +
|
|
'<span style="padding:0 10px">vs</span>' +
|
|
'<a href="e#' + rightSide.id + '"><button>' + rightSide.name + '</button></a>';
|
|
}
|
|
|
|
function load_code(side) {
|
|
$.getJSON('item/'+side.id, function(result) {
|
|
side.code = result.code;
|
|
if (result.parent) {
|
|
side.parent = result.parent.substring(3);
|
|
} else {
|
|
side.parent = null;
|
|
}
|
|
side.loaded = true;
|
|
if (leftSide.loaded && rightSide.loaded) {
|
|
computeNames();
|
|
showDiff();
|
|
}
|
|
}).error(function (jqXHR, textStatus, errorThrown) {
|
|
alert(textStatus);
|
|
});
|
|
}
|
|
|
|
// hash format: #a-vs-b
|
|
var hash = window.location.hash,
|
|
pos = hash.indexOf('-vs-'),
|
|
newLeftID = null,
|
|
newRightID = null;
|
|
|
|
if ((pos < 2) || ((hash.length - pos) < 5)) {
|
|
leftSide.loaded = rightSide.loaded = false;
|
|
leftSide.name = rightSide.name = 'invalid';
|
|
leftSide.code = rightSide.code = 'invalid';
|
|
leftSide.parent = rightSide.parent = null;
|
|
document.getElementById("diffoutput").innerHTML = "Invalid Diff URL.";
|
|
} else {
|
|
newLeftID = hash.substring(1, pos);
|
|
newRightID = hash.substring(pos + 4);
|
|
if (newLeftID !== leftSide.id) {
|
|
leftSide.id = newLeftID;
|
|
leftSide.name = 'Loading...';
|
|
leftSide.code = '';
|
|
leftSide.parent = null;
|
|
leftSide.loaded = false;
|
|
}
|
|
if (newRightID !== rightSide.id) {
|
|
rightSide.id = newRightID;
|
|
rightSide.name = 'Loading...';
|
|
rightSide.code = '';
|
|
rightSide.parent = null;
|
|
rightSide.loaded = false;
|
|
}
|
|
if (!(leftSide.loaded && rightSide.loaded)) {
|
|
document.getElementById("diffoutput").innerHTML = "Loading...";
|
|
if (!leftSide.loaded) {
|
|
load_code(leftSide);
|
|
}
|
|
if (!rightSide.loaded) {
|
|
load_code(rightSide);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|