Skip to content

Commit 818ed69

Browse files
author
Mohsen Azimi
committed
Fix demo and CSS
1 parent 0ce9d43 commit 818ed69

File tree

9 files changed

+843
-91
lines changed

9 files changed

+843
-91
lines changed

‎demo/index.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
var JSONFormatter = require('../dist/json-formatter.js').default;
2+
3+
var live = document.getElementById('live');
4+
var hoverPreviewEnabledCheckbox = document.getElementById('hoverPreviewEnabled');
5+
6+
function render() {
7+
live.style.backgroundColor = 'transparent';
8+
var result = document.getElementById('live-result');
9+
try {
10+
var formatter = new JSONFormatter(JSON.parse(live.value), 1, { hoverPreviewEnabled: hoverPreviewEnabledCheckbox.checked });
11+
result.innerHTML = '';
12+
result.appendChild(formatter.render());
13+
} catch (e) {
14+
live.style.backgroundColor = 'rgba(255, 87, 34, 0.35)';
15+
}
16+
}
17+
live.addEventListener('keyup', render);
18+
hoverPreviewEnabledCheckbox.addEventListener('change', render);
19+
render();
20+
21+
22+
var complex = {
23+
numbers: [
24+
1,
25+
2,
26+
3
27+
],
28+
boolean: true,
29+
'null': null,
30+
number: 123,
31+
anObject: {
32+
a: 'b',
33+
c: 'd',
34+
e: 'f\"'
35+
},
36+
string: 'Hello World',
37+
url: 'https://github.com/mohsen1/json-formatter-js',
38+
date: 'Sun Aug 03 2014 20:46:55 GMT-0700 (PDT)',
39+
func: function add(a, b) { return a + b; }
40+
};
41+
42+
var deep = { a: { b: { c: { d: {} } } } };
43+
44+
var examples = [
45+
{ title: 'Complex', json: complex },
46+
{ title: 'Number', json: 42 },
47+
{ title: 'null', json: null },
48+
{ title: 'Empty Object', json: Object.create(null) },
49+
{ title: 'Empty Array', json: [] },
50+
{ title: 'Deep', json: deep },
51+
{ title: 'Dark', json: complex, config: { theme: 'dark' } }
52+
];
53+
54+
var result = document.querySelector('.result');
55+
56+
examples.forEach(function (example) {
57+
var title = document.createElement('h3');
58+
var formatter = new JSONFormatter(example.json, 1, example.config);
59+
60+
title.innerText = example.title;
61+
62+
result.appendChild(title)
63+
var el = formatter.render();
64+
65+
if (example.config && example.config.theme === 'dark') {
66+
el.style.backgroundColor = '#1E1E1E';
67+
}
68+
69+
result.appendChild(el);
70+
});
71+
72+
fetch('demo/giant.json').then(function (resp) {
73+
resp.json().then(function (giant) {
74+
var giantFormatter = new JSONFormatter(giant, 2, { hoverPreviewEnabled: true });
75+
var title = document.createElement('h3');
76+
77+
title.innerText = 'Giant JSON';
78+
result.appendChild(title);
79+
80+
console.time('Rendering giant JSON');
81+
result.appendChild(giantFormatter.render());
82+
console.timeEnd('Rendering giant JSON');
83+
});
84+
})

‎demo/webpack.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
var path = require('path');
3+
4+
module.exports = {
5+
devtool: 'sourcemap',
6+
context: __dirname,
7+
entry: './index.js',
8+
output: {
9+
path: path.join(__dirname, '../dist/demo'),
10+
filename: 'index.js'
11+
}
12+
}

‎dist/demo/index.js‎

Lines changed: 575 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/demo/index.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/json-formatter.js‎

Lines changed: 167 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/json-formatter.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 1 addition & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<script src="dist/json-formatter.js"></script>
3+
<script defer src="dist/demo/index.js"></script>
44
<style type="text/css">
55
body {
66
max-width: 800px;
@@ -87,90 +87,5 @@ <h2>Playground</h2>
8787
</div>
8888
<h2>Examples</h2>
8989
<div class="result"></div>
90-
<script>
91-
var live = document.getElementById('live');
92-
var hoverPreviewEnabledCheckbox = document.getElementById('hoverPreviewEnabled');
93-
94-
95-
function render() {
96-
live.style.backgroundColor = 'transparent';
97-
var result = document.getElementById('live-result');
98-
try {
99-
var formatter = new JSONFormatter(JSON.parse(live.value), 1, {hoverPreviewEnabled: hoverPreviewEnabledCheckbox.checked});
100-
result.innerHTML = '';
101-
result.appendChild(formatter.render());
102-
} catch(e) {
103-
live.style.backgroundColor = 'rgba(255, 87, 34, 0.35)';
104-
}
105-
}
106-
live.addEventListener('keyup', render);
107-
hoverPreviewEnabledCheckbox.addEventListener('change', render);
108-
render();
109-
</script>
110-
<script>
111-
var complex = {
112-
numbers: [
113-
1,
114-
2,
115-
3
116-
],
117-
boolean: true,
118-
'null': null,
119-
number: 123,
120-
anObject: {
121-
a: 'b',
122-
c: 'd',
123-
e: 'f\"'
124-
},
125-
string: 'Hello World',
126-
url: 'https://github.com/mohsen1/json-formatter-js',
127-
date: 'Sun Aug 03 2014 20:46:55 GMT-0700 (PDT)',
128-
func: function add(a,b){return a + b; }
129-
};
130-
131-
var deep = {a:{b:{c:{d:{}}}}};
132-
133-
var examples = [
134-
{title: 'Complex', json: complex},
135-
{title: 'Number', json: 42},
136-
{title: 'null', json: null},
137-
{title: 'Empty Object', json: Object.create(null)},
138-
{title: 'Empty Array', json: []},
139-
{title: 'Deep', json: deep},
140-
{title: 'Dark', json: complex, config: {theme: 'dark'}}
141-
];
142-
143-
var result = document.querySelector('.result');
144-
145-
examples.forEach(function(example) {
146-
var title = document.createElement('h3');
147-
var formatter = new JSONFormatter(example.json, 1, example.config);
148-
149-
title.innerText = example.title;
150-
151-
result.appendChild(title)
152-
var el = formatter.render();
153-
154-
if (example.config && example.config.theme === 'dark') {
155-
el.style.backgroundColor = '#1E1E1E';
156-
}
157-
158-
result.appendChild(el);
159-
});
160-
161-
fetch('demo/giant.json').then(function(resp) {
162-
resp.json().then(function(giant) {
163-
var giantFormatter = new JSONFormatter(giant, 2, {hoverPreviewEnabled: true});
164-
var title = document.createElement('h3');
165-
166-
title.innerText = 'Giant JSON';
167-
result.appendChild(title);
168-
169-
console.time('Rendering giant JSON');
170-
result.appendChild(giantFormatter.render());
171-
console.timeEnd('Rendering giant JSON');
172-
});
173-
})
174-
</script>
17590
</body>
17691
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "JSON Formatter core library ",
55
"main": "dist/json-formatter.js",
66
"scripts": {
7-
"build": "webpack",
7+
"build": "webpack && webpack --config demo/webpack.config.js",
88
"test": "jest"
99
},
1010
"jest": {

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
createElement
99
} from './helpers';
1010

11-
import * as style from './style.less';
11+
import './style.less';
1212

1313
const DATE_STRING_REGEX = /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/;
1414
const PARTIAL_DATE_REGEX = /\d{2}:\d{2}:\d{2} GMT-\d{4}/;

0 commit comments

Comments
 (0)