Full screen mode: show loading bar on top

index.php

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

src/CategoryBase.js

@@ -1,6 +1,7 @@
 function CategoryBase (id, data) {
   this.id = id
   this.parentCategory = null
+  this.childrenLoadingCount = 0
   this.data = data
   this.isOpen = false
   this.dom = document.createElement('div')
@@ -40,7 +41,7 @@ CategoryBase.prototype.setMap = function (map) {
 }
 
 CategoryBase.prototype.setParent = function (parent) {
-  this.parent = parent
+  this.parentCategory = parent
 }
 
 CategoryBase.prototype.setParentDom = function (parentDom) {
@@ -97,4 +98,24 @@ CategoryBase.prototype.toggle = 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

src/CategoryOverpass.js

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

style.css

@@ -372,3 +372,36 @@ a.showDetails {
 .fullscreen #mapShadow {
   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%;
+  }
+}