Categories: show more results

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",

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 = '<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>'
@@ -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 => {

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;
+}

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