Merged in feature/MAPG-19-create-loading-screen (pull request #11)

feature/MAPG-19-create-loading-screen
This commit is contained in:
Bence Pőcze 2020-05-20 13:57:07 +00:00
commit 1219fb55c5
5 changed files with 28 additions and 1 deletions

2
.gitattributes vendored Normal file
View File

@ -0,0 +1,2 @@
*.gif filter=lfs diff=lfs merge=lfs -text

View File

@ -48,6 +48,18 @@ button:disabled {
opacity: 0.7; opacity: 0.7;
} }
#loading {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
z-index: 2;
visibility: visible;
}
#panorama { #panorama {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -151,5 +163,5 @@ button:disabled {
height: 100%; height: 100%;
width: 0; width: 0;
transition-property: width; transition-property: width;
transition-duration: 1.0s; transition-duration: 2.0s;
} }

BIN
public/static/img/loading.gif (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -11,6 +11,10 @@
googleLink: null, googleLink: null,
getNewPosition: function () { getNewPosition: function () {
Core.panorama.setVisible(false);
document.getElementById('loading').style.visibility = 'visible';
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
@ -31,6 +35,9 @@
return; return;
} }
document.getElementById('loading').style.visibility = 'hidden';
Core.panorama.setVisible(true);
Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 }); Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 });
Core.panorama.setPano(data.location.pano); Core.panorama.setPano(data.location.pano);
}, },

View File

@ -7,6 +7,9 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="loading">
<img src="static/img/loading.gif">
</div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="guess"> <div id="guess">
<div id="guessMap"></div> <div id="guessMap"></div>