Skip to content

Commit ff7039d

Browse files
tfesenkotfesenko
committed
Load FASTA file is now a modal dialog
1 parent d643e88 commit ff7039d

File tree

3 files changed

+125
-64
lines changed

3 files changed

+125
-64
lines changed

‎index.html‎

Lines changed: 15 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<link rel="stylesheet" href="topbar/topbar.css">
6+
57
<script src="http://d3js.org/d3.v3.min.js"></script>
68
<script src="./lib/FileSaver.js"></script>
79
<script src="./lib/ntseq.js"></script>
8-
<script src="./load-inputs.js"></script>
910
<script src="./sequence-annotations.js"></script>
1011
<style>
1112

@@ -14,61 +15,6 @@
1415
stroke-width: 3;
1516
stroke: #000;
1617
}
17-
18-
.navbar {
19-
list-style-type: none;
20-
margin: 0;
21-
padding: 0;
22-
font-family: Optima, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
23-
overflow: hidden;
24-
background-color: #144023;
25-
}
26-
27-
.navbar span {
28-
float: left;
29-
color: white;
30-
font-family: Optima, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
31-
}
32-
33-
li a, .dropbtn {
34-
display: inline-block;
35-
color: white;
36-
text-align: center;
37-
padding: 14px 16px;
38-
text-decoration: none;
39-
}
40-
41-
li a:hover, .dropdown:hover .dropbtn {
42-
background-color: #267a43;
43-
}
44-
45-
li.dropdown {
46-
display: inline-block;
47-
}
48-
49-
.dropdown-content {
50-
display: none;
51-
position: absolute;
52-
background-color: #f9f9f9;
53-
min-width: 160px;
54-
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
55-
z-index: 1;
56-
}
57-
58-
.dropdown-content a {
59-
color: black;
60-
padding: 12px 16px;
61-
text-decoration: none;
62-
display: block;
63-
text-align: left;
64-
}
65-
66-
.dropdown-content a:hover {background-color: #f1f1f1}
67-
68-
.dropdown:hover .dropdown-content {
69-
display: block;
70-
}
71-
7218
</style>
7319

7420
<script type="text/javascript">
@@ -108,17 +54,25 @@
10854
<span class="dropdown">
10955
<a href="javascript:void(0)" class="dropbtn">File</a>
11056
<div class="dropdown-content">
111-
<a href="#">Load Sequences from a FASTA file:</a>
112-
<input type="file" id="files" name="files[]"/>
57+
<a href="#" onclick="openImportFileWindow();">Import FASTA file</a>
11358
<a href="#" onclick="downloadSVG('sequence.svg')">Save as SVG</a>
11459
</div>
11560
</span>
11661
</div>
11762

118-
<script type="text/javascript">
119-
120-
document.getElementById('files').addEventListener('change', handleFileSelect, false);
63+
<div id="import-file-window" class="modal">
64+
<div class="modal-content">
65+
<h2>Upload a FASTA file:</h2>
66+
<input type="file" id="files" name="files[]"/>
67+
<div class="right">
68+
<button id="cancel-load-file" class="btn cancel">Cancel</button>
69+
<button id="load-fasta-file" class="btn">Load file</button>
70+
</div>
71+
</div>
72+
</div>
12173

74+
<script src="topbar/topbar.js"></script>
75+
<script type="text/javascript">
12276

12377
var margin = 75,
12478
width = 1400 - margin,

‎topbar/topbar.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.navbar {
2+
list-style-type: none;
3+
margin: 0;
4+
padding: 0;
5+
font-family: Optima, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
6+
overflow: hidden;
7+
background-color: #144023;
8+
}
9+
10+
.navbar span {
11+
float: left;
12+
color: white;
13+
font-family: Optima, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
14+
}
15+
16+
li a, .dropbtn {
17+
display: inline-block;
18+
color: white;
19+
text-align: center;
20+
padding: 14px 16px;
21+
text-decoration: none;
22+
}
23+
24+
li a:hover, .dropdown:hover .dropbtn {
25+
background-color: #267a43;
26+
}
27+
28+
li.dropdown {
29+
display: inline-block;
30+
}
31+
32+
.dropdown-content {
33+
display: none;
34+
position: absolute;
35+
background-color: #f9f9f9;
36+
min-width: 160px;
37+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
38+
z-index: 1;
39+
}
40+
41+
.dropdown-content a {
42+
color: black;
43+
padding: 12px 16px;
44+
text-decoration: none;
45+
display: block;
46+
text-align: left;
47+
}
48+
49+
.dropdown-content a:hover {background-color: #f1f1f1}
50+
51+
.dropdown:hover .dropdown-content {
52+
display: block;
53+
}
54+
55+
.modal {
56+
display: none;
57+
position: fixed;
58+
z-index: 1;
59+
left: 0;
60+
top: 0;
61+
width: 100%;
62+
height: 100%;
63+
overflow: auto;
64+
background-color: rgb(0,0,0);
65+
background-color: rgba(0,0,0,0.4);
66+
}
67+
68+
.modal-content {
69+
background-color: #fefefe;
70+
}
71+
72+
.modal-content {
73+
margin: 15% auto;
74+
padding: 20px;
75+
border: 1px solid #888;
76+
width: 30%;
77+
}
78+
79+
.modal .right {
80+
float: right;
81+
}

load-inputs.js renamed to topbar/topbar.js

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,31 @@
1-
function handleFileSelect(evt) {
2-
var files = evt.target.files; // FileList object
1+
var modal = document.getElementById('import-file-window');
2+
3+
document.getElementById("cancel-load-file").onclick = function() {
4+
closeImportFileWindow();
5+
};
6+
7+
document.getElementById("load-fasta-file").onclick = function() {
8+
handleFileSelect();
9+
closeImportFileWindow();
10+
};
11+
12+
// When the user clicks anywhere outside of the modal, close it
13+
window.onclick = function(event) {
14+
if (event.target == modal) {
15+
closeImportFileWindow();
16+
}
17+
};
18+
19+
function openImportFileWindow() {
20+
modal.style.display = "block";
21+
};
22+
23+
function closeImportFileWindow() {
24+
modal.style.display = "none";
25+
}
26+
27+
function handleFileSelect() {
28+
var files = document.getElementById('files').files;
329

430
var output = [];
531
for (var i = 0, f; f = files[i]; i++) {
@@ -16,7 +42,7 @@ function handleFileSelect(evt) {
1642
var seq = new Nt.Seq().readFASTA(">" + fastaSeq).sequence();
1743
// TODO parse sequence labels
1844
asJson[i] = {"sequence": seq, "title": "Sequence " + i + " of " + fastaSegments.length};
19-
// debugger;
45+
// debugger;
2046
}
2147
draw(asJson);
2248
};

0 commit comments

Comments
 (0)