Boolean Options

Options to enhance display of bool values New look & feel Options in the demo page
marianoguerra · Feb 28, 2015 · fa8ec42 · fa8ec42
1 parent f3e6b48
commit fa8ec42
Show file tree

Hide file tree

Showing 8 changed files with 279 additions and 53 deletions.
diff --git a/README.rst b/README.rst
@@ -55,6 +55,23 @@ Additional options parameter can be supplied
             enable : true,
             keys: ['url'],          // Keys which will be output as links
             target : '_blank'       // 'target' attribute of a
+        },
+
+        // Options for displaying bool
+        bool : {
+            // Show text? And what text for true & false?
+            showText : true,
+            text : {
+                true : "Yes",
+                false : "No"
+            },
+
+            // Show image? And which images (urls)?
+            showImage : true,
+            img : {
+                true : 'css/true.png',
+                false : 'css/false.png'
+            }
         }
     });
 

diff --git a/css/false.png b/css/false.png
diff --git a/css/image_credits.txt b/css/image_credits.txt
@@ -0,0 +1,2 @@
+Image Credit -
+https://www.iconfinder.com/iconsets/onebit
diff --git a/css/json.human.css b/css/json.human.css
@@ -1,27 +1,48 @@
+@import url(http://fonts.googleapis.com/css?family=Inconsolata);
+
 .jh-root, .jh-type-object, .jh-type-array, .jh-key, .jh-value, .jh-root tr{
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
+ font-family: 'Inconsolata' ;
+ font-weight: bold;
 }
 
 .jh-key, .jh-value{
  margin: 0;
  padding: 0.2em;
+ font-weight: bold;
 }
 
 .jh-value{
     border-left: 1px solid #ddd;
 }
 
-.jh-type-bool, .jh-type-number{
-    font-weight: bold;
+.jh-type-number{
     text-align: center;
     color: #5286BC;
 }
 
+.jh-type-bool-true{
+    text-align: center;
+    color: #5A811C;
+}
+
+.jh-type-bool-false{
+    text-align: center;
+    color: #D45317;
+}
+
+.jh-type-bool-image {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+    vertical-align: bottom;
+}
+
 .jh-type-string{
     font-style: italic;
-    color: #839B00;
+    color: #6E6E6E;
 }
 
 .jh-array-key{
@@ -86,7 +107,6 @@ th.jh-key{
 
 .jh-a span.jh-type-string {
     text-decoration: none;
-    font-weight: bold;
     color : #268ddd;
     font-style: normal;
 }

diff --git a/css/true.png b/css/true.png
diff --git a/index-no-requirejs.html b/index-no-requirejs.html
@@ -21,51 +21,124 @@ <h2>Why?</h2>
 
         <h2>How?</h2>
 
-        <p>you can see <a href="https://github.com/marianoguerra/json.human.js/blob/master/js/demo.js">js/demo.js</a> in the <a href="http://github.com/marianoguerra/json.human.js">repo</a> for an example, here is a short one</p>
+        <p>You can see <a href="https://github.com/marianoguerra/json.human.js/blob/master/js/demo.js">js/demo.js</a> in the <a href="http://github.com/marianoguerra/json.human.js">repo</a> for an example, here is a short one</p>
 
         <pre>
         var node = JsonHuman.format(input);
         output.appendChild(node);
         </pre>
 
         <h2>Try it</h2>
-        <p>edit the JSON and click <em>Convert</em></p>
-
-        <h2>Input: JSON</h2>
-
-        <textarea id="input">{
-  "name": "json.human",
-  "description": "Convert\n JSON to human readable\r HTML",
-  "author": "Mariano Guerra <mariano@marianoguerra.org>",
-  "tags": ["DOM", "HTML", "JSON", "Pretty Print"],
-  "version": "0.1.0",
-  "main": "json.human.js",
-  "license" : "MIT",
-  "dependencies": {
-      "crel": "1.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/marianoguerra/json.human.js.git"
-  },
-  "bugs": {
-    "url": "http://github.com/marianoguerra/json.human.js/issues"
-  },
-  "contributors": [],
-  "config": {
-    "what?": "this object is just to show some extra stuff",
-    "how?": ["add json.human.js", "add json.human.css", "???", "profit!"],
-    "customization?": ["customize the css prefix", "change the css file"],
-    "integer": 42,
-    "float": 12.3,
-    "bool": true,
-    "emptyString": "",
-    "emptyArray": [],
-    "emptyObject": {},
-    "htmlEntities": "   <- trailing <em>   & </em> and some html   "
-  }
+        <p>Edit the JSON and click <em>Convert</em></p>
+
+
+
+        <table>
+            <tr>
+                <td><h2>Input: JSON</h2></td>
+                <td><h2>Input: Options</h2></td>
+            </tr>
+            <tr>
+                <td>
+<textarea id="input">{
+    "name": "json.human",
+    "description": "Convert\n JSON to human readable\r HTML",
+    "author": "Mariano Guerra <mariano@marianoguerra.org>",
+    "tags": ["DOM", "HTML", "JSON", "Pretty Print"],
+    "version": "0.1.0",
+    "main": "json.human.js",
+    "license" : "MIT",
+
+    "dependencies": {
+        "crel": "1.0.0"
+    },
+
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/marianoguerra/json.human.js.git"
+    },
+
+    "bugs": {
+        "url": "http://github.com/marianoguerra/json.human.js/issues"
+    },
+
+    "contributors": [
+        "https://github.com/marianoguerra",
+        "https://github.com/anaran",
+        "https://github.com/Esya",
+        "https://github.com/nickyout",
+        "https://github.com/aJanuary",
+        "https://github.com/VikramN"
+    ],
+
+    "config": {
+        "what?": "this object is just to show some extra stuff",
+        "how?": ["add json.human.js", "add json.human.css", "???", "profit!"],
+        "customization?": ["customize the css prefix", "change the css file"],
+        "integer": 42,
+        "float": 12.3,
+        "bool": true,
+        "bool2": false,
+        "emptyString": "",
+        "emptyArray": [],
+        "emptyObject": {},
+        "htmlEntities": "   <- trailing <em>   & </em> and some html   "
+    }
 }
-        </textarea>
+</textarea>
+                </td>
+                <td>
+                    <div style="padding-left: 5px; padding-top: 10px;">
+                        Show Array Indices : <input id="opt_show_array_index" type="checkbox" checked> <br />
+
+                        <div style="margin: 10px 0px; font-weight: bold">Hyperlinks</div><hr>
+                        <table>
+                            <tr>
+                                <td>Enable Hyperlinks</td>
+                                <td><input id="opt_enable_hyperlinks" type="checkbox" checked></td>
+                            </tr>
+                            <tr>
+                                <td> Keys </td>
+                                <td><input id="opt_hyper_keys" type="text" placeholder="Ex: url, main" value="url, contributors"></td>
+                            </tr>
+                            <tr>
+                                <td> Hyperlink Target </td>
+                                <td><input id="opt_hyper_target" type="text" placeholder="Ex: _blank" value="_blank"></td>
+                            </tr>
+                        </table>
+                        <div  style="margin: 10px 0px; font-weight: bold">Boolean Options</div><hr>
+                        <table>
+                            <tr>
+                                <td>Show Text ? </td>
+                                <td><input id="opt_bool_show_text" type="checkbox" checked></td>
+                            </tr>
+                            <tr>
+                                <td> Label for "true" </td>
+                                <td><input id="opt_bool_text_true" type="text" placeholder="Ex: Yes" value="Yes"></td>
+                            </tr>
+                            <tr>
+                                <td> Label for "false" </td>
+                                <td><input id="opt_bool_text_false" type="text" placeholder="Ex: No" value="No"></td>
+                            </tr>
+                            <tr>
+                                <td>Show Image ? </td>
+                                <td><input id="opt_bool_show_img" type="checkbox" checked></td>
+                            </tr>
+                            <tr>
+                                <td> Url for "true" </td>
+                                <td><input id="opt_bool_img_true" type="text" placeholder="Ex: css/true.png" value="css/true.png"></td>
+                            </tr>
+                            <tr>
+                                <td> Url for "false" </td>
+                                <td><input id="opt_bool_img_false" type="text" placeholder="Ex: css/false.png" value="css/false.png"></td>
+                            </tr>
+                        </table>
+                    </div>
+                </td>
+            </tr>
+        </table>
+
+
 
         <div class="buttons">
             <button id="convert">Convert</button>
@@ -89,6 +162,9 @@ <h2>Alternatives</h2>
             <li><a href="https://github.com/padolsey/prettyPrint.js">prettyprint.js</a></li>
         </ul>
 
+        <br />
+        <span>Boolean Icons by - <a href="https://www.iconfinder.com/iconsets/onebit">https://www.iconfinder.com/iconsets/onebit</a></span>
+
 
         <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js"></script>
         <script src="lib/crel.js"></script>

diff --git a/js/demo.no.requirejs.js b/js/demo.no.requirejs.js
@@ -1,6 +1,31 @@
+window.options = {
+    showArrayIndex: false,
+    hyperlinks : {
+        enable : true,
+        keys: [],
+        target : '_blank'
+    },
+
+    bool : {
+        showText : true,
+        text : {
+            true : "true",
+            false : "false"
+        },
+        showImage : true,
+        img : {
+            true : 'css/true.png',
+            false : 'css/false.png'
+        }
+    }
+};
+
 /*global document, JSON, window, alert*/
 (function (JsonHuman, crel, CodeMirror) {
     "use strict";
+
+
+
     var textarea = document.getElementById("input"),
         output = document.getElementById("output"),
         raw = document.getElementById("output-raw"),
@@ -11,15 +36,28 @@
         });
 
     function convert(input, output) {
-        var node = JsonHuman.format(input, {
-            showArrayIndex: false,
-            hyperlinks : {
-                enable : true,
-                keys: ['url', 'main'],
-                target : '_blank'
-            }
-        });
+        var i;
+        var aOptions = window.options.hyperlinks;
+        var boolOptions = window.options.bool;
+
+        // Parse options
+        window.options.showArrayIndex = document.getElementById('opt_show_array_index').checked;
+
+        aOptions.enable = document.getElementById('opt_enable_hyperlinks').checked;
+        aOptions.keys = document.getElementById('opt_hyper_keys').value.split(',');
+        for(i =0; i < aOptions.keys.length; i++){
+            aOptions.keys[i] = aOptions.keys[i].trim();
+        }
+        aOptions.target = document.getElementById('opt_hyper_target').value;
+
+        boolOptions.showText = document.getElementById('opt_bool_show_text').checked;
+        boolOptions.showImage = document.getElementById('opt_bool_show_img').checked;
+        boolOptions.text.true = document.getElementById('opt_bool_text_true').value;
+        boolOptions.text.false = document.getElementById('opt_bool_text_false').value;
+        boolOptions.img.true = document.getElementById('opt_bool_img_true').value;
+        boolOptions.img.false = document.getElementById('opt_bool_img_false').value;
 
+        var node = JsonHuman.format(input, window.options);
         output.innerHTML = "";
         output.appendChild(node);
         raw.textContent = output.innerHTML;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Image Credit -
		https://www.iconfinder.com/iconsets/onebit