Add in busy spinners

author: Struan Donald <struan@exo.org.uk> 2012-06-11 18:11:17 +0100
committer: Struan Donald <struan@exo.org.uk> 2012-06-11 18:11:17 +0100
commit: ee577cae12386ec6958cdd229d51379409780b56 (patch)
tree: da6a79799f0d195f99b1dfaf93d7d914a0ef7191 /phonegap
parent: fd39ce02db8a7fa8283261d0688f4539ecd728d6 (diff)
8 files changed, 140 insertions, 20 deletions
diff --git a/phonegap/www/about.html b/phonegap/www/about.html
index d9bafa201..03d2d389a 100644
--- a/phonegap/www/about.html
+++ b/phonegap/www/about.html
@@ -12,6 +12,7 @@
     <script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
     <script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
     <script type="text/javascript" src="js/json2.js"></script>
+    <script type="text/javascript" src="js/mobile.js"></script>
   </head>
     <body class="frontpage fullwidthpage mobile-header">
         <div class="wrapper">
diff --git a/phonegap/www/around.html b/phonegap/www/around.html
index 43f2c2378..0fec6199f 100644
--- a/phonegap/www/around.html
+++ b/phonegap/www/around.html
@@ -12,6 +12,7 @@
         <link rel="stylesheet" href="css/mobile.css">
 
         <script type="text/javascript" src="js/config.js"></script>
+        <script type="text/javascript" src="js/json2.js"></script>
 
         <script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
 
@@ -20,7 +21,6 @@
 
         <script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
 
-        <script type="text/javascript" src="js/json2.js"></script>
         <script type="text/javascript" src="js/geo.min.js"></script>
         <script type="text/javascript" src="js/fixmystreet.js"></script>
         <script type="text/javascript" src="js/mobile.js"></script>
@@ -249,5 +249,19 @@
             </div><!-- .container -->
         </div><!-- .table-cell -->
     </div> <!-- .wrapper -->
+     <div class="spinner" id="loadingSpinner">
+        <div class="bar1"></div>
+        <div class="bar2"></div>
+        <div class="bar3"></div>
+        <div class="bar4"></div>
+        <div class="bar5"></div>
+        <div class="bar6"></div>
+        <div class="bar7"></div>
+        <div class="bar8"></div>
+        <div class="bar9"></div>
+        <div class="bar10"></div>
+        <div class="bar11"></div>
+        <div class="bar12"></div>
+      </div>
 </body>
 </html>
diff --git a/phonegap/www/css/mobile.css b/phonegap/www/css/mobile.css
index 4ba7237f3..b8f365164 100644
--- a/phonegap/www/css/mobile.css
+++ b/phonegap/www/css/mobile.css
@@ -107,3 +107,45 @@ ol.big-numbers > li {
 #sign_in {
     display: none;
 }
+
+#loadingSpinner {
+    display: none;
+}
+
+div.spinner {
+  position: absolute;
+  width: 54px;
+  height: 54px;
+  display: inline-block;
+}
+
+div.spinner div {
+  width: 12%;
+  height: 26%;
+  background: #000;
+  position: absolute;
+  left: 44.5%;
+  top: 37%;
+  opacity: 0;
+  -webkit-animation: fade 1s linear infinite;
+  -webkit-border-radius: 50px;
+  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
+}
+
+div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
+div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
+div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
+div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
+div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
+div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
+div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
+div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
+div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
+div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
+div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
+div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
+
+@-webkit-keyframes fade {
+  from {opacity: 1;}
+  to {opacity: 0.25;}
+}
diff --git a/phonegap/www/email_sent.html b/phonegap/www/email_sent.html
index d91156e70..529ccb693 100644
--- a/phonegap/www/email_sent.html
+++ b/phonegap/www/email_sent.html
@@ -11,7 +11,11 @@
         <link rel="stylesheet" href="css/layout.css" media="(min-width:48em)">
 
         <meta http-equiv="content-type" content="text/html; charset=utf-8">
+        <script type="text/javascript" src="js/json2.js"></script>
+        <script type="text/javascript" src="js/config.js"></script>
+        <script type="text/javascript" src="cordova-1.8.0.js"></script>
         <script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
+        <script type="text/javascript" src="js/mobile.js"></script>
 
         <title> Create a report :: FixMyStreet </title>
     </head>
diff --git a/phonegap/www/index.html b/phonegap/www/index.html
index 2b8372282..77de47165 100644
--- a/phonegap/www/index.html
+++ b/phonegap/www/index.html
@@ -90,6 +90,21 @@
                 <a id="sign_in" href="sign_in.html">Sign In</a><a id="sign_out" href="#" onclick="sign_out();">Sign Out</a>
             </div>
         </div> <!-- .wrapper -->
+
+         <div class="spinner" id="loadingSpinner">
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
+            <div class="bar4"></div>
+            <div class="bar5"></div>
+            <div class="bar6"></div>
+            <div class="bar7"></div>
+            <div class="bar8"></div>
+            <div class="bar9"></div>
+            <div class="bar10"></div>
+            <div class="bar11"></div>
+            <div class="bar12"></div>
+          </div>
     </body>
 </html>
 </html>
diff --git a/phonegap/www/js/mobile.js b/phonegap/www/js/mobile.js
index 4e7482604..0c0ceec4c 100644
--- a/phonegap/www/js/mobile.js
+++ b/phonegap/www/js/mobile.js
@@ -2,6 +2,39 @@ function touchmove(e) {
     e.preventDefault();
 }
 
+function loadingSpinner(method){
+    if (method == "on") {
+        //Adjust to screen size
+        var pHeight = window.innerHeight;
+        var pWidth = window.innerWidth;
+        var sH = parseInt($('#loadingSpinner').css('height'),10);
+        var sW = parseInt($('#loadingSpinner').css('width'),10);
+        $('#loadingSpinner').css('top',(pHeight-sH)/2+$('body').scrollTop());
+        $('#loadingSpinner').css('left',(pWidth-sW)/2);
+        $('#loadingSpinner').css('z-index',1000);
+        //Show
+        $('#loadingSpinner').show();
+    } else if (method == 'off'){
+        $('#loadingSpinner').hide();
+    }
+}
+
+function showBusy( title, msg ) {
+    if ( navigator && navigator.notification && typeof navigator.notification.activityStart !== "undefined") {
+        navigator.notification.activityStart( title, msg );
+    } else {
+        loadingSpinner('on');
+    }
+}
+
+function hideBusy() {
+    if ( navigator && navigator.notification && navigator.notification.activityStop) {
+        navigator.notification.activityStop();
+    } else {
+        loadingSpinner('off');
+    }
+}
+
 function show_around( lat, long ) {
     pc = $('#pc').val();
     localStorage.latitude = lat;
@@ -38,6 +71,7 @@ function use_lat_long( lat, long ) {
 }
 
 function location_error( msg ) {
+    hideBusy();
     if ( msg === '' ) {
         $('#location_error').remove();
         return;
@@ -58,7 +92,7 @@ function lookup_string(q) {
     q = q.replace(/\s+/, ' ');
 
     if (!q) {
-        if (navigator.notification.activityStop) { navigator.notification.activityStop(); }
+        hideBusy();
         location_error("Please enter location");
         return false;
     }
@@ -105,7 +139,7 @@ function lookup_string(q) {
         } else {
             location_error("Could not find your location");
         }
-        if (navigator.notification.activityStop) { navigator.notification.activityStop(); }
+        hideBusy();
     });
 }
 
@@ -118,20 +152,16 @@ function locate() {
         return false;
     }
 
-    var activityStart = function() {};
-    var activityStop = function() {};
-    if (typeof navigator.notification.activityStart !== "undefined") {
-        activityStart = navigator.notification.activityStart;
-        activityStop = navigator.notification.activityStop;
-    }
-    activityStart();
+    showBusy('Locating', 'Looking up location');
 
     if ( valid_postcode( pc ) ) {
         jQuery.get( CONFIG.MAPIT_URL + 'postcode/' + pc + '.json', function(data, status) {
             if ( status == 'success' ) {
-                activityStop();
+                //activityStop();
                show_around( data.wgs84_lat, data.wgs84_lon );
            } else {
+               activityStop();
+               alert('Could not locate postcode');
            }
         });
     } else {
@@ -141,7 +171,6 @@ function locate() {
 }
 
 function foundLocation(myLocation) {
-    if (navigator.notification.activityStop) { navigator.notification.activityStop(); }
     var lat = myLocation.coords.latitude;
     var long = myLocation.coords.longitude;
 
@@ -151,14 +180,7 @@ function foundLocation(myLocation) {
 function notFoundLocation() { location_error( 'Could not find location' ); }
 
 function getPosition() {
-    var activityStart = function() {};
-    var activityStop = function() {};
-
-    if (typeof navigator.notification.activityStart !== "undefined") {
-        activityStart = navigator.notification.activityStart;
-        activityStop = navigator.notification.activityStop;
-    }
-    activityStart( );
+    showBusy( 'Locating', 'Looking up location' );
 
     navigator.geolocation.getCurrentPosition(foundLocation, notFoundLocation);
 }
@@ -229,12 +251,14 @@ function fileUploadSuccess(r) {
             $('input[type=submit]').prop("disabled", false);
         }
     } else {
+        hideBusy();
         alert('Could not submit report');
         $('input[type=submit]').prop("disabled", false);
     }
 }
 
 function fileUploadFail() {
+    hideBusy();
     alert('Could not submit report');
     $('input[type=submit]').prop("disabled", false);
 }
@@ -270,6 +294,7 @@ function postReport(e) {
         params.submit_register = 1;
     }
 
+    showBusy( 'Sending Report', 'Please wait while your report is sent' );
     if ( $('#form_photo').val() !== '' ) {
         fileURI = $('#form_photo').val();
 
@@ -304,9 +329,11 @@ function postReport(e) {
                         check_name( data.check_name, data.errors.name );
                     }
                     $('input[type=submit]').prop("disabled", false);
+                    hideBusy();
                 }
             },
             error: function (data, status, errorThrown ) {
+                hideBusy();
                 alert( 'There was a problem submitting your report, please try again (' + status + '): ' + JSON.stringify(data), function(){}, 'Submit report' );
                 $('input[type=submit]').prop("disabled", false);
             }
@@ -316,6 +343,7 @@ function postReport(e) {
 }
 
 function sign_in() {
+    showBusy( 'Signing In', 'Please wait while you are signed in' );
     jQuery.ajax( {
         url: CONFIG.FMS_URL + "auth/ajax/sign_in",
         type: 'POST',
@@ -332,6 +360,7 @@ function sign_in() {
                 $('#sign_out').show();
                 $('#sign_in').hide();
             } else {
+                hideBusy();
                 $('#form_email').before('<div class="form-error">There was a problem with your email/password combination.</div>');
             }
         }
diff --git a/phonegap/www/report_created.html b/phonegap/www/report_created.html
index d276863b4..6810ac60e 100644
--- a/phonegap/www/report_created.html
+++ b/phonegap/www/report_created.html
@@ -14,6 +14,7 @@
         <script type="text/javascript" src="js/config.js"></script>
         <script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
         <script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
+        <script type="text/javascript" src="js/mobile.js"></script>
 
         <script type="text/javascript">
             $(function() {
diff --git a/phonegap/www/sign_in.html b/phonegap/www/sign_in.html
index 8f1db0bad..0a4658e5a 100644
--- a/phonegap/www/sign_in.html
+++ b/phonegap/www/sign_in.html
@@ -87,5 +87,19 @@
             Sign In
         </div>
     </div> <!-- .wrapper -->
+    <div class="spinner" id="loadingSpinner">
+        <div class="bar1"></div>
+        <div class="bar2"></div>
+        <div class="bar3"></div>
+        <div class="bar4"></div>
+        <div class="bar5"></div>
+        <div class="bar6"></div>
+        <div class="bar7"></div>
+        <div class="bar8"></div>
+        <div class="bar9"></div>
+        <div class="bar10"></div>
+        <div class="bar11"></div>
+        <div class="bar12"></div>
+    </div>
 </body>
 </html>
author	Struan Donald <struan@exo.org.uk>	2012-06-11 18:11:17 +0100
committer	Struan Donald <struan@exo.org.uk>	2012-06-11 18:11:17 +0100
commit	ee577cae12386ec6958cdd229d51379409780b56 (patch)
tree	da6a79799f0d195f99b1dfaf93d7d914a0ef7191 /phonegap
parent	fd39ce02db8a7fa8283261d0688f4539ecd728d6 (diff)