<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>GraphNavigator</title> <script type="text/javascript" src="https://rawcdn.githack.com/grapheco/InteractiveGraph/0.3.2/dist/igraph/interactive-graph.min.js"></script> <link type="text/css" rel="stylesheet" href="https://rawcdn.githack.com/grapheco/InteractiveGraph/0.3.2/dist/igraph/interactive-graph.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" integrity="sha256-p6xU9YulB7E2Ic62/PX+h59ayb3PBJ0WFTEQxq0EjHw=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /> <style type="text/css"> body { margin: 0px; font-size: 14px; } #graphArea { height: 100%; border: 1px solid lightgray; } </style>
</head>
<body>
<div style="height:100%"> <div id="graphArea"></div> </div> <!--all UI controls--> <div> <!--toolbar--> <div class="toolbarPanel igraph-dockable igraph-draggable" igraph-control-role="ToolbarCtrl" igraph-dock-position="B:-6,0"> <div class="toolbar"></div> </div> <!--info box--> <div class="infoPanel igraph-dockable igraph-draggable" igraph-control-role="InfoBoxCtrl" igraph-dock-position="A:10,200"> <div> <div class="infoPanel1"></div> <div class="infoPanel2"><span align="center" class="fa fa-close fa-lg btnCloseInfoPanel"></span></div> </div> <div class="infoBox"></div> </div> <!--search box--> <div class="searchPanel igraph-dockable igraph-draggable" igraph-control-role="SearchBoxCtrl" igraph-dock-position="A:10,20"> <div class="searchPanel1"> <input class="igraph-searchbox" type="text" size="16" placeholder="input keyword"> </div> <div class="searchPanel2 igraph-searchbox-image"> <span align="center" class="fa fa-photo fa-lg" /> </div> </div> <!--status bar--> <div class="statusPanel igraph-dockable" igraph-control-role="StatusBarCtrl" igraph-dock-position="C:-100,0"> <div class="statusBar"></div> </div> <!--image upload box--> <div class="imageUploadPanel" igraph-control-role="ImageUploadCtrl"></div> <div class="ResultListPanel igraph-dockable igraph-draggable" igraph-control-role="ResultListCtrl" igraph-dock-position="A:10,70"></div> </div> <script type="text/javascript"> function load() { var file = location.hash.replace(/^#/, '/'); if (!file) { $('#error').dialog('open'); return; } else { $('#error').dialog('close'); } var app = new igraph.GraphNavigator(document.getElementById('graphArea'), 'LIGHT'); app.loadGson(file); } $(window).on('hashchange', load); load(); </script>
</body>
</html>