Permalink
Browse files

Fading the weather load screen, after small delay

  • Loading branch information...
1 parent a2b9174 commit ba47a38b135bd8a2d20e57d3d5ab9fbcc7db9597 @mmocny mmocny committed Mar 27, 2013
Showing with 43 additions and 32 deletions.
  1. +13 −9 weather/style.css
  2. +1 −1 weather/weather.html
  3. +29 −22 weather/weather.js
View
22 weather/style.css
@@ -309,18 +309,30 @@ input[type=text].form-error{
-webkit-box-sizing: border-box;
background-color: pink;
z-index: 10000;
+ -webkit-transition: opacity 0.5s ease-in;
}
#loading > div
{
position: absolute;
width: 100%;
top: 50%;
- margin-top: -150px;
+ margin-top: -100px;
text-align: center;
+}
+
+#loading > div > p
+{
font-size: 2em;
}
+#loading > div > img {
+ -webkit-animation-name: spinnerRotate;
+ -webkit-animation-duration: 5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+}
+
@-webkit-keyframes spinnerRotate {
from {
-webkit-transform:rotate(0deg);
@@ -330,14 +342,6 @@ input[type=text].form-error{
}
}
-#loading > div > img {
- -webkit-transform: translateZ(0);
- -webkit-animation-name: spinnerRotate;
- -webkit-animation-duration: 5s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
-}
-
#wrapper {
height: 100%;
width: 100%;
View
2 weather/weather.html
@@ -33,8 +33,8 @@
<div id="loading">
<div>
- <p>Updating Weather</p>
<img src="img/sunny.png" />
+ <p>Checking the Weather</p>
</div>
</div>
View
51 weather/weather.js
@@ -249,7 +249,13 @@ function refreshIScroll() {
}
function hideLoading() {
- $('#loading').addClass('hidden');
+ if ($('#loading').hasClass('fadeOut')) {
+ return;
+ }
+ $('#loading').css('opacity', 0);
+ setTimeout(function() {
+ $('#loading').addClass('hidden');
+ }, 500); // 500 comes from the fade out time in css
}
function hideSettings() {
@@ -309,16 +315,14 @@ function attemptAddCity(searchurl, onsuccess, onerror) {
}
if (!formatted_address) {
- if (onerror !== undefined && onerror !== null)
- onerror();
+ onerror && onerror();
return;
}
getWeatherData(formatted_address, function(current_condition, forecast) {
var city = addCity(formatted_address);
addWeatherData(city, current_condition, forecast);
- if (onsuccess !== undefined && onsuccess !== null)
- onsuccess(city);
+ onsuccess && onsuccess(city);
}, onerror);
}, 'json');
}
@@ -329,45 +333,47 @@ function getWeatherData(address, onsuccess, onerror) {
if (!data.data.error) {
var current_condition = data.data.current_condition[0];
var forecast = data.data.weather;
- if (onsuccess !== undefined && onsuccess !== null)
- onsuccess(current_condition, forecast);
+ onsuccess && onsuccess(current_condition, forecast);
} else {
- if (onerror !== undefined && onerror !== null)
- onerror();
+ onerror && onerror();
}
}, 'json');
};
-function updateAllWeatherData() {
+function updateAllWeatherData(onfirstsuccessfulupdate) {
cities.asArray().forEach(function(city) {
getWeatherData(city.address,
function(current_condition, forecast) {
addWeatherData(city, current_condition, forecast);
+ onfirstsuccessfulupdate && onfirstsuccessfulupdate();
}, null); // TODO: handle error?
});
}
function attemptAddCurrentLocation() {
// TODO: we always permanentally add your current location. Should keep a history of all places, but only display "pinned" places
// and the current location
+ var onfail = function(reason) {
+ console.warn(reason);
+ if (cities.length() != 0) {
+ return;
+ }
+ showSettings();
+ hideLoading();
+ };
navigator.geolocation.getCurrentPosition(
function(position) {
var searchurl = base_geolocation_url + position.coords.latitude + ',' + position.coords.longitude;
attemptAddCity(searchurl,
function(city) {
selectCity(city);
+ hideSettings();
},
- function() {
- console.warn("Could not add city using geolocation");
- if (cities.length() === 0)
- showSettings();
- });
+ onfail.bind(null, "Could not find current location")
+ );
},
- function(error) {
- console.warn("Geocoder failed");
- showSettings();
- hideLoading();
- });
+ onfail.bind(null, "Geocoder failed")
+ );
}
/******************************************************************************/
@@ -383,7 +389,6 @@ function refresh() {
}
});
refreshIScroll();
- hideLoading();
}
function updateCityDisplay(city, current_condition, forecast) {
@@ -617,7 +622,9 @@ function init() {
temp = items.temp;
if (!temp) temp = 'F';
$('input[name="temp-type"].' + temp).attr('checked', true);
- updateAllWeatherData();
+ updateAllWeatherData(function() {
+ setTimeout(hideLoading, 300); // 300ms comes from the amount of time we want to give other cities to load weather
+ });
});
attemptAddCurrentLocation();

0 comments on commit ba47a38

Please sign in to comment.