new_docs_template.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Monkey2 Modules Reference</title>
  6. <script src="jstree/dist/libs/jquery.js"></script>
  7. <script src="jstree/dist/libs/bootstrap/js/bootstrap.min.js" ></script>
  8. <link rel="stylesheet" href="jstree/dist/libs/bootstrap/css/bootstrap.min.css">
  9. <script src="jstree/dist/jstree.min.js"></script>
  10. <link rel="stylesheet" href="jstree/dist/themes/proton/style.min.css" />
  11. <link rel="stylesheet" href="style.css">
  12. <link rel="stylesheet" href="theme.css">
  13. <script>
  14. var jstree_theme='proton';
  15. // Ok, link format is:
  16. //
  17. // module:nmspace.nmspace.decl, eg "monkey:monkey.types.Int"
  18. //
  19. // ...or...
  20. //
  21. // module:topic#section, eg: "monkey:modules#creating-modules"
  22. //
  23. function openPage( page ){
  24. var url=page;
  25. //alert( 'page='+page+', url='+url );
  26. var docs=document.getElementById( 'docs-iframe' );
  27. docs.contentWindow.location=url;
  28. }
  29. </script>
  30. </head>
  31. <body class="page_body">
  32. <!-- CONTENT -->
  33. <div class="modules_nav_wrapper">
  34. <form role="search"><input type="text" id="search" placeholder="Search for..." style="width:100%;" /></form>
  35. <div id="tree" class="modules_nav_tree"></div>
  36. </div>
  37. <div class="modules_docs_wrapper">
  38. <iframe id="docs-iframe" class="modules_docs_iframe"></iframe>
  39. </div>
  40. <script>
  41. jQuery( function($){
  42. $('#tree').jstree( {
  43. 'core':{
  44. 'multiple' : false,
  45. 'animation' : false,
  46. 'themes':{
  47. 'name' : jstree_theme,
  48. 'dots' : false,
  49. 'icons' : false,
  50. 'stripes' : false
  51. },
  52. 'data':[ ${DOCS_TREE} ]
  53. },
  54. 'plugins':[ 'search' ]
  55. });
  56. $('#tree').on( 'changed.jstree',function( e,data ){
  57. var node=data.instance.get_node( data.selected[0] );
  58. if( !node || !node.data ) return;
  59. var page=node.data.page;
  60. if( !page ) return;
  61. openPage( page );
  62. });
  63. var to=false;
  64. $('#search').keyup( function(){
  65. if( to ) { clearTimeout( to ); }
  66. to = setTimeout( function(){
  67. var v = $('#search').val();
  68. $('#tree').jstree( true ).search( v );
  69. },250 );
  70. });
  71. } );
  72. </script>
  73. <!-- END -->
  74. </body>
  75. </html>