diff --git a/lang/en.json b/lang/en.json index 33e8ea49..57c93cc1 100644 --- a/lang/en.json +++ b/lang/en.json @@ -24,6 +24,7 @@ "more": "more", "more_categories": "More categories", "more_categories_gitea": "Create & improve categories yourself!", + "more_results": "Show more results", "open": "open", "options:data_lang": "Data language", "options:data_lang:desc": "Many map features have their name (and other tags) translated to different languages (e.g. with 'name:en', 'name:de'). Specify which language should be used for displaying, or 'Local language' so that always the untranslated value (e.g. 'name') will be used", diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index bb5709e5..fab8a09b 100644 --- a/src/CategoryOverpass.js +++ b/src/CategoryOverpass.js @@ -10,6 +10,8 @@ var markers = require('./markers') var maki = require('./maki') var qs = require('sheet-router/qs') +const showMore = require('./showMore') + var defaultValues = { feature: { title: "{{ localizedTag(tags, 'name') |default(localizedTag(tags, 'operator')) | default(localizedTag(tags, 'ref')) | default(trans('unnamed')) }}", @@ -298,6 +300,8 @@ CategoryOverpass.prototype.open = function () { list.addTo(domContent) + showMore(this, domContent) + p = document.createElement('div') p.className = 'loadingIndicator2' p.innerHTML = '
' @@ -307,6 +311,8 @@ CategoryOverpass.prototype.open = function () { let list = new OverpassLayerList(this.layer, {}) this.lists.push(list) list.addTo(this.domContent) + + showMore(this, this.domContent) } this.lists.forEach(list => { diff --git a/src/showMore.css b/src/showMore.css new file mode 100644 index 00000000..b5d8b51b --- /dev/null +++ b/src/showMore.css @@ -0,0 +1,11 @@ +.collapsed { + max-height: 15em; + overflow-y: hidden; +} +.category > .showMore { + display: none; +} +.category.open > .showMore.active { + display: block; + background: #efefef; +} diff --git a/src/showMore.js b/src/showMore.js new file mode 100644 index 00000000..0848e088 --- /dev/null +++ b/src/showMore.js @@ -0,0 +1,31 @@ +require('./showMore.css') + +function showMore (category, dom) { + dom.classList.add('collapsed') + + let p = document.createElement('div') + p.className = 'showMore' + dom.parentNode.insertBefore(p, dom.nextSibling) + + let a = document.createElement('a') + a.href = '#' + a.innerHTML = lang('more_results') + a.onclick = () => { + dom.classList.remove('collapsed') + p.classList.remove('active') + return false + } + p.appendChild(a) + + category.on('add', () => { + if (dom.scrollHeight > dom.offsetHeight && dom.classList.contains('collapsed')) { + p.classList.add('active') + } + }) + category.on('open', () => { + p.classList.remove('active') + dom.classList.add('collapsed') + }) +} + +module.exports = showMore