Add abillity to copy a block-position into clipboard

Author: TBlueF

common/webapp/public/lang/en.conf

@@ -135,6 +135,7 @@
       sun: "Sun"
       block: "Block"
     }
+    clipboard: "click to copy"
   }
   info: {
     title: "Info"

common/webapp/src/js/PopupMarker.js

@@ -70,6 +70,10 @@ export class PopupMarker extends Marker {
         return true;
     }
 
+    static blockClipboardFormat  = (pos, isHires) => isHires ? `${pos.x} ${pos.y} ${pos.z}` : `${pos.x} ${pos.z}`;
+    static chunkClipboardFormat  = (pos, isHires) => isHires ? `${pos.x} ${pos.y} ${pos.z}` : `${pos.x} ${pos.z}`;
+    static regionClipboardFormat = pos => `r.${pos.x}.${pos.z}.mca`
+
     onMapInteraction = evt => {
         let isHires = true;
         let int = evt.detail.hiresHit;
@@ -96,7 +100,9 @@ export class PopupMarker extends Marker {
 
         if (isHires) {
             this.element.innerHTML = `
-                <div class="group">
+                <div class="group" 
+                     data-tooltip="${i18n.t("blockTooltip.clipboard")}"
+                     onclick="navigator.clipboard.writeText('${PopupMarker.blockClipboardFormat(this.position, true)}')" >
                     <div class="label">${i18n.t("blockTooltip.block")}:</div>
                     <div class="content">
                         <div class="entry"><span class="label">x: </span><span class="value">${this.position.x}</span></div>
@@ -107,7 +113,9 @@ export class PopupMarker extends Marker {
             `;
         } else {
             this.element.innerHTML = `
-                <div class="group">
+                <div class="group"
+                     data-tooltip="${i18n.t("blockTooltip.clipboard")}"
+                     onclick="navigator.clipboard.writeText('${PopupMarker.blockClipboardFormat(this.position, false)}')" >
                     <div class="label">${i18n.t("blockTooltip.position")}:</div>
                     <div class="content">
                         <div class="entry"><span class="label">x: </span><span class="value">${this.position.x}</span></div>
@@ -122,18 +130,40 @@ export class PopupMarker extends Marker {
             let regionCoords = new Vector2(this.position.x, this.position.z).divideScalar(512).floor();
             let regionFile = `r.${regionCoords.x}.${regionCoords.y}.mca`;
 
-            this.element.innerHTML += `
-                <hr>
-                <div class="group">
-                    <div class="label">${i18n.t("blockTooltip.chunk")}:</div>
-                    <div class="content">
-                        <div class="entry"><span class="label">x: </span><span class="value">${chunkCoords.x}</span></div>
-                        <div class="entry"><span class="label">y: </span><span class="value">${chunkCoords.y}</span></div>
-                        <div class="entry"><span class="label">z: </span><span class="value">${chunkCoords.z}</span></div>
+            if (isHires) {
+                this.element.innerHTML += `
+                    <hr>
+                    <div class="group"
+                         data-tooltip="${i18n.t("blockTooltip.clipboard")}"
+                         onclick="navigator.clipboard.writeText('${PopupMarker.chunkClipboardFormat(chunkCoords, true)}')" >
+                        <div class="label">${i18n.t("blockTooltip.chunk")}:</div>
+                        <div class="content">
+                            <div class="entry"><span class="label">x: </span><span class="value">${chunkCoords.x}</span></div>
+                            <div class="entry"><span class="label">y: </span><span class="value">${chunkCoords.y}</span></div>
+                            <div class="entry"><span class="label">z: </span><span class="value">${chunkCoords.z}</span></div>
+                        </div>
                     </div>
-                </div>
+                `;
+            } else {
+                this.element.innerHTML += `
+                    <hr>
+                    <div class="group"
+                         data-tooltip="${i18n.t("blockTooltip.clipboard")}"
+                         onclick="navigator.clipboard.writeText('${PopupMarker.chunkClipboardFormat(chunkCoords, false)}')" >
+                        <div class="label">${i18n.t("blockTooltip.chunk")}:</div>
+                        <div class="content">
+                            <div class="entry"><span class="label">x: </span><span class="value">${chunkCoords.x}</span></div>
+                            <div class="entry"><span class="label">z: </span><span class="value">${chunkCoords.z}</span></div>
+                        </div>
+                    </div>
+                `;
+            }
+
+            this.element.innerHTML += `
                 <hr>
-                <div class="group">
+                <div class="group"
+                     data-tooltip="${i18n.t("blockTooltip.clipboard")}"
+                     onclick="navigator.clipboard.writeText('${PopupMarker.regionClipboardFormat(regionCoords)}')" >
                     <div class="label">${i18n.t("blockTooltip.region.region")}:</div>
                     <div class="content">
                         <div class="entry"><span class="label">x: </span><span class="value">${regionCoords.x}</span></div>

common/webapp/src/scss/markers.scss

@@ -89,6 +89,43 @@
     line-height: 1.2em;
 
     .group {
+
+      &[data-tooltip] {
+
+        position: relative;
+
+        pointer-events: auto;
+        user-select: none;
+        cursor: pointer;
+
+        margin: -0.5em;
+        padding: 0.5em;
+
+        &:hover::before {
+          display: block;
+          position: absolute;
+          z-index: 1;
+
+          left: 50%;
+          bottom: calc(100% + 0.5em);
+          transform: translate(-50%, 0);
+
+          content: attr(data-tooltip);
+
+          background: var(--theme-bg);
+          color: var(--theme-fg-light);
+          filter: drop-shadow(1px 1px 3px #0008);
+          font-size: 0.75em;
+          line-height: 1em;
+          padding: .5em;
+        }
+
+        &:active {
+          background-color: var(--theme-bg-light);
+        }
+
+      }
+
       > .label {
         position: relative;
         top: 0;