Fix spinner that gets in the way of mouseover events (#63)

* Fixes #62: mouseover interactions with charts not working due to spinner container getting in the way. this ensures we remove the container as well as the spinner once chart data is loaded.

* Make sure tests load in spin.js, add tests for ensuring spinner container are removed upon stopping, add a "spinner-container" class to the created spinner container.

docs/assets/js/charts.js

@@ -117,9 +117,15 @@ var stackedBarChartDefaults =
 
 function createSpinner(canvas)
 {
-	let parent = $("<div style=\"position:absolute;height:100%;width:100%;\"></div>");
+	let parent = $("<div style=\"position:absolute;height:100%;width:100%;\" class=\"spinner-container\"></div>");
 	parent.insertBefore($(canvas));
-	return new Spinner().spin(parent[0]);
+	let spinner = new Spinner().spin(parent[0]);
+	return {
+		stop: function() {
+			spinner.stop();
+			parent.remove();
+		}
+	};
 }
 
 function createHistoryChart(canvas)

docs/spec/charts.js

@@ -1,4 +1,4 @@
-/* global createCollaborationChart, createHistoryChart, createList, createTable */
+/* global createCollaborationChart, createHistoryChart, createList, createTable, createSpinner */
 
 describe("global charts.js", function() {
 	describe("createCollaborationChart function", function() {
@@ -21,4 +21,29 @@ describe("global charts.js", function() {
 			expect(createTable).toBeDefined();
 		});
 	});
+	describe("createSpinner function", function() {
+		let canvas;
+		beforeEach(function() {
+			canvas = $("<div id=\"test\"></div>");
+			$("body").append(canvas);
+		});
+		afterEach(function() {
+			canvas.remove();
+		});
+		it("should exist", function() {
+			expect(createSpinner).toBeDefined();
+		});
+		it("should return an object with a stop method", function() {
+			let spinner = createSpinner(canvas[0]);
+			expect(spinner.stop).toBeDefined();
+			spinner.stop();
+		});
+		describe("stop method", function() {
+			it("should destroy the spinner container after execution", function() {
+				let spinner = createSpinner(canvas[0]);
+				spinner.stop();
+				expect($(".spinner-container").length).toEqual(0);
+			});
+		});
+	});
 });

docs/spec/karma.conf.js

@@ -25,6 +25,7 @@ module.exports = function(config) {
       'assets/js/vendor/d3.v4.min.js',
       'assets/js/vendor/moment-with-locales.min.js',
       'assets/js/vendor/Chart-2.7.1.min.js',
+      'assets/js/vendor/spin-2.3.2.min.js',
       'assets/js/charts.js',
       'spec/*.js'
     ],