mirror of
https://github.com/github/semantic.git
synced 2024-12-19 04:41:47 +03:00
201 lines
6.1 KiB
HTML
201 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>semantic-diff</title>
|
|
<style type="text/css">
|
|
#before, #after {
|
|
width: 50%;
|
|
}
|
|
#before {
|
|
margin-right: 50%;
|
|
float: left;
|
|
background-color: #ffecec;
|
|
}
|
|
#after {
|
|
margin-left: 50%;
|
|
float: right;
|
|
background-color: #eaffea;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: monospace;
|
|
}
|
|
.insert {
|
|
background-color: #eaffea;
|
|
outline: 1px solid #c1e9c1;
|
|
}
|
|
.delete {
|
|
background-color: #ffecec;
|
|
outline: 1px solid #f1c0c0;
|
|
}
|
|
.replace {
|
|
background-color: #eee;
|
|
}
|
|
|
|
#diff div, #diff ul, #diff li, #diff dl, #diff dd, #diff span {
|
|
white-space: pre-wrap;
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#diff dt {
|
|
display: none;
|
|
}
|
|
</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 Patch(patch) {
|
|
if (patch.delete != null) { this.before = new Term(patch.delete); }
|
|
if (patch.insert != null) { this.after = new Term(patch.insert); }
|
|
if (patch.replace != null) {
|
|
this.before = new Term(patch.replace.before);
|
|
this.after = new Term(patch.replace.after);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
function Term(json) {
|
|
this.range = json.extract;
|
|
this.unwrap = new Syntax(json.unwrap, function(x) { return new Term(x); });
|
|
return this;
|
|
}
|
|
|
|
function toDOM(model, stateName, source) {
|
|
var element;
|
|
|
|
if (model instanceof Delete) {
|
|
element = document.createElement("div");
|
|
element.classList.add("patch");
|
|
element.classList.add("delete");
|
|
element.appendChild(toDOM(model.before));
|
|
}
|
|
|
|
if (model instanceof Insert) {
|
|
element = document.createElement("div");
|
|
element.classList.add("patch");
|
|
element.classList.add("insert");
|
|
element.appendChild(toDOM(model.after));
|
|
}
|
|
|
|
if (model instanceof Replace) {
|
|
element = document.createElement("div");
|
|
element.classList.add("patch");
|
|
element.classList.add("replace");
|
|
var before = toDOM(model.before);
|
|
before.classList.add("delete");
|
|
element.appendChild(before);
|
|
var after = toDOM(model.after);
|
|
after.classList.add("insert");
|
|
element.appendChild(after);
|
|
}
|
|
|
|
if (model instanceof Diff) {
|
|
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;
|
|
}
|
|
|
|
function Dictionary(object) {
|
|
this.values = {};
|
|
for (key in object) {
|
|
this.values[key] = object[key];
|
|
}
|
|
return this;
|
|
}
|
|
|
|
// forall a b. Dictionary String a -> (a -> b) -> Dictionary String b
|
|
Dictionary.prototype.map = function(transform) {
|
|
var copy = new Dictionary();
|
|
for (key in this.values) {
|
|
copy.values[key] = transform(this.values[key], key);
|
|
}
|
|
return copy;
|
|
}
|
|
|
|
function Syntax(json, continuation) {
|
|
if (json.indexed != null) { this.indexed = json.map(continuation); }
|
|
if (json.keyed != null) { this.keyed = (new Dictionary(json)).map(continuation); }
|
|
if (json.leaf != null) { this.leaf = json; }
|
|
return this;
|
|
}
|
|
|
|
// forall a b. Syntax a -> (a -> b) -> Syntax b
|
|
Syntax.prototype.map = function(transform) {
|
|
return new Syntax(this, transform);
|
|
}
|
|
|
|
function diffFromJSON(json) {
|
|
if (json.pure != null) { return new Diff({ pure: new Patch(json.pure) }); }
|
|
if (json.roll != null) {
|
|
return new Diff({ roll: { extract: json.roll.extract, unwrap: new Syntax(json.roll.unwrap, function(x) { return diffFromJSON(x); }) } });
|
|
}
|
|
}
|
|
|
|
function Diff(object) {
|
|
if (object.pure != null) { this.pure = object.pure; }
|
|
if (object.roll != null) { this.roll = object.roll; }
|
|
return this;
|
|
}
|
|
|
|
// forall a b. Diff a -> (a -> b) -> Diff b
|
|
Diff.prototype.map = function(transform) {
|
|
if (this.pure != null) { return new Diff({ pure: transform(this.pure) }); }
|
|
if (this.roll != null) {
|
|
return new Diff({
|
|
roll: {
|
|
extract: this.roll.extract,
|
|
unwrap: this.roll.unwrap.map(function(x) { return x.map(transform); })
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="before"></div>
|
|
<div id="after"></div>
|
|
<script type="text/javascript">
|
|
loadJSON('diff.json', function (json) {
|
|
var diff = diffFromJSON(json.diff);
|
|
var mapped = diff.map(function(value) {
|
|
return {
|
|
before: value.before != null ? toDOM(value.before, "before", source) : document.createTextNode(""),
|
|
before: value.after != null ? toDOM(value.after, "after", source) : document.createTextNode(""),
|
|
};
|
|
});
|
|
document.getElementById("before").appendChild(toDOM(mapped, "before", json["before"]));
|
|
document.getElementById("after").appendChild(toDOM(mapped, "after", json["after"]));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|