1
1
mirror of https://github.com/github/semantic.git synced 2024-12-22 14:21:31 +03:00
semantic/prototype/UI/index.html

172 lines
5.0 KiB
HTML

<!doctype html>
<html>
<head>
<title>semantic-diff</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.insert {
background-color: #eaffea;
outline: 1px solid #c1e9c1;
margin-left: 50%;
}
.delete {
background-color: #ffecec;
outline: 1px solid #f1c0c0;
margin-right: 50%;
}
.replace {
background-color: #eee;
}
</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)) {
callback(JSON.parse(request.responseText));
}
};
request.send(null);
}
function wrap(tagName, element) {
if (element == null) { return null; }
var node = document.createElement(tagName);
node.appendChild(element);
return node;
}
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;
}
function Term(json, a, b) {
this.range = json.extract;
this.syntax = syntax(json.unwrap, a, b, function(x, a, b) { return new Term(x, a, b); });
return this;
}
function toDOM(model) {
if (model instanceof Delete) {
var element = document.createElement("div");
element.classList.add("delete");
element.appendChild(toDOM(model.before));
return element;
}
if (model instanceof Term) {
var element = document.createElement("div");
element.classList.add("term");
element.appendChild(toDOM(model.syntax));
return element;
}
if (model instanceof Diff) {
var element = document.createElement("div");
element.classList.add("diff");
if (model.pure != null) {
element.classList.add("pure");
element.appendChild(toDOM(model.pure));
} else if(model.roll != null) {
element.classList.add("roll");
element.appendChild(toDOM(model.roll));
}
return element;
}
if (model.syntax instanceof Indexed) {
var element = document.createElement("ul");
for (i in model.syntax) {
element.appendChild(wrap("li", toDOM(model.syntax[i])));
}
return element;
}
if (model.syntax instanceof Keyed) {
var element = document.createElement("dl");
for (k in model.syntax) {
var dt = document.createElement("dt");
dt.textContent = k;
element.appendChild(dt);
element.appendChild(wrap("dd", toDOM(model.syntax[k])));
}
return element;
}
if (model.syntax instanceof Leaf) {
var element = document.createElement("span");
// ?
return element;
}
}
function patch(patch, a, b) {
if (patch.delete != null) { return new Delete(new Term(patch.delete, a, b)); }
if (patch.insert != null) { return new Insert(new Term(patch.insert, a, b)); }
if (patch.replace != null) { return new Replace(new Term(patch.replace.before, a, b), new Term(patch.replace.after, a, b)); }
}
function Indexed(array, a, b, continuation) {
this.values = [];
for (index in array) {
this.values.push(continuation(array[index], a, b));
}
return this;
}
function Keyed(object, a, b, continuation) {
this.values = {};
for (key in object) {
this.values[key] = continuation(object[key], a, b);
}
return this;
}
function Leaf(object, a, b) {
return this;
}
function syntax(json, a, b, continuation) {
if (json instanceof Array) { return new Indexed(json, a, b, continuation); }
if (json instanceof Object) { return new Keyed(json, a, b, continuation); }
return new Leaf(json, a, b);
}
function Diff(json, a, b) {
if (json.pure != null) { this.pure = patch(json.pure, a, b); }
if (json.roll != null) { this.roll = syntax(json.roll, a, b, function(x, a, b) { return new Diff(x, a, b); }); }
return this;
}
</script>
</head>
<body>
<div id="diff"></div>
<script type="text/javascript">
loadJSON('diff.json', function (json) {
console.log(json.diff);
var model = new Diff(json.diff, json.a, json.b);
var dom = toDOM(model);
var root = document.getElementById("diff");
root.appendChild(dom);
});
</script>
</body>
</html>