Skip to content

Commit 617d365

Browse files
vprimachenkovprimachenko
committed
add new functions to display
1 parent 863a581 commit 617d365

File tree

1 file changed

+43
-27
lines changed

1 file changed

+43
-27
lines changed

‎index.html‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
<link rel="stylesheet" href="style.css"/>
77
</head>
88
<body>
9-
109
<div id="settings">
1110
<h1>Diff</h1>
1211
<label><input type="radio" name="diff_type" value="diffChars" checked> Chars</label>
1312
<label><input type="radio" name="diff_type" value="diffWords"> Words</label>
1413
<label><input type="radio" name="diff_type" value="diffLines"> Lines</label>
14+
<label><input type="radio" name="diff_type" value="createPatch"> Patch</label>
15+
<label><input type="radio" name="diff_type" value="applyPatch"> Merge</label>
1516
</div>
1617

1718
<a href="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiff</a>
@@ -20,7 +21,7 @@ <h1>Diff</h1>
2021
<tr>
2122
<td contenteditable="true" id="a">restaurant</td>
2223
<td contenteditable="true" id="b">aura</td>
23-
<td><pre id="result"></pre></td>
24+
<td id="result"></td>
2425
</tr>
2526
</table>
2627

@@ -31,31 +32,37 @@ <h1>Diff</h1>
3132
var result = document.getElementById('result');
3233

3334
function changed() {
34-
var diff = JsDiff[window.diffType](a.textContent, b.textContent);
35-
var fragment = document.createDocumentFragment();
36-
for (var i=0; i < diff.length; i++) {
35+
if(window.diffType == 'applyPatch') {
36+
b.textContent = JsDiff.applyPatch(a.textContent, result.textContent);
37+
} else if(window.diffType == 'createPatch') {
38+
result.textContent = JsDiff.createPatch('filename',a.textContent, b.textContent,'left','right');
39+
} else {
40+
var diff = JsDiff[window.diffType](a.textContent, b.textContent);
41+
var fragment = document.createDocumentFragment();
42+
for (var i=0; i < diff.length; i++) {
3743

38-
if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
39-
var swap = diff[i];
40-
diff[i] = diff[i + 1];
41-
diff[i + 1] = swap;
42-
}
44+
if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
45+
var swap = diff[i];
46+
diff[i] = diff[i + 1];
47+
diff[i + 1] = swap;
48+
}
4349

44-
var node;
45-
if (diff[i].removed) {
46-
node = document.createElement('del');
47-
node.appendChild(document.createTextNode(diff[i].value));
48-
} else if (diff[i].added) {
49-
node = document.createElement('ins');
50-
node.appendChild(document.createTextNode(diff[i].value));
51-
} else {
52-
node = document.createTextNode(diff[i].value);
50+
var node;
51+
if (diff[i].removed) {
52+
node = document.createElement('del');
53+
node.appendChild(document.createTextNode(diff[i].value));
54+
} else if (diff[i].added) {
55+
node = document.createElement('ins');
56+
node.appendChild(document.createTextNode(diff[i].value));
57+
} else {
58+
node = document.createTextNode(diff[i].value);
59+
}
60+
fragment.appendChild(node);
5361
}
54-
fragment.appendChild(node);
55-
}
5662

57-
result.textContent = '';
58-
result.appendChild(fragment);
63+
result.textContent = '';
64+
result.appendChild(fragment);
65+
}
5966
}
6067

6168
window.onload = function() {
@@ -64,17 +71,26 @@ <h1>Diff</h1>
6471
};
6572

6673
a.onpaste = a.onchange =
67-
b.onpaste = b.onchange = changed;
74+
b.onpaste = b.onchange =
75+
result.onpaste = result.onchange =
76+
changed;
6877

6978
if ('oninput' in a) {
70-
a.oninput = b.oninput = changed;
79+
a.oninput = b.oninput = result.oninput = changed;
7180
} else {
72-
a.onkeyup = b.onkeyup = changed;
81+
a.onkeyup = b.onkeyup = result.onkeyup = changed;
7382
}
7483

7584
function onDiffTypeChange(radio) {
7685
window.diffType = radio.value;
77-
document.title = "Diff " + radio.value.slice(4);
86+
document.title = "Diff " + radio.parentNode.innerText;
87+
if(window.diffType == "applyPatch") {
88+
b.removeAttribute('contenteditable');
89+
result.setAttribute('contenteditable','true');
90+
} else {
91+
result.removeAttribute('contenteditable');
92+
b.setAttribute('contenteditable','true');
93+
}
7894
}
7995

8096
var radio = document.getElementsByName('diff_type');

0 commit comments

Comments
 (0)