-
Notifications
You must be signed in to change notification settings - Fork 84
/
index.html
206 lines (190 loc) · 11 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="google-site-verification" content="crGnn5xAcouXrxmM0KHod4-pUUDNokDxtL_iDiPTiJE" />
<title>JSON Diff - Compare and Find Differences in JSON Files Online</title>
<meta name="description" content="JSON Diff is a free and open-source tool to compare two JSON objects and find differences. Visualize changes in JSON files, easy and fast.">
<link rel="stylesheet" href="www/lib/codemirror/lib/codemirror.css" charset="utf-8">
<link rel="stylesheet" href="www/lib/codemirror/theme/tomorrow-night.css" charset="utf-8">
<link rel="stylesheet" href="css/main.css?cachebust=2" charset="utf-8">
<link rel="apple-touch-icon" href="/img/icon-512.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/img/icon-512.png">
</head>
<body>
<header id="header">
<div class="left">
<h1 class="left">{} Json Diff</h1>
<h2 class="left">Online JSON Compare</h2>
</div>
<div class="right">
<span id="error-message" style="display:none;"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512.209px" height="512.209px" viewBox="0 0 512.209 512.209" style="enable-background:new 0 0 512.209 512.209;"
xml:space="preserve">
<g>
<path d="M507.345,439.683L288.084,37.688c-3.237-5.899-7.71-10.564-13.429-13.988c-5.705-3.427-11.893-5.142-18.554-5.142
s-12.85,1.718-18.558,5.142c-5.708,3.424-10.184,8.089-13.418,13.988L4.859,439.683c-6.663,11.998-6.473,23.989,0.57,35.98
c3.239,5.517,7.664,9.897,13.278,13.128c5.618,3.237,11.66,4.859,18.132,4.859h438.529c6.479,0,12.519-1.622,18.134-4.859
c5.62-3.23,10.038-7.611,13.278-13.128C513.823,463.665,514.015,451.681,507.345,439.683z M292.655,411.132
c0,2.662-0.91,4.897-2.71,6.704c-1.807,1.811-3.949,2.71-6.427,2.71h-54.816c-2.474,0-4.616-0.899-6.423-2.71
c-1.809-1.807-2.713-4.042-2.713-6.704v-54.248c0-2.662,0.905-4.897,2.713-6.704c1.807-1.811,3.946-2.71,6.423-2.71h54.812
c2.479,0,4.62,0.899,6.428,2.71c1.803,1.807,2.71,4.042,2.71,6.704v54.248H292.655z M292.088,304.357
c-0.198,1.902-1.198,3.47-3.001,4.709c-1.811,1.238-4.046,1.854-6.711,1.854h-52.82c-2.663,0-4.947-0.62-6.849-1.854
c-1.908-1.243-2.858-2.807-2.858-4.716l-4.853-130.47c0-2.667,0.953-4.665,2.856-5.996c2.474-2.093,4.758-3.14,6.854-3.14h62.809
c2.098,0,4.38,1.043,6.854,3.14c1.902,1.331,2.851,3.14,2.851,5.424L292.088,304.357z"/>
</svg> Invalid JSON</span>
<a href="https://github.com/justspamjustin/online-json-diff" title="fork me on github!">
<svg class="header-icon" width="38" height="38" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 896q0 251-146.5 451.5t-378.5 277.5q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-86-13.5q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="#fff"/></svg>
</a>
<div class="settings-menu">
<svg class="header-icon" width="38" height="38" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z" fill="#fff"/></svg>
<div class="settings-menu-content">
<label class="menu-item">persist history to local storage <input id="localstorage-toggle" type="checkbox" checked/></label>
<label class="menu-item">light theme <input id="lighttheme-toggle" type="checkbox"/></label>
<div class="menu-item">
<button id="download-diff-button" type="button" name="button">⬇ Download Diff</button>
</div>
</div>
</div>
</div>
</header>
<div class="left-panel">
<div id="history-container" class="history-container">
</div>
<div class="bottom-left-container">
<a href="https://launchgrid.blitlabs.com" title="Explore the latest product launches in AI, apps and more!">
<img src="./img/launchgrid-promo.png" alt="Explore the latest product launches in AI, apps and more!"/>
<p><strong>Launchgrid</strong> Explore the latest product launches in AI, apps and more!</p>
</a>
</div>
<a href="/sponsor/" title="Be a sponsor">Be a sponsor 🤝</a>
</div>
<div class="diff-inputs">
<div id="left-input" class="json-diff-input split">
<textarea id="json-diff-left"></textarea>
<span class="input-buttons">
<a class="input-collapse" href="#">–</a>
<a class="input-split" href="#">◫</a>
<a class="input-expand" href="#">☐</a>
</span>
</div>
<div id="right-input" class="json-diff-input split">
<textarea id="json-diff-right"></textarea>
<span class="input-buttons">
<a class="input-collapse" href="#">–</a>
<a class="input-split" href="#">◫</a>
<a class="input-expand" href="#">☐</a>
</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="www/lib/fast-json-patch/dist/json-patch-duplex.min.js" charset="utf-8"></script>
<script src="www/lib/backbone-events-standalone/backbone-events-standalone.min.js" charset="utf-8"></script>
<script src="www/lib/codemirror/lib/codemirror.js" charset="utf-8"></script>
<script src="www/lib/codemirror/lib/util/formatting.js" charset="utf-8"></script>
<script src="www/lib/codemirror/mode/javascript/javascript.js" charset="utf-8"></script>
<script src="www/lib/codemirror/addon/edit/matchbrackets.js" charset="utf-8"></script>
<script src="www/lib/json-source-map.js" charset="utf-8"></script>
<script src="js/main.js" charset="utf-8"></script>
<script>
// initAd();
var isLightTheme = localStorage.getItem('lighttheme');
if (isLightTheme) {
enableLightTheme();
}
var dontSaveDiffs = localStorage.getItem('dont-save-diffs');
if (dontSaveDiffs) {
$('#localstorage-toggle').get(0).checked = false;
}
$('#lighttheme-toggle').on('change', function (e) {
toggleLightTheme();
});
$('#localstorage-toggle').on('change', function (e) {
if (!e.currentTarget.checked) {
localStorage.setItem('dont-save-diffs', true);
localStorage.removeItem('current-diff');
localStorage.removeItem('diff-history');
} else {
localStorage.removeItem('dont-save-diffs');
}
});
$('#download-diff-button').on('click', onClickDownloadDiff);
$('#left-input').on('click', '.input-collapse,.input-split,.input-expand', onPaneResizeLeftClick);
$('#right-input').on('click', '.input-collapse,.input-split,.input-expand', onPaneResizeRightClick);
function initAd() {
var imgNum = Math.floor(Math.random() * Math.floor(3)) + 1;
var ref = ['5c0way', '4e41pq', '3t6gmo'];
var img = '<img src="/img/pulsewave-spot'+imgNum+'.png" alt="PulseWave - Audible for news." width="166" height="300"/>';
$('.bottom-left-image-link').html(img);
$('.bottom-left-image-link').get(0).href = 'https://www.kickstarter.com/projects/blit-labs/pulsewave-hear-the-news-in-your-own-way-every-day?ref=' + (ref[imgNum - 1]);
}
function toggleLightTheme() {
var isLightTheme = localStorage.getItem('lighttheme');
if (isLightTheme) {
disableLightTheme();
} else {
enableLightTheme();
}
}
function enableLightTheme() {
localStorage.setItem('lighttheme', true);
$('body').addClass('lighttheme');
$('#lighttheme-toggle').get(0).checked = true;
setTheme('default');
}
function disableLightTheme() {
localStorage.removeItem('lighttheme');
$('body').removeClass('lighttheme');
$('#lighttheme-toggle').get(0).checked = false;
setTheme('tomorrow-night');
}
function setTheme(theme) {
var views = getInputViews();
views.left.codemirror.setOption('theme', theme);
views.right.codemirror.setOption('theme', theme);
compareJson();
}
function onClickDownloadDiff() {
var filename = 'diff.json';
var text = JSON.stringify(window.diff, null, 2);
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function onPaneResizeLeftClick(e) {
onResize(e, 'left');
}
function onPaneResizeRightClick(e) {
onResize(e, 'right');
}
function onResize(e, side) {
e.preventDefault();
var otherSide = side === 'left' ? 'right' : 'left';
var clickClass = e.currentTarget.className;
$('.json-diff-input').removeClass('split');
$('.json-diff-input').removeClass('expand');
$('.json-diff-input').removeClass('collapse');
var sideClass = 'split';
var otherSideClass = 'split';
if (clickClass === 'input-collapse') {
sideClass = 'collapse';
otherSideClass = 'expand';
} else if (clickClass === 'input-expand') {
sideClass = 'expand';
otherSideClass = 'collapse';
}
$('#' + side + '-input').addClass(sideClass);
$('#' + otherSide + '-input').addClass(otherSideClass);
}
</script>
<script defer src="//tomato.blitlabs.com/tomato.php?siteId=6"></script>
</body>
</html>