From 5520e191641fe723b02e52a61a33e5c8c9fa944c Mon Sep 17 00:00:00 2001
From: Amphiluke <amphiluke@gmail.com>
Date: Mon, 4 Mar 2024 21:24:43 +0700
Subject: [PATCH] Prevent repeated clicking the Copy button

---
 package-lock.json                   |  4 ++--
 package.json                        |  2 +-
 src/components/PanelCollections.vue | 17 ++++++++++++-----
 src/components/PanelSharing.vue     |  8 ++++++--
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5caa691..61e6dc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lindsvg-pwa",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lindsvg-pwa",
-      "version": "2.4.2",
+      "version": "2.4.3",
       "dependencies": {
         "@vueuse/core": "^10.9.0",
         "lindsvg": "^1.5.0",
diff --git a/package.json b/package.json
index 9003dd6..fa8631e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.4.2",
+  "version": "2.4.3",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",
diff --git a/src/components/PanelCollections.vue b/src/components/PanelCollections.vue
index 9d9bdb0..e2e3170 100644
--- a/src/components/PanelCollections.vue
+++ b/src/components/PanelCollections.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, computed} from "vue";
+import {ref, computed, useCssModule} from "vue";
 import {refDebounced} from "@vueuse/core";
 import {useCollectionsStore, isUserDefined, USER_DEFINED_COLLECTION_ID} from "../stores/collections.mjs";
 import {useLSystemStore} from "../stores/lSystem.mjs";
@@ -52,16 +52,15 @@ function deleteLSystem(lid) {
   collectionsStore.deleteLSystem(lid);
 }
 
+let copiedClassName = useCssModule().copied;
 async function copyPermalink(target, cid, lid) {
   let url = new URL(location.origin + location.pathname);
   url.searchParams.set("cid", cid);
   url.searchParams.set("lid", lid);
   await navigator.clipboard.writeText(url.toString());
-  target.classList.remove(interfaceStyles.iconButtonLink);
-  target.classList.add(interfaceStyles.iconButtonCheck);
+  target.classList.add(copiedClassName);
   setTimeout(() => {
-    target.classList.remove(interfaceStyles.iconButtonCheck);
-    target.classList.add(interfaceStyles.iconButtonLink);
+    target.classList.remove(copiedClassName);
   }, 2000);
 }
 </script>
@@ -235,4 +234,12 @@ async function copyPermalink(target, cid, lid) {
   .collectionItems li:not(:hover, .active) :where(.permalinkButton, .exploreButton, .deleteLSystemButton):not(:focus) {
     opacity: 0.01;
   }
+
+  .copied {
+    pointer-events: none;
+
+    &::before {
+      --mask-pos: -200px 0;
+    }
+  }
 </style>
diff --git a/src/components/PanelSharing.vue b/src/components/PanelSharing.vue
index 3539d7f..4e9b96f 100644
--- a/src/components/PanelSharing.vue
+++ b/src/components/PanelSharing.vue
@@ -178,8 +178,12 @@ async function copyLSVG({target}) {
       width: 100%;
     }
 
-    &.copied::before {
-      --mask-pos: -204px -4px;
+    &.copied {
+      pointer-events: none;
+
+      &::before {
+        --mask-pos: -204px -4px;
+      }
     }
   }