Skip to content
Permalink
Browse files

added menu (first draft)

  • Loading branch information
yuj12001 committed Sep 9, 2015
1 parent d6b4302 commit 5d0f58da8011a2c5df513b06a6ab6209fa91d703
Showing with 58 additions and 4 deletions.
  1. +44 −4 VQI_GenomeBrowser.js
  2. +8 −0 VQI_GenomeBrowserDemo.html
  3. +6 −0 bootstrap.min.css
@@ -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();
@@ -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">

Large diffs are not rendered by default.

0 comments on commit 5d0f58d

Please sign in to comment.
You can’t perform that action at this time.