Merge branch 'master' of https://github.com/F1Vis/f1vis
This commit is contained in:
Maschell
commit
141c15bf7f
110
css/main.css
110
css/main.css
|
|
@ -104,3 +104,113 @@ body {
|
||||||
width: 1%;
|
width: 1%;
|
||||||
height: 1%;
|
height: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0,0,0,0.7);
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-header{
|
||||||
|
position: fixed;
|
||||||
|
top: 43%;
|
||||||
|
left: 49%;
|
||||||
|
margin: -14px 0 0 -42px;
|
||||||
|
padding: 10px;
|
||||||
|
color: black;
|
||||||
|
z-index: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -14px 0 0 -42px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(20, 20, 20, 0.9);
|
||||||
|
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
-webkit-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||||
|
-moz-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||||
|
-ms-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||||
|
-o-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-dot {
|
||||||
|
float: left;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
margin: 0 4px;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
-webkit-box-shadow: 0 0 2px black;
|
||||||
|
-moz-box-shadow: 0 0 2px black;
|
||||||
|
-ms-box-shadow: 0 0 2px black;
|
||||||
|
-o-box-shadow: 0 0 2px black;
|
||||||
|
box-shadow: 0 0 2px black;
|
||||||
|
|
||||||
|
-webkit-animation: loadingFade 1s infinite;
|
||||||
|
-moz-animation: loadingFade 1s infinite;
|
||||||
|
animation: loadingFade 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-dot:nth-child(1) {
|
||||||
|
-webkit-animation-delay: 0s;
|
||||||
|
-moz-animation-delay: 0s;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-dot:nth-child(2) {
|
||||||
|
-webkit-animation-delay: 0.1s;
|
||||||
|
-moz-animation-delay: 0.1s;
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-dot:nth-child(3) {
|
||||||
|
-webkit-animation-delay: 0.2s;
|
||||||
|
-moz-animation-delay: 0.2s;
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-dot:nth-child(4) {
|
||||||
|
-webkit-animation-delay: 0.3s;
|
||||||
|
-moz-animation-delay: 0.3s;
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes loadingFade {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes loadingFade {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loadingFade {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
|
||||||
15
index.html
15
index.html
|
|
@ -13,6 +13,7 @@
|
||||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||||
<a class="navbar-brand" href="#">F1Vis</a>
|
<a class="navbar-brand" href="#">F1Vis</a>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
|
@ -104,9 +105,20 @@
|
||||||
|
|
||||||
</main><!-- /.container -->
|
</main><!-- /.container -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="overlay">
|
||||||
|
<div class="loading">
|
||||||
|
<div class="loading-dot"></div>
|
||||||
|
<div class="loading-dot"></div>
|
||||||
|
<div class="loading-dot"></div>
|
||||||
|
<div class="loading-dot"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Other utility infrastructure -->
|
<!-- Other utility infrastructure -->
|
||||||
|
<!--
|
||||||
<div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
|
<div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
|
||||||
<div class="modal-dialog modal-m">
|
<!--<div class="modal-dialog modal-m">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
|
<div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
|
@ -116,6 +128,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
|
|
|
||||||
|
|
@ -280,8 +280,6 @@ var preprocessor = {
|
||||||
|
|
||||||
// Starts the fetch+preprocess step, calls back given function with results.
|
// Starts the fetch+preprocess step, calls back given function with results.
|
||||||
load: function(callback) {
|
load: function(callback) {
|
||||||
// Show loading dialog
|
|
||||||
loadingDialog.show(13);
|
|
||||||
// Create a queue, add all the fetch&process functions and await their results
|
// Create a queue, add all the fetch&process functions and await their results
|
||||||
d3.queue()
|
d3.queue()
|
||||||
.defer(preprocessor.fetchCircuits)
|
.defer(preprocessor.fetchCircuits)
|
||||||
|
|
|
||||||
30
js/util.js
30
js/util.js
|
|
@ -22,35 +22,19 @@ function germanDateString(inputDate) {
|
||||||
|
|
||||||
/* Define global structure for the loading dialog */
|
/* Define global structure for the loading dialog */
|
||||||
var loadingDialog = {
|
var loadingDialog = {
|
||||||
id: "#loading-dialog",
|
|
||||||
progressItems: 1,
|
|
||||||
progressItemsDone: 0,
|
|
||||||
// Initialize+Show the loading dialog with a number of items to progress
|
|
||||||
show: function(progressItems = 1) {
|
|
||||||
console.log("show");
|
|
||||||
this.progressItems = progressItems;
|
|
||||||
this.progressItemsDone = 0;
|
|
||||||
this._updateProgressBar();
|
|
||||||
//$(this.id).modal('show');
|
|
||||||
},
|
|
||||||
// Function to signal that another item was progressed
|
// Function to signal that another item was progressed
|
||||||
itemFinished: function() {
|
itemFinished: function() {
|
||||||
|
|
||||||
this.progressItemsDone++;
|
|
||||||
this._updateProgressBar();
|
|
||||||
},
|
},
|
||||||
// Hide the dialog
|
// Hide the dialog
|
||||||
hide: function() {
|
hide: function() {
|
||||||
console.log("hide");
|
$(document).ready(function($) {
|
||||||
//$(this.id).modal('hide');
|
$("#overlay").fadeOut(350, "linear", function(){
|
||||||
},
|
$("#overlay").css("display", "none");
|
||||||
// Private function to update the progress bar shown
|
});
|
||||||
_updateProgressBar: function() {
|
});
|
||||||
var percentage = (this.progressItemsDone / this.progressItems) * 100;
|
}
|
||||||
if(percentage < 0 || isNaN(percentage)) percentage = 0;
|
|
||||||
if(percentage > 100) percentage = 100;
|
|
||||||
$(this.id + " .progress-bar").attr("style", "width: " + percentage + "%;");
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// transforms the raceData to a format, with which lineDataDefinition can work
|
// transforms the raceData to a format, with which lineDataDefinition can work
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue