-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (112 loc) · 5.02 KB
/
index.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Diff Demo</title>
<script src="./js/diff_match_patch_uncompressed.js"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>JSON Diff Demo</h1>
<form action="#" onsubmit="event.preventDefault()">
<div class="flex-row">
<div class="width-half">
<h2>Text Version 1:</h2>
<textarea id="text1" class="width-full"
rows="10">{"Aidan Gillen": {"array": ["Game of Thron\"es","The Wire"],"string": "some string","int": 2,"aboolean": true, "boolean": true,"object": {"foo": "bar","object1": {"new prop1": "new prop value"},"object2": {"new prop1": "new prop value"},"object3": {"new prop1": "new prop value"},"object4": {"new prop1": "new prop value"}}},"Amy Ryan": {"one": "In Treatment","two": "The Wire"},"Annie Fitzgerald": ["Big Love","True Blood"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsgard": ["Generation Kill","True Blood"], "Clarke Peters": null}</textarea>
<label id="text1-error" for="text1" class="error"></label>
</div>
<div class="width-half">
<h2>Text Version 2:</h2>
<textarea id="text2" class="width-full"
rows="10">{"Aidan Gillen": {"array": ["Game of Thrones","The Wire"],"string": "some string","int": "2","otherint": 4, "aboolean": "true", "boolean": false,"object": {"foo": "bar"}},"Amy Ryan": ["In Treatment","The Wire"],"Annie Fitzgerald": ["True Blood","Big Love","The Sopranos","Oz"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsg?rd": ["Generation Kill","True Blood"],"Alice Farmer": ["The Corner","Oz","The Wire"]}</textarea>
<label id="text2-error" for="text2" class="error"></label>
</div>
</div>
<h3>Diff timeout:</h3>
<div>
<input type="text" size=3 maxlength=5 value="1" id="timeout"> seconds<br>
<p>
If the mapping phase of the diff computation takes longer than this, then the computation
is truncated and the best solution to date is returned. While guaranteed to be correct,
it may not be optimal. A timeout of '0' allows for unlimited computation.
</p>
</div>
<H3>Post-diff cleanup:</H3>
<dl>
<dt>
<input type="radio" name="cleanup" id="semantic" checked>
<label for="semantic">Semantic Cleanup</label>
</dt>
<dd>
Increase human readability by factoring out commonalities which are likely to be
coincidental.
</dd>
<dt>
<input type="radio" name="cleanup" id="efficiency">
<label for="efficiency">Efficiency Cleanup</label>,
edit cost: <input type="text" size=3 maxlength=5 value="4" id="edit-cost">
<dd>
Increase computational efficiency by factoring out short commonalities which are
not worth the overhead. The larger the edit cost, the more aggressive the cleanup.
</dd>
<dt>
<input type="radio" name="cleanup" id="raw">
<label for="raw">No Cleanup</label>
</dt>
<dd>Raw output.</dd>
<br>
<div>
<button type="submit" onClick="launch()">Compute Diff</button>
</div>
</form>
<div class="flex-row">
<div class="width-half">
<h2>Diff Text Version 1:</h2>
<pre id="result-before"></pre>
</div>
<div class="width-half">
<h2>Diff Text Version 2:</h2>
<pre id="result-after"></pre>
</div>
</div>
<div id="time"></div>
<script>
const dmp = new diff_match_patch()
function launch() {
const text1 = document.getElementById('text1').value
const text2 = document.getElementById('text2').value
let object1 = null
let object2 = null
try {
object1 = JSON.parse(text1)
} catch (error) {
document.getElementById('text1-error').innerText = 'Parse Text Version 1 error: ' + error
throw ('Parse Text Version 1 error: ' + error)
}
try {
object2 = JSON.parse(text2)
} catch (error) {
document.getElementById('text2-error').innerText = 'Parse Text Version 2 error: ' + error
throw ('Parse Text Version 2 error: ' + error)
}
dmp.Diff_Timeout = parseFloat(document.getElementById('timeout').value)
dmp.Diff_EditCost = parseFloat(document.getElementById('edit-cost').value)
const msStart = (new Date()).getTime()
const d = dmp.diff_main(JSON.stringify(object1, null, 2), JSON.stringify(object2, null, 2))
const msEnd = (new Date()).getTime()
if (document.getElementById('semantic').checked) {
dmp.diff_cleanupSemantic(d)
}
if (document.getElementById('efficiency').checked) {
dmp.diff_cleanupEfficiency(d)
}
const ds = dmp.diff_prettyJSON(d)
document.getElementById('result-before').innerHTML = ds['diff_delete'].join('')
document.getElementById('result-after').innerHTML = ds['diff_insert'].join('')
document.getElementById('time').innerHTML = '<br>Time: ' + (msEnd - msStart) / 1000 + 's'
}
</script>
</body>
</html>