CustomCategory: add a download action

lang/en.json

@@ -9,6 +9,7 @@
     "close": "Close",
     "closed": "closed",
     "default": "default",
+    "download": "Download",
     "apply": "Apply",
     "tip-tutorial": "Check out the [Tutorial]",
     "customCategory:header": "Custom categories",

src/customCategory.js

@@ -123,6 +123,17 @@ class CustomCategoryEditor {
     inputClose.onclick = () => this.window.close()
     controls.appendChild(inputClose)
 
+    const icons = document.createElement('div')
+    icons.className = 'actions'
+    controls.appendChild(icons)
+
+    this.inputDownload = document.createElement('a')
+    this.textarea.onchange = () => this.updateDownload()
+    this.updateDownload()
+    this.inputDownload.title = lang('download')
+    this.inputDownload.innerHTML = '<i class="fas fa-download"></i>'
+    icons.appendChild(this.inputDownload)
+
     const tutorial = document.createElement('span')
     tutorial.className = 'tip-tutorial'
     let text = lang('tip-tutorial')
@@ -150,6 +161,7 @@ class CustomCategoryEditor {
 
     if (this.textarea) {
       this.textarea.value = content
+      this.updateDownload()
     }
 
     const id = md5(content)
@@ -171,6 +183,12 @@ class CustomCategoryEditor {
       this.category.open()
     })
   }
+
+  updateDownload () {
+    const file = new Blob([this.textarea.value], { type: 'application/yaml' })
+    this.inputDownload.href = URL.createObjectURL(file)
+    this.inputDownload.download = md5(this.textarea.value) + '.yaml'
+  }
 }
 
 

style.css

@@ -622,6 +622,10 @@ ul.overpass-layer-list > li > a > .content > .details {
 .Window > .content .controls {
   flex-grow: 0;
 }
+.Window > .content .controls > .actions {
+  margin-left: 1em;
+  display: inline;
+}
 
 /* Window */
 .Window {