1
1
mirror of https://github.com/github/semantic.git synced 2024-12-25 07:55:12 +03:00
semantic/prototype/UI/index.html

115 lines
3.0 KiB
HTML
Raw Normal View History

<!doctype html>
<html>
<head>
<title>semantic-diff</title>
2015-10-09 22:27:44 +03:00
<style type="text/css">
2015-10-23 23:53:02 +03:00
#before, #after {
2015-10-23 21:00:25 +03:00
width: 50%;
}
2015-10-23 23:53:02 +03:00
#before {
2015-10-23 21:00:25 +03:00
float: left;
}
2015-10-23 23:53:02 +03:00
#after {
2015-10-23 21:00:25 +03:00
float: right;
}
2015-10-21 18:48:46 +03:00
body {
margin: 0;
padding: 0;
2015-10-22 01:06:45 +03:00
font-family: monospace;
2015-10-21 18:48:46 +03:00
}
2015-10-13 18:07:40 +03:00
.insert {
background-color: #eaffea;
2015-10-13 18:43:17 +03:00
outline: 1px solid #c1e9c1;
2015-10-13 18:07:40 +03:00
}
.delete {
background-color: #ffecec;
2015-10-13 18:43:17 +03:00
outline: 1px solid #f1c0c0;
2015-10-13 18:07:40 +03:00
}
2015-10-13 18:25:20 +03:00
.replace {
2015-10-24 04:29:02 +03:00
background-color: #ffffec;
outline: 1px solid #e9e9c0;
2015-10-13 18:25:20 +03:00
}
2015-11-03 21:12:35 +03:00
.invisible {
background-color: #fff;
visibility: hidden;
}
2015-10-22 00:34:10 +03:00
2015-10-24 04:19:19 +03:00
.diff div, .diff ul, .diff li, .diff dl, .diff dd, .diff span {
2015-10-22 00:34:10 +03:00
white-space: pre-wrap;
2015-10-22 00:35:12 +03:00
display: inline;
2015-10-22 00:53:57 +03:00
margin: 0;
padding: 0;
color: initial;
2015-10-22 00:34:10 +03:00
}
2015-10-22 01:07:08 +03:00
2015-10-24 04:19:19 +03:00
.diff dt {
2015-10-22 01:07:08 +03:00
display: none;
}
2015-11-03 22:12:41 +03:00
/* syntax highlighting */
.diff .category-string {
2015-11-03 22:12:41 +03:00
color: #183691;
}
2015-11-03 22:12:45 +03:00
2015-11-03 22:54:28 +03:00
.diff .category-false,
.diff .category-true,
.diff .category-number,
.diff .category-member_access>:not(:first-child)>.category-identifier {
2015-11-03 22:35:12 +03:00
color: #0086b3;
}
2015-11-03 22:35:19 +03:00
.diff .category-comment {
color: #969896;
}
.diff .category-bool_op,
.diff .category-type_op,
.diff .category-var_declaration,
.diff .category-if_statement,
.diff .category-do_statement,
.diff .category-for_statement,
.diff .category-return_statement,
.diff .category-function {
color: #a71d5d;
}
2015-11-03 22:51:41 +03:00
.diff .category-pair>li:first-child>.category-identifier,
.diff .category-assignment>li:first-child>.category-member_access>:not(:first-child)>.category-identifier {
color: #795da3;
}
2015-10-09 22:27:44 +03:00
</style>
2015-10-27 18:09:48 +03:00
<script type="text/javascript" src="dictionary.js"></script>
2015-10-27 18:11:45 +03:00
<script type="text/javascript" src="diff.js"></script>
2015-10-27 18:09:16 +03:00
<script type="text/javascript" src="patch.js"></script>
2015-10-27 18:10:38 +03:00
<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)) {
2015-10-09 21:36:18 +03:00
callback(JSON.parse(request.responseText));
}
};
request.send(null);
}
</script>
</head>
<body>
2015-11-03 21:12:35 +03:00
<div id="before" class="diff"></div>
<div id="after" class="diff"></div>
2015-10-29 22:11:18 +03:00
<script type="text/javascript">
loadJSON((window.location.search || '?diff.json').substr(1), function (json) {
2015-10-24 02:08:10 +03:00
var diff = diffFromJSON(json.diff);
2015-11-03 21:12:35 +03:00
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>