From 63029d41770f79ca7adb7497f58d0b88cdb0a75b Mon Sep 17 00:00:00 2001
From: thelastWallE <12502210+thelastWallE@users.noreply.github.com>
Date: Fri, 31 Dec 2021 01:34:07 +0100
Subject: [PATCH] :lipstick: add copy to clipboard icon

- add copy to clipboard button for macro example
---
 octoprint_klipper/static/css/klipper.css      | 36 +++++++++++++++++++
 octoprint_klipper/static/js/klipper.js        | 28 +++++++++++++++
 .../templates/klipper_settings.jinja2         |  5 ++-
 3 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/octoprint_klipper/static/css/klipper.css b/octoprint_klipper/static/css/klipper.css
index c260687..d13bb6d 100644
--- a/octoprint_klipper/static/css/klipper.css
+++ b/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;
 }
diff --git a/octoprint_klipper/static/js/klipper.js b/octoprint_klipper/static/js/klipper.js
index de85840..a320bd6 100644
--- a/octoprint_klipper/static/js/klipper.js
+++ b/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));
     };
diff --git a/octoprint_klipper/templates/klipper_settings.jinja2 b/octoprint_klipper/templates/klipper_settings.jinja2
index 7ca0136..c8eef73 100644
--- a/octoprint_klipper/templates/klipper_settings.jinja2
+++ b/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>