Fix copy pay button code (#3175)

BTCPayServer/Views/Stores/PayButton.cshtml

@@ -294,10 +294,9 @@
     <div class="row" v-show="!errors.any()">
         <div class="col-lg-12">
             <pre><code id="mainCode" class="html"></code></pre>
-            <button class="btn btn-primary" id="copyCode">
+            <button class="btn btn-primary" data-clipboard-target="#mainCode">
                 <i class="fa fa-copy"></i> Copy Code
             </button>
-            <span class="copyLabelPopup" style="display:none;">Copied</span>
         </div>
     </div>
     <div class="row" v-show="errors.any()">
@@ -308,7 +307,7 @@
 </div>
 
 <script id="template-paybutton-styles" type="text/template">
-    <style type="text/css">
+    <style>
         .btcpay-form {
             display: inline-flex;
             align-items: center;
@@ -385,7 +384,7 @@
 </script>
 
 <script id="template-slider-styles" type="text/template">
-    <style type="text/css">
+    <style>
         input[type=range].btcpay-input-range {
             -webkit-appearance:none;
             width:100%;

BTCPayServer/wwwroot/js/copy-to-clipboard.js

@@ -1,10 +1,9 @@
-window.copyToClipboard = function (e, text) {
+window.copyToClipboard = function (e, data) {
     if (navigator.clipboard) {
         e.preventDefault();
-        var item = e.currentTarget;
-        var data = text || item.getAttribute('data-clipboard');
-        var confirm = item.querySelector('[data-clipboard-confirm]') || item;
-        var message = confirm.getAttribute('data-clipboard-confirm') || 'Copied ✔';
+        const item = e.target;
+        const confirm = item.querySelector('[data-clipboard-confirm]') || item;
+        const message = confirm.getAttribute('data-clipboard-confirm') || 'Copied ✔';
         if (!confirm.dataset.clipboardInitialText) {
             confirm.dataset.clipboardInitialText = confirm.innerText;
             confirm.style.minWidth = confirm.getBoundingClientRect().width + 'px';
@@ -22,7 +21,14 @@ window.copyUrlToClipboard = function (e) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    document.querySelectorAll("[data-clipboard]").forEach(item => {
-        item.addEventListener("click", window.copyToClipboard)
+    delegate('click', '[data-clipboard]', e => {
+        const data = e.target.getAttribute('data-clipboard')
+        window.copyToClipboard(e, data)
+    })
+    delegate('click', '[data-clipboard-target]', e => {
+        const selector = e.target.getAttribute('data-clipboard-target')
+        const target = document.querySelector(selector)
+        const data = target.innerText
+        window.copyToClipboard(e, data)
     })
 })

BTCPayServer/wwwroot/main/utils.js

@@ -1,10 +1,11 @@
 function delegate(eventType, selector, handler, root) {
     (root || document).addEventListener(eventType, function(event) {
-        const target = event.target.closest(selector);
+        const target = event.target.closest(selector)
         if (target) {
+            event.target = target
             if (handler.call(this, event) === false) {
-                event.preventDefault();
+                event.preventDefault()
             }
         }
-    });
+    })
 }

BTCPayServer/wwwroot/paybutton/paybutton.js

@@ -1,13 +1,5 @@
 $(function () {
     inputChanges();
-
-    // Clipboard Copy
-    new Clipboard('#copyCode', {
-        text: function (trigger) {
-            $(".copyLabelPopup").show().delay(1000).fadeOut(500);
-            return inputChanges();
-        }
-    });
 });
 
 function esc(input) {