forked from zgrossbart/jdd
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (114 loc) · 4.78 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JSON Diff - The semantic JSON compare tool</title>
<link rel="stylesheet" href="reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="throbber.css" type="text/css" media="screen">
<link rel="stylesheet" href="jdd.css" type="text/css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="jsl/jsl.format.js" type="text/javascript" charset="utf-8"></script>
<script src="jsl/jsl.parser.js" type="text/javascript" charset="utf-8"></script>
<script src="jdd.js" type="text/javascript" charset="utf-8"></script>
<script src="polyfill.js" type="text/javascript" charset="utf-8"></script>
<script>
jQuery(document).ready(function() {
const jddObj = new Jdd($('body'));
$('#compare').click(function() {
jddObj.compare();
});
if (jddObj.getParameterByName('left')) {
$('#textarealeft').val(jddObj.getParameterByName('left'));
}
if (jddObj.getParameterByName('right')) {
$('#textarearight').val(jddObj.getParameterByName('right'));
}
if (jddObj.getParameterByName('left') && jddObj.getParameterByName('right')) {
jddObj.compare();
}
$('#sample').click(function(e) {
e.preventDefault();
jddObj.loadSampleData();
});
$(document).keydown(function(event) {
if (event.keyCode === 78 || event.keyCode === 39) {
/*
* The N key or right arrow key
*/
jddObj.highlightNextDiff();
} else if (event.keyCode === 80 || event.keyCode === 37) {
/*
* The P key or left arrow key
*/
jddObj.highlightPrevDiff();
}
});
});
</script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-26336682-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="main">
<div class="header">
<h1>JSON Diff</h1>
<h3>The semantic JSON compare tool</h3>
<div class="weak">
<p>
Validate, format, and compare two JSON documents. See the differences between the objects instead of
just the new lines and mixed up properties.
</p>
<p>
Created by <a href="http://www.zackgrossbart.com">Zack Grossbart</a>. Get the <a
href="https://github.com/zgrossbart/jdd">source code</a>.
</p>
<p>
Big thanks owed to the team behind <a href="http://www.jsonlint.com">JSONLint</a>.
</p>
</div>
</div>
<div class="initContainer">
<div class="left">
<textarea spellcheck="false" id="textarealeft"
placeholder="Enter JSON to compare, enter an URL to JSON"></textarea>
<pre id="errorLeft" class="error"></pre>
<span class="fileInput">or <input type="file" id="fileLeft" onchange="jdd.handleFiles(this.files, 'left')"></span>
</div>
<div class="center">
<button id="compare">Compare</button>
<div class="throbber-loader"></div>
<br/><br/>
or try some<br/><a href="#" id="sample">sample data</a>
</div>
<div class="right">
<textarea spellcheck="false" class="right" id="textarearight"
placeholder="Enter JSON to compare, enter an URL to JSON"></textarea>
<pre id="errorRight" class="error"></pre>
<span class="fileInput">or <input type="file" id="fileRight"
onchange="jdd.handleFiles(this.files, 'right')"></span>
</div>
</div>
<div class="diffcontainer">
<div id="report">
</div>
<pre id="out" class="left" class="codeBlock"></pre>
<pre id="out2" class="right" class="codeBlock"></pre>
<ul id="toolbar" class="toolbar"></ul>
</div>
</div>
</body>
</html>