CategoryBase: enable reload of category (in debug mode)

src/CategoryBase.js

@@ -1,3 +1,5 @@
+var OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
+
 function CategoryBase (id, data) {
   this.id = id
   this.parentCategory = null
@@ -29,6 +31,23 @@ function CategoryBase (id, data) {
     a.href = '#'
     a.onclick = this.toggle.bind(this)
     domHeader.appendChild(a)
+
+    if (options.debug) {
+      var a = document.createElement('a')
+      a.appendChild(document.createTextNode('⟳'))
+      a.title = lang('reload')
+      a.className = 'reload'
+      a.onclick = function () {
+        var id = this.id
+
+        this.reload(function (err) {
+          if (err) {
+            alert('Error reloading category ' + id + ': ' + err)
+          }
+        })
+      }.bind(this)
+      domHeader.appendChild(a)
+    }
   }
 
   this.domContent = document.createElement('div')
@@ -95,6 +114,33 @@ CategoryBase.prototype.toggle = function () {
   return false
 }
 
+CategoryBase.prototype.reload = function (callback) {
+  var parentCategory = this.parentCategory
+  var parentDom = this.parentDom
+
+  OpenStreetBrowserLoader.forget(this.id)
+  this.remove()
+
+  OpenStreetBrowserLoader.getCategory(this.id, function (err, category) {
+    if (err) {
+      return callback(err)
+    }
+
+    category.setParent(parentCategory)
+    category.setParentDom(parentDom)
+
+    callback(null, category)
+  })
+}
+
+CategoryBase.prototype.remove = function () {
+  this.close()
+
+  if (this.parentDom) {
+    this.parentDom.removeChild(this.dom)
+  }
+}
+
 CategoryBase.prototype.recalc = function () {
 }
 

src/OpenStreetBrowserLoader.js

@@ -56,6 +56,11 @@ OpenStreetBrowserLoader.prototype.getCategoryFromData = function (id, data, call
   }
 }
 
+OpenStreetBrowserLoader.prototype.forget = function (id) {
+  this.categories[id].remove()
+  delete this.categories[id]
+}
+
 OpenStreetBrowserLoader.prototype.registerType = function (type, classObject) {
   this.types[type] = classObject
 }

style.css

@@ -165,6 +165,9 @@ body {
 #content .category header > a:hover {
   text-decoration: underline;
 }
+#content .category header > a.reload {
+  float: right;
+}
 #content .category > .content,
 #content .category > .status {
   display: none;