You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
4.1 KiB
123 lines
4.1 KiB
<!doctype html> |
|
|
|
<title>CodeMirror: merge view demo</title> |
|
<meta charset="utf-8"/> |
|
<link rel=stylesheet href="../doc/docs.css"> |
|
|
|
<link rel=stylesheet href="../lib/codemirror.css"> |
|
<link rel=stylesheet href="../addon/merge/merge.css"> |
|
<script src="../lib/codemirror.js"></script> |
|
<script src="../mode/xml/xml.js"></script> |
|
<script src="../mode/css/css.js"></script> |
|
<script src="../mode/javascript/javascript.js"></script> |
|
<script src="../mode/htmlmixed/htmlmixed.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script> |
|
<script src="../addon/merge/merge.js"></script> |
|
<style> |
|
.CodeMirror { line-height: 1.2; } |
|
@media screen and (min-width: 1300px) { |
|
article { max-width: 1000px; } |
|
#nav { border-right: 499px solid transparent; } |
|
} |
|
span.clicky { |
|
cursor: pointer; |
|
background: #d70; |
|
color: white; |
|
padding: 0 3px; |
|
border-radius: 3px; |
|
} |
|
</style> |
|
<div id=nav> |
|
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> |
|
|
|
<ul> |
|
<li><a href="../index.html">Home</a> |
|
<li><a href="../doc/manual.html">Manual</a> |
|
<li><a href="https://github.com/codemirror/codemirror">Code</a> |
|
</ul> |
|
<ul> |
|
<li><a class=active href="#">merge view</a> |
|
</ul> |
|
</div> |
|
|
|
<article> |
|
<h2>merge view demo</h2> |
|
|
|
|
|
<div id=view></div> |
|
|
|
<p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a> |
|
addon provides an interface for displaying and merging diffs, |
|
either <span class=clicky onclick="panes = 2; initUI()">two-way</span> |
|
or <span class=clicky onclick="panes = 3; initUI()">three-way</span>. |
|
The left (or center) pane is editable, and the differences with the |
|
other pane(s) are <span class=clicky |
|
onclick="toggleDifferences()">optionally</span> shown live as you edit |
|
it. In the two-way configuration, there are also options to pad changed |
|
sections to <span class=clicky onclick="connect = connect ? null : |
|
'align'; initUI()">align</span> them, and to <span class=clicky |
|
onclick="collapse = !collapse; initUI()">collapse</span> unchanged |
|
stretches of text.</p> |
|
|
|
<p>This addon depends on |
|
the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a> |
|
library to compute the diffs.</p> |
|
|
|
<script> |
|
var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false; |
|
function initUI() { |
|
if (value == null) return; |
|
var target = document.getElementById("view"); |
|
target.innerHTML = ""; |
|
dv = CodeMirror.MergeView(target, { |
|
value: value, |
|
origLeft: panes == 3 ? orig1 : null, |
|
orig: orig2, |
|
lineNumbers: true, |
|
mode: "text/html", |
|
highlightDifferences: highlight, |
|
connect: connect, |
|
collapseIdentical: collapse |
|
}); |
|
} |
|
|
|
function toggleDifferences() { |
|
dv.setShowDifferences(highlight = !highlight); |
|
} |
|
|
|
window.onload = function() { |
|
value = document.documentElement.innerHTML; |
|
orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange"); |
|
orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ") |
|
.replace("white", "purple;\n font: comic sans;\n text-decoration: underline;\n height: 15em"); |
|
initUI(); |
|
let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d) |
|
}; |
|
|
|
function mergeViewHeight(mergeView) { |
|
function editorHeight(editor) { |
|
if (!editor) return 0; |
|
return editor.getScrollInfo().height; |
|
} |
|
return Math.max(editorHeight(mergeView.leftOriginal()), |
|
editorHeight(mergeView.editor()), |
|
editorHeight(mergeView.rightOriginal())); |
|
} |
|
|
|
function resize(mergeView) { |
|
var height = mergeViewHeight(mergeView); |
|
for(;;) { |
|
if (mergeView.leftOriginal()) |
|
mergeView.leftOriginal().setSize(null, height); |
|
mergeView.editor().setSize(null, height); |
|
if (mergeView.rightOriginal()) |
|
mergeView.rightOriginal().setSize(null, height); |
|
|
|
var newHeight = mergeViewHeight(mergeView); |
|
if (newHeight >= height) break; |
|
else height = newHeight; |
|
} |
|
mergeView.wrap.style.height = height + "px"; |
|
} |
|
</script> |
|
</article>
|
|
|