diff --git a/src/Browser.js b/src/Browser.js
new file mode 100644
index 00000000..04b52a62
--- /dev/null
+++ b/src/Browser.js
@@ -0,0 +1,49 @@
+const EventEmitter = require('events')
+const queryString = require('query-string')
+
+module.exports = class Browser extends EventEmitter {
+ constructor (id, dom) {
+ super()
+
+ this.id = id
+ this.dom = dom
+ this.history = []
+ }
+
+ buildPage (parameters) {
+ this.clear()
+
+ hooks.call('browser-' + this.id, this, parameters)
+ this.emit('buildPage', parameters)
+ this.parameters = parameters
+ }
+
+ clear () {
+ while (this.dom.lastChild) {
+ this.dom.removeChild(this.dom.lastChild)
+ }
+ }
+
+ catchLinks () {
+ const links = this.dom.getElementsByTagName('a')
+ Array.from(links).forEach(link => {
+ const href = link.getAttribute('href')
+
+ if (href.substr(0, this.id.length + 2) === '#' + this.id + '?') {
+ link.onclick = () => {
+ this.history.push(this.parameters)
+
+ const parameters = queryString.parse(href.substr(this.id.length + 2))
+ this.buildPage(parameters)
+
+ return false
+ }
+ }
+ })
+ }
+
+ close () {
+ this.clear()
+ this.emit('close')
+ }
+}
diff --git a/src/addCategories.js b/src/addCategories.js
index f32c075a..57f05513 100644
--- a/src/addCategories.js
+++ b/src/addCategories.js
@@ -4,22 +4,19 @@ require('./addCategories.css')
const tabs = require('modulekit-tabs')
const weightSort = require('weight-sort')
+const state = require('./state')
const OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
let tab
-function addCategoriesList (options = {}) {
- let content = tab.content
-
- content.innerHTML = '
' + lang('more_categories') + '
' + ' ' + lang('loading')
+function addCategoriesList (content, browser, options = {}) {
+ content.innerHTML = ' ' + lang('loading')
OpenStreetBrowserLoader.getRepositoryList(options, function (err, repoData) {
if (err) {
return global.alert(err)
}
- content.innerHTML = '' + lang('more_categories') + '
'
-
var categoryUrl = null
if (repoData.categoryUrl) {
categoryUrl = OverpassLayer.twig.twig({ data: repoData.categoryUrl, autoescape: true })
@@ -48,6 +45,10 @@ function addCategoriesList (options = {}) {
header.innerHTML = lang('repositories') + ':'
content.appendChild(header)
+ while (content.lastChild) {
+ content.removeChild(content.lastChild)
+ }
+
var ul = document.createElement('ul')
for (var id in list) {
@@ -61,11 +62,7 @@ function addCategoriesList (options = {}) {
var li = document.createElement('li')
let a = document.createElement('a')
- a.href = '#'
- a.onclick = function (id) {
- addCategoriesShow(id)
- return false
- }.bind(this, id)
+ a.href = '#more-categories?id=' + id
li.appendChild(a)
a.appendChild(document.createTextNode('name' in data ? lang(data.name) : id))
@@ -88,11 +85,12 @@ function addCategoriesList (options = {}) {
}
content.appendChild(ul)
+ browser.catchLinks()
})
}
-function addCategoriesShow (repo, options={}) {
- let content = tab.content
+function addCategoriesShow (repo, browser, options={}) {
+ const content = browser.dom
let [ repoId, branchId ] = repo.split(/~/)
@@ -100,7 +98,7 @@ function addCategoriesShow (repo, options={}) {
branchId = 'master'
}
- content.innerHTML = '' + lang('more_categories') + '
' + ' ' + lang('loading')
+ content.innerHTML = ' ' + lang('loading')
OpenStreetBrowserLoader.getRepository(repo, options, function (err, repository) {
if (err) {
@@ -109,7 +107,7 @@ function addCategoriesShow (repo, options={}) {
const repoData = repository.data
- content.innerHTML = '' + lang('more_categories') + '
'
+ content.innerHTML = ''
var categoryUrl = null
if (repoData.categoryUrl) {
@@ -120,15 +118,11 @@ function addCategoriesShow (repo, options={}) {
var backLink = document.createElement('a')
backLink.className = 'back'
- backLink.href = '#'
+ backLink.href = '#more-categories?'
backLink.innerHTML = ' '
backLink.appendChild(document.createTextNode(lang('back')))
-
- backLink.onclick = function () {
- addCategoriesList()
- return false
- }
content.appendChild(backLink)
+ browser.catchLinks()
let h = document.createElement('h2')
h.appendChild(document.createTextNode(repoId))
@@ -146,7 +140,7 @@ function addCategoriesShow (repo, options={}) {
let text = document.createElement('a')
text.innerHTML = lang('repo-use-as-base')
text.href = '#repo=' + repo
- text.onclick = addCategoriesHide
+ text.onclick = () => browser.close()
li.appendChild(text)
li = document.createElement('li')
@@ -154,10 +148,7 @@ function addCategoriesShow (repo, options={}) {
text = document.createElement('a')
text.innerHTML = lang('reload')
- text.href = '#'
- text.onclick = () => {
- addCategoriesShow(repo, { force: true })
- }
+ text.href = '#more-categories?id=' + repo + '&force=true'
li.appendChild(text)
if ('branches' in repoData) {
@@ -210,9 +201,7 @@ function addCategoriesShow (repo, options={}) {
let a = document.createElement('a')
a.href = '#categories=' + (repo === 'default' ? '' : repo + '/') + id
- a.onclick = function () {
- addCategoriesHide()
- }
+ a.onclick = () => browser.close()
li.appendChild(a)
a.appendChild(document.createTextNode('name' in data ? lang(data.name) : id))
@@ -239,28 +228,29 @@ function addCategoriesShow (repo, options={}) {
}
content.appendChild(ul)
+ browser.catchLinks()
})
}
-function addCategoriesHide () {
- tab.unselect()
-}
+hooks.register('browser-more-categories', (browser, parameters) => {
+ const content = browser.dom
-register_hook('init', function (callback) {
- tab = new tabs.Tab({
- id: 'addCategories'
- })
- global.tabs.add(tab)
-
- tab.header.innerHTML = ''
- tab.header.title = lang('more_categories')
+ if (!Object.keys(parameters).length) {
+ let header = document.createElement('h4')
+ header.innerHTML = lang('repositories')
+ content.appendChild(header)
- let initialized = false
+ let div = document.createElement('div')
+ content.appendChild(div)
+ addCategoriesList(div, browser, parameters)
- tab.on('select', () => {
- if (!initialized) {
- addCategoriesList()
- initialized = true
- }
- })
+ browser.catchLinks()
+ }
+ else if (parameters.id) {
+ addCategoriesShow(parameters.id, browser, parameters)
+ }
+ else if (parameters.repo || parameters.categories) {
+ state.apply(parameters)
+ browser.close()
+ }
})
diff --git a/src/customCategory.js b/src/customCategory.js
index ca65ff6e..fc5e1afd 100644
--- a/src/customCategory.js
+++ b/src/customCategory.js
@@ -153,22 +153,29 @@ function editCustomCategory (id, category) {
}
}
-hooks.register('more-categories-index', (content) => {
- let header = document.createElement('h4')
- header.innerHTML = lang('customCategory:header')
- content.appendChild(header)
-
- let ul = document.createElement('ul')
- let li = document.createElement('li')
-
- let a = document.createElement('a')
- a.innerHTML = lang('customCategory:create')
- a.href = '#'
- a.onclick = createCustomCategory
- li.appendChild(a)
- ul.appendChild(li)
-
- content.appendChild(ul)
+hooks.register('browser-more-categories', (browser, parameters) => {
+ const content = browser.dom
+
+ if (!Object.keys(parameters).length) {
+ let header = document.createElement('h4')
+ header.innerHTML = lang('customCategory:header')
+ content.appendChild(header)
+
+ let ul = document.createElement('ul')
+ let li = document.createElement('li')
+
+ let a = document.createElement('a')
+ a.innerHTML = lang('customCategory:create')
+ a.href = '#'
+ a.onclick = () => {
+ createCustomCategory()
+ browser.close()
+ }
+ li.appendChild(a)
+ ul.appendChild(li)
+
+ content.appendChild(ul)
+ }
})
hooks.register('init', () => {
diff --git a/src/index.js b/src/index.js
index 9740b29b..64e603c9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -34,6 +34,7 @@ require('./categories')
require('./wikipedia')
require('./image')
require('./moreCategories')
+require('./addCategories')
require('./permalink')
//require('./leaflet-geo-search')
require('./nominatim-search')
diff --git a/src/moreCategories.js b/src/moreCategories.js
index b0e01770..208801b5 100644
--- a/src/moreCategories.js
+++ b/src/moreCategories.js
@@ -1,5 +1,7 @@
const tabs = require('modulekit-tabs')
+const Browser = require('./Browser')
+
let tab
function moreCategoriesIndex () {
@@ -10,7 +12,10 @@ function moreCategoriesIndex () {
const dom = document.createElement('div')
content.appendChild(dom)
- hooks.call('more-categories-index', dom)
+ const browser = new Browser('more-categories', dom)
+ browser.buildPage({})
+
+ browser.on('close', () => tab.unselect())
}
register_hook('init', function (callback) {
@@ -22,13 +27,9 @@ register_hook('init', function (callback) {
tab.header.innerHTML = ''
tab.header.title = lang('more_categories')
- let initialized = false
-
tab.on('select', () => {
- if (!initialized) {
- moreCategoriesIndex()
- initialized = true
- }
+ tab.content.innerHTML = ''
+ moreCategoriesIndex()
})
})