10
0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-12-24 13:23:40 +01:00

Add a full screen modal processingIndicator

This commit is contained in:
Mickaël Véril 2019-10-07 12:10:45 +02:00
parent c7a8ec2b02
commit 83d814536d
4 changed files with 37 additions and 4 deletions

View File

@ -3,6 +3,7 @@ title: "Multiple dataset"
date: 2019-09-27 16:41
draft: false
---
<link rel="stylesheet" type="text/css" href="/css/modal.css" />
<script src="/js/data.js" type="text/javascript"></script>
<script src="/js/loadAllData.js" type="text/javascript"></script>
<script src="/js/getFullDataPath.js" type="text/javascript"></script>
@ -327,3 +328,4 @@ draft: false
<div id="graph_div"></div>
</table>
</div>
<div class="modal"></div>

View File

@ -3,6 +3,7 @@ title: "One dataset"
date: 2019-08-29 09:00
draft: false
---
<link rel="stylesheet" type="text/css" href="/css/modal.css" />
<script src="/js/processingIndicator.js" type="text/javascript"></script>
<script src="/js/data.js" type="text/javascript"></script>
<script src="/js/loadAllData.js" type="text/javascript"></script>

30
static/css/modal.css Normal file
View File

@ -0,0 +1,30 @@
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-color: rgba(255,255,255,.3);
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
cursor: wait
}

View File

@ -1,14 +1,14 @@
class processingIndicator{
static get isActive(){
return document.body.style.cursor==="wait"
return document.body.classList.contains("loading")
}
static set isActive(value){
if(value!=this.isActive){
if(value){
document.body.style.cursor="wait"
document.body.classList.add("loading")
}
else{
document.body.style.cursor="default"
document.body.classList.remove("loading")
}
}
}