From 9c0c450920ae3ef86ff609af6ddf86a8266d449f Mon Sep 17 00:00:00 2001 From: Goutte Date: Fri, 30 Jun 2017 16:51:33 +0200 Subject: [PATCH] Add a loader to the whole page. --- CHANGELOG.md | 10 +++++----- web/static/js/swapp.js | 27 +++++++++++++++++++++------ web/static/js/swapp.ls | 22 +++++++++++++++------- web/view/home.html.jinja2 | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 154 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ad8d275..571e6af 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,16 +1,16 @@ -## TODO +## Misc -- Support multiple models for each target -- Play button to start time dimension +- [ ] Support multiple models for each target +- [ ] Play button to start time dimension (not very useful?) ## 1.0.0 - [x] Cache generated CSVs on the server side - [x] Cache generated CSVs on the client side -- [x] Visits counter +- [x] Count visits - [x] Zoom in on time series +- [x] Loader and targets loading animation - [ ] Start/Stop datetime fields -- [ ] Loader - [ ] Download raw data (as CSV) for current time interval and targets - [ ] Same via SAMP - [ ] Credit the author of the pixel art planets diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index ffd08dd..aab9d90 100644 --- a/web/static/js/swapp.js +++ b/web/static/js/swapp.js @@ -60,7 +60,8 @@ console.info("Loaded CSV data of " + target.name + "."); this$.createTimeSeries(target, data); this$.orbits.initOrbiter(target.slug, target.config, data['hci']); - return targetButton.removeClass('loading'); + targetButton.removeClass('loading'); + return this$.hideLoader(); }, function(error){ return console.error('Failed to load CSV data.', error); }); @@ -117,6 +118,9 @@ return ts.resize(); }); }; + SpaceWeather.prototype.hideLoader = function(){ + return $("#plots_loader").hide(); + }; SpaceWeather.prototype.loadData = function(target_slug, started_at, stopped_at){ "Load the data as CSV for the specified target and interval,\nand return it in a Promise."; var sw, promise; @@ -172,27 +176,38 @@ }); return timeSeries.forEach(function(ts){ ts.options['onMouseOver'] = function(){ - return timeSeries.forEach(function(ts2){ + timeSeries.forEach(function(ts2){ return ts2.showCursor(); }); + return true; }; ts.options['onMouseOut'] = function(){ - return timeSeries.forEach(function(ts2){ + timeSeries.forEach(function(ts2){ return ts2.hideCursor(); }); + return true; }; ts.options['onMouseMove'] = function(t){ var ref$; timeSeries.forEach(function(ts2){ return ts2.moveCursor(t); }); - return (ref$ = this$.orbits) != null ? ref$.moveToDate(t) : void 8; + if ((ref$ = this$.orbits) != null) { + ref$.moveToDate(t); + } + return true; }; ts.options['onBrushEnd'] = function(sta, sto){ - return this$.resizeDomain(sta, sto); + this$.resizeDomain(sta, sto); + return true; }; return ts.options['onDblClick'] = function(){ - return this$.resetZoom(); + var ref$; + this$.resetZoom(); + if ((ref$ = $("#zoom_controls_help")) != null) { + ref$.remove(); + } + return true; }; }); }; diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index 7df4ce2..da0f325 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -11,6 +11,10 @@ # templates, such as `home.html.jinja2`. # Note: We use Promises and ES6 whenever relevant. +# You also will need d3js v4 documentation : https://d3js.org/ +# We're using a custom build of 4.9.1, one line changed, see d3-custom.js +# Event bubbling cannot trigger two rects unless we make an event dispatcher, +# and d3's brush is stopping propagation, as it should by default. ############################################################################### @@ -81,6 +85,7 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE @createTimeSeries(target, data) @orbits.initOrbiter(target.slug, target.config, data['hci']) targetButton.removeClass('loading') + @hideLoader() , (error) -> console.error('Failed to load CSV data.', error) ) @@ -117,6 +122,9 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE @orbits?.resize(); timeSeries.forEach((ts) -> ts.resize()) + hideLoader: -> + $("\#plots_loader").hide(); + loadData: (target_slug, started_at, stopped_at) -> """ Load the data as CSV for the specified target and interval, @@ -145,7 +153,7 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE ) promise - timeSeries = [] # Not sure why this ain't an instance prop. Probably should. + timeSeries = [] # deprecated (was for scoping) ; use @property with ~> createTimeSeries: (target, data) -> @configuration['parameters'].forEach((parameter) ~> container = @configuration['time_series_container'] @@ -155,18 +163,18 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE id, title, target, data[id], @parameters[id].active, container )) ) - timeSeries.forEach((ts) ~> + timeSeries.forEach((ts) ~> # returning true may be faster ts.options['onMouseOver'] = -> - timeSeries.forEach((ts2) -> ts2.showCursor()) + timeSeries.forEach((ts2) -> ts2.showCursor()) ; true ts.options['onMouseOut'] = -> - timeSeries.forEach((ts2) -> ts2.hideCursor()) + timeSeries.forEach((ts2) -> ts2.hideCursor()) ; true ts.options['onMouseMove'] = (t) ~> timeSeries.forEach((ts2) -> ts2.moveCursor(t)) - @orbits?.moveToDate(t) + @orbits?.moveToDate(t) ; true ts.options['onBrushEnd'] = (sta, sto) ~> - @resizeDomain(sta, sto) + @resizeDomain(sta, sto) ; true ts.options['onDblClick'] = ~> - @resetZoom() + @resetZoom() ; $("\#zoom_controls_help")?.remove() ; true ) enableParameter: (parameter_slug) -> diff --git a/web/view/home.html.jinja2 b/web/view/home.html.jinja2 index fba8f9f..00948b0 100755 --- a/web/view/home.html.jinja2 +++ b/web/view/home.html.jinja2 @@ -14,6 +14,16 @@ > {%- endmacro %} + +
+

Loading Heliopropa…
This might take a while.

+
+
+
+
+
+
+
@@ -72,7 +82,9 @@
-
+
+

Drag to zoom in, double click to zoom out.

+
@@ -89,6 +101,103 @@ {# background-color: #322e3f;#} {# color: #e3e3e3;#} } + #plots_wrapper { +{# position: relative;#} + } + #plots_loader { + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + height: 100%; + width: 100%; + background-color: #fff; + z-index: 1000; + } + + #plots_loader .loader-text { + width: 200px; + height: 30px; + position: absolute; + top: -240px; left: -32px; bottom: 0; right: 0; + margin: auto; + text-align: center; + font-size: 1.0em; + font-style: italic; + color: darkgrey; + } + + #plots_loader .img { + width: 100px; + height: 100px; + border-radius: 100%; + position: absolute; + border: 1px solid #6978ff; + animation: up 1s; + animation-iteration-count: infinite; + transition: 2s; + border-bottom: none; + border-right: none; + animation-timing-function: linear; + margin-left: -70px; + margin-top: -70px; + left: 50%; + top: 50%; + } + + @keyframes up { + from { + transform: rotate(0deg); + } + 50% { + transform: rotate(180deg); + } + 100% { + transform: rotate(360deg); + } + } + + #plots_loader #plots_loader_img2 { + width: 90px; + height: 90px; + left: 50.35%; + top: 50.7%; + animation-delay: .2s; + } + + #plots_loader #plots_loader_img3 { + width: 80px; + height: 80px; + left: 50.70%; + top: 51.4%; + animation-delay: .4s; + } + + #plots_loader #plots_loader_img4 { + width: 70px; + height: 70px; + left: 51.05%; + top: 52.1%; + animation-delay: .6s; + } + + #plots_loader #plots_loader_img5 { + width: 60px; + height: 60px; + left: 51.40%; + top: 52.8%; + animation-delay: .8s; + } + + #time_series .help { + position: absolute; + text-align: center; + font-size: 0.9em; + font-style: italic; + color: darkgrey; + display: none; + } + #time_series:hover .help { + display: block; + } .axis path, .axis line { fill: none; {# stroke: #f4f4f4;#} @@ -288,7 +397,7 @@ jQuery().ready(function($){ var isLastTargetEnabled = function(target_slug) { var s = 0; $(".orbiters_filters .target:not(.locked)").each(function(i,p) { - if ($(p).hasClass('active')) s++; + if ($(p).hasClass('active') && ! $(p).hasClass('loading')) s++; }); return s < 2; }; @@ -304,7 +413,8 @@ jQuery().ready(function($){ } return false; }); - $(".orbiters_filters .target:not(.locked)").click(function(e){ + $(".orbiters_filters .target:not(.locked)").on("click", function(e){ + if ($(this).hasClass('loading')) return false; var switch_on = ! $(this).hasClass('active'); var target_slug = $(this).attr('data-target-slug'); if (switch_on) { -- libgit2 0.21.2