CustomCategory: create new, edit loaded

lang/en.json

@@ -8,6 +8,8 @@
     "category-info-tooltip": "Info & Map key",
     "closed": "closed",
     "default": "default",
+    "apply": "Apply",
+    "customCategory:create": "Create custom category",
     "edit": "edit",
     "editor:id": "iD (in-browser editor)",
     "editor:remote": "Remote Control (JOSM or Merkaator)",

package-lock.json

@@ -4819,7 +4819,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
       "requires": {
         "argparse": "^2.0.1"
       },
@@ -4827,8 +4826,7 @@
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-          "dev": true
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
         }
       }
     },
@@ -7737,6 +7735,11 @@
         "is-typed-array": "^1.1.6"
       }
     },
+    "window-modal": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/window-modal/-/window-modal-1.0.5.tgz",
+      "integrity": "sha512-DbpgUeFeYLUoq/ZLCR2IESFxcf5koyKdtRgncumPCu9l/iu7lzGLOJon/XJZ/zRA1XEZv5Ga/rtOpldqF4bEjg=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -25,6 +25,7 @@
     "formatcoords": "^1.1.3",
     "i18next-client": "^1.11.4",
     "ip-location": "^1.0.1",
+    "js-yaml": "^4.1.0",
     "json-multiline-strings": "^0.1.0",
     "leaflet": "^1.7.1",
     "leaflet-geosearch": "^3.6.1",
@@ -47,7 +48,8 @@
     "query-string": "^6.13.8",
     "sheet-router": "^4.2.3",
     "sprintf-js": "^1.1.2",
-    "weight-sort": "^1.3.1"
+    "weight-sort": "^1.3.1",
+    "window-modal": "^1.0.5"
   },
   "scripts": {
     "test": "mocha --bail",

src/addCategories.js

@@ -5,6 +5,7 @@ const tabs = require('modulekit-tabs')
 const weightSort = require('weight-sort')
 
 const OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
+const customCategory = require('./customCategory')
 
 let tab
 
@@ -37,6 +38,8 @@ function addCategoriesShow (repo, options={}) {
 
     var list = {}
 
+    customCategory(content)
+
     if (repo) {
       var backLink = document.createElement('a')
       backLink.className = 'back'

src/customCategory.js

@@ -0,0 +1,103 @@
+const ModalWindow = require('window-modal')
+const tabs = require('modulekit-tabs')
+const yaml = require('js-yaml')
+const md5 = require('md5')
+
+const OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
+
+class CustomCategory {
+  constructor () {
+  }
+
+  edit () {
+    if (this.modal) {
+      this.modal.focused = true
+      return
+    }
+
+    this.modal = new ModalWindow({
+      title: 'Custom Category',
+      hideMinimize: true,
+      zIndex: '99999'
+    })
+
+    this.modal.addEventListener('close', () => {
+      this.modal = null
+    })
+
+    this.textarea = document.createElement('textarea')
+    this.modal.content.element.appendChild(this.textarea)
+    if (this.content !== undefined) {
+      this.textarea.value = this.content
+    }
+
+    const input = document.createElement('input')
+    input.type = 'submit'
+    input.value = lang('apply')
+    this.modal.content.element.appendChild(input)
+
+    input.onclick = () => {
+      this.applyContent(this.textarea.value)
+      return true
+    }
+  }
+
+  applyContent (content) {
+    this.content = content
+
+    const id = 'custom:' + md5(content)
+    const data = yaml.load(content)
+
+    if (this.category) {
+      this.category.remove()
+      this.category = null
+    }
+
+    OpenStreetBrowserLoader.getCategoryFromData(id, {}, data, (err, category) => {
+      if (err) {
+        return global.alert(err)
+      }
+
+      this.category = category
+      this.category.setParentDom(document.getElementById('contentListAddCategories'))
+      this.category.setMap(global.map)
+
+      if (this.category.tabEdit) {
+        this.category.tools.remove(this.category.tabEdit)
+      }
+
+      this.category.tabEdit = new tabs.Tab({
+        id: 'edit'
+      })
+      this.category.tools.add(this.category.tabEdit)
+      this.category.tabEdit.header.innerHTML = '<i class="fa fa-pen"></i>'
+      this.category.tabEdit.on('select', () => {
+        this.category.tabEdit.unselect()
+        this.edit()
+      })
+
+      this.category.open()
+    })
+  }
+}
+
+
+function createCustomCategory () {
+  let category
+
+  category = new CustomCategory()
+  category.edit()
+
+  return false
+}
+
+module.exports = function customCategory (content) {
+  let div = document.createElement('div')
+
+  let a = document.createElement('a')
+  a.innerHTML = lang('customCategory:create')
+  a.href = '#'
+  a.onclick = createCustomCategory
+  div.appendChild(a)
+  content.appendChild(div)
+}