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-13 18:07:55 +03:00
|
|
|
#diff div {
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
2015-10-13 18:07:40 +03:00
|
|
|
.insert {
|
|
|
|
|
outline: 1px solid green;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
.delete {
|
|
|
|
|
outline: 1px solid red;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
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) {
|
|
|
|
|
var node = document.createElement(tagName);
|
|
|
|
|
node.appendChild(element);
|
|
|
|
|
return node;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-13 16:47:47 +03:00
|
|
|
function toDOM(json) {
|
2015-10-13 18:15:23 +03:00
|
|
|
var node;
|
2015-10-13 16:47:47 +03:00
|
|
|
if (json instanceof Array) {
|
2015-10-13 18:15:23 +03:00
|
|
|
node = document.createElement("ol");
|
2015-10-13 16:47:47 +03:00
|
|
|
for (index in json) {
|
2015-10-13 18:15:33 +03:00
|
|
|
node.appendChild(wrap("li", toDOM(json[index])));
|
2015-10-13 16:47:47 +03:00
|
|
|
}
|
|
|
|
|
} else if (json instanceof Object) {
|
2015-10-13 18:15:23 +03:00
|
|
|
node = document.createElement("div");
|
2015-10-13 17:56:34 +03:00
|
|
|
if (json['source'] != null) {
|
2015-10-13 18:09:30 +03:00
|
|
|
node.textContent = json['source'];
|
2015-10-13 18:00:38 +03:00
|
|
|
} else if (json['insert'] != null) {
|
2015-10-13 18:09:30 +03:00
|
|
|
node.classList.add('insert');
|
|
|
|
|
node.appendChild(toDOM(json['insert']));
|
2015-10-13 18:00:29 +03:00
|
|
|
} else if (json['delete'] != null) {
|
2015-10-13 18:09:30 +03:00
|
|
|
node.classList.add('delete');
|
|
|
|
|
node.appendChild(toDOM(json['delete']));
|
2015-10-13 18:01:32 +03:00
|
|
|
} else if (json['replace'] != null) {
|
2015-10-13 18:09:30 +03:00
|
|
|
node.classList.add('replace');
|
|
|
|
|
node.appendChild(toDOM(json['replace']));
|
2015-10-13 18:03:27 +03:00
|
|
|
} else if (json['before'] != null) {
|
2015-10-13 18:09:30 +03:00
|
|
|
node.classList.add('delete');
|
|
|
|
|
node.appendChild(toDOM(json['before']));
|
2015-10-13 18:03:27 +03:00
|
|
|
} else if (json['after'] != null) {
|
2015-10-13 18:09:30 +03:00
|
|
|
node.classList.add('insert');
|
|
|
|
|
node.appendChild(toDOM(json['after']));
|
2015-10-13 17:56:34 +03:00
|
|
|
}
|
2015-10-13 17:57:01 +03:00
|
|
|
if (json['categories'] != null) {
|
|
|
|
|
for (index in json['categories']) {
|
2015-10-13 18:09:30 +03:00
|
|
|
node.classList.add('category-'+json['categories'][index]);
|
2015-10-13 17:57:01 +03:00
|
|
|
}
|
|
|
|
|
}
|
2015-10-13 16:47:47 +03:00
|
|
|
}
|
2015-10-13 18:09:30 +03:00
|
|
|
return node;
|
2015-10-13 16:47:47 +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-09 21:36:38 +03:00
|
|
|
loadJSON('Fixtures/swift.json', function (json) {
|
2015-10-13 18:05:13 +03:00
|
|
|
document.getElementById("diff").appendChild(toDOM(json));
|
2015-10-09 21:31:06 +03:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
