CustomCategory: add a share button which copies the link to the clipboard

lang/en.json

@@ -10,6 +10,7 @@
     "default": "default",
     "apply": "Apply",
     "customCategory:create": "Create custom category",
+    "copied-clipboard": "Copied to clipboard",
     "edit": "edit",
     "editor:id": "iD (in-browser editor)",
     "editor:remote": "Remote Control (JOSM or Merkaator)",

src/customCategory.js

@@ -178,5 +178,26 @@ register_hook('category-overpass-init', (category) => {
       category.tabEdit.unselect()
       editCustomCategory(id, category)
     })
+
+    if (!category.tabShare) {
+      category.tabShare = new tabs.Tab({
+        id: 'share',
+        weight: 10
+      })
+      category.tools.add(category.tabShare)
+      category.tabShare.header.innerHTML = '<i class="fa fa-share-alt"></i>'
+      category.tabShare.header.className = 'share-button'
+      category.tabShare.on('select', () => {
+        category.tabShare.unselect()
+        const url = location.origin + location.pathname + '#categories=custom/' + id
+        navigator.clipboard.writeText(url)
+
+        const notify = document.createElement('div')
+        notify.className = 'notify'
+        notify.innerHTML = lang('copied-clipboard')
+        category.tabShare.header.appendChild(notify)
+        global.setTimeout(() => category.tabShare.header.removeChild(notify), 2000)
+      })
+    }
   }
 })

style.css

@@ -665,3 +665,17 @@ ul.overpass-layer-list > li > a > .content > .details {
   flex-direction: column;
   align-content: stretch;
 }
+
+/* Copy to clipboard */
+.share-button {
+  position: relative;
+}
+.share-button > .notify {
+  position: absolute;
+  background: white;
+  border: 1px solid black;
+  border-radius: 0.25em;
+  width: 8em;
+  text-align: center;
+  z-index: 1;
+}