diff --git a/index.php b/index.php index e7695389..77c59e79 100644 --- a/index.php +++ b/index.php @@ -54,5 +54,7 @@ html_export_var(array( +
+
diff --git a/src/CategoryBase.js b/src/CategoryBase.js index df6f4070..56172bbf 100644 --- a/src/CategoryBase.js +++ b/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 diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index 1075772f..cef0b0a0 100644 --- a/src/CategoryOverpass.js +++ b/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) diff --git a/style.css b/style.css index 1217f6b9..f7b35435 100644 --- a/style.css +++ b/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%; + } +}