handle concurrent button highlights

jelni · Dec 22, 2023 · 603463c · 603463c
1 parent d9a5673
commit 603463c
Show file tree

Hide file tree

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

diff --git a/public/styles/password-generator.css b/public/styles/password-generator.css
@@ -40,7 +40,7 @@ button {
   transition-timing-function: ease-out;
 }
 
-button:hover {
+button:not(.copy-success):not(.copy-error):hover {
   background: var(--gray-20);
 }