adding loading option, resolves #127, working on #170

cugos · Sep 24, 2015 · 792ae17 · 792ae17
1 parent 210e3ec
commit 792ae17
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 2 deletions.
diff --git a/src/js/ops.file.dropchop.js b/src/js/ops.file.dropchop.js
@@ -61,6 +61,7 @@ var dropchop = (function(dc) {
         dc.util.xhr(url, dc.ops.file[name].callback);
       },
       callback: function(xhr, xhrEvent) {
+        dropchop.util.loader(false);
         if (xhr.status === 200) {
           var data = JSON.parse(xhr.responseText);
           // get filename based on the end of the url - not sure if this is sustainable
@@ -92,6 +93,7 @@ var dropchop = (function(dc) {
         dc.util.xhr(url, dc.ops.file[name].callback);
       },
       callback: function(xhr, xhrEvent) {
+        dropchop.util.loader(false);
         if (xhr.status === 200) {
           var data = JSON.parse(xhr.responseText);
           for (var f in data.files) {
@@ -135,6 +137,7 @@ var dropchop = (function(dc) {
         dc.util.xhr('http://overpass-api.de/api/interpreter?[out:json];node['+parameters[0]+']('+bbox+');out;', dc.ops.file['load-overpass'].callback);
       },
       callback: function(xhr, xhrEvent) {
+        dropchop.util.loader(false);
         if (xhr.status === 200) {
           var data = JSON.parse(xhr.responseText);
           var geojson = osmtogeojson(data);

diff --git a/src/js/util.dropchop.js b/src/js/util.dropchop.js
@@ -26,12 +26,14 @@ var dropchop = (function(dc) {
   };
 
   dc.util.xhr = function(url, callback) {
+    dropchop.util.loader(true);
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     xhr.onload = callback.bind(this, xhr);
     xhr.onerror = function( xhr ) {
-        console.error(xhr);
-        dc.notify('error', 'Unable to access ' + url, 2500);
+      dropchop.util.loader(false);
+      console.error(xhr);
+      dc.notify('error', 'Unable to access ' + url, 2500);
     };
     xhr.send();
   };
@@ -114,6 +116,20 @@ var dropchop = (function(dc) {
 
   };
 
+  dc.util.loader = function(yes) {
+    var loader = $('<div>').addClass('dropchop-loader');
+
+    if (yes) {
+      $('body').addClass('dropchop-loading');
+      $('body').append(loader);
+    } else {
+      $('body').removeClass('dropchop-loading');
+      $('.dropchop-loader').addClass('loader-complete').fadeOut(2000, function(){
+        $(this).remove();
+      });
+    }
+  };
+
   return dc;
 
 

diff --git a/src/scss/_general.scss b/src/scss/_general.scss
@@ -12,6 +12,39 @@ body {
   }
 }
 
+@-webkit-keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 h1,
 h2,
 h3,

diff --git a/src/scss/_loader.scss b/src/scss/_loader.scss
@@ -0,0 +1,47 @@
+$loader-size: 35px;
+
+body {
+  &.dropchop-loading {
+    #dropchop {
+      opacity: 0.5;
+    }
+  }
+}
+
+.dropchop-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: $loader-size;
+  height: $loader-size;
+  margin-left: -15px;
+  margin-top: -15px;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-animation: rotating .8s linear infinite;
+  -moz-animation: rotating .8s linear infinite;
+  -ms-animation: rotating .8s linear infinite;
+  -o-animation: rotating .8s linear infinite;
+  animation: rotating .8s linear infinite;
+  padding: 10px;
+  border-radius: 50%;
+  background: white;
+
+  &:before {
+    font-family: 'FontAwesome';
+    content:"\f01e";
+    font-size: $loader-size;
+    color: #000;
+  }
+  &.loader-complete {
+    -webkit-animation: none;
+    -moz-animation: none;
+    -ms-animation: none;
+    -o-animation: none;
+    animation: none;
+    &:before {
+      content:"\f00c";
+      color: $green;
+    }
+  }
+}