From 93ee55630c15509e4077b28a78aad35b33254f9d Mon Sep 17 00:00:00 2001
From: Goutte <antoine.goutenoir@gmail.com>
Date: Thu, 29 Jun 2017 12:15:29 +0200
Subject: [PATCH] Add a loading animation to target buttons. It makes the whole page glitch on Chrome on linux and I do not know why, because it's a browser issue.

---
 web/static/css/main.css   | 17 +++++++++++++++++
 web/static/js/swapp.js    |  6 +++++-
 web/static/js/swapp.ls    |  3 +++
 web/view/home.html.jinja2 | 24 +++++++++++++++++++++++-
 4 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/web/static/css/main.css b/web/static/css/main.css
index dfd5d31..0bd53fc 100755
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -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) {
diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js
index 386e095..ffd08dd 100644
--- a/web/static/js/swapp.js
+++ b/web/static/js/swapp.js
@@ -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);
         });
diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls
index 5abf4b5..7df4ce2 100644
--- a/web/static/js/swapp.ls
+++ b/web/static/js/swapp.ls
@@ -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)
       )
diff --git a/web/view/home.html.jinja2 b/web/view/home.html.jinja2
index 87e66f3..fba8f9f 100755
--- a/web/view/home.html.jinja2
+++ b/web/view/home.html.jinja2
@@ -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') }}');#}
--
libgit2 0.21.2