8000 add json formatter · supercoderhawk/emr-processor@f5cdbd0 · GitHub
[go: up one dir, main page]
Skip to content

Commit f5cdbd0

Browse files
supercoderhawksupercoderhawk
committed
add json formatter
1 parent 02ebf5c commit f5cdbd0

File tree

1 file changed

+218
-0
lines changed

1 file changed

+218
-0
lines changed

‎app/src/renderer/utils/formatter.js

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
import JsonFormatter from 'json-formatter-js'
2+
3+
class JSONFormatter {
4+
}
5+
6+
JSONFormatter.install = function (Vue, options) {
7+
Vue.directive('json-content', function (el, binding) {
8+
// console.log("display-json", el, binding);
9+
let renderer = new JsonFormatter(binding.value)
10+
el.appendChild(renderer.render())
11+
if (!document.getElementById('json-formatter-style')) {
12+
let styleTag = document.createElement('style')
13+
styleTag.setAttribute('id', 'json-formatter-style')
14+
styleTag.setAttribute('type', 'text/css')
15+
let css = document.createTextNode(`
16+
.json-formatter-row {
17+
font-family: monospace;
18+
}
19+
.json-formatter-row,
20+
.json-formatter-row a,
21+
.json-formatter-row a:hover {
22+
color: black;
23+
text-decoration: none;
24+
text-decoration: none;
25+
}
26+
.json-formatter-row .json-formatter-row {
27+
margin-left: 1rem;
28+
}
29+
.json-formatter-row .json-formatter-children.json-formatter-empty {
30+
opacity: 0.5;
31+
margin-left: 1rem;
32+
}
33+
.json-formatter-row .json-formatter-children.json-formatter-empty:after {
34+
display: none;
35+
}
36+
.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {
37+
content: "No properties";
38+
}
39+
.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {
40+
content: "[]";
41+
}
42+
.json-formatter-row .json-formatter-string {
43+
color: green;
44+
white-space: pre;
45+
word-wrap: break-word;
46+
}
47+
.json-formatter-row .json-formatter-number {
48+
color: blue;
49+
}
50+
.json-formatter-row .json-formatter-boolean {
51+
color: red;
52+
}
53+
.json-formatter-row .json-formatter-null {
54+
color: #855A00;
55+
}
56+
.json-formatter-row .json-formatter-undefined {
57+
color: #ca0b69;
58+
}
59+
.json-formatter-row .json-formatter-function {
60+
color: #FF20ED;
61+
}
62+
.json-formatter-row .json-formatter-date {
63+
background-color: rgba(0, 0, 0, 0.05);
64+
}
65+
.json-formatter-row .json-formatter-url {
66+
text-decoration: underline;
67+
color: blue;
68+
cursor: pointer;
69+
}
70+
.json-formatter-row .json-formatter-bracket {
71+
color: blue;
72+
}
73+
.json-formatter-row .json-formatter-key {
74+
color: #00008B;
75+
cursor: pointer;
76+
padding-right: 0.2rem;
77+
}
78+
.json-formatter-row .json-formatter-constructor-name {
79+
cursor: pointer;
80+
}
81+
.json-formatter-row .json-formatter-toggler {
82+
line-height: 1.2rem;
83+
font-size: 0.7rem;
84+
vertical-align: middle;
85+
opacity: 0.6;
86+
cursor: pointer;
87+
padding-right: 0.2rem;
88+
}
89+
.json-formatter-row .json-formatter-toggler:after {
90+
display: inline-block;
91+
transition: transform 100ms ease-in;
92+
content: "\\25BA";
93+
}
94+
.json-formatter-row > a > .json-formatter-preview-text {
95+
opacity: 0;
96+
transition: opacity 0.15s ease-in;
97+
font-style: italic;
98+
}
99+
.json-formatter-row:hover > a > .json-formatter-preview-text {
100+
opacity: 0.6;
101+
}
102+
.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {
103+
transform: rotate(90deg);
104+
}
105+
.json-formatter-row.json-formatter-open > .json-formatter-children:after {
106+
display: inline-block;
107+
}
108+
.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {
109+
display: none;
110+
}
111+
.json-formatter-row.json-formatter-open.json-formatter-empty:after {
112+
display: block;
113+
}
114+
.json-formatter-dark.json-formatter-row {
115+
font-family: monospace;
116+
}
117+
.json-formatter-dark.json-formatter-row,
118+
.json-formatter-dark.json-formatter-row a,
119+
.json-formatter-dark.json-formatter-row a:hover {
120+
color: white;
121+
text-decoration: none;
122+
}
123+
.json-formatter-dark.json-formatter-row .json-formatter-row {
124+
margin-left: 1rem;
125+
}
126+
.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty {
127+
opacity: 0.5;
128+
margin-left: 1rem;
129+
}
130+
.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty:after {
131+
display: none;
132+
}
133+
.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {
134+
content: "No properties";
135+
}
136+
.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {
137+
content: "[]";
138+
}
139+
.json-formatter-dark.json-formatter-row .json-formatter-string {
140+
color: #31F031;
141+
white-space: pre;
142+
word-wrap: break-word;
143+
}
144+
.json-formatter-dark.json-formatter-row .json-formatter-number {
145+
color: #66C2FF;
146+
}
147+
.json-formatter-dark.json-formatter-row .json-formatter-boolean {
148+
color: #EC4242;
149+
}
150+
.json-formatter-dark.json-formatter-row .json-formatter-null {
151+
color: #EEC97D;
152+
}
153+
.json-formatter-dark.json-formatter-row .json-formatter-undefined {
154+
color: #ef8fbe;
155+
}
156+
.json-formatter-dark.json-formatter-row .json-formatter-function {
157+
color: #FD48CB;
158+
}
159+
.json-formatter-dark.json-formatter-row .json-formatter-date {
160+
background-color: rgba(255, 255, 255, 0.05);
161+
}
162+
.json-formatter-dark.json-formatter-row .json-formatter-url {
163+
text-decoration: underline;
164+
color: #027BFF;
165+
cursor: pointer;
166+
}
167+
.json-formatter-dark.json-formatter-row .json-formatter-bracket {
168+
color: #9494FF;
169+
}
170+
.json-formatter-dark.json-formatter-row .json-formatter-key {
171+
color: #23A0DB;
172+
cursor: pointer;
173+
padding-right: 0.2rem;
174+
}
175+
.json-formatter-dark.json-formatter-row .json-formatter-constructor-name {
176+
cursor: pointer;
177+
}
178+
.json-formatter-dark.json-formatter-row .json-formatter-toggler {
179+
line-height: 1.2rem;
180+
font-size: 0.7rem;
181+
vertical-align: middle;
182+
opacity: 0.6;
183+
cursor: pointer;
184+
padding-right: 0.2rem;
185+
}
186+
.json-formatter-dark.json-formatter-row .json-formatter-toggler:after {
187+
display: inline-block;
188+
transition: transform 100ms ease-in;
189+
content: "\\25BA";
190+
}
191+
.json-formatter-dark.json-formatter-row > a > .json-formatter-preview-text {
192+
opacity: 0;
193+
transition: opacity 0.15s ease-in;
194+
font-style: italic;
195+
}
196+
.json-formatter-dark.json-formatter-row:hover > a > .json-formatter-preview-text {
197+
opacity: 0.6;
198+
}
199+
.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {
200+
transform: rotate(90deg);
201+
}
202+
.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-children:after {
203+
display: inline-block;
204+
}
205+
.json-formatter-dark.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {
206+
display: none;
207+
}
208+
.json-formatter-dark.json-formatter-row.json-formatter-open.json-formatter-empty:after {
209+
display: block;
210+
}
211+
`)
212+
styleTag.appendChild(css)
213+
document.head.appendChild(styleTag)
214+
}
215+
})
216+
}
217+
218+
export default JSONFormatter

0 commit comments

Comments
 (0)
0