mirror of
https://github.com/github/semantic.git
synced 2024-12-19 04:41:47 +03:00
234 lines
8.3 KiB
HTML
234 lines
8.3 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 = termFromJSON(patch.delete); }
|
|
if (patch.insert != null) { this.after = termFromJSON(patch.insert); }
|
|
if (patch.replace != null) {
|
|
this.before = termFromJSON(patch.replace.before);
|
|
this.after = termFromJSON(patch.replace.after);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
function termFromJSON(json) {
|
|
return new Term({ extract: json.extract, unwrap: new Syntax(json.unwrap, function(x) { return termFromJSON(x); }) });
|
|
}
|
|
|
|
function Term(object) {
|
|
this.range = object.extract;
|
|
this.unwrap = object.unwrap;
|
|
return this;
|
|
}
|
|
|
|
/// Term -> String -> DOM
|
|
function termToDOM(term, source) {
|
|
return rangeAndSyntaxToDOM(term.range, term.unwrap, source, function(term) { return term.range; }, function(term) { return termToDOM(term, source); });
|
|
}
|
|
|
|
/// Diff -> String -> String -> DOM
|
|
function diffToDOM(diff, which, source) {
|
|
return rangeAndSyntaxToDOM(diff.roll.extract[which], diff.roll.unwrap, source, function(diff) {
|
|
if (diff.pure != null) { return diff.pure["data-range"]; }
|
|
if (diff.roll != null) { return diff.roll.extract[which]; }
|
|
}, function(diff) { return diffToDOM(diff, which, source); })
|
|
}
|
|
|
|
/// Range -> Syntax a -> String -> (a -> Range) -> (a -> DOM) -> DOM
|
|
function rangeAndSyntaxToDOM(range, syntax, source, getRange, recur) {
|
|
recur = recur || function (term) { return rangeAndSyntaxToDOM(term.range, term.unwrap, source); }
|
|
var element;
|
|
if (syntax.leaf != null) {
|
|
element = document.createElement("span");
|
|
element.textContent = source.substr(range[0], range[1]);
|
|
} else if (syntax.indexed != null) {
|
|
element = document.createElement("ul");
|
|
var previous = range[0];
|
|
for (i in syntax.indexed) {
|
|
var child = syntax.indexed[i];
|
|
var childRange = getRange(child);
|
|
element.appendChild(document.createTextNode(source.substr(previous, childRange[0] - previous)));
|
|
element.appendChild(wrap("li", recur(child)));
|
|
previous = childRange[0] + childRange[1];
|
|
}
|
|
element.appendChild(document.createTextNode(source.substr(previous, range[0] + range[1] - previous)));
|
|
} else if (syntax.keyed != null) {
|
|
element = document.createElement("dl");
|
|
var values = [];
|
|
for (k in syntax.keyed.values) {
|
|
values.push([ k, syntax.keyed.values[k] ]);
|
|
}
|
|
values.sort(function(a, b) {
|
|
if (getRange(a[1])[0] < getRange(b[1])[0]) {
|
|
return -1;
|
|
} else if (getRange(a[1])[0] > getRange(b[1])[0]) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
|
|
var previous = range[0];
|
|
for (i in values) {
|
|
var pair = values[i];
|
|
var key = pair[0];
|
|
var child = pair[1];
|
|
var childRange = getRange(child);
|
|
element.appendChild(document.createTextNode(source.substr(previous, childRange[0] - previous)));
|
|
element.appendChild(wrap("dt", document.createTextNode(key)));
|
|
element.appendChild(wrap("dd", recur(child)));
|
|
previous = childRange[0] + childRange[1];
|
|
}
|
|
element.appendChild(document.createTextNode(source.substr(previous, range[0] + range[1] - previous)));
|
|
}
|
|
element["data-range"] = range;
|
|
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.indexed.map(continuation); }
|
|
if (json.keyed != null) { this.keyed = (new Dictionary(json.keyed)).map(continuation); }
|
|
if (json.leaf != null) { this.leaf = json.leaf; }
|
|
return this;
|
|
}
|
|
|
|
// forall a b. Syntax a -> (a -> b) -> Syntax b
|
|
Syntax.prototype.map = function(transform) {
|
|
if (this.leaf != null) { return new Syntax({ leaf: this.leaf }, transform); }
|
|
if (this.indexed != null) { return new Syntax({ indexed: this.indexed }, transform); }
|
|
if (this.keyed != null) { return new Syntax({ keyed: this.keyed.values }, 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); })
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// forall a. Diff a -> (Syntax a -> a) -> a
|
|
Diff.prototype.cata = function(transform) {
|
|
if (this.pure != null) { return this.pure; }
|
|
if (this.roll != null) {
|
|
return transform(this.roll.unwrap.map(function(diff) { return diff.cata(transform); }))
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="before" class="diff"></div>
|
|
<div id="after" class="diff"></div>
|
|
<script type="text/javascript">
|
|
loadJSON('diff.json', function (json) {
|
|
var diff = diffFromJSON(json.diff);
|
|
var before = diff.map(function(value) {
|
|
return value.before != null ? termToDOM(value.before, "before", json["before"]) : null;
|
|
});
|
|
var after = diff.map(function(value) {
|
|
return value.after != null ? termToDOM(value.after, "after", json["after"]) : null;
|
|
});
|
|
document.getElementById("before").appendChild(diffToDOM(before, "before", json["before"]));
|
|
document.getElementById("after").appendChild(diffToDOM(after, "after", json["after"]));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|