add new functions to display

kpdecker · Aug 31, 2012 · 617d365 · 617d365
1 parent 863a581
commit 617d365
Showing 1 changed file with 43 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -6,12 +6,13 @@
 	<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>
+	<label><input type="radio" name="diff_type" value="createPatch"> Patch</label>
+	<label><input type="radio" name="diff_type" value="applyPatch"> Merge</label>
 </div>
 
 <a href="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiff</a>
@@ -20,7 +21,7 @@ <h1>Diff</h1>
 	<tr>
 		<td contenteditable="true" id="a">restaurant</td>
 		<td contenteditable="true" id="b">aura</td>
-		<td><pre id="result"></pre></td>
+		<td id="result"></td>
 	</tr>
 </table>
 
@@ -31,31 +32,37 @@ <h1>Diff</h1>
 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(window.diffType == 'applyPatch') {
+		b.textContent = JsDiff.applyPatch(a.textContent, result.textContent);
+	} else if(window.diffType == 'createPatch') {
+		result.textContent = JsDiff.createPatch('filename',a.textContent, b.textContent,'left','right');
+	} else {
+		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;
-		}
+			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);
+			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);
 		}
-		fragment.appendChild(node);
-	}
 
-	result.textContent = '';
-	result.appendChild(fragment);
+		result.textContent = '';
+		result.appendChild(fragment);
+	}
 }
 
 window.onload = function() {
@@ -64,17 +71,26 @@ <h1>Diff</h1>
 };
 
 a.onpaste = a.onchange =
-b.onpaste = b.onchange = changed;
+b.onpaste = b.onchange =
+result.onpaste = result.onchange =
+ changed;
 
 if ('oninput' in a) {
-	a.oninput = b.oninput = changed;
+	a.oninput = b.oninput = result.oninput = changed;
 } else {
-	a.onkeyup = b.onkeyup = changed;
+	a.onkeyup = b.onkeyup = result.onkeyup = changed;
 }
 
 function onDiffTypeChange(radio) {
 	window.diffType = radio.value;
-	document.title = "Diff " + radio.value.slice(4);
+	document.title = "Diff " + radio.parentNode.innerText;
+	if(window.diffType == "applyPatch") {
+		b.removeAttribute('contenteditable');
+		result.setAttribute('contenteditable','true');
+	} else {
+		result.removeAttribute('contenteditable');
+		b.setAttribute('contenteditable','true');
+	}
 }
 
 var radio = document.getElementsByName('diff_type');