Skip to content

Commit 9cf0c99

Browse files
ZsharEZsharE
committed
playground
1 parent 5d6f494 commit 9cf0c99

File tree

5 files changed

+755
-0
lines changed

5 files changed

+755
-0
lines changed

‎playground/assets/css/jsontree.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
ul.jstList {
2+
padding-left: 15px;
3+
list-style: none;
4+
margin-top: 0;
5+
margin-bottom: 0;
6+
}
7+
li.jstItem {
8+
padding-left: 0px;
9+
list-style: none;
10+
}
11+
12+
.jstTree {
13+
font-size: 12px;
14+
font-weight: 400;
15+
font-family: monospace;
16+
}
17+
18+
.jstProperty {
19+
color: #68bb97;
20+
}
21+
22+
.jstBool {
23+
color: #1CA8DD;
24+
}
25+
26+
.jstNum {
27+
color: #9F85FF;
28+
}
29+
30+
.jstNull {
31+
color: #D0D0D0;
32+
}
33+
34+
.jstStr {
35+
color: #9cc966;
36+
}
37+
38+
.jstComma {
39+
}
40+
41+
.jstColon {
42+
}
43+
44+
.jstCollapse {
45+
margin-left: -15px;
46+
position: absolute;
47+
-webkit-user-select: none;
48+
user-select: none;
49+
text-decoration: none;
50+
color: inherit;
51+
cursor: pointer;
52+
}
53+
54+
.jstExpand {
55+
margin-left: -15px;
56+
position: absolute;
57+
-webkit-user-select: none;
58+
user-select: none;
59+
text-decoration: none;
60+
color: inherit;
61+
cursor: pointer;
62+
}
63+
64+
.jstCollapse::before {
65+
content: '-';
66+
}
67+
68+
.jstExpand::before {
69+
content: '+'
70+
}
71+
72+
.jstBracket {
73+
}
74+
75+
.jstHiddenBlock {
76+
display: none;
77+
}

‎playground/assets/css/style.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
hr {
2+
margin: 30px -15px 5px -15px;
3+
border-color: #ddd;
4+
}
5+
6+
.bg-dark {
7+
background: #1e1e2d !important;
8+
}
9+
10+
.playground-wrapper {
11+
display: flex;
12+
height: calc(100vh - 56px);
13+
}
14+
15+
.playground-options {
16+
flex: 0 50%;
17+
padding: 15px;
18+
background: #ffffff;
19+
overflow-y: auto;
20+
}
21+
22+
.form-options {
23+
margin: -15px -15px 0px -15px;
24+
padding: 15px;
25+
background: #f2f6f9;
26+
border-bottom: 1px solid #ddd;
27+
}
28+
29+
.captureConsoleOptions {
30+
display: flex;
31+
justify-content: end;
32+
align-items: center;
33+
height: 100%;
34+
}
35+
36+
.playground-console {
37+
flex: 0 50%;
38+
padding: 15px;
39+
overflow-y: auto;
40+
background: #1b283f;
41+
}
42+
43+
.playground-console .message {
44+
color: #fff;
45+
margin: -15px -15px 15px -15px;
46+
padding: 6px 15px;
47+
position: sticky;
48+
top: -15px;
49+
z-index: 9;
50+
}
51+
.playground-console .message.error {
52+
background: #e6614f;
53+
}
54+
.playground-console .message.warning {
55+
background: #c9970e;
56+
}
57+
.playground-console .message.information {
58+
background: #0da58e;
59+
}
60+
.playground-console .message.debug {
61+
background: #789b95;
62+
}
63+
64+
.jstTree {
65+
position: relative;
66+
}
67+
.jstTree .jstBracket,
68+
.jstTree .jstComma,
69+
.jstTree .jstColon {
70+
color: #fff;
71+
}
72+
.jstTree .jstCollapse,
73+
.jstTree .jstExpand {
74+
color: red;
75+
}
76+
77+
@media (max-width: 991px) {
78+
.captureConsoleOptions {
79+
display: block;
80+
align-items: unset;
81+
justify-content: unset;
82+
margin-bottom: 15px;
83+
}
84+
}

‎playground/assets/js/jsontree.js‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
var JSONTree = (function() { // eslint-disable-line no-unused-vars
2+
var escapeMap = {
3+
'&': '&',
4+
'<': '&lt;',
5+
'>': '&gt;',
6+
'"': '&quot;',
7+
'\'': '&#x27;',
8+
'/': '&#x2F;',
9+
};
10+
11+
var internalId = 0;
12+
var instances = 0;
13+
14+
this.create = function(data, settings) {
15+
instances += 1;
16+
return '<div class="jstTree">' + _jsVal(data) + '</div>';
17+
};
18+
19+
this.click = function(elem) {
20+
if (elem.nextElementSibling.className !== 'jstHiddenBlock') {
21+
var block = findNextWithClass(elem, 'jstBracket');
22+
var siblings = _nextUntil(block, block.id + '_end');
23+
_hide(elem, siblings);
24+
elem.className = 'jstExpand';
25+
} else {
26+
var block = findNextWithClass(elem, 'jstBracket');
27+
var hiddenElements = findNextWithClass(elem, 'jstHiddenBlock');
28+
var children = hiddenElements.children;
29+
for (var i = children.length; i > 0; i--) {
30+
var child = children[i - 1];
31+
block.after(child);
32+
}
33+
hiddenElements.remove();
34+
elem.className = 'jstCollapse';
35+
}
36+
};
37+
38+
var findNextWithClass = function(element, clazz) {
39+
var next = element.nextElementSibling;
40+
while (true) {
41+
if (next.className === clazz) {
42+
return next;
43+
}
44+
next = next.nextElementSibling;
45+
}
46+
};
47+
48+
var _id = function() {
49+
return instances + '_' + internalId++;
50+
};
51+
52+
var _escape = function(text) {
53+
return text.replace(/[&<>'"]/g, function(c) {
54+
return escapeMap[c];
55+
});
56+
};
57+
58+
var _jsVal = function(value) {
59+
var type = typeof value;
60+
switch (type) {
61+
case 'boolean':
62+
return _jsBool(value);
63+
case 'number':
64+
return _jsNum(value);
65+
case 'string':
66+
return _jsStr(value);
67+
default:
68+
if (value === null) {
69+
return _jsNull();
70+
} else if (value instanceof Array) {
71+
return _jsArr(value);
72+
} else {
73+
return _jsObj(value);
74+
}
75+
}
76+
};
77+
78+
var _jsObj = function(object) {
79+
var id = _id();
80+
var elements = [];
81+
var keys = Object.keys(object);
82+
keys.forEach(function(key, index) {
83+
var html = [];
84+
html.push('<li class="jstItem">');
85+
if (_canCollapse(object[key])) {
86+
html.push(_collapseElem());
87+
}
88+
html.push(_property(key, object[key]));
89+
if (index !== keys.length - 1) {
90+
html.push(_comma());
91+
}
92+
html.push('</li>');
93+
elements.push(html.join(''));
94+
});
95+
var body = elements.join('');
96+
return _collection(_open('{', id), body, _close('}', id));
97+
};
98+
99+
var _collapseElem = function() {
100+
var onClick = 'onclick="JSONTree.click(this); return false;"';
101+
return '<span class="jstCollapse" ' + onClick + '></span>';
102+
};
103+
104+
var _canCollapse = function(data) {
105+
var type = typeof data;
106+
switch (type) {
107+
case 'boolean':
108+
return false;
109+
case 'number':
110+
return false;
111+
case 'string':
112+
return false;
113+
default:
114+
if (data === null) {
115+
return false;
116+
} else if (data instanceof Array) {
117+
return data.length > 0;
118+
} else {
119+
return Object.keys(data).length > 0;
120+
}
121+
}
122+
};
123+
124+
var _collection = function(opening, data, closing) {
125+
if (data.length > 0) {
126+
return [
127+
opening,
128+
'<ul class="jstList">',
129+
data,
130+
'</ul>',
131+
closing,
132+
].join('');
133+
} else {
134+
return opening + closing;
135+
}
136+
};
137+
138+
var _jsArr = function(array) {
139+
var id = _id();
140+
var elements = [];
141+
array.forEach(function(element, index) {
142+
var html = ['<li class="jstItem">'];
143+
if (_canCollapse(element)) {
144+
html.push(_collapseElem());
145+
}
146+
html.push(_jsVal(element));
147+
if (index !== array.length - 1) {
148+
html.push(_comma());
149+
}
150+
html.push('</li>');
151+
elements.push(html.join(''));
152+
});
153+
var body = elements.join('');
154+
return _collection(_open('[', id), body, _close(']', id));
155+
};
156+
157+
var _jsStr = function(value) {
158+
var jsonString = _escape(JSON.stringify(value));
159+
return _element(jsonString, {class: 'jstStr'});
160+
};
161+
162+
var _jsNum = function(value) {
163+
return _element(value, {class: 'jstNum'});
164+
};
165+
166+
var _jsBool = function(value) {
167+
return _element(value, {class: 'jstBool'});
168+
};
169+
170+
var _jsNull = function() {
171+
return _element('null', {class: 'jstNull'});
172+
};
173+
174+
var _property = function(name, value) {
175+
var escapedValue = _escape(JSON.stringify(name));
176+
var property = _element(escapedValue, {class: 'jstProperty'});
177+
var propertyValue = _jsVal(value);
178+
return [property + _colon(), propertyValue].join('');
179+
};
180+
181+
var _colon = function() {
182+
return _element(': ', {class: 'jstColon'});
183+
};
184+
185+
var _comma = function() {
186+
return _element(',', {class: 'jstComma'});
187+
};
188+
189+
var _element = function(content, attrs) {
190+
var attrsStr = Object.keys(attrs).map(function(attr) {
191+
return ' ' + attr + '="' + attrs[attr] + '"';
192+
}).join('');
193+
return '<span' + attrsStr + '>' + content + '</span>';
194+
};
195+
196+
var _open = function(sym, id) {
197+
return _element(sym, {id: 'opening_' + id, class: 'jstBracket'});
198+
};
199+
200+
var _close = function(sym, id) {
201+
return _element(sym, {id: 'opening_' + id + '_end', class: 'jstBracket'});
202+
};
203+
204+
var _nextUntil = function(elem, id) {
205+
var siblings = [];
206+
elem = elem.nextElementSibling;
207+
while (elem) {
208+
if (elem.id == id) {
209+
break;
210+
}
211+
siblings.push(elem);
212+
elem = elem.nextElementSibling;
213+
}
214+
return siblings;
215+
};
216+
217+
var _hide = function(elem, siblings) {
218+
var wrapper = document.createElement('div');
219+
wrapper.className = 'jstHiddenBlock';
220+
siblings.forEach(function(s) {
221+
wrapper.appendChild(s);
222+
});
223+
elem.after(wrapper);
224+
};
225+
226+
return this;
227+
})();

‎playground/favicon.ico‎

9.44 KB
Binary file not shown.

0 commit comments

Comments
 (0)