mirror of
https://github.com/github/semantic.git
synced 2024-12-26 00:12:29 +03:00
Merge pull request #209 from github/show-empty-space
Correlate ranges of files in the UI
This commit is contained in:
Rob Rix
commit
a7e02cf113
396
prototype/UI/diff.js
vendored
396
prototype/UI/diff.js
vendored
@ -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
63
prototype/UI/dom.js
vendored
@ -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;
|
||||
}
|
||||
@ -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
2
prototype/UI/term.js
vendored
@ -8,7 +8,7 @@ function termFromJSON(json) {
|
||||
}
|
||||
|
||||
function Term(object) {
|
||||
this.range = object.extract;
|
||||
this.extract = object.extract;
|
||||
this.unwrap = object.unwrap;
|
||||
return this;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user