Copy words to clipboard on click

index.html

@@ -73,6 +73,9 @@
                 flex-direction: column;
                 align-items: stretch;
             }
+            .copyonclick {
+                cursor: pointer;
+            }
             .clicktext {
                 display: none;
             }
@@ -165,6 +168,21 @@
                 ];
                 var bgimg = bgs[Math.floor(Math.random() * bgs.length)];
                 $("body").css("background-image", "url(./img/bg/" + bgimg + ")");
+
+                $("body").on("click", ".copyonclick", function () {
+                    var copyitem = $(this);
+                    var copytext = copyitem.text();
+                    if (copytext == "Copied to clipboard!") {
+                        // prevent copying copied text if double-clicked
+                        return;
+                    }
+                    navigator.clipboard.writeText(copytext).then(() => {
+                        copyitem.text("Copied to clipboard!");
+                        setTimeout(function () {
+                            copyitem.text(copytext);
+                        }, 1000);
+                    });
+                });
             };
 
             function dolookup(words) {
@@ -173,11 +191,11 @@
                     var coords = FixPhrase.decode(words);
 
                     location.hash = "#map";
-                        new mapboxgl.Popup()
+                    new mapboxgl.Popup()
-                                .setLngLat({lat: coords[0], lng: coords[1]})
+                            .setLngLat({lat: coords[0], lng: coords[1]})
-                                .setHTML("<b>" + words + "</b><br>" + coords[0] + ", " + coords[1])
+                            .setHTML("<b>" + words + "</b><br>" + coords[0] + ", " + coords[1])
-                                .addTo(map);
+                            .addTo(map);
-                        map.animateMapIn(coords[0], coords[1], 18);
+                    map.animateMapIn(coords[0], coords[1], 18);
                 } catch (e) {
                     alert(e);
                 }

js/fixphrase.js

@@ -53,15 +53,12 @@ var FixPhrase = {
             (Number(lon.substring(4, 7)) + 6610),
         ];
 
-        console.log(groups);
-
         return this.wordlist[groups[0]] + " " + this.wordlist[groups[1]] + " " + this.wordlist[groups[2]] + " " + this.wordlist[groups[3]];
     },
     decode: function (words) {
         var indexes = [-1, -1, -1, -1];
         words = words.toLowerCase();
         words = words.split(" ");
-        console.log(words);
 
         if (words.length < 2) {
             throw "Not enough words!";

js/map_maplibre.js

@@ -36,7 +36,7 @@ function maplibreMap() {
             var words = FixPhrase.encode(coordinates.lat, coordinates.lng);
             var popup = new mapboxgl.Popup();
             popup.setLngLat(e.lngLat);
-            popup.setHTML("<b class='copyonclick'>" + words + "</b><br>" + (Math.round(coordinates.lat * 10000) / 10000) + ", " + (Math.round(coordinates.lng * 10000) / 10000));
+            popup.setHTML("<b><span class='copyonclick'>" + words + "</span></b><br>" + (Math.round(coordinates.lat * 10000) / 10000) + ", " + (Math.round(coordinates.lng * 10000) / 10000));
             popup.addTo(map);
             map.flyTo({
                 center: e.lngLat,