Landing pull request 3.

More Details: - kpdecker#3
zzen · May 31, 2011 · 8357475 · 8357475
1 parent 005073c
commit 8357475
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -57,8 +57,7 @@ Many of the methods above return change objects. These objects are consist of th
 
 Note that some cases may omit a particular flag field. Comparison on the flag fields should always be done in a truthy or falsy manner.
 
-## Example
-[maxogden](https://github.com/maxogden) has put together an excellent [example application](http://bl.ocks.org/893372).
+## [Example](http://nv.github.com/jsdiff)
 
 ## License
 

diff --git a/index.html b/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Diff</title>
+	<link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+
+<div id="settings">
+	<h1>Diff</h1>
+	<label><input type="radio" name="diff_type" value="diffChars" checked> Chars</label>
+	<label><input type="radio" name="diff_type" value="diffWords"> Words</label>
+	<label><input type="radio" name="diff_type" value="diffLines"> Lines</label>
+</div>
+
+<a href="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiff</a>
+
+<table>
+	<tr>
+		<td contenteditable="true" id="a">restaurant</td>
+		<td contenteditable="true" id="b">aura</td>
+		<td><pre id="result"></pre></td>
+	</tr>
+</table>
+
+<script src="diff.js"></script>
+<script defer>
+var a = document.getElementById('a');
+var b = document.getElementById('b');
+var result = document.getElementById('result');
+
+function changed() {
+	var diff = JsDiff[window.diffType](a.textContent, b.textContent);
+	var fragment = document.createDocumentFragment();
+	for (var i=0; i < diff.length; i++) {
+
+		if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
+			var swap = diff[i];
+			diff[i] = diff[i + 1];
+			diff[i + 1] = swap;
+		}
+
+		var node;
+		if (diff[i].removed) {
+			node = document.createElement('del');
+			node.appendChild(document.createTextNode(diff[i].value));
+		} else if (diff[i].added) {
+			node = document.createElement('ins');
+			node.appendChild(document.createTextNode(diff[i].value));
+		} else {
+			node = document.createTextNode(diff[i].value);
+		}
+		fragment.appendChild(node);
+	}
+
+	result.textContent = '';
+	result.appendChild(fragment);
+}
+
+window.onload = function() {
+	onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
+	changed();
+};
+
+a.onpaste = a.onchange =
+b.onpaste = b.onchange = changed;
+
+if ('oninput' in a) {
+	a.oninput = b.oninput = changed;
+} else {
+	a.onkeyup = b.onkeyup = changed;
+}
+
+function onDiffTypeChange(radio) {
+	window.diffType = radio.value;
+	document.title = "Diff " + radio.value.slice(4);
+}
+
+var radio = document.getElementsByName('diff_type');
+for (var i = 0; i < radio.length; i++) {
+	radio[i].onchange = function(e) {
+		onDiffTypeChange(e.target);
+		changed();
+	}
+}
+</script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,81 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+html, body {
+	background: #EEE;
+	font: 12px sans-serif;
+}
+body {
+	padding-top: 1.8em;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+html, body, table, tbody, tr, td {
+	height: 100%
+}
+table {
+	table-layout: fixed;
+	width: 100%;
+}
+td {
+	width: 33%;
+	padding: 3px 4px;
+	border: 1px solid transparent;
+	vertical-align: top;
+	font: 1em monospace;
+	text-align: left;
+	white-space: pre-wrap;
+}
+h1 {
+	display: inline;
+	font-size: 100%;
+}
+del {
+	text-decoration: none;
+	color: #b30000;
+	background: #fadad7;
+}
+ins {
+	background: #eaf2c2;
+	color: #406619;
+	text-decoration: none;
+}
+
+#settings {
+	position: absolute;
+	top: 0;
+	left: 5px;
+	right: 5px;
+	height: 2em;
+	line-height: 2em;
+}
+#settings label {
+	margin-left: 1em;
+}
+
+.source {
+	position: absolute;
+	right: 1%;
+	top: .2em;
+}
+
+[contentEditable] {
+	background: #F9F9F9;
+	border-color: #BBB #D9D9D9 #DDD;
+	border-radius: 4px;
+	-webkit-user-modify: read-write-plaintext-only;
+	outline: none;
+}
+[contentEditable]:focus {
+	background: #FFF;
+	border-color: #6699cc;
+	box-shadow: 0 0 4px #2175c9;
+}
+
+@-moz-document url-prefix() {
+	body {
+		height: 99%; /* Hide scroll bar in Firefox */
+	}
+}