1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<!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>
<label><input type="radio" name="diff_type" value="diffTrimmedLines"> Trimmed 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>
<table>
<tr>
<td contenteditable="true" id="a">restaurant</td>
<td contenteditable="true" id="b">aura</td>
<td id="result"></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() {
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;
}
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 =
result.onpaste = result.onchange =
changed;
if ('oninput' in a) {
a.oninput = b.oninput = result.oninput = changed;
} else {
a.onkeyup = b.onkeyup = result.onkeyup = changed;
}
function onDiffTypeChange(radio) {
window.diffType = radio.value;
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');
for (var i = 0; i < radio.length; i++) {
radio[i].onchange = function(e) {
onDiffTypeChange(e.target);
changed();
}
}
</script>
</body>
</html>
|
