From e1bb504eb6f8e3bd991dec773ad282fcc9ffd7f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= <skunk@xover.mud.at>
Date: Sun, 25 Jun 2017 07:16:27 +0200
Subject: [PATCH] Categories: Improve dom handling

---
 index.js                         |  1 -
 src/OpenStreetBrowserCategory.js | 20 ++++++++++++++++----
 src/OpenStreetBrowserIndex.js    | 12 ++++++++----
 src/OpenStreetBrowserLoader.js   | 13 ++++++++-----
 style.css                        |  2 +-
 5 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/index.js b/index.js
index 297a65f1..db049b7e 100644
--- a/index.js
+++ b/index.js
@@ -26,7 +26,6 @@ window.onload = function() {
   osm_mapnik.addTo(map)
 
   OpenStreetBrowserLoader.setMap(map)
-  OpenStreetBrowserLoader.setParentDom(document.getElementById('info'))
 
   OpenStreetBrowserLoader.getCategory('index', function (err, category) {
     if (err) {
diff --git a/src/OpenStreetBrowserCategory.js b/src/OpenStreetBrowserCategory.js
index d70afbee..f9cdd932 100644
--- a/src/OpenStreetBrowserCategory.js
+++ b/src/OpenStreetBrowserCategory.js
@@ -6,6 +6,7 @@ function OpenStreetBrowserCategory (id, data) {
   this.id = id
   this.layer = new OverpassLayer(data)
   this.isOpen = false
+  this.dom = document.createElement('div')
 }
 
 OpenStreetBrowserCategory.prototype.setMap = function (map) {
@@ -14,6 +15,9 @@ OpenStreetBrowserCategory.prototype.setMap = function (map) {
 
 OpenStreetBrowserCategory.prototype.setParentDom = function (parentDom) {
   this.parentDom = parentDom
+  if (typeof this.parentDom !== 'string') {
+    this.parentDom.appendChild(this.dom)
+  }
 }
 
 OpenStreetBrowserCategory.prototype.open = function () {
@@ -21,15 +25,21 @@ OpenStreetBrowserCategory.prototype.open = function () {
     return
 
   if (typeof this.parentDom === 'string') {
-    this.parentDom = document.getElementById(this.parentDom)
+    var d = document.getElementById(this.parentDom)
+    if (d) {
+      this.parentDom = d
+      this.parentDom.appendChild(this.dom)
+    }
   }
 
-  this.parentDom.parentNode.classList.add('open')
+  if (this.parentDom && this.parentDom.parentNode) {
+    this.parentDom.parentNode.classList.add('open')
+  }
 
   this.layer.addTo(this.map)
 
   if (!this.list) {
-    this.list = new OverpassLayerList(this.parentDom, this.layer)
+    this.list = new OverpassLayerList(this.dom, this.layer)
   }
 
   this.isOpen = true
@@ -42,7 +52,9 @@ OpenStreetBrowserCategory.prototype.close = function () {
   this.layer.remove()
   this.list.remove()
 
-  this.parentDom.parentNode.classList.remove('open')
+  if (this.parentDom && this.parentDom.parentNode) {
+    this.parentDom.parentNode.classList.remove('open')
+  }
 
   this.isOpen = false
 }
diff --git a/src/OpenStreetBrowserIndex.js b/src/OpenStreetBrowserIndex.js
index d96f053a..17667cfb 100644
--- a/src/OpenStreetBrowserIndex.js
+++ b/src/OpenStreetBrowserIndex.js
@@ -6,6 +6,7 @@ function OpenStreetBrowserIndex (id, data) {
   this.isOpen = false
   this.childrenDoms = {}
   this.childrenCategories = null
+  this.dom = document.createElement('div')
 }
 
 OpenStreetBrowserIndex.prototype.setMap = function (map) {
@@ -14,6 +15,9 @@ OpenStreetBrowserIndex.prototype.setMap = function (map) {
 
 OpenStreetBrowserIndex.prototype.setParentDom = function (parentDom) {
   this.parentDom = parentDom
+  if (typeof this.parentDom !== 'string') {
+    this.parentDom.appendChild(this.dom)
+  }
 }
 
 OpenStreetBrowserIndex.prototype.open = function () {
@@ -21,7 +25,7 @@ OpenStreetBrowserIndex.prototype.open = function () {
     return
 
   if (this.childrenCategories !== null) {
-    this.parentDom.style.display = 'block'
+    this.dom.style.display = 'block'
     this.isOpen = true
     return
   }
@@ -30,13 +34,14 @@ OpenStreetBrowserIndex.prototype.open = function () {
 
   if (typeof this.parentDom === 'string') {
     this.parentDom = document.getElementById(this.parentDom)
+    this.parentDom.appendChild(this.dom)
   }
 
   for (var i = 0; i < this.data.subCategories.length; i++) {
     var data = this.data.subCategories[i]
     var dom = document.createElement('div')
     dom.className = 'category'
-    this.parentDom.appendChild(dom)
+    this.dom.appendChild(dom)
 
     var domHeader = document.createElement('header')
     dom.appendChild(domHeader)
@@ -76,7 +81,7 @@ OpenStreetBrowserIndex.prototype.close = function () {
     }
   }
 
-  this.parentDom.style.display = 'none'
+  this.dom.style.display = 'none'
 
   this.isOpen = false
 }
@@ -96,7 +101,6 @@ OpenStreetBrowserIndex.prototype.toggleCategory = function (id) {
       return
     }
 
-    category.setMap(this.map)
     category.setParentDom(this.childrenDoms[id])
     this.childrenCategories[id] = category
 
diff --git a/src/OpenStreetBrowserLoader.js b/src/OpenStreetBrowserLoader.js
index fa5845f7..76f378b4 100644
--- a/src/OpenStreetBrowserLoader.js
+++ b/src/OpenStreetBrowserLoader.js
@@ -7,10 +7,6 @@ OpenStreetBrowserLoader.prototype.setMap = function (map) {
   this.map = map
 }
 
-OpenStreetBrowserLoader.prototype.setParentDom = function (parentDom) {
-  this.parentDom = parentDom
-}
-
 OpenStreetBrowserLoader.prototype.getCategory = function (id, callback) {
   if (id in this.categories) {
     callback(null, this.categories[id])
@@ -25,7 +21,14 @@ OpenStreetBrowserLoader.prototype.getCategory = function (id, callback) {
 
     var data = JSON.parse(req.responseText)
 
-    this.getCategoryFromData(id, data, callback)
+    this.getCategoryFromData(id, data, function (err, category) {
+      if (category) {
+        category.setMap(this.map)
+      }
+
+      callback(err, category)
+    }.bind(this))
+
   }
 
   var req = new XMLHttpRequest()
diff --git a/style.css b/style.css
index 9c0b16fd..60ffe035 100644
--- a/style.css
+++ b/style.css
@@ -109,7 +109,7 @@ body {
   background: #efefef;
 }
 
-#info .category > div > .category {
+#info .category > div > div> .category {
   margin-left: 1em;
 }
 ul.overpass-layer-list {