mirror of
https://github.com/LCPQ/QUESTDB_website.git
synced 2024-08-25 13:41:50 +02:00
Add a full screen modal processingIndicator
This commit is contained in:
parent
c7a8ec2b02
commit
83d814536d
@ -3,6 +3,7 @@ title: "Multiple dataset"
|
|||||||
date: 2019-09-27 16:41
|
date: 2019-09-27 16:41
|
||||||
draft: false
|
draft: false
|
||||||
---
|
---
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/modal.css" />
|
||||||
<script src="/js/data.js" type="text/javascript"></script>
|
<script src="/js/data.js" type="text/javascript"></script>
|
||||||
<script src="/js/loadAllData.js" type="text/javascript"></script>
|
<script src="/js/loadAllData.js" type="text/javascript"></script>
|
||||||
<script src="/js/getFullDataPath.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>
|
<div id="graph_div"></div>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal"></div>
|
@ -3,6 +3,7 @@ title: "One dataset"
|
|||||||
date: 2019-08-29 09:00
|
date: 2019-08-29 09:00
|
||||||
draft: false
|
draft: false
|
||||||
---
|
---
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/modal.css" />
|
||||||
<script src="/js/processingIndicator.js" type="text/javascript"></script>
|
<script src="/js/processingIndicator.js" type="text/javascript"></script>
|
||||||
<script src="/js/data.js" type="text/javascript"></script>
|
<script src="/js/data.js" type="text/javascript"></script>
|
||||||
<script src="/js/loadAllData.js" type="text/javascript"></script>
|
<script src="/js/loadAllData.js" type="text/javascript"></script>
|
||||||
|
30
static/css/modal.css
Normal file
30
static/css/modal.css
Normal 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
|
||||||
|
}
|
@ -1,14 +1,14 @@
|
|||||||
class processingIndicator{
|
class processingIndicator{
|
||||||
static get isActive(){
|
static get isActive(){
|
||||||
return document.body.style.cursor==="wait"
|
return document.body.classList.contains("loading")
|
||||||
}
|
}
|
||||||
static set isActive(value){
|
static set isActive(value){
|
||||||
if(value!=this.isActive){
|
if(value!=this.isActive){
|
||||||
if(value){
|
if(value){
|
||||||
document.body.style.cursor="wait"
|
document.body.classList.add("loading")
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
document.body.style.cursor="default"
|
document.body.classList.remove("loading")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user