From cd3f8192f24dc8692ee4273ee422422c12da4bcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Tue, 18 Dec 2018 14:54:50 +0100 Subject: [PATCH 1/5] Categories emit events; re-emit events from OverpassLayer --- package.json | 1 + src/CategoryBase.js | 5 +++++ src/CategoryOverpass.js | 5 +++++ 3 files changed, 11 insertions(+) diff --git a/package.json b/package.json index 692be057..0045bce3 100644 --- a/package.json +++ b/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", diff --git a/src/CategoryBase.js b/src/CategoryBase.js index 261767b2..277c560d 100644 --- a/src/CategoryBase.js +++ b/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 diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index 35e79922..bb5709e5 100644 --- a/src/CategoryOverpass.js +++ b/src/CategoryOverpass.js @@ -99,7 +99,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' From a7efc791b0efb48b707b5ae369a79b54b2887441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Tue, 18 Dec 2018 14:56:13 +0100 Subject: [PATCH 2/5] Categories: show more results --- lang/en.json | 1 + src/CategoryOverpass.js | 6 ++++++ src/showMore.css | 11 +++++++++++ src/showMore.js | 31 +++++++++++++++++++++++++++++++ 4 files changed, 49 insertions(+) create mode 100644 src/showMore.css create mode 100644 src/showMore.js 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 From 7ef27ed54e8356d9364c2436051e9baa34177945 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Wed, 19 Dec 2018 16:32:39 +0100 Subject: [PATCH 3/5] showMore: when list shrinks, remove 'show more' link --- src/showMore.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/showMore.js b/src/showMore.js index 0848e088..33e8404d 100644 --- a/src/showMore.js +++ b/src/showMore.js @@ -22,6 +22,11 @@ function showMore (category, dom) { 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') From 37c50e25a871e6bb4f53d099c07d6839a48afd17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Wed, 19 Dec 2018 20:49:31 +0100 Subject: [PATCH 4/5] CategoryOverpass: categories with multiple lists: auto-open sub-lists --- src/CategoryOverpass.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index fab8a09b..13b03457 100644 --- a/src/CategoryOverpass.js +++ b/src/CategoryOverpass.js @@ -321,6 +321,8 @@ CategoryOverpass.prototype.open = function () { }) } + this.listsDom.forEach(dom => dom.classList.add('open')) + this.isOpen = true state.update() From 301cc4c23157079fc525abbf0425a3d438af766d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Thu, 20 Dec 2018 09:12:49 +0100 Subject: [PATCH 5/5] showMore: allow translations --- lang/ast.json | 1 + lang/ca.json | 1 + lang/cs.json | 1 + lang/da.json | 1 + lang/de.json | 1 + lang/el.json | 1 + lang/es.json | 1 + lang/et.json | 1 + lang/fr.json | 1 + lang/hu.json | 1 + lang/it.json | 1 + lang/ja.json | 1 + lang/nl.json | 1 + lang/pl.json | 1 + lang/pt-br.json | 1 + lang/pt.json | 1 + lang/ro.json | 1 + lang/ru.json | 1 + lang/sr.json | 1 + lang/template.json | 1 + lang/uk.json | 1 + 21 files changed, 21 insertions(+) diff --git a/lang/ast.json b/lang/ast.json index fd8ccbb4..c3d8afc2 100644 --- a/lang/ast.json +++ b/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": "", diff --git a/lang/ca.json b/lang/ca.json index f6c32022..01488248 100644 --- a/lang/ca.json +++ b/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": "", diff --git a/lang/cs.json b/lang/cs.json index 11ef151c..0cb6c568 100644 --- a/lang/cs.json +++ b/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": "", diff --git a/lang/da.json b/lang/da.json index 3b52e135..cac4f989 100644 --- a/lang/da.json +++ b/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": "", diff --git a/lang/de.json b/lang/de.json index 2ce7e3ac..3c8abc8c 100644 --- a/lang/de.json +++ b/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, diff --git a/lang/el.json b/lang/el.json index c3c521b2..48f66dc2 100644 --- a/lang/el.json +++ b/lang/el.json @@ -21,6 +21,7 @@ "more": "περισσότερα", "more_categories": "Περισσότερες κατηγορίες", "more_categories_gitea": "", + "more_results": "", "open": "", "options:data_lang": "Γλωσσα δεδομένων", "options:data_lang:desc": "", diff --git a/lang/es.json b/lang/es.json index e77f4819..6f0deb0c 100644 --- a/lang/es.json +++ b/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": "", diff --git a/lang/et.json b/lang/et.json index 3b11c580..38c58182 100644 --- a/lang/et.json +++ b/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": "", diff --git a/lang/fr.json b/lang/fr.json index 5a966ce6..80f1ee15 100644 --- a/lang/fr.json +++ b/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.", diff --git a/lang/hu.json b/lang/hu.json index 51bde539..6d7b8e41 100644 --- a/lang/hu.json +++ b/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).", diff --git a/lang/it.json b/lang/it.json index d3dfef45..fff9ed02 100644 --- a/lang/it.json +++ b/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": "", diff --git a/lang/ja.json b/lang/ja.json index 18241d5a..4d319726 100644 --- a/lang/ja.json +++ b/lang/ja.json @@ -21,6 +21,7 @@ "more": "もっと", "more_categories": "カテゴリを一覧から追加", "more_categories_gitea": "", + "more_results": "", "open": "", "options:data_lang": "データ表示", "options:data_lang:desc": "", diff --git a/lang/nl.json b/lang/nl.json index 406accf4..96e347e7 100644 --- a/lang/nl.json +++ b/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": "", diff --git a/lang/pl.json b/lang/pl.json index f111410c..3808b570 100644 --- a/lang/pl.json +++ b/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": "", diff --git a/lang/pt-br.json b/lang/pt-br.json index a2564aa5..5cf2a96c 100644 --- a/lang/pt-br.json +++ b/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.", diff --git a/lang/pt.json b/lang/pt.json index 67fb7536..23a0d8be 100644 --- a/lang/pt.json +++ b/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.", diff --git a/lang/ro.json b/lang/ro.json index 22ad5094..b5b4a3b0 100644 --- a/lang/ro.json +++ b/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": "", diff --git a/lang/ru.json b/lang/ru.json index b9bb37aa..332e1f75 100644 --- a/lang/ru.json +++ b/lang/ru.json @@ -21,6 +21,7 @@ "more": "Ещё", "more_categories": "Больше категорий", "more_categories_gitea": "", + "more_results": "", "open": "", "options:data_lang": "Язык информации на карте", "options:data_lang:desc": "", diff --git a/lang/sr.json b/lang/sr.json index 697e39e8..2a89b23e 100644 --- a/lang/sr.json +++ b/lang/sr.json @@ -21,6 +21,7 @@ "more": "још", "more_categories": "Више категорија", "more_categories_gitea": "", + "more_results": "", "open": "", "options:data_lang": "Језик подетака", "options:data_lang:desc": "", diff --git a/lang/template.json b/lang/template.json index 4864f0fd..dbbd6b1c 100644 --- a/lang/template.json +++ b/lang/template.json @@ -21,6 +21,7 @@ "more": "", "more_categories": "", "more_categories_gitea": "", + "more_results": "", "open": "", "options:data_lang": "", "options:data_lang:desc": "", diff --git a/lang/uk.json b/lang/uk.json index c7fd08d4..3648f97c 100644 --- a/lang/uk.json +++ b/lang/uk.json @@ -21,6 +21,7 @@ "more": "Ще", "more_categories": "Більше категорій", "more_categories_gitea": "", + "more_results": "", "open": "", "options:data_lang": "Мова мапи", "options:data_lang:desc": "",