Categories: Improve dom handling

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) {

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)
+    }
   }
 
+  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()
 
+  if (this.parentDom && this.parentDom.parentNode) {
     this.parentDom.parentNode.classList.remove('open')
+  }
 
   this.isOpen = false
 }

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
 

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()

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 {