2015-10-09 21:31:06 +03:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>semantic-diff</title>
|
2015-10-09 22:27:44 +03:00
|
|
|
<style type="text/css">
|
2015-10-21 18:48:46 +03:00
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
2015-10-13 18:07:40 +03:00
|
|
|
.insert {
|
2015-10-13 18:43:25 +03:00
|
|
|
background-color: #eaffea;
|
2015-10-13 18:43:17 +03:00
|
|
|
outline: 1px solid #c1e9c1;
|
2015-10-13 18:24:55 +03:00
|
|
|
margin-left: 50%;
|
2015-10-13 18:07:40 +03:00
|
|
|
}
|
|
|
|
|
.delete {
|
2015-10-13 18:43:25 +03:00
|
|
|
background-color: #ffecec;
|
2015-10-13 18:43:17 +03:00
|
|
|
outline: 1px solid #f1c0c0;
|
2015-10-13 18:24:55 +03:00
|
|
|
margin-right: 50%;
|
2015-10-13 18:07:40 +03:00
|
|
|
}
|
2015-10-13 18:25:20 +03:00
|
|
|
.replace {
|
2015-10-13 20:17:18 +03:00
|
|
|
background-color: #eee;
|
2015-10-13 18:25:20 +03:00
|
|
|
}
|
2015-10-09 22:27:44 +03:00
|
|
|
</style>
|
2015-10-09 21:31:06 +03:00
|
|
|
<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));
|
2015-10-09 21:31:06 +03:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
request.send(null);
|
|
|
|
|
}
|
2015-10-13 16:47:47 +03:00
|
|
|
|
2015-10-13 18:10:54 +03:00
|
|
|
function wrap(tagName, element) {
|
2015-10-13 18:22:56 +03:00
|
|
|
if (element == null) { return null; }
|
2015-10-13 18:10:54 +03:00
|
|
|
var node = document.createElement(tagName);
|
|
|
|
|
node.appendChild(element);
|
|
|
|
|
return node;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-21 22:50:06 +03:00
|
|
|
function Delete(before) {
|
|
|
|
|
this.before = before;
|
|
|
|
|
return this;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Insert(after) {
|
|
|
|
|
this.after = after;
|
|
|
|
|
return this;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Replace(before, after) {
|
|
|
|
|
this.before = before;
|
|
|
|
|
this.after = after;
|
|
|
|
|
return this;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-21 22:58:00 +03:00
|
|
|
function Term(range, syntax) {
|
|
|
|
|
this.range = range;
|
|
|
|
|
this.syntax = syntax;
|
|
|
|
|
return this;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-21 22:50:13 +03:00
|
|
|
function toDOM(view) {
|
|
|
|
|
if (view instanceof Delete) {
|
|
|
|
|
var element = document.createElement("div");
|
|
|
|
|
element.classList.add("delete");
|
|
|
|
|
element.appendChild(toDOM(view.before));
|
2015-10-21 22:55:02 +03:00
|
|
|
return element;
|
2015-10-21 22:50:13 +03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-21 22:54:10 +03:00
|
|
|
function term(term, a, b) {
|
2015-10-21 22:57:23 +03:00
|
|
|
if (term.extract == null || term.unwrap == null) { return null; }
|
2015-10-21 21:09:40 +03:00
|
|
|
|
2015-10-21 22:58:55 +03:00
|
|
|
return new Term(term.extract, syntax(term.unwrap, a, b, term));
|
2015-10-21 19:58:21 +03:00
|
|
|
}
|
|
|
|
|
|
2015-10-21 22:54:10 +03:00
|
|
|
function patch(patch, a, b) {
|
2015-10-21 22:57:15 +03:00
|
|
|
if (patch.delete != null) { return new Delete(term(patch.delete, a, b)); }
|
|
|
|
|
if (patch.insert != null) { return new Insert(term(patch.insert, a, b)); }
|
|
|
|
|
if (patch.replace != null) { return new Replace(term(patch.replace.before, a, b), term(patch.replace.after, a, b)); }
|
2015-10-21 18:49:03 +03:00
|
|
|
}
|
|
|
|
|
|
2015-10-21 22:54:10 +03:00
|
|
|
function indexed(array, a, b, continuation) {
|
2015-10-21 18:17:16 +03:00
|
|
|
for (index in array) {
|
2015-10-21 22:54:10 +03:00
|
|
|
continuation(array[index], a, b);
|
2015-10-21 18:17:16 +03:00
|
|
|
}
|
|
|
|
|
}
|
2015-10-21 18:17:25 +03:00
|
|
|
|
2015-10-21 22:54:10 +03:00
|
|
|
function keyed(object, a, b, continuation) {
|
2015-10-21 18:17:25 +03:00
|
|
|
for (key in object) {
|
2015-10-21 22:54:10 +03:00
|
|
|
continuation(object[key], a, b);
|
2015-10-21 18:17:25 +03:00
|
|
|
}
|
|
|
|
|
}
|
2015-10-21 18:17:33 +03:00
|
|
|
|
2015-10-21 22:54:10 +03:00
|
|
|
function syntax(json, a, b, continuation) {
|
|
|
|
|
if (json instanceof Array) { return indexed(json, a, b, continuation); }
|
|
|
|
|
if (json instanceof Object) { return keyed(json, a, b, continuation); }
|
2015-10-21 19:00:46 +03:00
|
|
|
// fixme: handle leaves
|
2015-10-21 18:17:33 +03:00
|
|
|
}
|
2015-10-21 18:59:48 +03:00
|
|
|
|
2015-10-21 22:54:10 +03:00
|
|
|
function diff(json, a, b) {
|
|
|
|
|
if (json.pure != null) { return patch(json.pure, a, b); }
|
|
|
|
|
if (json.roll != null) { return syntax(json.roll, a, b, diff); }
|
2015-10-21 18:59:48 +03:00
|
|
|
}
|
2015-10-09 21:31:06 +03:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2015-10-13 18:05:13 +03:00
|
|
|
<div id="diff"></div>
|
2015-10-09 21:31:06 +03:00
|
|
|
<script type="text/javascript">
|
2015-10-21 00:52:04 +03:00
|
|
|
loadJSON('diff.json', function (json) {
|
2015-10-21 21:08:35 +03:00
|
|
|
console.log(json.diff);
|
2015-10-21 22:54:10 +03:00
|
|
|
diff(json.diff, json.a, json.b);
|
2015-10-09 21:31:06 +03:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
