handle concurrent button highlights

jelni · Dec 22, 2023 · 224b0b6 · 224b0b6
1 parent d9a5673
commit 224b0b6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/public/scripts/password-generator.js b/public/scripts/password-generator.js
@@ -8,6 +8,8 @@ const charsets = {
 
 let password = null;
 
+let concurrentButtonActions = 0;
+
 const preferences = {
   form: document.getElementById("password-preferences"),
   autoGenerate: document.getElementById("auto-generate"),
@@ -106,11 +108,12 @@ async function copyPassword() {
       success = false;
     }
   }
-  const className = success ? "copy-success" : "copy-error";
   const copyButton = document.getElementById("password-copy");
-  copyButton.classList.add(className);
+  concurrentButtonActions += 1;
+  copyButton.setAttribute("highlight", success ? "success" : "error");
   setTimeout(() => {
-    copyButton.classList.remove(className);
+    concurrentButtonActions -= 1;
+    if (concurrentButtonActions <= 0) copyButton.removeAttribute("highlight");
   }, 1_000);
 }
 

diff --git a/public/styles/password-generator.css b/public/styles/password-generator.css
@@ -40,10 +40,6 @@ button {
   transition-timing-function: ease-out;
 }
 
-button:hover {
-  background: var(--gray-20);
-}
-
 .flex-center {
   display: flex;
   justify-content: center;
@@ -78,6 +74,18 @@ button,
   border-radius: 1em;
 }
 
+button:hover {
+  background: var(--gray-20);
+}
+
+button[highlight="success"] {
+  background: var(--green);
+}
+
+button[highlight="error"] {
+  background: var(--red);
+}
+
 .password {
   font-family: "JetBrains Mono", monospace;
   font-size: 1rem;
@@ -102,14 +110,6 @@ button,
   }
 }
 
-.copy-success {
-  background: var(--green);
-}
-
-.copy-error {
-  background: var(--red);
-}
-
 .password-stats {
   text-align: left;
 }