1
1
mirror of https://github.com/github/semantic.git synced 2024-11-28 10:15:55 +03:00
semantic/prototype/UI/index.html
2015-11-03 15:30:34 -05:00

126 lines
3.5 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;
}
.invisible {
background-color: #fff;
visibility: hidden;
}
.diff div, .diff ul, .diff li, .diff dl, .diff dd, .diff span {
white-space: pre-wrap;
display: inline;
margin: 0;
padding: 0;
color: initial;
}
.diff dt {
display: none;
}
/* syntax highlighting */
.diff .category-regex,
.diff .category-string {
color: #183691;
}
.diff .category-false,
.diff .category-true,
.diff .category-null,
.diff .category-undefined,
.diff .category-number,
.diff .category-function_call>li>.category-identifier,
.diff .category-function_call>li>.category-member_access>.category-identifier,
.diff .category-member_access>:not(:first-child)>.category-identifier {
color: #0086b3;
}
.diff .category-comment {
color: #969896;
}
.diff [class^="category-"][class$="_op"],
.diff .category-ternary,
.diff .category-var_declaration,
.diff .category-new_expression,
.diff .category-if_statement,
.diff .category-do_statement,
.diff .category-for_statement,
.diff .category-for_in_statement,
.diff .category-return_statement,
.diff .category-function,
.diff .category-assignment,
.diff .category-var_assignment {
color: #a71d5d;
}
.diff .category-function>li:first-child>.category-identifier,
.diff .category-new_expression>li>.category-function_call>li:first-child>.category-identifier,
.diff .category-pair>li:first-child>.category-identifier,
.diff .category-assignment>li:first-child>.category-member_access>:not(:first-child)>.category-identifier {
color: #795da3;
}
</style>
<script type="text/javascript" src="dictionary.js"></script>
<script type="text/javascript" src="diff.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((window.location.search || '?diff.json').substr(1), function (json) {
var diff = diffFromJSON(json.diff);
var dom = diffToDOM(diff, { "before": json["before"] , "after": json["after"] })
document.getElementById("before").appendChild(dom.before);
document.getElementById("after").appendChild(dom.after);
});
</script>
</body>
</html>