Browse Source

Categories: Improve dom handling

master
parent
commit
e1bb504eb6
  1. 1
      index.js
  2. 16
      src/OpenStreetBrowserCategory.js
  3. 12
      src/OpenStreetBrowserIndex.js
  4. 13
      src/OpenStreetBrowserLoader.js
  5. 2
      style.css

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

16
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
}

12
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

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

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

Loading…
Cancel
Save