More Categories: start re-design menu; include customCategory as module from index.js

lang/en.json

@@ -10,6 +10,7 @@
     "default": "default",
     "apply": "Apply",
     "tip-tutorial": "Check out the [Tutorial]",
+    "customCategory:header": "Custom categories",
     "customCategory:create": "Create custom category",
     "copied-clipboard": "Copied to clipboard",
     "edit": "edit",

src/addCategories.js

@@ -5,7 +5,6 @@ const tabs = require('modulekit-tabs')
 const weightSort = require('weight-sort')
 
 const OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
-const customCategory = require('./customCategory')
 
 let tab
 
@@ -28,8 +27,6 @@ function addCategoriesList (options = {}) {
 
     var list = {}
 
-    customCategory(content)
-
     if (typeof repositoriesGitea === 'object' && repositoriesGitea.url) {
       let a = document.createElement('a')
       a.href = repositoriesGitea.url
@@ -121,8 +118,6 @@ function addCategoriesShow (repo, options={}) {
 
     var list = {}
 
-    customCategory(content)
-
     var backLink = document.createElement('a')
     backLink.className = 'back'
     backLink.href = '#'

src/customCategory.js

@@ -153,16 +153,23 @@ function editCustomCategory (id, category) {
   }
 }
 
-module.exports = function customCategory (content) {
-  let div = document.createElement('div')
+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
-  div.appendChild(a)
-  content.appendChild(div)
-}
+  li.appendChild(a)
+  ul.appendChild(li)
+
+  content.appendChild(ul)
+})
 
 hooks.register('init', () => {
   OpenStreetBrowserLoader.registerRepository('custom', new CustomCategoryRepository())

src/index.js

@@ -33,7 +33,7 @@ require('./markers')
 require('./categories')
 require('./wikipedia')
 require('./image')
-require('./addCategories')
+require('./moreCategories')
 require('./permalink')
 //require('./leaflet-geo-search')
 require('./nominatim-search')
@@ -42,6 +42,7 @@ require('./GeoInfo')
 require('./PluginMeasure')
 require('./PluginGeoLocate')
 require('./tagsDisplay-tag2link')
+require('./customCategory')
 const ObjectDisplay = require('./ObjectDisplay')
 let currentObjectDisplay = null
 

src/moreCategories.js

@@ -0,0 +1,34 @@
+const tabs = require('modulekit-tabs')
+
+let tab
+
+function moreCategoriesIndex () {
+  let content = tab.content
+
+  content.innerHTML = '<h3>' + lang('more_categories') + '</h3>'
+
+  const dom = document.createElement('div')
+  content.appendChild(dom)
+
+  hooks.call('more-categories-index', dom)
+}
+
+register_hook('init', function (callback) {
+  tab = new tabs.Tab({
+    id: 'moreCategories'
+  })
+  global.tabs.add(tab)
+
+  tab.header.innerHTML = '<i class="fa fa-plus" aria-hidden="true"></i>'
+  tab.header.title = lang('more_categories')
+
+  let initialized = false
+
+  tab.on('select', () => {
+    if (!initialized) {
+      moreCategoriesIndex()
+      initialized = true
+    }
+  })
+})
+