forked from BabOuDev/JSONCrush
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (120 loc) · 8.73 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
<!doctype html>
<!--
JSONCrush by Frank Force [MIT] https://github.com/KilledByAPixel/JSONCrush
Based on Javascript crusher by @aivopaas [MIT] http://www.iteral.com/jscrush
GitHub Corner is Copyright (c) 2016 Tim Holman - http://tholman.com
-->
<html>
<head>
<title>JSONCrush Demo</title>
</head>
<body>
<big>JSONCrush Demo - Compress JSON into URL friendly strings</big>
<br>
<br>This simple system allows for excellent compression of URI encoded JSON strings using JSCrush.
<br>No additional libraries are used and minified code is less than 2k.
<br>
<br><a href="JSONCrush.js" target="_blank">Download JSONCrush.js</a>
<br><a href="JSONCrush.min.js" target="_blank">Download JSONCrush.min.js</a>
<br>
<br>
<table><tr><td>
JSON:
<br><textarea id=textarea_JSON cols=80 rows=10 placeholder="Paste JSON here."></textarea>
<br>
<br>Uncrushed:
<br><textarea disabled id=textarea_uncrushed cols=80 rows=10></textarea>
<br><div id=div_uncrushed_check></div>
</td><td>
URI Encoded Component:
<br><textarea disabled id=textarea_uri cols=80 rows=10></textarea>
<br>
<br>Crushed URI Encoded Component:
<br><textarea disabled id=textarea_crushed_uri cols=80 rows=10></textarea>
<br><div id=div_size></div>
</td></tr></table>
<br>
<button onclick=UnitTests()>Preform Unit Tests</button>
<br>
<br>
<br><div id=div_unit_test_results></div>
<script src="JSONCrush.js?12"></script>
<script>
"use strict";
textarea_JSON.oninput=_=>
{
try
{
let originalString = textarea_JSON.value;
let uri = encodeURIComponent(originalString);
let crushed = JSONCrush(originalString);
textarea_uri.value = uri;
textarea_crushed_uri.value = crushed;
let length1 = uri.length;
let length2 = crushed.length;
let size = 'URI Encoded Size Difference: ' + length1 + " to " + length2;
let percent = (100*length2/length1).toFixed(2) + '%';
div_size.innerHTML = 'Compressed Size Difference: ' + percent;
let uncrushed = JSONUncrush(decodeURIComponent(crushed));
textarea_uncrushed.value = uncrushed;
let success = originalString == uncrushed;
div_uncrushed_check.innerHTML = success? "SUCCESS: Strings match!" : "ERROR: Strings don't match!";
}
catch (e)
{
div_uncrushed_check.innerHTML = "ERROR: " + e.message;
}
}
function UnitTests()
{
let output = 'Unit Test Results...';
for(let test of unitTests)
{
let crushed = '';
let uncrushed = '';
let error = '';
try
{
crushed = JSONCrush(test);
uncrushed = JSONUncrush(decodeURIComponent(crushed));
}
catch (e)
{
error = e.message;
}
let uri = encodeURIComponent(test);
let length1 = uri.length;
let length2 = crushed.length;
let percent = (100*length2/length1).toFixed(2) + '%';
output += '<pre>' + test + '</pre>';
if (test != uncrushed)
{
output += 'FAIL! '
if (error)
output += 'Error: ' + error;
else
output += "Crushed string doesn't match: '" + uncrushed + "'";
}
else
output += 'PASS!' + ' Size Difference: ' + percent;
if (length2 > length1)
output += ' Compressed is larger!';
output += '<br><br>';
}
div_unit_test_results.innerHTML = output;
}
let unitTests =
[
'This is the first unit test, feel free to add more.',
'{"students":[{"name":"Jack","age":17},{"name":"Jill","age":16},{"name":"Sue","age":16}],"class":"math"}',
'{"shaderStatements":[{"output":"b","outputSwizzle":"zxyw","assignmentOperator":"-=","functionName":"","parameter":"a","valueX":6.62,"valueY":6.165,"valueZ":-0.974,"valueW":-4.233,"parameterSwizzle":"xzyy"},{"output":"b","outputSwizzle":"ywxz","assignmentOperator":"-=","functionName":"","parameter":"a","valueX":-4.88,"valueY":0.649,"valueZ":0.171,"valueW":-0.084,"parameterSwizzle":"yzwx"},{"output":"a","outputSwizzle":"xzwy","assignmentOperator":"*=","functionName":"logA","parameter":"b","valueX":-2.368,"valueY":-7.284,"valueZ":-5.01,"valueW":-0.005,"parameterSwizzle":"zzwz"},{"output":"b","outputSwizzle":"xwzy","assignmentOperator":"-=","functionName":"sin","parameter":"b","valueX":-3.686,"valueY":-3.258,"valueZ":-4.059,"valueW":-8.506,"parameterSwizzle":"wwzz"},{"output":"b","outputSwizzle":"zxyw","assignmentOperator":"=","functionName":"ceil","parameter":"b","valueX":5.36,"valueY":-8.274,"valueZ":0.002,"valueW":5.429,"parameterSwizzle":"xxwy"},{"output":"a","outputSwizzle":"xzwy","assignmentOperator":"=","functionName":"","parameter":"b","valueX":-3.353,"valueY":-5.681,"valueZ":-7.792,"valueW":1.254,"parameterSwizzle":"zyxw"},{"output":"b","outputSwizzle":"ywxz","assignmentOperator":"+=","functionName":"floor","parameter":"a","valueX":6.669,"valueY":-0.05,"valueZ":-8.629,"valueW":-2.802,"parameterSwizzle":"xyyw"},{"output":"b","outputSwizzle":"xywz","assignmentOperator":"+=","functionName":"fract","parameter":"a","valueX":0.103,"valueY":-3.118,"valueZ":0.255,"valueW":6.287,"parameterSwizzle":"xyyw"},{"output":"a","outputSwizzle":"zxyw","assignmentOperator":"/=","functionName":"ceil","parameter":"","valueX":5.484,"valueY":-1.26,"valueZ":8.705,"valueW":-1.59,"parameterSwizzle":"zyyw"},{"output":"a","outputSwizzle":"wyzx","assignmentOperator":"=","functionName":"sqrtA","parameter":"b","valueX":-0.366,"valueY":-0.117,"valueZ":0.162,"valueW":1.761,"parameterSwizzle":"yywy"},{"output":"a","outputSwizzle":"yxzw","assignmentOperator":"*=","functionName":"atan","parameter":"b","valueX":3.743,"valueY":-0.003,"valueZ":4.636,"valueW":0.056,"parameterSwizzle":"wxxw"},{"output":"b","outputSwizzle":"zwxy","assignmentOperator":"=","functionName":"","parameter":"","valueX":6.083,"valueY":-6.322,"valueZ":0.032,"valueW":0.428,"parameterSwizzle":"yzyy"},{"output":"a","outputSwizzle":"zxyw","assignmentOperator":"/=","functionName":"","parameter":"a","valueX":0.151,"valueY":1.024,"valueZ":-2.862,"valueW":3.193,"parameterSwizzle":"xzyx"},{"output":"a","outputSwizzle":"zwxy","assignmentOperator":"*=","functionName":"","parameter":"a","valueX":-1.637,"valueY":1.828,"valueZ":1.924,"valueW":-0.006,"parameterSwizzle":"yxyy"}],"randSeed":-1810015485,"randSeedString":"1574121532870","iterationCount":1,"gridPosX":4,"gridPosY":0,"generation":17,"subGeneration":1,"hueOffset":0.218,"hueScale":-0.789,"saturationScale":0.493,"uvOffsetX":-0.36,"uvOffsetY":0.559,"uvScaleX":1.02,"uvScaleY":-1.143,"rotate":0,"usePalette":0,"paletteColors":[{"x":0.041,"y":0.01,"z":0.584},{"x":0.131,"y":0.102,"z":0.658},{"x":0.9,"y":0.855,"z":0.917},{"x":0.797,"y":0.882,"z":0.478}],"saveListIndex":-1,"uniqueID":361315861}',
`unescaped characters: _-.:!~*'{}":,"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`,
'emojis: 😄🐰🐢 ☂👍☕ ©¥ñ ✌♥☻␌',
'compressed emojis: aa😄aa😄aa😄aa😄aa🐰🐢🐰🐢🐰🐢🐰🐢🐰🐰🐢🐰🐢🐰🐢🐰🐢🐰🐰🐢🐰🐢🐰🐢🐰🐢🐰',
'aaaaaaaa',
'This test should fail because delimiters \u0001\u0001\u0001\u0001 (\\u0001) will be removed.',
];
</script>
<a href="https://github.com/KilledByAPixel/JSONCrush" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#5AF; color:#222; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</body>
</html>