💄 add copy to clipboard icon

- add copy to clipboard button for macro example

octoprint_klipper/static/css/klipper.css

@@ -140,6 +140,42 @@ ul#klipper-settings {
   resize: none;
 }
 
+.klipper-copyicon {
+  position: absolute;
+    top: 2.3em;
+    right: 2.5em;
+  margin-top: 4px;
+  margin-left: 4px;
+  width: 11px;
+  height: 13px;
+  cursor: pointer;
+}
+
+.klipper-animate {
+  animation-name: klipper-pulse;
+  animation-duration: 0.2s;
+  animation-direction: alternate;
+  animation-iteration-count: 2;
+  animation-timing-function: linear;
+}
+
+@keyframes klipper-pulse {
+	0% {
+		transform: scale(1);
+    color:rgba(221, 255, 220, 1)
+	}
+
+	75% {
+		transform: scale(1.1);
+    color:rgba(117, 255, 112, 1)
+	}
+
+	100% {
+		transform: scale(1.7);
+    color:rgba(9, 255, 0, 1)
+	}
+}
+
 .gap {
   justify-content: space-evenly;
 }

octoprint_klipper/static/js/klipper.js

@@ -361,6 +361,34 @@ $(function () {
       }
     };
 
+    // trigger tooltip a first time to "enable"
+    $("#klipper-copyToClipboard").tooltip('hide');
+
+    $("#klipper-copyToClipboard").click(function(event) {
+      const ele = $(this);
+      const Text = $(this).prev();
+      const icon = document.getElementById("klipper-copyToClipboard");
+
+      /* Copy the text inside the text field */
+      navigator.clipboard.writeText(Text[0].value).then(function () {
+        ele.attr('data-original-title', gettext("Copied"));
+        ele.tooltip('show');
+        icon.classList.add("klipper-animate");
+
+        self.sleep(300).then(function () {
+          icon.classList.remove("klipper-animate");
+          $("#klipper-copyToClipboard").attr('data-original-title', gettext("Copy to Clipboard"));
+        });
+      }, function (err) {
+        $("#klipper-copyToClipboard").attr('data-original-title', gettext("Error:") + err);
+        $("#klipper-copyToClipboard").tooltip('show');
+
+        self.sleep(300).then(function () {
+          $("#copyToClipboard").attr('data-original-title', gettext("Copy to Clipboard"));
+        });
+      });
+    });
+
     self.sleep = function (ms) {
       return new Promise(resolve => setTimeout(resolve, ms));
     };

octoprint_klipper/templates/klipper_settings.jinja2

@@ -172,7 +172,10 @@
         <div class="controls" style="margin-left: 82px;">
           <div class="row-fluid">
             <div class="span12" style="margin-top:2px;">
-              <textarea rows="2" class="block klipper-noresize">PID_CALIBRATE HEATER={label:Heater, default:extruder, options:extruder|extruder1} TARGET={label:Target Temperature, unit:°C, default:190} WRITE_FILE={label:Write to File, default:0, options:0|1}</textarea>
+              <div style="position: relative;">
+                <textarea readonly style='cursor: text; mix-blend-mode: difference; font-family: "Lucida Console", "Courier New", monospace;' rows="2" class="block klipper-noresize">PID_CALIBRATE HEATER={label:Heater, default:extruder, options:extruder|extruder1} TARGET={label:Target Temperature, unit:°C, default:190} WRITE_FILE={label:Write to File, default:0, options:0|1}</textarea>
+                <i id="klipper-copyToClipboard" class="far fa-clone klipper-copyicon" data-original-title="{{ _('Copy to Clipboard') }}"></i>
+              </div>
             </div>
           </div>
         </div>