1
1
mirror of https://github.com/github/semantic.git synced 2024-12-24 15:35:14 +03:00
semantic/prototype/UI/index.html

93 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-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:24:55 +03:00
margin-left: 50%;
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:24:55 +03:00
margin-right: 50%;
2015-10-13 18:07:40 +03:00
}
2015-10-13 18:25:20 +03:00
.replace {
outline: 1px solid yellow;
}
2015-10-09 22:27:44 +03:00
</style>
<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);
}
function wrap(tagName, element) {
2015-10-13 18:22:56 +03:00
if (element == null) { return null; }
var node = document.createElement(tagName);
node.appendChild(element);
return node;
}
function toDOM(json) {
2015-10-13 18:15:23 +03:00
var node;
if (json instanceof Array) {
2015-10-13 18:15:23 +03:00
node = document.createElement("ol");
for (index in json) {
2015-10-13 18:22:34 +03:00
var child = wrap("li", toDOM(json[index]));
if (child != null) {
node.appendChild(child);
}
}
2015-10-13 18:24:08 +03:00
if (node.childNodes.length == 0) {
node = null;
}
} 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:16:52 +03:00
node = document.createElement("p");
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 18:09:30 +03:00
return node;
}
</script>
</head>
<body>
2015-10-13 18:05:13 +03:00
<div id="diff"></div>
<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));
});
</script>
</body>
</html>