<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="../bower_components/iron-component-page/iron-component-page.html">
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<script type="text/javascript" src="../datalets/shared_js/jquery-1.11.2.min.js"></script>
<meta charset="UTF-8">
<script type="text/javascript">
selected_component_url = "";
$(document).ready(function () {
$("paper-item").bind('click', function () {
switch($(this).attr('class').split(" ")[0]){
case 'datalet':
//$("#main-content").html('<iron-component-page src="../datalets/' + $(this).html().trim() + '/' + $(this).html().trim() + '.html"></iron-component-page>');
$("#main-content").html('<iframe src="../datalets/' + $(this).html().trim() + '/docs.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>');
break;
case 'controllet':
$("#main-content").html('<iron-component-page src="../controllets/' + $(this).html().trim() + '/' + $(this).html().trim() + '.html"></iron-component-page>');
break;
case 'behaviour':
$("#main-content").html('<iron-component-page doc-src="../datalets/' + $(this).attr('class').split(" ")[1] + '/static/js/' + $(this).html().trim() + '.json"></iron-component-page>');
break;
}
});
$('#general-documentation').bind('click', function(){
$("#main-content").html('<iframe src="ROUTETOPADeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>');
});
});
</script>
<style>
.avatar
{
display: inline-block;
height: 0.5em;
width: 0.5em;
border-radius: 50%;
background: #3f51b5;
color: white;
line-height: 2em;
font-size: 1.87em;
text-align: center;
margin-right: 5px;
}
</style>
</head>
<body>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div><h3>Components</h3></div>
</paper-toolbar>
<div style="margin: 20px;">
<div class="horizontal-section-container">
<div>
<h3><paper-menu><paper-item id="general-documentation"><h3><span class="avatar"></span>General documentation</h3></paper-item></paper-menu></h3>
<h3><span class="avatar"></span>Controllets</h3>
<div class="horizontal-section">
<paper-menu>
<paper-item class="controllet">data-sevc-controllet</paper-item>
<paper-item class="controllet">draggable-element-controllet</paper-item>
<paper-item class="controllet">items-slider-controllet</paper-item>
<paper-item class="controllet">treeview-controllet</paper-item>
</paper-menu>
</div>
</div>
<div>
<h3><span class="avatar"></span>Datalets</h3>
<div class="horizontal-section">
<paper-menu>
<paper-item class="datalet">base-datalet</paper-item>
<paper-item class="datalet">base-ajax-json-jsonpath-datalet</paper-item>
<paper-item class="datalet">highcharts-datalet</paper-item>
<paper-item class="datalet">column3Dchart-datalet</paper-item>
<paper-item class="datalet">columnchart-datalet</paper-item>
<paper-item class="datalet">barchart-datalet</paper-item>
<paper-item class="datalet">linechart-datalet</paper-item>
<paper-item class="datalet">datatable-datalet</paper-item>
<paper-item class="datalet">treemap-datalet</paper-item>
<paper-item class="datalet">leafletjs-datalet</paper-item>
</paper-menu>
</div>
</div>
<h3><span class="avatar"></span>Behaviors</h3>
<div class="horizontal-section">
<paper-menu>
<paper-item class="behaviour base-datalet">BaseDataletBehavior</paper-item>
<paper-item class="behaviour base-datalet">WorkcycleBehavior</paper-item>
<paper-item class="behaviour base-ajax-json-jsonpath-datalet">AjaxJsonJsonPathBehavior</paper-item>
</paper-menu>
</div>
</div>
</div>
</div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<div><h3>Documentation</h3></div>
<div style="position: absolute;right:30px; top:10px;"><paper-icon-button style="background-color: white; border-radius: 50%;" src="images/source-code.png"></paper-icon-button></div>
</paper-toolbar>
<div id="main-content" style="height: 100%; width: 100%"><iframe src="ROUTETOPADeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe></div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>