Browse Source

Full screen mode: show loading bar on top

master
parent
commit
b4257d55ae
  1. 2
      index.php
  2. 23
      src/CategoryBase.js
  3. 6
      src/CategoryOverpass.js
  4. 33
      style.css

2
index.php

@ -54,5 +54,7 @@ html_export_var(array(
</ul> </ul>
</div> </div>
</div> </div>
<div id='loadingIndicator'>
</div>
</body> </body>
</html> </html>

23
src/CategoryBase.js

@ -1,6 +1,7 @@
function CategoryBase (id, data) { function CategoryBase (id, data) {
this.id = id this.id = id
this.parentCategory = null this.parentCategory = null
this.childrenLoadingCount = 0
this.data = data this.data = data
this.isOpen = false this.isOpen = false
this.dom = document.createElement('div') this.dom = document.createElement('div')
@ -40,7 +41,7 @@ CategoryBase.prototype.setMap = function (map) {
} }
CategoryBase.prototype.setParent = function (parent) { CategoryBase.prototype.setParent = function (parent) {
this.parent = parent
this.parentCategory = parent
} }
CategoryBase.prototype.setParentDom = function (parentDom) { CategoryBase.prototype.setParentDom = function (parentDom) {
@ -97,4 +98,24 @@ CategoryBase.prototype.toggle = function () {
CategoryBase.prototype.recalc = function () { CategoryBase.prototype.recalc = function () {
} }
CategoryBase.prototype.notifyChildLoadStart = function (category) {
console.log(this.id, this.childrenLoadingCount)
if (this.childrenLoadingCount === 0 && this.parentCategory) {
this.parentCategory.notifyChildLoadStart(this)
} else {
document.body.classList.add('loading')
}
this.childrenLoadingCount++
}
CategoryBase.prototype.notifyChildLoadEnd = function (category) {
console.log(this.id, this.childrenLoadingCount)
this.childrenLoadingCount--
if (this.childrenLoadingCount === 0 && this.parentCategory) {
this.parentCategory.notifyChildLoadEnd(this)
} else {
document.body.classList.remove('loading')
}
}
module.exports = CategoryBase module.exports = CategoryBase

6
src/CategoryOverpass.js

@ -61,9 +61,15 @@ function CategoryOverpass (id, data) {
this.layer.onLoadStart = function (ev) { this.layer.onLoadStart = function (ev) {
this.dom.classList.add('loading') this.dom.classList.add('loading')
if (this.parentCategory) {
this.parentCategory.notifyChildLoadStart(this)
}
}.bind(this) }.bind(this)
this.layer.onLoadEnd = function (ev) { this.layer.onLoadEnd = function (ev) {
this.dom.classList.remove('loading') this.dom.classList.remove('loading')
if (this.parentCategory) {
this.parentCategory.notifyChildLoadEnd(this)
}
if (ev.error && ev.error !== 'abort') { if (ev.error && ev.error !== 'abort') {
alert('Error loading data from Overpass API: ' + ev.error) alert('Error loading data from Overpass API: ' + ev.error)

33
style.css

@ -372,3 +372,36 @@ a.showDetails {
.fullscreen #mapShadow { .fullscreen #mapShadow {
display: none; display: none;
} }
#loadingIndicator {
display: none;
}
.fullscreen.loading > #loadingIndicator {
display: block;
z-index: 10000;
height: 3px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: black;
overflow: hidden;
}
.fullscreen.loading > #loadingIndicator:before {
display: block;
position: absolute;
content: "";
margin-left: -250px;
width: 250px;
height: 4px;
background: red;
animation: loading 2s linear infinite;
}
@keyframes loading {
0% {
margin-left: -250px;
}
100% {
margin-left: 100%;
}
}
Loading…
Cancel
Save