Skip to content
Snippets Groups Projects
Commit 5cb12f9f authored by Stephen Mayhew's avatar Stephen Mayhew
Browse files

Added spinner

parent 8a9e02ac
No related branches found
No related tags found
No related merge requests found
...@@ -140,4 +140,5 @@ p.color:hover { ...@@ -140,4 +140,5 @@ p.color:hover {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 100;
} }
\ No newline at end of file
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
<!-- </div> --> <!-- </div> -->
<div id="spinnerdiv"><i id="spinner" class="fa fa-spinner fa-5x"></i></div> <div id="spinnerdiv"><i id="spinner" class="fa fa-circle-o-notch fa-5x"></i></div>
......
...@@ -2,12 +2,16 @@ ...@@ -2,12 +2,16 @@
* Created by stephen on 3/20/15. * Created by stephen on 3/20/15.
*/ */
function startSpinner() { function startSpinner() {
//$("#spinnerdiv").fadeIn(); console.log("Starting spinner...")
$("#spinnerdiv").show();
$("#spinner").addClass("fa-spin"); $("#spinner").addClass("fa-spin");
} }
function stopSpinner() { function stopSpinner() {
//$("#spinnerdiv").fadeOut(); console.log("Stopping spinner...")
$("#spinnerdiv").hide();
$("#spinner").removeClass("fa-spin"); $("#spinner").removeClass("fa-spin");
} }
......
...@@ -5,6 +5,9 @@ $( document ).ready(function() { ...@@ -5,6 +5,9 @@ $( document ).ready(function() {
// This makes the info box draggable. // This makes the info box draggable.
$(".info").draggable(); $(".info").draggable();
// to make the div hide
stopSpinner();
$("#selectDataBox").change(updateSVG); $("#selectDataBox").change(updateSVG);
// This populates the data box from the filelist.json file // This populates the data box from the filelist.json file
...@@ -53,8 +56,6 @@ function updateSVG() { ...@@ -53,8 +56,6 @@ function updateSVG() {
var strVal = e.options[e.selectedIndex].value; var strVal = e.options[e.selectedIndex].value;
console.log(strVal); console.log(strVal);
var filename; var filename;
if (strVal === "dummy"){ if (strVal === "dummy"){
return; return;
...@@ -180,28 +181,24 @@ function updateSVG() { ...@@ -180,28 +181,24 @@ function updateSVG() {
function transitionMultiples() { function transitionMultiples() {
$("#upbutton").hide(500);
$("#downbutton").show(500);
var t = svg; //.transition().duration(750), var t = svg; //.transition().duration(750),
g = t.selectAll(".system").attr("transform", function(d, i) { return "translate(0, " + (-y0(syslist[syslist.length - 1 - i])) + ")"; }); var g = t.selectAll(".system").attr("transform", function(d, i) { return "translate(0, " + (-y0(syslist[syslist.length - 1 - i])) + ")"; });
g.selectAll("rect").attr("y", function(d) { return y1(d.y); }); g.selectAll("rect").attr("y", function(d) { return y1(d.y); });
d3.selectAll(".rule").style("visibility", "hidden"); d3.selectAll(".rule").style("visibility", "hidden");
} }
function transitionStacked() { function transitionStacked() {
$("#downbutton").hide(500);
$("#upbutton").show(500);
var t = svg; //.transition().duration(750), var t = svg; //.transition().duration(750),
g = t.selectAll(".system").attr("transform", "translate(0,0)"); var g = t.selectAll(".system").attr("transform", "translate(0,0)");
g.selectAll("rect").attr("y", function (d) { g.selectAll("rect").attr("y", function (d) {
return -rectheight * (d.y0) - rectheight * (d.y); return -rectheight * (d.y0) - rectheight * (d.y);
}); });
d3.selectAll(".rule").style("visibility", "visible"); d3.selectAll(".rule").style("visibility", "visible");
} }
// this is called when the sort button is pressed. // this is called when the sort button is pressed.
function update(){ function update(){
startSpinner();
d3.selectAll(".vertrule").remove(); d3.selectAll(".vertrule").remove();
...@@ -257,13 +254,20 @@ function updateSVG() { ...@@ -257,13 +254,20 @@ function updateSVG() {
//.transition().duration(750) // commented out because it takes too much memory. //.transition().duration(750) // commented out because it takes too much memory.
.attr("x", function(d) { return x(d.x) } ); .attr("x", function(d) { return x(d.x) } );
stopSpinner();
} }
$("#sortbutton").on("click", update); $("#sortbutton").off().on("click", update);
$("#togglebutton").on("click",
$("#togglebutton").html("<i class=\"fa fa-th\"></i> To Matrix");
$("#togglebutton").off().on("click",
function () { function () {
startSpinner();
var t = $(this).text(); var t = $(this).text();
console.log(t);
if (t.indexOf("Matrix") > -1) { if (t.indexOf("Matrix") > -1) {
transitionMultiples(); transitionMultiples();
$(this).html("<i class=\"fa fa-bar-chart\"></i> To Histogram"); $(this).html("<i class=\"fa fa-bar-chart\"></i> To Histogram");
...@@ -271,6 +275,8 @@ function updateSVG() { ...@@ -271,6 +275,8 @@ function updateSVG() {
transitionStacked(); transitionStacked();
$(this).html("<i class=\"fa fa-th\"></i> To Matrix"); $(this).html("<i class=\"fa fa-th\"></i> To Matrix");
} }
stopSpinner();
$(this).blur();
}); });
stopSpinner(); stopSpinner();
...@@ -278,6 +284,9 @@ function updateSVG() { ...@@ -278,6 +284,9 @@ function updateSVG() {
$("#sortbutton").prop("disabled", false); $("#sortbutton").prop("disabled", false);
$("#togglebutton").prop("disabled", false); $("#togglebutton").prop("disabled", false);
}); });
} }
// get the indices for the line numbers // get the indices for the line numbers
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment