<!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"> <link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html"> <script type="text/javascript" src="../datalets/shared_js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/editarea_0_8_2/edit_area/edit_area_full.js"></script> <script type="text/javascript" src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <meta charset="UTF-8"> <script type="text/javascript"> </script> <style> body{ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; /*font-weight: 500;*/ line-height: 28px; -ms-flex: 1 1 0.000000001px; -webkit-flex: 1; flex: 1; -webkit-flex-basis: 0.000000001px; flex-basis: 0.000000001px; } .avatar { display: inline-block; height: 0.5em; width: 0.5em; border-radius: 50%; background: #2196F3; color: white; line-height: 2em; font-size: 1.87em; text-align: center; margin-right: 5px; } #toolbar{ background: #2196F3 ; } </style> </head> <body> <template id="Doc" is="dom-bind"> <paper-drawer-panel> <paper-header-panel drawer> <paper-toolbar id="toolbar"> <paper-menu-button> <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button> <paper-menu class="dropdown-content"> <paper-item><a href="http://routetopa.eu/" target="_blank">ROUTE-TO PA European Project</a></paper-item> <paper-item><a href="../../index.html" target="_blank">DEEP Index</a></paper-item> </paper-menu> </paper-menu-button> <div>Components</div> </paper-toolbar> <div style="margin: 20px;"> <div class="horizontal-section-container"> <div> <paper-menu><paper-item id="general-documentation" on-click="_onGeneralClick"><h4><span class="avatar"></span>General documentation</h4></paper-item></paper-menu> <h4><span class="avatar"></span>Controllets</h4> <div class="horizontal-section"> <paper-menu> <template is="dom-repeat" items="[[controllets]]" as="controllet"> <paper-item class="controllet" on-click="_onItemClick">[[controllet]]</paper-item> </template> </paper-menu> </div> </div> <div> <h4><span class="avatar"></span>Datalets</h4> <div class="horizontal-section"> <paper-menu> <template is="dom-repeat" items="[[datalets]]" as="datalet"> <paper-item class="datalet" on-click="_onItemClick">[[datalet]]</paper-item> </template> </paper-menu> </div> </div> <h4><span class="avatar"></span>Behaviors</h4> <div class="horizontal-section"> <paper-menu> <paper-item class="behaviour base-datalet" on-click="_onItemClick">BaseDataletBehavior</paper-item> <paper-item class="behaviour base-datalet" on-click="_onItemClick">WorkcycleBehavior</paper-item> <paper-item class="behaviour base-ajax-json-jsonpath-datalet" on-click="_onItemClick">AjaxJsonJsonPathBehavior</paper-item> </paper-menu> </div> </div> </div> </div> </paper-header-panel> <paper-header-panel main> <paper-toolbar id="toolbar"> <div>Documentation</div> <div style="position: absolute;right:30px; top:10px;"><paper-icon-button style="background-color: white; border-radius: 50%;" src="images/source-code.png" on-click="_onSourceClick"></paper-icon-button></div> </paper-toolbar> <div id="main_content" style="height: 100%; width: 100%"><iframe src="ROUTETOPADataletDeveloperGuidev0.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> </template> <script> Doc.controllets = [ "data-sevc-controllet", "draggable-element-controllet", "items-slider-controllet", "treeview-controllet", "text-element-controllet" ]; Doc.datalets = [ "base-datalet", "base-ajax-json-jsonpath-datalet", "highcharts-datalet", "column3Dchart-datalet", "columnchart-datalet", "barchart-datalet", "linechart-datalet", "datatable-datalet", "treemap-datalet", "leafletjs-datalet" ]; Doc.selectedSource = ""; /*Doc.behaviours = [ { name : "BaseDataletBehavior", refcomp : "base-datalet" }, { name : "WorkcycleBehavior", refcomp : "base-datalet" }, { name : "AjaxJsonJsonPathBehavior", refcomp : "base-ajax-json-jsonpath-datalet"}, ];*/ Doc._onItemClick = function(event){ switch(event.target.className.split(" ")[0]) { case 'datalet': Doc.selectedSource = '../datalets/' + event.target.innerHTML.trim() + '/' + event.target.innerHTML.trim() + '.html'; Doc.$.main_content.innerHTML = '<iframe src="../datalets/' + event.target.innerHTML.trim() + '/docs.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>'; break; case 'controllet': Doc.selectedSource = '../controllets/' + event.target.innerHTML.trim() + '/' + event.target.innerHTML.trim() + '.html'; //Doc.$.main_content.innerHTML = '<iron-component-page src="' + Doc.selectedSource + '"></iron-component-page>'; Doc.$.main_content.innerHTML = '<iframe src="../controllets/' + event.target.innerHTML.trim() + '/docs.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>'; break; case 'behaviour': Doc.selectedSource = '../datalets/' + event.target.className.split(" ")[1] + '/static/js/' + event.target.innerHTML.trim() + '.js'; Doc.$.main_content.innerHTML = '<iron-component-page doc-src="../datalets/' + event.target.className.split(" ")[1] + '/static/js/' + event.target.innerHTML.trim() + '.json"></iron-component-page>'; break; } }; Doc._onGeneralClick = function(event){ Doc.$.main_content.innerHTML = '<iframe src="ROUTETOPADataletDeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>'; }; Doc._onSourceClick = function(event){ Doc.$.main_content.innerHTML = '<textarea id="code" style="position:relative;width: 100%;height: 80vh;" style="" rows="4" cols="50"></textarea>'; $.get(Doc.selectedSource, function(data) { $("#code").val(data); editAreaLoader.init({ id : "code" // textarea id ,syntax: "html" // syntax to be uses for highgliting ,start_highlight: true // to display with highlight mode on start-up ,replace_tab_by_spaces: 4, isEditable : false }); }); }; </script> </body> </html>