<!DOCTYPE html>
<html>
<head>
<title>jsonTreeViewer</title>
<meta charset="utf-8" />
<link href="libs/app/reset.css" rel="stylesheet" />
<link href="libs/app/app.css" rel="stylesheet" />
<link href="libs/jsonTree/jsonTree.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<!--
JSON Tree Viewer
http://github.com/summerstyle/jsonTreeViewer
Copyright 2017 Vera Lobacheva (http://iamvera.com)
Released under the MIT license (LICENSE.txt)
-->
</head>
<body class="jsontree_bg">
<noscript>
<div id="noscript">
Please, enable javascript in your browser
</div>
</noscript>
<!-- Buttons -->
<header id="header">
<h1 id="logo">
<a href="http://github.com/summerstyle/jsonTreeViewer">
jsonTreeViewer
</a>
</h1>
<nav id="nav" class="clearfix">
<ul class="menu menu_level1">
<li data-action="load" class="menu__item">
<span class="menu__item-name">load</span>
</li>
<li data-action="expand" class="menu__item">
<span class="menu__item-name">expand all</span>
</li>
<li data-action="collapse" class="menu__item">
<span class="menu__item-name">collapse all</span>
</li>
<li data-action="find_and_mark" class="menu__item">
<span class="menu__item-name">find and mark</span>
</li>
<li data-action="unmark_all" class="menu__item">
<span class="menu__item-name">unmark all</span>
</li>
<li data-action="source" class="menu__item">
<span class="menu__item-name">show source</span>
</li>
<li data-action="help" class="menu__item">
<span class="menu__item-name">?</span>
</li>
</ul>
</nav>
<div id="coords"></div>
<div id="debug"></div>
</header>
<!-- json tree -->
<div id="wrapper">
<div id="tree"></div>
</div>
<!-- Help block -->
<div id="help">
<div class="txt">
<section>
<h5>1. Load json</h5>
<p>
Click on "load" button and load a json-string to opened form
</p>
</section>
<section>
<h5>2. Expand/collapse single nodes</h5>
<p>
By click on properties names (recursively - by <span class="key">CTRL/META</span> + click)
</p>
</section>
<section>
<h5>3. Expand/collapse all tree nodes</h5>
<p>
By click on "expand all" and "collapse all" buttons
</p>
</section>
<section>
<h5>4. Mark/unmark node labels</h5>
<p>
By click on label with pressed ALT key
</p>
</section>
<section>
<h5>5. Show JSONPath of node</h5>
<p>
By click on label with pressed SHIFT key
</p>
</section>
<footer>
<a href="http://github.com/summerstyle/jsonTreeViewer">jsonTreeViewer</a><br />
© 2017 Vera Lobacheva<br />
MIT License
</footer>
</div>
</div>
<!-- Load json block -->
<form id="load_json_form" class="form" data-header="Load json">
<section>
<p>
<label for="code_input">JSON:</label>
</p>
<p>
<textarea id="code_input"></textarea>
</p>
</section>
<button id="load_code_button">Load</button>
</form>
<!-- Find nodes form -->
<form id="find_nodes_form" class="form" data-header="Find nodes">
<section>
<p>
<label>
<input type="radio"
name="nodes_search_type"
value="label"
id="nodes_search_by_label"
checked="checked" />
By label name:
</label>
</p>
<input type="text" id="search_by_label_name" />
</section>
<section>
<p>
<label>
<input type="radio"
name="nodes_search_type"
id="nodes_search_by_type"
value="type" />
By value type:
</label>
</p>
<ul class="checkboxes">
<li>
<label>
<input type="checkbox" name="nodes_type" value="string" />
string
</label>
</li>
<li>
<label>
<input type="checkbox" name="nodes_type" value="number" />
number
</label>
</li>
<li>
<label>
<input type="checkbox" name="nodes_type" value="boolean" />
boolean
</label>
</li>
<li>
<label>
<input type="checkbox" name="nodes_type" value="null" />
null
</label>
</li>
<li>
<label>
<input type="checkbox" name="nodes_type" value="object" />
object
</label>
</li>
<li>
<label>
<input type="checkbox" name="nodes_type" value="array" />
array
</label>
</li>
</ul>
</section>
<button id="find_button">Find and mark</button>
</form>
<!-- For source JSON -->
<div class="code" id="source_json" data-header="Source JSON"></div>
<script src="libs/app/App.js"></script>
<script src="libs/jsonTree/jsonTree.js"></script>
<script src="jsonTreeViewer.js"></script>
<script>
var example = '{\
"firstName": "John",\
"lastName": "Smith",\
"isAlive": true,\
"age": 25,\
"company": null,\
"height_cm": 167.64,\
"address": {\
"streetAddress": "21 2nd Street",\
"city": "New York",\
"state": "NY",\
"postalCode": "10021-3100"\
},\
"phoneNumbers": [\
{\
"type": "home",\
"number": "212 555-1234"\
},\
{\
"type": "fax",\
"number": "646 555-4567"\
}\
]\
}';
jsonTreeViewer.parse(example);
</script>
</body>
</html>