Add a loading animation to target buttons. It makes the whole page glitch on Chr…

…ome on linux and I do not know why, because it's a browser issue.

Add a loading animation to target buttons. It makes the whole page glitch on Chr…
…ome on linux and I do not know why, because it's a browser issue.
Goutte
1 parent ebe77ce4
Showing 4 changed files with 48 additions and 2 deletions Show diff stats
web/static/css/main.css
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
@@ -225,6 +225,23 @@ ul li {
   }
 }
+@-ms-keyframes spin {
+    from { -ms-transform: rotate(0deg); }
+    to { -ms-transform: rotate(360deg); }
+}
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
+    from { transform:rotate(0deg); }
+    to { transform:rotate(360deg); }
+}
+
 /** MEDIA QUERIES *************************************************************/
 @media all and (max-width: 980px) {
@@ -52,11 +52,15 @@
       stopped_at = this.stopped_at.format("YYYY-MM-DDTHH:mm:ss");
       console.info("Setting time interval from " + started_at + " to " + stopped_at + "…");
       active_targets.forEach(function(target){
+        var targetButton;
         console.info("Loading CSV data of " + target.name + "…");
+        targetButton = $(".orbiters_filters .target." + target.slug);
+        targetButton.addClass('loading');
         return this$.loadData(target.slug, started_at, stopped_at).then(function(data){
           console.info("Loaded CSV data of " + target.name + ".");
           this$.createTimeSeries(target, data);
-          return this$.orbits.initOrbiter(target.slug, target.config, data['hci']);
+          this$.orbits.initOrbiter(target.slug, target.config, data['hci']);
+          return targetButton.removeClass('loading');
         }, function(error){
           return console.error('Failed to load CSV data.', error);
         });
@@ -73,11 +73,14 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     console.info "Setting time interval from #{started_at} to #{stopped_at}…"
     active_targets.forEach((target) ~>
       console.info "Loading CSV data of #{target.name}…"
+      targetButton = $(".orbiters_filters .target.#{target.slug}")
+      targetButton.addClass('loading')
       @loadData(target.slug, started_at, stopped_at).then(
         (data) ~>
           console.info "Loaded CSV data of #{target.name}."
           @createTimeSeries(target, data)
           @orbits.initOrbiter(target.slug, target.config, data['hci'])
+          targetButton.removeClass('loading')
         ,
         (error) -> console.error('Failed to load CSV data.', error)
       )
@@ -9,7 +9,7 @@
          src="{{ static('img/target/'~target.slug~'_128.png') }}"
          title="{{ target.title }}"
          alt="{{ target.name }}"
-         class="target {{ 'locked' if target.locked else 'active' }}"
+         class="target {{ target.slug }} {{ 'locked' if target.locked else 'active' }}"
          data-target-slug="{{ target.slug }}"
     >
 {%- endmacro %}
@@ -150,6 +150,28 @@
     .orbiters_filters .target.locked {
       cursor: not-allowed;
     }
+    .orbiters_filters .target.loading {
+{#        margin: 20px;#}
+{#        width: 100px;#}
+{#        height: 100px;#}
+{#        background: #f00;#}
+        -webkit-animation-name: spin;
+        -webkit-animation-duration: 4000ms;
+        -webkit-animation-iteration-count: infinite;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-name: spin;
+        -moz-animation-duration: 4000ms;
+        -moz-animation-iteration-count: infinite;
+        -moz-animation-timing-function: linear;
+        -ms-animation-name: spin;
+        -ms-animation-duration: 4000ms;
+        -ms-animation-iteration-count: infinite;
+        -ms-animation-timing-function: linear;
+        animation-name: spin;
+        animation-duration: 4000ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
     #orbits {
 {#      background-image: url('{{ static('img/orbitals_background.png') }}');#}