Merge pull request #72 from plepe/showMore

Show more

lang/ast.json

@@ -21,6 +21,7 @@
     "more": "más",
     "more_categories": "Más categoríes",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Llingua de los datos",
     "options:data_lang:desc": "",

lang/ca.json

@@ -21,6 +21,7 @@
     "more": "més",
     "more_categories": "Més categories",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "",
     "options:data_lang:desc": "",

lang/cs.json

@@ -21,6 +21,7 @@
     "more": "více",
     "more_categories": "Více kategorií",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Jazyk dat",
     "options:data_lang:desc": "",

lang/da.json

@@ -21,6 +21,7 @@
     "more": "mere",
     "more_categories": "Flere kategorier",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Data sprog",
     "options:data_lang:desc": "",

lang/de.json

@@ -24,6 +24,7 @@
     "more": "mehr",
     "more_categories": "Mehr Kategorien",
     "more_categories_gitea": "Erstelle und verbessere Kategorien hier!",
+    "more_results": "",
     "open": "geöffnet",
     "options:data_lang": "Datensprache",
     "options:data_lang:desc": null,

lang/el.json

@@ -21,6 +21,7 @@
     "more": "περισσότερα",
     "more_categories": "Περισσότερες κατηγορίες",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Γλωσσα δεδομένων",
     "options:data_lang:desc": "",

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

lang/es.json

@@ -21,6 +21,7 @@
     "more": "más",
     "more_categories": "Más categorías",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Idioma de datos",
     "options:data_lang:desc": "",

lang/et.json

@@ -21,6 +21,7 @@
     "more": "lisaks",
     "more_categories": "Rohkem kategooriaid",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Andmete keel",
     "options:data_lang:desc": "",

lang/fr.json

@@ -21,6 +21,7 @@
     "more": "plus",
     "more_categories": "Plus de catégories",
     "more_categories_gitea": "Créez et améliorez vous-mêmes les catégories !",
+    "more_results": "",
     "open": "ouvrir",
     "options:data_lang": "Langue des données",
     "options:data_lang:desc": "Beaucoup d'éléments de la carte ont leur nom (et d'autres tags) traduits en différentes langues (exemple avec 'name:en', 'name:de'). Spécifiez quelle langue devrait être utilisée pour l'affichage, ou 'Langue locale' pour que la valeur non traduite (ex 'name') soit toujours utilisée.",

lang/hu.json

@@ -21,6 +21,7 @@
     "more": "Több",
     "more_categories": "További kategóriák",
     "more_categories_gitea": "Hozzon létre új kategóriákat, vagy javítson a meglévőkön!",
+    "more_results": "",
     "open": "Megnyitva",
     "options:data_lang": "Adatok nyelve",
     "options:data_lang:desc": "Számos térképobjektum neve (és olykor néhány más tulajdonsága is) le van fordítva különböző nyelvekre (pl. „name:en”, „name:hu” kezdetű címkékkel). Itt megadhatja, hogy ezek a feliratok egy adott nyelven jelenjenek meg, vagy a térségben használatos, alapértelmezett helyi nyelven („name” kezdetű címkék).",

lang/it.json

@@ -21,6 +21,7 @@
     "more": "altri",
     "more_categories": "Altre categorie",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Lingua dei dati",
     "options:data_lang:desc": "",

lang/ja.json

@@ -21,6 +21,7 @@
     "more": "もっと",
     "more_categories": "カテゴリを一覧から追加",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "データ表示",
     "options:data_lang:desc": "",

lang/nl.json

@@ -21,6 +21,7 @@
     "more": "meer",
     "more_categories": "Meer categorieën",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Taal voor data",
     "options:data_lang:desc": "",

lang/pl.json

@@ -21,6 +21,7 @@
     "more": "więcej",
     "more_categories": "Więcej kategorii",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Język danych",
     "options:data_lang:desc": "",

lang/pt-br.json

@@ -24,6 +24,7 @@
     "more": "mais",
     "more_categories": "Mais categorias",
     "more_categories_gitea": "Criar & melhorar categorias você mesmo!",
+    "more_results": "",
     "open": "abrir",
     "options:data_lang": "Língua dos dados",
     "options:data_lang:desc": "Muitos elementos do mapa possuem seus nomes (e outras etiquetas) traduzidas para línguas diferentes (p.ex. com 'name:en', 'name:de'). Especificar qual língua deve ser usada para exibição, ou 'Língua local' de forma que sempre os valores não tranduzidos (p.ex. 'name') sejam usados.",

lang/pt.json

@@ -24,6 +24,7 @@
     "more": "mais",
     "more_categories": "Mais categorias",
     "more_categories_gitea": "Criar & melhorar categorias você mesmo!",
+    "more_results": "",
     "open": "abrir",
     "options:data_lang": "Língua dos dados",
     "options:data_lang:desc": "Muitos elementos do mapa possuem seus nomes (e outras etiquetas) traduzidas para línguas diferentes (p.ex. com 'name:en', 'name:de'). Especificar qual língua deve ser usada para exibição, ou 'Língua local' de forma que sempre os valores não tranduzidos (p.ex. 'name') sejam usados.",

lang/ro.json

@@ -21,6 +21,7 @@
     "more": "Mai mult",
     "more_categories": "Mai multe categorii",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Limba date",
     "options:data_lang:desc": "",

lang/ru.json

@@ -21,6 +21,7 @@
     "more": "Ещё",
     "more_categories": "Больше категорий",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Язык информации на карте",
     "options:data_lang:desc": "",

lang/sr.json

@@ -21,6 +21,7 @@
     "more": "још",
     "more_categories": "Више категорија",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Језик подетака",
     "options:data_lang:desc": "",

lang/template.json

@@ -21,6 +21,7 @@
     "more": "",
     "more_categories": "",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "",
     "options:data_lang:desc": "",

lang/uk.json

@@ -21,6 +21,7 @@
     "more": "Ще",
     "more_categories": "Більше категорій",
     "more_categories_gitea": "",
+    "more_results": "",
     "open": "",
     "options:data_lang": "Мова мапи",
     "options:data_lang:desc": "",

package.json

@@ -16,6 +16,7 @@
     "babel-core": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "color-interpolate": "^1.0.2",
+    "event-emitter": "^0.3.5",
     "file-saver": "^2.0.0",
     "i18next-client": "^1.11.4",
     "ip-location": "^1.0.1",

src/CategoryBase.js

@@ -2,6 +2,7 @@
 /* eslint camelcase: 0 */
 var OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
 var tabs = require('modulekit-tabs')
+const ee = require('event-emitter')
 
 function CategoryBase (options, data) {
   if (typeof options === 'string') {
@@ -133,6 +134,7 @@ CategoryBase.prototype.open = function () {
   this.isOpen = true
 
   call_hooks('categoryOpen', this)
+  this.emit('open')
 }
 
 CategoryBase.prototype.close = function () {
@@ -145,6 +147,7 @@ CategoryBase.prototype.close = function () {
   this.isOpen = false
 
   call_hooks('categoryClose', this)
+  this.emit('close')
 }
 
 CategoryBase.prototype.toggle = function () {
@@ -208,4 +211,6 @@ CategoryBase.prototype.allMapFeatures = function (callback) {
   callback(null, [])
 }
 
+ee(CategoryBase.prototype)
+
 module.exports = CategoryBase

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')) }}",
@@ -99,7 +101,12 @@ function CategoryOverpass (options, data) {
     if (document.getElementById('content').className === 'details open') {
       showDetails(ob, this)
     }
+
+    this.emit('update', object, ob)
   }.bind(this))
+  this.layer.on('add', (ob, data) => this.emit('add', ob, data))
+  this.layer.on('remove', (ob, data) => this.emit('remove', ob, data))
+  this.layer.on('zoomChange', (ob, data) => this.emit('remove', ob, data))
 
   p = document.createElement('div')
   p.className = 'loadingIndicator'
@@ -293,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>'
@@ -302,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 => {
@@ -310,6 +321,8 @@ CategoryOverpass.prototype.open = function () {
     })
   }
 
+  this.listsDom.forEach(dom => dom.classList.add('open'))
+
   this.isOpen = true
 
   state.update()

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,36 @@
+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('remove', () => {
+    if (dom.scrollHeight <= dom.offsetHeight && dom.classList.contains('collapsed')) {
+      p.classList.remove('active')
+    }
+  })
+  category.on('open', () => {
+    p.classList.remove('active')
+    dom.classList.add('collapsed')
+  })
+}
+
+module.exports = showMore