marijnh/merge-demo.html

## merge-demo.html
<!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="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.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="http://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>

require.config({
  packages: [{
    name: "codemirror",
    location: "../",
    main: "lib/codemirror"
  }, {
    name: "diff_match_patch",
    location: "//cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119",
    main: "diff_match_patch"
  }]
});

require(["codemirror",
         "codemirror/mode/htmlmixed/htmlmixed",
         "codemirror/addon/merge/merge"], function(CodeMirror) {

var value, orig1, orig2, dv, panes = 2, highlight = true, connect = null, 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();
};

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>
	<!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="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.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="http://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>

	require.config({
	packages: [{
	name: "codemirror",
	location: "../",
	main: "lib/codemirror"
	}, {
	name: "diff_match_patch",
	location: "//cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119",
	main: "diff_match_patch"
	}]
	});

	require(["codemirror",
	"codemirror/mode/htmlmixed/htmlmixed",
	"codemirror/addon/merge/merge"], function(CodeMirror) {

	var value, orig1, orig2, dv, panes = 2, highlight = true, connect = null, 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();
	};

	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>