Merge lp:~sil/stormcloud/spin-refresh into lp:~cooperjona/stormcloud/quickly_trunk

[Stuart Langridge]

Spin the refresh indicator when fetching from the web. Spins for 500ms minimum just because a web refresh on most sane connections is really fast and so you don't see the effect. Useful to show people that there's something going on, and also to see when a refresh is actually happening.

Sorry about the whitespace bits of the diff; my editor removes unnecessary whitespace from empty lines. If that's really annoying, reject. :)

[consindo (cooperjona)]

I'm hosting code at GitHub - it's because I'm going to create Chrome and Android versions and because I also prefer git. I've merged the code anyway.

https://github.com/consindo/stormcloud

=== modified file 'data/media/script.js'
--- data/media/script.js	2012-10-11 11:26:26 +0000
+++ data/media/script.js	2012-10-12 12:02:28 +0000
@@ -51,7 +51,7 @@
 	//Temperature
 	weather.temperature = $(data).filterNode('item').children().filterNode("yweather:condition").attr("temp")
 	weather.temperatureUnit = $(data).filterNode('yweather:units').attr("temperature")
-	
+
 	//Wind
 	weather.windUnit = $(data).filterNode('yweather:units').attr("speed")
 	weather.windSpeed = $(data).filterNode('yweather:wind').attr("speed")
@@ -85,7 +85,9 @@
 }
 
 function render(location) {
-	getWeatherData(location, function(rawdata) { 
+	$('.border .sync').addClass('busy');
+
+	getWeatherData(location, function(rawdata) {
 		generateStats(rawdata, function(weather) {
 
 			console.log(weather)
@@ -98,9 +100,9 @@
 				$("#temperature").text(weather.temperature + " °")
 				document.title = weather.temperature
 			}
-			
-			$("#windSpeed").text(weather.windSpeed)	
-			$("#windUnit").text(weather.windUnit)	
+
+			$("#windSpeed").text(weather.windSpeed)
+			$("#windUnit").text(weather.windUnit)
 			$("#humidity").text(weather.humidity + " %")
 
 			//Background Color
@@ -121,6 +123,9 @@
 			$('.border .sync, .border .settings').css("opacity", "0.8")
 			$('#actualWeather').fadeIn(500)
 			$("#locationModal").fadeOut(500)
+			// spin the thing for 500ms longer than it actually takes, because
+			// most of the time refreshing is actually instant :)
+			setTimeout(function() { $('.border .sync').removeClass('busy'); }, 500);
 		})
 	})
 }
@@ -132,7 +137,7 @@
 		// Array to RGB
 		if (typeof(i) == 'object') {
 			return 'rgb(' + i.join(', ') + ')';
-		
+
 		// Hex to array
 		} else if (typeof(i) == 'string') {
 			var output = [];
@@ -144,12 +149,12 @@
 			return output;
 		}
 	};
-		
+
 	// Get color at position
 	var blend = function( x ) {
-		
+
 		x = Number(x);
-		
+
 		var gradient = [{
 			pos: 0,
 			color: convert('#0081d3')
@@ -184,7 +189,7 @@
 			pos: 100,
 			color: convert('#e44211')
 		}];
-		
+
 		var left = {
 			pos: -1,
 			color: false,
@@ -195,7 +200,7 @@
 			color:  false,
 			percent: 0
 		};
-		
+
 		// Get the 2 closest stops to the specified position
 		for (var i=0, l=gradient.length; i<l; i++) {
 			var stop = gradient[i];
@@ -225,7 +230,7 @@
 			Math.round((left.color[1] * left.percent) + (right.color[1] * right.percent)),
 			Math.round((left.color[2] * left.percent) + (right.color[2] * right.percent)),
 		];
-		
+
 		return convert(blend);
 
 	};
@@ -345,7 +350,7 @@
 	    typingTimer = setTimeout(doneTyping, doneTypingInterval)
 	});
 
-	//on keydown, clear the countdown 
+	//on keydown, clear the countdown
 	locationInput.keydown(function(){
 	    clearTimeout(typingTimer)
 	});
@@ -376,7 +381,7 @@
 
 	/* Other Settings */
 	if (!localStorage.stormcloud_measurement) {
-		localStorage.stormcloud_measurement = "f"		
+		localStorage.stormcloud_measurement = "f"
 	}
 	$('#locationModal .temptype [data-type=' + localStorage.stormcloud_measurement + ']').addClass('selected')
 
@@ -401,12 +406,12 @@
 			$('body').removeClass('retina')
 		}
 	})
-	
+
 	/* Error Message Retry Button */
 	$('#errorMessage .btn').click(function() {
 		render(localStorage.stormcloud)
 	})
-	
+
 }
 function show_settings(amount) {
 

=== modified file 'data/media/style.css'
--- data/media/style.css	2012-10-11 11:26:26 +0000
+++ data/media/style.css	2012-10-12 12:02:28 +0000
@@ -22,7 +22,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none;  
+    user-select: none;
 }
 p, span, div {
 	cursor: default;
@@ -35,6 +35,20 @@
 	opacity: 0;
 	-webkit-transition: 500ms ease opacity;
 }
+@-webkit-keyframes busy-spinning {
+  from {
+    -webkit-transform: rotate(0deg);
+    -webkit-transform-origin: 8px 8px;
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -webkit-transform-origin: 8px 8px;
+  }
+}
+
+.border .sync.busy {
+	-webkit-animation: busy-spinning 0.5s infinite linear;
+}
 .border {
 	position: absolute;
 	width: 100%;