DOM: Instead of #info and #object use just #content

.gitmodules

@@ -7,3 +7,6 @@
 [submodule "lib/modulekit/lang"]
 	path = lib/modulekit/lang
 	url = https://github.com/plepe/modulekit-lang.git
+[submodule "lib/modulekit/form"]
+	path = lib/modulekit/form
+	url = https://github.com/plepe/modulekit-form.git

index.php

@@ -31,8 +31,6 @@ html_export_var(array(
   <div id='sidebar'>
     <div id='header'><img src='img/osb_logo.png'>OpenStreet <span class='large'>Browser</span><div class='version' title='<?=$modulekit['version']?>'><?php print substr($modulekit['version'], 0, strpos($modulekit['version'], '+')); ?></div></div>
     <div id='content'>
-      <div id='info'></div>
-      <div id='object'></div>
     </div>
     <div id='footer'></div>
   </div>

lib/modulekit/form

@@ -0,0 +1 @@
+Subproject commit fb24b524f66062fa13a5c036d73384d8dbceb8fc

src/index.js

@@ -13,6 +13,7 @@ require('./CategoryOverpass')
 var tagTranslations = require('./tagTranslations')
 
 var map
+var baseCategory
 
 window.onload = function() {
   call_hooks('init')
@@ -65,7 +66,8 @@ window.onload = function() {
       return
     }
 
-    category.setParentDom(document.getElementById('info'))
+    baseCategory = category
+    category.setParentDom(document.getElementById('content'))
     category.open()
   })
 
@@ -115,9 +117,7 @@ window.onload = function() {
 
 function show (id, options, callback) {
   if (options.showDetails) {
-    document.getElementById('info').style.display = 'none'
-    document.getElementById('object').style.display = 'block'
-    document.getElementById('object').innerHTML = 'Loading ...'
+    document.getElementById('content').innerHTML = 'Loading ...'
   }
 
   id = id.split('/')
@@ -134,7 +134,7 @@ function show (id, options, callback) {
     }
 
     if (!category.parentDom) {
-      category.setParentDom(document.getElementById('info'))
+      category.setParentDom(document.getElementById('content'))
     }
 
     category.show(
@@ -162,7 +162,9 @@ function show (id, options, callback) {
 }
 
 function showDetails (data, category) {
-  var dom = document.getElementById('object')
+  var dom = document.getElementById('content')
+
+
 
   dom.innerHTML = ''
 
@@ -221,6 +223,10 @@ function showDetails (data, category) {
 }
 
 function hide () {
-  document.getElementById('info').style.display = 'block'
-  document.getElementById('object').style.display = 'none'
+  var content = document.getElementById('content')
+  content.innerHTML = ''
+
+  if (baseCategory) {
+    baseCategory.setParentDom(content)
+  }
 }

style.css

@@ -73,12 +73,6 @@ body {
   flex-shrink: 0;
   overflow: auto;
 }
-#sidebar > #content > #info,
-#sidebar > #content > #object {
-}
-#object {
-  display: none;
-}
 
 #sidebar > #footer {
   flex: 0;
@@ -87,52 +81,52 @@ body {
 
 /***** CATEGORY *****/
 /* root category */
-#info > .category > .content > .categoryWrapper > .category {
+#content > .category > .content > .categoryWrapper > .category {
   margin-left: 0;
 }
-#info .category {
+#content .category {
   position: relative;
 }
-#info .category > .loadingIndicator {
+#content .category > .loadingIndicator {
   position: absolute;
   right: 0;
   top: 0;
   font-size: 15px;
   display: none;
 }
-#info .category.loading > .loadingIndicator {
+#content .category.loading > .loadingIndicator {
   padding-top: 2px;
   display: block;
 }
-#info .category header {
+#content .category header {
   padding-top: 3px;
   border-bottom: 1px dotted #999;
   user-select: none;
   font-size: 15px;
 }
-#info .category header > a {
+#content .category header > a {
   text-decoration: none;
   color: black;
 }
-#info .category header > a:active,
-#info .category header > a:hover {
+#content .category header > a:active,
+#content .category header > a:hover {
   text-decoration: underline;
 }
-#info .category > .content,
-#info .category > .status {
+#content .category > .content,
+#content .category > .status {
   display: none;
 }
-#info .category.open > .content,
-#info .category.open > .status {
+#content .category.open > .content,
+#content .category.open > .status {
   display: block;
 }
-#info .category > .status,
-#info .category > .content > ul.overpass-layer-list {
+#content .category > .status,
+#content .category > .content > ul.overpass-layer-list {
   padding-top: 3px;
   background: #efefef;
 }
 
-#info .category > div > div> .category {
+#content .category > div > div> .category {
   margin-left: 1em;
 }
 ul.overpass-layer-list {
@@ -199,7 +193,7 @@ ul.overpass-layer-list > li:after {
   width: 25px;
   text-align: center;
 }
-#object a.showDetails {
+#content a.showDetails {
   display: none;
 }
 a.showDetails {