Merge branch '3-fix-vanishing-lists'

index.php

@@ -46,7 +46,10 @@ html_export_var(array(
       <img src='img/osb_logo.png'>
       <div id='title'>OpenStreet <span class='large'>Browser</span><div class='version' title='<?=$modulekit['version']?>'><?php print substr($modulekit['version'], 0, strpos($modulekit['version'], '+')); ?></div></div>
     </div>
-    <div id='content'>
+    <div id='content' class='list'>
+      <div id='contentList'></div>
+      <div id='contentDetails'></div>
+      <div id='contentOptions'></div>
     </div>
     <div id='footer'>
       <ul id='menu'>

src/CategoryBase.js

@@ -66,6 +66,10 @@ CategoryBase.prototype.setMap = function (map) {
 
 CategoryBase.prototype.setParent = function (parent) {
   this.parentCategory = parent
+
+  if (this.isOpen) {
+    this.parentCategory.open()
+  }
 }
 
 CategoryBase.prototype.setParentDom = function (parentDom) {

src/index.js

@@ -69,7 +69,7 @@ function onload2 () {
     }
 
     baseCategory = category
-    category.setParentDom(document.getElementById('content'))
+    category.setParentDom(document.getElementById('contentList'))
     category.open()
   })
 
@@ -125,7 +125,8 @@ function onload2 () {
 
 function show (id, options, callback) {
   if (options.showDetails) {
-    document.getElementById('content').innerHTML = 'Loading ...'
+    document.getElementById('content').className = 'details'
+    document.getElementById('contentDetails').innerHTML = 'Loading ...'
   }
 
   id = id.split('/')
@@ -140,7 +141,7 @@ function show (id, options, callback) {
     }
 
     if (!category.parentDom) {
-      category.setParentDom(document.getElementById('content'))
+      category.setParentDom(document.getElementById('contentList'))
     }
 
     category.show(
@@ -167,7 +168,7 @@ function show (id, options, callback) {
 }
 
 function showDetails (data, category) {
-  var dom = document.getElementById('content')
+  var dom = document.getElementById('contentDetails')
 
   dom.innerHTML = ''
 
@@ -226,11 +227,7 @@ function showDetails (data, category) {
 }
 
 function hide () {
-  var content = document.getElementById('content')
-  content.innerHTML = ''
-
-  if (baseCategory) {
-    baseCategory.setParentDom(content)
-  }
+  document.getElementById('content').className = 'list'
 }
+
 window.showRootContent = hide

src/mapLayers.js

@@ -50,6 +50,10 @@ register_hook('init', function () {
 register_hook('options_form', function (def) {
   var baseMaps = {}
 
+  if (!config.baseMaps) {
+    return
+  }
+
   for (var i = 0; i < config.baseMaps.length; i++) {
     baseMaps[config.baseMaps[i].id] = config.baseMaps[i].name
   }

src/options.js

@@ -27,7 +27,8 @@ moduleOptions.open = function () {
   call_hooks('options_form', def)
 
   var options_form = new form('options', def)
-  var dom = document.getElementById('content')
+  document.getElementById('content').className = 'options'
+  var dom = document.getElementById('contentOptions')
   dom.innerHTML = ''
 
   options_form.set_data(options)

style.css

@@ -80,10 +80,23 @@ body {
   flex: 0;
 }
 
+#content > div {
+  display: none;
+}
+#content.list > #contentList {
+  display: block;
+}
+#content.details > #contentDetails {
+  display: block;
+}
+#content.options > #contentOptions {
+  display: block;
+}
+
 
 /***** CATEGORY *****/
 /* root category */
-#content > .category > .content > .categoryWrapper > .category {
+#content > #contentList > .category > .content > .categoryWrapper > .category {
   margin-left: 0;
 }
 #content .category {