mirror of
https://github.com/github/semantic.git
synced 2024-12-21 05:41:54 +03:00
98 lines
2.9 KiB
HTML
98 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>semantic-diff</title>
|
|
<style type="text/css">
|
|
#before, #after {
|
|
width: 50%;
|
|
}
|
|
#before {
|
|
float: left;
|
|
}
|
|
#after {
|
|
float: right;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: monospace;
|
|
}
|
|
.insert {
|
|
background-color: #eaffea;
|
|
outline: 1px solid #c1e9c1;
|
|
}
|
|
.delete {
|
|
background-color: #ffecec;
|
|
outline: 1px solid #f1c0c0;
|
|
}
|
|
.replace {
|
|
background-color: #ffffec;
|
|
outline: 1px solid #e9e9c0;
|
|
}
|
|
|
|
.diff div, .diff ul, .diff li, .diff dl, .diff dd, .diff span {
|
|
white-space: pre-wrap;
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.diff dt {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="dictionary.js"></script>
|
|
<script type="text/javascript" src="diff.js"></script>
|
|
<script type="text/javascript" src="dom.js"></script>
|
|
<script type="text/javascript" src="patch.js"></script>
|
|
<script type="text/javascript" src="syntax.js"></script>
|
|
<script type="text/javascript" src="term.js"></script>
|
|
<script type="text/javascript">
|
|
function loadJSON(path, callback) {
|
|
var request = new XMLHttpRequest();
|
|
request.overrideMimeType("application/json");
|
|
request.open('GET', '' + path, true);
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState == 4 && (request.status == "200" || request.status == 0)) {
|
|
callback(JSON.parse(request.responseText));
|
|
}
|
|
};
|
|
request.send(null);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="before" class="diff"></div>
|
|
<div id="after" class="diff"></div>
|
|
<script type="text/javascript">
|
|
loadJSON('diff.json', function (json) {
|
|
var diff = diffFromJSON(json.diff);
|
|
var before = diff.map(function(value) {
|
|
var element;
|
|
if (value.before != null) {
|
|
element = termToDOM(value.before, "before", json["before"]);
|
|
element.classList.add("delete");
|
|
if (value.after != null) {
|
|
element.classList.add("replace");
|
|
}
|
|
}
|
|
return element || "";
|
|
});
|
|
var after = diff.map(function(value) {
|
|
var element;
|
|
if (value.after != null) {
|
|
element = termToDOM(value.after, "after", json["after"]);
|
|
element.classList.add("insert")
|
|
if (value.before != null) {
|
|
element.classList.add("replace");
|
|
}
|
|
}
|
|
return element || "";
|
|
});
|
|
document.getElementById("before").appendChild(diffToDOM(before, "before", json["before"]));
|
|
document.getElementById("after").appendChild(diffToDOM(after, "after", json["after"]));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|