Commit 5cb12f9f authored by Stephen Mayhew's avatar Stephen Mayhew
Browse files

Added spinner

parent 8a9e02ac
...@@ -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
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment