github/semantic
1
1
Fork 0
mirror of https://github.com/github/semantic.git synced 2024-12-25 07:55:12 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #209 from github/show-empty-space

Browse Source 
Correlate ranges of files in the UI
This commit is contained in:
Rob Rix 2015-11-03 13:06:16 -05:00
commit a7e02cf113
4 changed files with 395 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

396
prototype/UI/diff.js vendored
View File

@ -57,21 +57,391 @@ Diff.prototype.cata = function(transform) {
}
}
/// Diff -> String -> String -> DOM
function diffToDOM(diff, which, source) {
if (diff.pure != null) {
return diff.pure;
function wrap(tagName, element) {
if (element == null) {
return null;
}
var node = document.createElement(tagName);
node.appendChild(element);
return node;
}
/// String -> Syntax a -> Range -> (a -> Range) -> (a -> DOM) -> DOM
function rangeAndSyntaxToDOM(source, syntax, range, getRange, recur) {
recur = recur || function(term) {
return rangeAndSyntaxToDOM(source, term.unwrap, term.extract, getRange);
}
var element;
if (syntax.leaf != null) {
element = document.createElement("span");
element.textContent = source.substr(range[0], range[1]);
} else if (syntax.indexed != null || syntax.fixed != null) {
var values = syntax.indexed || syntax.fixed;
element = document.createElement("ul");
var previous = range[0];
for (i in values) {
var child = values[i];
if (child.pure == "") continue;
var childRange = getRange(child);
if (childRange.before != null) {
var beforeRange = childRange.before;
element.appendChild(document.createTextNode(source.substr(previous, beforeRange[0] - previous)));
element.appendChild(wrap("li", recur(child)));
previous = beforeRange[0] + beforeRange[1];
}
if (childRange.after != null) {
var afterRange = childRange.before;
element.appendChild(document.createTextNode(source.substr(previous, afterRange[0] - previous)));
element.appendChild(wrap("td", recur(child)));
previous = afterRange[0] + afterRange[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) {
if (syntax.keyed.values[k].pure == "") continue;
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;
}
/// Diff -> String -> DOM
function diffToDOM(diff, sources) {
function getRange(diffOrTerm) {
if (diffOrTerm.pure != null) {
var beforeRange, afterRange;
if (diffOrTerm.pure.before != null) {
beforeRange = diffOrTerm.pure.before.extract
}
if (diffOrTerm.pure.after != null) {
afterRange = diffOrTerm.pure.after.extract
}
if (beforeRange == null) {
beforeRange = afterRange;
}
if (afterRange == null) {
afterRange = beforeRange;
}
return { "before": beforeRange, "after": afterRange };
}
if (diffOrTerm.roll != null) {
return diffOrTerm.roll.extract;
}
if (diffOrTerm.extract != null) {
return diffOrTerm.extract;
}
}
function getRange(diff) {
if (diff.pure != null) {
return diff.pure["data-range"];
}
if (diff.roll != null) {
return diff.roll.extract[which];
}
if (diff.pure != null) {
return pureToDOM(sources, diff.pure, getRange, function(diff) {
return diffToDOM(diff, sources);
})
}
return rangeAndSyntaxToDOM(getRange(diff), diff.roll.unwrap, source, getRange, function(diff) {
return diffToDOM(diff, which, source);
return rollToDOM(sources, diff.roll, getRange, function(diff) {
return diffToDOM(diff, sources);
})
}
function pureToDOM(sources, patch, getRangeFun, diffToDOMFun) {
var elementA, elementB;
if (patch.before != null) {
elementA = rangeAndSyntaxToDOM(sources.before, patch.before.unwrap, patch.before.extract, getRangeFun);
elementA.classList.add("delete");
if (patch.after != null) {
elementA.classList.add("replace");
}
}
if (patch.after != null) {
elementB = rangeAndSyntaxToDOM(sources.after, patch.after.unwrap, patch.after.extract, getRangeFun);
elementB.classList.add("insert");
if (patch.before != null) {
elementB.classList.add("replace");
}
}
if (elementA == null) {
elementA = elementB.cloneNode(true)
elementA.classList.add("invisible")
}
if (elementB == null) {
elementB = elementA.cloneNode(true)
elementB.classList.add("invisible")
}
return { "before": elementA || "", "after": elementB || "" };
}
function rollToDOM(sources, rollOrTerm, getRangeFun, diffToDOMFun) {
var syntax = rollOrTerm.unwrap
var range = rollOrTerm.extract
var elementA;
var elementB;
if (syntax.leaf != null) {
elementA = document.createElement("span");
elementA.textContent = sources.before.substr(range.before[0], range.before[1]);
elementB = document.createElement("span");
elementB.textContent = sources.after.substr(range.after[0], range.after[1]);
} else if (syntax.indexed != null || syntax.fixed != null) {
var values = syntax.indexed || syntax.fixed;
elementA = document.createElement("ul");
elementB = document.createElement("ul");
var previousBefore = range.before[0];
var previousAfter = range.after[0];
for (i in values) {
var child = values[i];
if (child.pure == "") continue;
var childRange = getRangeFun(child);
var beforeAfterChild = diffToDOMFun(child)
if (childRange.before != null) {
var beforeRange = childRange.before;
var beforeSeparator = sources.before.substr(previousBefore, beforeRange[0] - previousBefore);
elementA.appendChild(document.createTextNode(beforeSeparator));
elementA.appendChild(wrap("li", beforeAfterChild.before));
previousBefore = beforeRange[0] + beforeRange[1];
}
if (childRange.after != null) {
var afterRange = childRange.after;
var afterSeparator = sources.after.substr(previousAfter, afterRange[0] - previousAfter);
elementB.appendChild(document.createTextNode(afterSeparator));
elementB.appendChild(wrap("li", beforeAfterChild.after));
previousAfter = afterRange[0] + afterRange[1];
}
}
var beforeText = sources.before.substr(previousBefore, range.before[0] + range.before[1] - previousBefore);
var afterText = sources.after.substr(previousAfter, range.after[0] + range.after[1] - previousAfter);
elementA.appendChild(document.createTextNode(beforeText));
elementB.appendChild(document.createTextNode(afterText));
} else if (syntax.keyed != null) {
elementA = document.createElement("dl");
elementB = document.createElement("dl");
var befores = [];
var afters = [];
for (k in syntax.keyed.values) {
if (syntax.keyed.values[k].pure == "") continue;
var child = syntax.keyed.values[k];
var ranges = getRangeFun(child);
var doms = diffToDOMFun(child)
if (ranges.before != null) {
befores.push({ "key": k, "range": ranges.before, "child": doms.before });
}
if (ranges.after != null) {
afters.push({ "key": k, "range": ranges.after, "child": doms.after });
}
}
var sortByRange = function (array) {
return function(a, b) {
// if a is invisible, sort it based on its range vs. bs opposite range
function sortByOppositeRange(el) {
var opArray = array === befores ? afters : befores;
var opEl = opArray.find(function (e) { return el.key === e.key; });
var otherEl = el === a ? b : a;
var opOtherEl = opArray.find(function (e) { return otherEl.key === e.key; });
if (el.child.classList.contains("delete") && otherEl.child.classList.contains("insert")) {
return -1;
}
if (el.child.classList.contains("insert") && otherEl.child.classList.contains("delete")) {
return 1;
}
if (!el.child.classList.contains("invisible") && !otherEl.child.classList.contains("invisible")) {
if (el.range[0] < otherEl.range[0]) {
return -1;
} else if (el.range[0] > otherEl.range[0]) {
return 1;
}
}
if (opEl.range[0] < opOtherEl.range[0]) {
return -1;
} else if (opEl.range[0] > opOtherEl.range[0]) {
return 1;
}
return 0;
}
return sortByOppositeRange(a);
}
}
befores.sort(sortByRange(befores));
afters.sort(sortByRange(afters));
var previousA = range.before[0];
var previousB = range.after[0];
zip(befores, afters, function (a, b) {
var key = a.key
var childElA = a.child
var childRangeA = a.range
var childElB = b.child
var childRangeB = b.range
var isFirst = elementA.childNodes.length == 0;
function penultimateNode(el) {
var nodes = Array.prototype.slice.call(el.childNodes).reverse();
var lastVisibleNode;
for (i in nodes) {
var node = nodes[i];
if (node.nodeType != 3 && node.classList.contains("invisible")) {
var nextIndex = parseInt(i, 10) + 1;
if (nextIndex < nodes.length) {
var nextNode = nodes[nextIndex];
if (nextNode.nodeType != 3 && !nextNode.classList.contains("invisible")) {
return node;
}
}
}
}
}
if (isFirst || !childElA.classList.contains("invisible")) {
var text = sources.before.substr(previousA, childRangeA[0] - previousA);
var beforeNode = penultimateNode(elementA)
if (beforeNode != null) {
elementA.insertBefore(document.createTextNode(text), beforeNode);
} else {
elementA.appendChild(document.createTextNode(text));
}
}
if (isFirst || !childElB.classList.contains("invisible")) {
var text = sources.after.substr(previousB, childRangeB[0] - previousB);
var beforeNode = penultimateNode(elementB)
if (beforeNode != null) {
elementB.insertBefore(document.createTextNode(text), beforeNode);
} else {
elementB.appendChild(document.createTextNode(text));
}
}
var dtA = wrap("dt", document.createTextNode(key));
elementA.appendChild(dtA);
var ddA = wrap("dd", childElA)
elementA.appendChild(ddA);
if (childElA.classList.contains("invisible")) {
dtA.classList.add("invisible");
ddA.classList.add("invisible");
}
var dtB = wrap("dt", document.createTextNode(key));
elementB.appendChild(dtB);
var ddB = wrap("dd", childElB);
elementB.appendChild(ddB);
if (childElB.classList.contains("invisible")) {
dtB.classList.add("invisible");
ddB.classList.add("invisible");
}
if (isFirst || !childElA.classList.contains("invisible")) {
previousA = childRangeA[0] + childRangeA[1]
}
if (isFirst || !childElB.classList.contains("invisible")) {
previousB = childRangeB[0] + childRangeB[1]
}
var nextIndex = befores.indexOf(a) + 1;
if (childElA.classList.contains("invisible") && nextIndex < afters.length) {
var nextVisibleElement = afters[nextIndex]
while (nextVisibleElement.child.classList.contains("invisible") && ++nextIndex < afters.length) {
nextVisibleElement = afters[nextIndex]
}
if (nextVisibleElement == null) return;
var beginningOfNextElement = nextVisibleElement.range[0];
var text = sources.after.substr(previousB, beginningOfNextElement - previousB);
var node = wrap("span", document.createTextNode(text));
node.classList.add("invisible");
elementA.appendChild(node);
}
var nextIndex = afters.indexOf(b) + 1;
if (childElB.classList.contains("invisible") && nextIndex < befores.length) {
var nextVisibleElement = befores[nextIndex]
while (nextVisibleElement.child.classList.contains("invisible") && ++nextIndex < befores.length) {
nextVisibleElement = befores[nextIndex]
}
if (nextVisibleElement == null) return;
var beginningOfNextElement = nextVisibleElement.range[0];
var text = sources.before.substr(previousA, beginningOfNextElement - previousA);
var node = wrap("span", document.createTextNode(text));
node.classList.add("invisible");
elementB.appendChild(node);
}
});
var textA = sources.before.substr(previousA, range.before[0] + range.before[1] - previousA);
elementA.appendChild(document.createTextNode(textA));
var textB = sources.after.substr(previousB, range.after[0] + range.after[1] - previousB);
elementB.appendChild(document.createTextNode(textB));
}
return { "before": elementA, "after": elementB }
}
/// ([a], [b]) -> [(a, b)]
function zip (a, b, callback) {
if (a.length > b.length) {
return b.map(function(b, index) {
return callback(a[index], b);
});
} else {
return a.map(function(a, index) {
return callback(a, b[index]) ;
});
}
}

63
prototype/UI/dom.js vendored
View File

@ -1,63 +0,0 @@
function wrap(tagName, element) {
if (element == null) {
return null;
}
var node = document.createElement(tagName);
node.appendChild(element);
return node;
}
/// 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 || syntax.fixed != null) {
var values = syntax.indexed || syntax.fixed;
element = document.createElement("ul");
var previous = range[0];
for (i in values) {
var child = values[i];
if (child.pure == "") continue;
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) {
if (syntax.keyed.values[k].pure == "") continue;
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;
}

37
prototype/UI/index.html
View File

@ -29,6 +29,10 @@
background-color: #ffffec;
outline: 1px solid #e9e9c0;
}
.invisible {
background-color: #fff;
visibility: hidden;
}
.diff div, .diff ul, .diff li, .diff dl, .diff dd, .diff span {
white-space: pre-wrap;
@ -62,35 +66,16 @@
</script>
</head>
<body>
<div id="before" class="diff"></div>
<div id="after" class="diff"></div>
<div id="before" class="diff"></div>
<div id="after" class="diff"></div>
<script type="text/javascript">
loadJSON((window.location.search || '?diff.json').substr(1), function (json) {
var diff = diffFromJSON(json.diff);
var before = diff.map(function(value) {
var element;
if (value.before != null) {
element = termToDOM(value.before, "before", json["before"]);
element.classList.add("delete");
if (value.after != null) {
element.classList.add("replace");
}
}
return element || "";
});
var after = diff.map(function(value) {
var element;
if (value.after != null) {
element = termToDOM(value.after, "after", json["after"]);
element.classList.add("insert")
if (value.before != null) {
element.classList.add("replace");
}
}
return element || "";
});
document.getElementById("before").appendChild(diffToDOM(before, "before", json["before"]));
document.getElementById("after").appendChild(diffToDOM(after, "after", json["after"]));
var dom = diffToDOM(diff, { "before": json["before"] , "after": json["after"] })
document.getElementById("before").appendChild(dom.before);
document.getElementById("after").appendChild(dom.after);
});
</script>
</body>

2
prototype/UI/term.js vendored
View File

@ -8,7 +8,7 @@ function termFromJSON(json) {
}
function Term(object) {
this.range = object.extract;
this.extract = object.extract;
this.unwrap = object.unwrap;
return this;
}