Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf959de6

Browse files
committed
Merge pull request#27 from VikramN/master
Customize Boolean Display
2 parents76f2619 +28a33d5 commitf959de6

File tree

8 files changed

+280
-53
lines changed

8 files changed

+280
-53
lines changed

‎README.rst‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,23 @@ Additional options parameter can be supplied
5555
enable : true,
5656
keys: ['url'], // Keys which will be output as links
5757
target : '_blank' // 'target' attribute of a
58+
},
59+
60+
// Options for displaying bool
61+
bool : {
62+
// Show text? And what text for true & false?
63+
showText : true,
64+
text : {
65+
true : "Yes",
66+
false : "No"
67+
},
68+
69+
// Show image? And which images (urls)?
70+
showImage : true,
71+
img : {
72+
true : 'css/true.png',
73+
false : 'css/false.png'
74+
}
5875
}
5976
});
6077

‎css/demo.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@importurl(http://fonts.googleapis.com/css?family=Inconsolata);
2+
13
html,body{
24
margin:0;
35
padding:0;
@@ -50,3 +52,7 @@ button:hover, button:focus, button:active{
5052
.CodeMirror{
5153
border:1px solid#ddd;
5254
}
55+
56+
.jh-root {
57+
font-family:'Inconsolata' ;
58+
}

‎css/false.png‎

1.59 KB
Loading

‎css/json.human.css‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,44 @@
22
-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */
33
-moz-box-sizing: border-box;/* Firefox, other Gecko */
44
box-sizing: border-box;/* Opera/IE 8+ */
5+
font-weight: bold;
56
}
67

78
.jh-key, .jh-value{
89
margin:0;
910
padding:0.2em;
11+
font-weight: bold;
1012
}
1113

1214
.jh-value{
1315
border-left:1px solid#ddd;
1416
}
1517

16-
.jh-type-bool, .jh-type-number{
17-
font-weight: bold;
18+
.jh-type-number{
1819
text-align: center;
1920
color:#5286BC;
2021
}
2122

23+
.jh-type-bool-true{
24+
text-align: center;
25+
color:#5A811C;
26+
}
27+
28+
.jh-type-bool-false{
29+
text-align: center;
30+
color:#D45317;
31+
}
32+
33+
.jh-type-bool-image {
34+
width:20px;
35+
height:20px;
36+
margin-right:5px;
37+
vertical-align: bottom;
38+
}
39+
2240
.jh-type-string{
2341
font-style: italic;
24-
color:#839B00;
42+
color:#6E6E6E;
2543
}
2644

2745
.jh-array-key{
@@ -86,7 +104,6 @@ th.jh-key{
86104

87105
.jh-aspan.jh-type-string {
88106
text-decoration: none;
89-
font-weight: bold;
90107
color:#268ddd;
91108
font-style: normal;
92109
}

‎css/true.png‎

1.65 KB
Loading

‎index-no-requirejs.html‎

Lines changed: 113 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,51 +21,124 @@ <h2>Why?</h2>
2121

2222
<h2>How?</h2>
2323

24-
<p>you can see<ahref="https://github.com/marianoguerra/json.human.js/blob/master/js/demo.js">js/demo.js</a> in the<ahref="http://github.com/marianoguerra/json.human.js">repo</a> for an example, here is a short one</p>
24+
<p>You can see<ahref="https://github.com/marianoguerra/json.human.js/blob/master/js/demo.js">js/demo.js</a> in the<ahref="http://github.com/marianoguerra/json.human.js">repo</a> for an example, here is a short one</p>
2525

2626
<pre>
2727
var node = JsonHuman.format(input);
2828
output.appendChild(node);
2929
</pre>
3030

3131
<h2>Try it</h2>
32-
<p>edit the JSON and click<em>Convert</em></p>
33-
34-
<h2>Input: JSON</h2>
35-
36-
<textareaid="input">{
37-
"name": "json.human",
38-
"description": "Convert\n JSON to human readable\r HTML",
39-
"author": "Mariano Guerra<mariano@marianoguerra.org>",
40-
"tags": ["DOM", "HTML", "JSON", "Pretty Print"],
41-
"version": "0.1.0",
42-
"main": "json.human.js",
43-
"license" : "MIT",
44-
"dependencies": {
45-
"crel": "1.0.0"
46-
},
47-
"repository": {
48-
"type": "git",
49-
"url": "git://github.com/marianoguerra/json.human.js.git"
50-
},
51-
"bugs": {
52-
"url": "http://github.com/marianoguerra/json.human.js/issues"
53-
},
54-
"contributors": [],
55-
"config": {
56-
"what?": "this object is just to show some extra stuff",
57-
"how?": ["add json.human.js", "add json.human.css", "???", "profit!"],
58-
"customization?": ["customize the css prefix", "change the css file"],
59-
"integer": 42,
60-
"float": 12.3,
61-
"bool": true,
62-
"emptyString": "",
63-
"emptyArray": [],
64-
"emptyObject": {},
65-
"htmlEntities": "<-trailing<em> &</em> and some html "
66-
}
32+
<p>Edit the JSON and click<em>Convert</em></p>
33+
34+
35+
36+
<table>
37+
<tr>
38+
<td><h2>Input: JSON</h2></td>
39+
<td><h2>Input: Options</h2></td>
40+
</tr>
41+
<tr>
42+
<td>
43+
<textareaid="input">{
44+
"name": "json.human",
45+
"description": "Convert\n JSON to human readable\r HTML",
46+
"author": "Mariano Guerra<mariano@marianoguerra.org>",
47+
"tags": ["DOM", "HTML", "JSON", "Pretty Print"],
48+
"version": "0.1.0",
49+
"main": "json.human.js",
50+
"license" : "MIT",
51+
52+
"dependencies": {
53+
"crel": "1.0.0"
54+
},
55+
56+
"repository": {
57+
"type": "git",
58+
"url": "git://github.com/marianoguerra/json.human.js.git"
59+
},
60+
61+
"bugs": {
62+
"url": "http://github.com/marianoguerra/json.human.js/issues"
63+
},
64+
65+
"contributors": [
66+
"https://github.com/marianoguerra",
67+
"https://github.com/anaran",
68+
"https://github.com/Esya",
69+
"https://github.com/nickyout",
70+
"https://github.com/aJanuary",
71+
"https://github.com/VikramN"
72+
],
73+
74+
"config": {
75+
"what?": "this object is just to show some extra stuff",
76+
"how?": ["add json.human.js", "add json.human.css", "???", "profit!"],
77+
"customization?": ["customize the css prefix", "change the css file"],
78+
"integer": 42,
79+
"float": 12.3,
80+
"bool": true,
81+
"bool2": false,
82+
"emptyString": "",
83+
"emptyArray": [],
84+
"emptyObject": {},
85+
"htmlEntities": "<-trailing<em> &</em> and some html "
86+
}
6787
}
68-
</textarea>
88+
</textarea>
89+
</td>
90+
<td>
91+
<divstyle="padding-left: 5px; padding-top: 10px;">
92+
Show Array Indices :<inputid="opt_show_array_index"type="checkbox"checked><br/>
93+
94+
<divstyle="margin: 10px 0px; font-weight: bold">Hyperlinks</div><hr>
95+
<table>
96+
<tr>
97+
<td>Enable Hyperlinks</td>
98+
<td><inputid="opt_enable_hyperlinks"type="checkbox"checked></td>
99+
</tr>
100+
<tr>
101+
<td> Keys</td>
102+
<td><inputid="opt_hyper_keys"type="text"placeholder="Ex: url, main"value="url, contributors"></td>
103+
</tr>
104+
<tr>
105+
<td> Hyperlink Target</td>
106+
<td><inputid="opt_hyper_target"type="text"placeholder="Ex: _blank"value="_blank"></td>
107+
</tr>
108+
</table>
109+
<divstyle="margin: 10px 0px; font-weight: bold">Boolean Options</div><hr>
110+
<table>
111+
<tr>
112+
<td>Show Text ?</td>
113+
<td><inputid="opt_bool_show_text"type="checkbox"checked></td>
114+
</tr>
115+
<tr>
116+
<td> Label for "true"</td>
117+
<td><inputid="opt_bool_text_true"type="text"placeholder="Ex: Yes"value="Yes"></td>
118+
</tr>
119+
<tr>
120+
<td> Label for "false"</td>
121+
<td><inputid="opt_bool_text_false"type="text"placeholder="Ex: No"value="No"></td>
122+
</tr>
123+
<tr>
124+
<td>Show Image ?</td>
125+
<td><inputid="opt_bool_show_img"type="checkbox"checked></td>
126+
</tr>
127+
<tr>
128+
<td> Url for "true"</td>
129+
<td><inputid="opt_bool_img_true"type="text"placeholder="Ex: css/true.png"value="css/true.png"></td>
130+
</tr>
131+
<tr>
132+
<td> Url for "false"</td>
133+
<td><inputid="opt_bool_img_false"type="text"placeholder="Ex: css/false.png"value="css/false.png"></td>
134+
</tr>
135+
</table>
136+
</div>
137+
</td>
138+
</tr>
139+
</table>
140+
141+
69142

70143
<divclass="buttons">
71144
<buttonid="convert">Convert</button>
@@ -89,6 +162,9 @@ <h2>Alternatives</h2>
89162
<li><ahref="https://github.com/padolsey/prettyPrint.js">prettyprint.js</a></li>
90163
</ul>
91164

165+
<br/>
166+
<span>Boolean Icons by -<ahref="https://www.iconfinder.com/iconsets/onebit">https://www.iconfinder.com/iconsets/onebit</a></span>
167+
92168

93169
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js"></script>
94170
<scriptsrc="lib/crel.js"></script>

‎js/demo.no.requirejs.js‎

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,31 @@
1+
window.options={
2+
showArrayIndex:false,
3+
hyperlinks :{
4+
enable :true,
5+
keys:[],
6+
target :'_blank'
7+
},
8+
9+
bool :{
10+
showText :true,
11+
text :{
12+
true :"true",
13+
false :"false"
14+
},
15+
showImage :true,
16+
img :{
17+
true :'css/true.png',
18+
false :'css/false.png'
19+
}
20+
}
21+
};
22+
123
/*global document, JSON, window, alert*/
224
(function(JsonHuman,crel,CodeMirror){
325
"use strict";
26+
27+
28+
429
vartextarea=document.getElementById("input"),
530
output=document.getElementById("output"),
631
raw=document.getElementById("output-raw"),
@@ -11,15 +36,28 @@
1136
});
1237

1338
functionconvert(input,output){
14-
varnode=JsonHuman.format(input,{
15-
showArrayIndex:false,
16-
hyperlinks :{
17-
enable :true,
18-
keys:['url','main'],
19-
target :'_blank'
20-
}
21-
});
39+
vari;
40+
varaOptions=window.options.hyperlinks;
41+
varboolOptions=window.options.bool;
42+
43+
// Parse options
44+
window.options.showArrayIndex=document.getElementById('opt_show_array_index').checked;
45+
46+
aOptions.enable=document.getElementById('opt_enable_hyperlinks').checked;
47+
aOptions.keys=document.getElementById('opt_hyper_keys').value.split(',');
48+
for(i=0;i<aOptions.keys.length;i++){
49+
aOptions.keys[i]=aOptions.keys[i].trim();
50+
}
51+
aOptions.target=document.getElementById('opt_hyper_target').value;
52+
53+
boolOptions.showText=document.getElementById('opt_bool_show_text').checked;
54+
boolOptions.showImage=document.getElementById('opt_bool_show_img').checked;
55+
boolOptions.text.true=document.getElementById('opt_bool_text_true').value;
56+
boolOptions.text.false=document.getElementById('opt_bool_text_false').value;
57+
boolOptions.img.true=document.getElementById('opt_bool_img_true').value;
58+
boolOptions.img.false=document.getElementById('opt_bool_img_false').value;
2259

60+
varnode=JsonHuman.format(input,window.options);
2361
output.innerHTML="";
2462
output.appendChild(node);
2563
raw.textContent=output.innerHTML;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp