index-no-requirejs.html

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>json.human.js - Json Formatting for Human Beings</title>
        <link rel="stylesheet" media="all" href="css/demo.css" />
        <link rel="stylesheet" media="all" href="css/json.human.css" />
        <link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css" />
    </head>

    <body>
        <h1>json.human.js: Json Formatting for Human Beings</h1>

        <p class="project-description">Provide JSON and get a DOM node with
        a human representation of that JSON.</p>


        <h2>Why?</h2>

        <p>At <a href="http://event-fabric.com">Event Fabric</a> we need to display JSON to people from all technical levels without being too technical but also without losing information about the underlying JSON object.</p>

        <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>

        <pre>
        var node = JsonHuman.format(input);
        output.appendChild(node);
        </pre>

        <h2>Try it</h2>
        <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>
                </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>
        </div>

        <h2>Output: HTML</h2>

        <div id="output">
        </div>

        <h2>Raw HTML</h2>
        <textarea id="output-raw" style="width: 100%; height: 20em;">
        </textarea>

        <h2>License?</h2>

        <p><a href="http://opensource.org/licenses/MIT">MIT</a></p>

        <h2>Alternatives</h2>
        <ul>
            <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>
        <script src="src/json.human.js"></script>
        <script src="js/demo.no.requirejs.js"></script>
    </body>
</html>