added menu (first draft)

csw11004 · Sep 9, 2015 · 5d0f58d · 5d0f58d
1 parent d6b4302
commit 5d0f58d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/VQI_GenomeBrowser.js b/VQI_GenomeBrowser.js
@@ -36,6 +36,12 @@ function VQI_GenomeBrowser(id, serviceURL) {
 
     var serviceURL = serviceURL;
 
+    // var trackDiv;
+    // var trackNavContainer;
+    // var recentTrackContainer;
+    // var dataDiv;
+    // var otherDiv;
+
     var navigateToRegion = function () {
         var navigate = $("#" + divId + " #navigate").val();
         navigate = navigate.split(/[:-]/);
@@ -100,11 +106,45 @@ function VQI_GenomeBrowser(id, serviceURL) {
 
     };
 
+
+    this.makeNavMenu = function () {
+        var menu = "<ul class='nav nav-tabs' style='font-size: 16'>"+
+                    "<li class='active'><a data-toggle='tab' href='#home'>Home</a></li>"+
+                    "<li><a data-toggle='tab' href='#traks'>Track</a></li>"+
+                    "<li><a data-toggle='tab' href='#data'>Data</a></li>"+
+                    "<li><a data-toggle='tab' href='#other'>Other</a></li>"+
+                    "</ul>"
+
+        var tackMenuTable = "<table cellpadding='5'; style='margin: 0px 20px;font-size: 14'>"+
+                        "<tr> <td id='trackNavContainer'> </td></tr>"+
+                        "<tr> <td id='recentTrackContainer'> </td></tr>"+
+                        "<tr> <td id='colocalizeContainer'> </td></tr>"+
+                        "</table>"
+
+        var dataMenuTable = "<table cellpadding='5'; style='margin: 0px 20px;font-size: 14'>"+
+                        "<tr> <td id='uploadDataContainer'> </td></tr>"+
+                        "<tr> <td id='exportContainer'> </td></tr>"+
+                        "</table>"
+
+        var menuContent =  "<div class='tab-content'>"+
+                            "<div id='home' class='tab-pane fade in active'></div>"+
+                            "<div id='traks' class='tab-pane fade ' style='height: 130px; width: 800px; background-color:#F0F0F0'>"+tackMenuTable+"</div>"+
+                            "<div id='data' class='tab-pane fade' style='height: 130px; width: 800px; background-color:#F0F0F0'>"+dataMenuTable+"</div>"+
+                            "<div id='other' class='tab-pane fade'></div>"+  
+                            "</div>"
+
+
+        var menuContainer = "<div class='container-fluid'>"+menu+menuContent+"</div>";
+        $("#" + divId).append(menuContainer);
+
+    };
+    this.makeNavMenu();
+
     this.makeNavigationForm = function () {
         var navigateBox = "<input type='text' name='navigate' id='navigate' size='30'>";
         var navigateButton = "<input type='button' id='navigatebutton' value='Go To'>";
         var form = "<form id='navigation_form'>" + navigateBox + navigateButton + "</form>";
-        $("#" + divId).append(form);
+        $("#" + divId + " #trackNavContainer").append(form);
         $("#" + divId + " #navigatebutton").on("click", navigateToRegion.bind(this));
     };
     this.makeNavigationForm();
@@ -213,7 +253,7 @@ function VQI_GenomeBrowser(id, serviceURL) {
         var colocalizeButton = "<input type='button' id='colocalize' value='colocalize'>";
         var pValueDiv = "<div id='pvalue_div'></div>"
         var form = "<form id='colocalization_form'>" + track1Select + track2Select + distanceTextBox + colocalizeButton + pValueDiv + "</form>";
-        $("#" + divId).append(form);
+        $("#" + divId + " #colocalizeContainer").append(form);
         $("#" + divId + " #colocalize").on("click", colocalize.bind(this));
     };
     this.makeFormForColocalization();
@@ -300,7 +340,7 @@ function VQI_GenomeBrowser(id, serviceURL) {
         var f = document.createElement("form");
         f.innerHTML = "Add track by uploading file: ";
         f.appendChild(fileInput);
-        $("#" + divId).append(f);
+        $("#" + divId + " #uploadDataContainer").append(f);
     }
     this.makeUploadForm();
 
@@ -316,7 +356,7 @@ function VQI_GenomeBrowser(id, serviceURL) {
 
         var addTrackButton = "<input type='button' id='addTrackButton' value='Add Track'>";
         var form = "<form id='colocalization_form'>" + trackSelect + addTrackButton + "</form>";
-        $("#" + divId).append(form);
+        $("#" + divId + " #recentTrackContainer").append(form);
         $("#" + divId + " #addTrackButton").on("click", addRecentTrack.bind(this));
     }
     this.makeRecentTrackForm();

diff --git a/VQI_GenomeBrowserDemo.html b/VQI_GenomeBrowserDemo.html
@@ -12,7 +12,15 @@
 
          <link href="tipsy.css" rel="stylesheet" type="text/css" />
         <link href="jquery.qtip.min.css" rel="stylesheet" type="text/css" />
+        <!-- Latest compiled and minified CSS -->
+        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
+
+        <link rel="stylesheet" href="bootstrap.min.css">
+
+        <!-- Latest compiled and minified JavaScript -->
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     </head>
+
 
     <body>
         <div id="test">

diff --git a/bootstrap.min.css b/bootstrap.min.css