refactor: clipboard checkmarks option (#571)

Author: alexbarnsley

resources/assets/js/clipboard.js

@@ -1,13 +1,17 @@
-window.clipboard = () => {
+window.clipboard = (withCheckmarks) => {
     return {
         copying: false,
         notSupported: false,
+        showCheckmarks: false,
 
         copy(value) {
             this.copying = true;
 
-            const clipboard = window.navigator.clipboard;
+            if (withCheckmarks) {
+                this.showCheckmarks = true;
+            }
 
+            const clipboard = window.navigator.clipboard;
             if (clipboard && window.isSecureContext) {
                 clipboard.writeText(value).then(
                     () => (this.copying = false),
@@ -29,6 +33,12 @@ window.clipboard = () => {
 
             // fallback to execCommand for older browsers and non-https
             this.copyUsingExec(value);
+
+            if (withCheckmarks) {
+                setTimeout(() => {
+                    this.showCheckmarks = false;
+                }, 5000);
+            }
         },
 
         copyUsingExec(value) {

resources/views/clipboard.blade.php

@@ -1,27 +1,63 @@
 @props ([
     'value',
-    'class'          => 'h-10 w-12',
-    'copyInput'      => false,
-    'noStyling'      => false,
-    'tooltipContent' => trans('tooltips.copied'),
-    'wrapperClass'   => '',
+    'class'           => 'h-10 w-12',
+    'copyInput'       => false,
+    'noStyling'       => false,
+    'tooltipContent'  => trans('tooltips.copied'),
+    'wrapperClass'    => '',
+    'withCheckmarks'  => false,
+    'checkmarksClass' => null,
 ])
 
 <div
-    x-data="clipboard()"
+    x-data="clipboard({{ $withCheckmarks ? 'true' : 'false' }})"
     x-init="initClipboard()"
-    class="{{ $wrapperClass }}"
+    @class($wrapperClass)
 >
     <button
         type="button"
-        class="clipboard @unless($noStyling) button-icon @endif {{ $class }}"
+        @class([
+            'clipboard relative',
+            'button-icon' => ! $noStyling,
+            $class,
+        ])
         tooltip-content="{{ $tooltipContent }}"
         @if($copyInput)
             x-on:click="copyFromInput('{{ $value }}')"
         @else
             x-on:click="copy('{{ $value }}')"
         @endif
     >
-        <x-ark-icon name="copy" size="sm" />
+        @unless ($withCheckmarks)
+            <x-ark-icon
+                name="copy"
+                size="sm"
+            />
+        @else
+            <div
+                :class="{ 'opacity-0': showCheckmarks }"
+                class="transition-default"
+            >
+                <x-ark-icon
+                    name="copy"
+                    size="sm"
+                />
+            </div>
+
+            <div
+                x-show="showCheckmarks"
+                @class([
+                    'absolute m-auto',
+                    $checkmarksClass,
+                ])
+                x-cloak
+                x-transition
+            >
+                <x-ark-icon
+                    name="double-check-mark"
+                    size="sm"
+                />
+            </div>
+        @endif
     </button>
 </div>