diff --git a/.gitmodules b/.gitmodules index fbf43a9f..19ffc2d7 100644 --- a/.gitmodules +++ b/.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 diff --git a/index.php b/index.php index 668d3615..85855985 100644 --- a/index.php +++ b/index.php @@ -31,8 +31,6 @@ html_export_var(array( diff --git a/lib/modulekit/form b/lib/modulekit/form new file mode 160000 index 00000000..fb24b524 --- /dev/null +++ b/lib/modulekit/form @@ -0,0 +1 @@ +Subproject commit fb24b524f66062fa13a5c036d73384d8dbceb8fc diff --git a/src/index.js b/src/index.js index a744829a..177a2914 100644 --- a/src/index.js +++ b/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) + } } diff --git a/style.css b/style.css index c79ebd5b..33380355 100644 --- a/style.css +++ b/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 {