fix clipboard (#938)

realodix · Feb 29, 2024 · 71051be · 71051be
1 parent de8662f
commit 71051be
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/resources/js/frontend.js b/resources/js/frontend.js
@@ -6,10 +6,25 @@ import './bootstrap';
  *
  * https://github.com/zenorocha/clipboard.js
  */
-var ClipboardJS = require('clipboard');
+const clipboardJs = require('clipboard');
 
-new ClipboardJS('.btn-clipboard').on('success', function() {
-    $('.btn-clipboard')
-        .attr('data-original-title','Copied!').tooltip("_fixTitle").tooltip("show")
-        .attr("title", "Copy to clipboard").tooltip("_fixTitle");
+const target = document.getElementById('clipboard_shortlink');
+const clipboard = new clipboardJs(target);
+
+// Success action handler
+clipboard.on('success', function (e) {
+    const currentLabel = target.innerHTML;
+
+    // Exit label update when already in progress
+    if (target.innerHTML === 'Copied!') {
+        return;
+    }
+
+    // Update button label
+    target.innerHTML = 'Copied!';
+
+    // Revert button label after 3 seconds
+    setTimeout(function () {
+        target.innerHTML = currentLabel;
+    }, 3000)
 });
diff --git a/resources/views/frontend/short.blade.php b/resources/views/frontend/short.blade.php
@@ -32,11 +32,11 @@
                 </div>
             @endif
             <div class="w-full md:w-3/4 mt-8 sm:mt-0">
-                <button class="btn-clipboard btn btn-secondary btn-sm"
+                <button id="clipboard_shortlink" class="btn-clipboard btn btn-secondary btn-sm"
                     title="{{__('Copy the shortened URL to clipboard')}}"
                     data-clipboard-text="{{$url->short_url}}"
                 >
-                    @svg('icon-clone') {{__('Copy')}}
+                    @svg('icon-clone', 'mr-1') {{__('Copy')}}
                 </button>
 
                 @auth