|
6 | 6 | <!DOCTYPE html> |
7 | 7 | <html lang="en"> |
8 | 8 | <head> |
9 | | - <title>Diff Text</title> |
| 9 | + <meta charset="utf-8" /> |
| 10 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
10 | 11 | <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
11 | 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
12 | | - <meta name="viewport" content="width=device-width, initial-scale=1" /> |
13 | | - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> |
14 | | - <link rel="stylesheet" type="text/css" href="css/diff-text.css" /> |
| 13 | + <link rel="icon" href="/favicon.ico" /> |
| 14 | + <link rel="stylesheet" href="css/diff-text.css" /> |
15 | 15 | <script src="js/diff_match_patch_uncompressed.js"></script> |
| 16 | + <title>Diff text</title> |
16 | 17 | </head> |
17 | 18 | <body> |
18 | 19 | <table> |
19 | 20 | <tr> |
20 | 21 | <td class="tdvariable"><textarea id="text1" wrap="off" autofocus></textarea></td> |
21 | | - <td class="tdfixed" ondblclick="swap_text_content()"></td> |
| 22 | + <td class="tdfixed" ondblclick="swapText()"></td> |
22 | 23 | <td class="tdvariable"><textarea id="text2" wrap="off"></textarea></td> |
23 | 24 | </tr> |
24 | 25 | </table> |
25 | | - <div id="text3" ondblclick="switch_diff_mode()"></div> |
| 26 | + <div id="text3" ondblclick="switchMode()"></div> |
26 | 27 |
|
27 | 28 | <script> |
28 | | - var mode = "line"; |
| 29 | + var diffProcess = new diff_match_patch(); |
| 30 | + diffProcess.Diff_Timeout = 0; // no timeout |
| 31 | + |
29 | 32 | var text1 = document.getElementById("text1"); |
30 | 33 | var text2 = document.getElementById("text2"); |
31 | 34 | var text3 = document.getElementById("text3"); |
32 | 35 |
|
33 | | - var diff_process = new diff_match_patch(); |
34 | | - diff_process.Diff_Timeout = 0; // no timeout |
35 | | - |
36 | | - switch_diff_mode(); |
| 36 | + var mode = "line"; |
| 37 | + switchMode(); |
37 | 38 |
|
38 | | - function diff_char() { |
39 | | - var diff_result = diff_process.diff_main(text1.value, text2.value); |
40 | | - diff_process.diff_cleanupSemantic(diff_result); |
41 | | - text3.innerHTML = diff_html(diff_result, "¶<br>", "¶<br>", "<br>"); |
| 39 | + function diffChar() { |
| 40 | + var diffResult = diffProcess.diff_main(text1.value, text2.value); |
| 41 | + diffProcess.diff_cleanupSemantic(diffResult); |
| 42 | + text3.innerHTML = diffHTML(diffResult, "¶<br />", "¶<br />", "<br />"); |
42 | 43 | } |
43 | 44 |
|
44 | | - function diff_line() { |
| 45 | + function diffLine() { |
45 | 46 | // line mode requires complete lines |
46 | | - diff_text1 = text1.value + (text1.value.endsWith("\n") ? "" : "\n"); |
47 | | - diff_text2 = text2.value + (text2.value.endsWith("\n") ? "" : "\n"); |
48 | | - |
49 | | - var diff_ln2chr = diff_process.diff_linesToChars_(diff_text1, diff_text2); |
50 | | - var diff_result = diff_process.diff_main(diff_ln2chr.chars1, diff_ln2chr.chars2, false); |
51 | | - diff_process.diff_charsToLines_(diff_result, diff_ln2chr.lineArray); |
52 | | - // diff_process.diff_cleanupSemantic(diff_result); // this seems to break the line diff result |
| 47 | + diffText1 = text1.value + (text1.value.endsWith("\n") ? "" : "\n"); |
| 48 | + diffText2 = text2.value + (text2.value.endsWith("\n") ? "" : "\n"); |
53 | 49 |
|
54 | | - text3.innerHTML = diff_html(diff_result, "<br>", "<br>", "<br>"); |
| 50 | + var diffLn2Chr = diffProcess.diff_linesToChars_(diffText1, diffText2); |
| 51 | + var diffResult = diffProcess.diff_main(diffLn2Chr.chars1, diffLn2Chr.chars2, false); |
| 52 | + diffProcess.diff_charsToLines_(diffResult, diffLn2Chr.lineArray); |
| 53 | + // diffProcess.diff_cleanupSemantic(diffResult); // this seems to break the line diff result |
| 54 | + text3.innerHTML = diffHTML(diffResult, "<br />", "<br />", "<br />"); |
55 | 55 | } |
56 | 56 |
|
57 | | - function diff_html(diffs, ins_eol, del_eol, equ_eol) { |
| 57 | + function diffHTML(diffText, insEOL, delEOL, equEOL) { |
58 | 58 | var html = []; |
59 | | - for (var x = 0; x < diffs.length; x++) { |
60 | | - var oper = diffs[x][0]; // operation: insert, delete, equal |
61 | | - var data = diffs[x][1]; // text of change |
| 59 | + |
| 60 | + for (var x = 0; x < diffText.length; x++) { |
| 61 | + var oper = diffText[x][0]; // operation: insert, delete or equal |
| 62 | + var data = diffText[x][1]; // text of operation |
62 | 63 | var text = data.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); |
| 64 | + |
63 | 65 | switch (oper) { |
64 | 66 | case DIFF_INSERT: |
65 | | - html[x] = '<ins class="' + mode + '">' + text.replace(/\n/g, ins_eol) + "</ins>"; |
| 67 | + html[x] = "<ins class='" + mode + "'>" + text.replace(/\n/g, insEOL) + "</ins>"; |
66 | 68 | break; |
67 | 69 | case DIFF_DELETE: |
68 | | - html[x] = '<del class="' + mode + '">' + text.replace(/\n/g, del_eol) + "</del>"; |
| 70 | + html[x] = "<del class='" + mode + "'>" + text.replace(/\n/g, delEOL) + "</del>"; |
69 | 71 | break; |
70 | 72 | case DIFF_EQUAL: |
71 | | - html[x] = "<span>" + text.replace(/\n/g, equ_eol) + "</span>"; |
| 73 | + html[x] = "<span>" + text.replace(/\n/g, equEOL) + "</span>"; |
72 | 74 | break; |
73 | 75 | } |
74 | 76 | } |
| 77 | + |
75 | 78 | return html.join(""); |
76 | 79 | } |
77 | 80 |
|
78 | | - function swap_text_content() { |
| 81 | + function swapText() { |
79 | 82 | var tmp = text1.value; |
80 | 83 | text1.value = text2.value; |
81 | 84 | text2.value = tmp; |
82 | | - text2.onchange(); |
| 85 | + text2.onchange(); // trigger the refresh |
83 | 86 | } |
84 | 87 |
|
85 | | - function switch_diff_mode() { |
| 88 | + function switchMode() { |
86 | 89 | mode = mode === "line" ? "char" : "line"; |
87 | 90 | text1.onkeyup = text2.onkeyup = |
88 | 91 | text1.onpaste = text2.onpaste = |
89 | | - text1.onchange = text2.onchange = mode === "line" ? diff_line : diff_char; |
90 | | - text2.onchange(); |
| 92 | + text1.onchange = text2.onchange = mode === "line" ? diffLine : diffChar; |
| 93 | + text2.onchange(); // trigger the refresh |
91 | 94 | } |
92 | 95 | </script> |
93 | 96 | </body> |
|
0 commit comments