clearing fade-in animation eventListeners (mdn#87)

ordinaryperson420 · Your Name · bsmth · web-flow · commit 8dd8e899705f · 2024-07-17T11:48:17.000+02:00
Co-authored-by: Your Name &lt;your@mail.net&gt;
Co-authored-by: Brian Thomas Smith &lt;brian@smith.berlin&gt;
diff --git a/web-crypto/derive-bits/ecdh.js b/web-crypto/derive-bits/ecdh.js
@@ -16,7 +16,7 @@
     sharedSecretValue.classList.add("fade-in");
     sharedSecretValue.addEventListener("animationend", () => {
       sharedSecretValue.classList.remove("fade-in");
-    });
+    }, { once: true });
     sharedSecretValue.textContent = `${buffer}...[${sharedSecret.byteLength} bytes total]`;
   }
 
diff --git a/web-crypto/derive-bits/pbkdf2.js b/web-crypto/derive-bits/pbkdf2.js
@@ -40,7 +40,7 @@
     derivedBitsValue.classList.add("fade-in");
     derivedBitsValue.addEventListener("animationend", () => {
       derivedBitsValue.classList.remove("fade-in");
-    });
+    }, { once: true });
     derivedBitsValue.textContent = `${buffer}...[${derivedBits.byteLength} bytes total]`;
   }
 
diff --git a/web-crypto/derive-key/ecdh.js b/web-crypto/derive-key/ecdh.js
@@ -39,7 +39,7 @@
     ciphertextValue.classList.add("fade-in");
     ciphertextValue.addEventListener("animationend", () => {
       ciphertextValue.classList.remove("fade-in");
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -69,7 +69,7 @@
       decryptedValue.classList.add("fade-in");
       decryptedValue.addEventListener("animationend", () => {
         decryptedValue.classList.remove("fade-in");
-      });
+      }, { once: true });
       decryptedValue.textContent = dec.decode(decrypted);
     } catch (e) {
       decryptedValue.classList.add("error");
diff --git a/web-crypto/derive-key/pbkdf2.js b/web-crypto/derive-key/pbkdf2.js
@@ -80,7 +80,7 @@
     ciphertextValue.classList.add("fade-in");
     ciphertextValue.addEventListener("animationend", () => {
       ciphertextValue.classList.remove("fade-in");
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -114,7 +114,7 @@
       decryptedValue.classList.add("fade-in");
       decryptedValue.addEventListener("animationend", () => {
         decryptedValue.classList.remove("fade-in");
-      });
+      }, { once: true });
       decryptedValue.textContent = dec.decode(decrypted);
     } catch (e) {
       decryptedValue.classList.add("error");
diff --git a/web-crypto/encrypt-decrypt/aes-cbc.js b/web-crypto/encrypt-decrypt/aes-cbc.js
@@ -39,7 +39,7 @@
     ciphertextValue.classList.add('fade-in');
     ciphertextValue.addEventListener('animationend', () => {
       ciphertextValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -62,7 +62,7 @@
     decryptedValue.classList.add('fade-in');
     decryptedValue.addEventListener('animationend', () => {
       decryptedValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     decryptedValue.textContent = dec.decode(decrypted);
   }
 
diff --git a/web-crypto/encrypt-decrypt/aes-ctr.js b/web-crypto/encrypt-decrypt/aes-ctr.js
@@ -40,7 +40,7 @@
     ciphertextValue.classList.add('fade-in');
     ciphertextValue.addEventListener('animationend', () => {
       ciphertextValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -64,7 +64,7 @@
     decryptedValue.classList.add('fade-in');
     decryptedValue.addEventListener('animationend', () => {
       decryptedValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     decryptedValue.textContent = dec.decode(decrypted);
   }
 
diff --git a/web-crypto/encrypt-decrypt/aes-gcm.js b/web-crypto/encrypt-decrypt/aes-gcm.js
@@ -39,7 +39,7 @@
     ciphertextValue.classList.add('fade-in');
     ciphertextValue.addEventListener('animationend', () => {
       ciphertextValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -62,7 +62,7 @@
     decryptedValue.classList.add('fade-in');
     decryptedValue.addEventListener('animationend', () => {
       decryptedValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     decryptedValue.textContent = dec.decode(decrypted);
   }
 
diff --git a/web-crypto/encrypt-decrypt/rsa-oaep.js b/web-crypto/encrypt-decrypt/rsa-oaep.js
@@ -35,7 +35,7 @@
     ciphertextValue.classList.add('fade-in');
     ciphertextValue.addEventListener('animationend', () => {
       ciphertextValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -57,7 +57,7 @@
     decryptedValue.classList.add('fade-in');
     decryptedValue.addEventListener('animationend', () => {
       decryptedValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     decryptedValue.textContent = dec.decode(decrypted);
   }
 
diff --git a/web-crypto/export-key/jwk.js b/web-crypto/export-key/jwk.js
@@ -12,7 +12,7 @@
     exportKeyOutput.classList.add("fade-in");
     exportKeyOutput.addEventListener("animationend", () => {
       exportKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     exportKeyOutput.textContent = JSON.stringify(exported, null, " ");
   }
 
diff --git a/web-crypto/export-key/pkcs8.js b/web-crypto/export-key/pkcs8.js
@@ -24,7 +24,7 @@
     exportKeyOutput.classList.add("fade-in");
     exportKeyOutput.addEventListener("animationend", () => {
       exportKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     exportKeyOutput.textContent = pemExported;
   }
 
diff --git a/web-crypto/export-key/raw.js b/web-crypto/export-key/raw.js
@@ -14,7 +14,7 @@
     exportKeyOutput.classList.add("fade-in");
     exportKeyOutput.addEventListener("animationend", () => {
       exportKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     exportKeyOutput.textContent = `[${exportedKeyBuffer}]`;
   }
 
diff --git a/web-crypto/export-key/spki.js b/web-crypto/export-key/spki.js
@@ -24,7 +24,7 @@
     exportKeyOutput.classList.add("fade-in");
     exportKeyOutput.addEventListener("animationend", () => {
       exportKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     exportKeyOutput.textContent = pemExported;
   }
 
diff --git a/web-crypto/import-key/jwk.js b/web-crypto/import-key/jwk.js
@@ -65,7 +65,7 @@
       signatureValue.classList.add('fade-in');
       signatureValue.addEventListener('animationend', () => {
         signatureValue.classList.remove('fade-in');
-      });
+      }, { once: true });
       const buffer = new Uint8Array(signature, 0, 5);
       signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
     }
@@ -77,7 +77,7 @@
       signButton.classList.add('fade-in');
       signButton.addEventListener('animationend', () => {
         signButton.classList.remove('fade-in');
-      });
+      }, { once: true });
       signButton.removeAttribute("disabled");
       signButton.classList.remove("hidden");
     }
diff --git a/web-crypto/import-key/pkcs8.js b/web-crypto/import-key/pkcs8.js
@@ -84,7 +84,7 @@ MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDD0tPV/du2vftjvXj1t/gXTK39sNBV
     signatureValue.classList.add('fade-in');
     signatureValue.addEventListener('animationend', () => {
       signatureValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     const buffer = new Uint8Array(signature, 0, 5);
     signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
   }
@@ -96,7 +96,7 @@ MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDD0tPV/du2vftjvXj1t/gXTK39sNBV
     signButton.classList.add('fade-in');
     signButton.addEventListener('animationend', () => {
       signButton.classList.remove('fade-in');
-    });
+    }, { once: true });
     signButton.removeAttribute("disabled");
     signButton.classList.remove("hidden");
   }
diff --git a/web-crypto/import-key/raw.js b/web-crypto/import-key/raw.js
@@ -57,7 +57,7 @@
     ciphertextValue.classList.add('fade-in');
     ciphertextValue.addEventListener('animationend', () => {
       ciphertextValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -68,7 +68,7 @@
       encryptButton.classList.add('fade-in');
       encryptButton.addEventListener('animationend', () => {
         encryptButton.classList.remove('fade-in');
-      });
+      }, { once: true });
       encryptButton.removeAttribute("disabled");
       encryptButton.classList.remove("hidden");
     }
diff --git a/web-crypto/import-key/spki.js b/web-crypto/import-key/spki.js
@@ -81,7 +81,7 @@ MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAy3Xo3U13dc+xojwQYWoJLCbOQ5fOVY8Llnqc
     ciphertextValue.classList.add('fade-in');
     ciphertextValue.addEventListener('animationend', () => {
       ciphertextValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -92,7 +92,7 @@ MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAy3Xo3U13dc+xojwQYWoJLCbOQ5fOVY8Llnqc
     encryptButton.classList.add('fade-in');
     encryptButton.addEventListener('animationend', () => {
       encryptButton.classList.remove('fade-in');
-    });
+    }, { once: true });
     encryptButton.removeAttribute("disabled");
     encryptButton.classList.remove("hidden");
   }
diff --git a/web-crypto/sign-verify/ecdsa.js b/web-crypto/sign-verify/ecdsa.js
@@ -37,7 +37,7 @@
     signatureValue.classList.add('fade-in');
     signatureValue.addEventListener('animationend', () => {
       signatureValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     let buffer = new Uint8Array(signature, 0, 5);
     signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
   }
diff --git a/web-crypto/sign-verify/hmac.js b/web-crypto/sign-verify/hmac.js
@@ -34,7 +34,7 @@
     signatureValue.classList.add('fade-in');
     signatureValue.addEventListener('animationend', () => {
       signatureValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     let buffer = new Uint8Array(signature, 0, 5);
     signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
   }
diff --git a/web-crypto/sign-verify/rsa-pss.js b/web-crypto/sign-verify/rsa-pss.js
@@ -37,7 +37,7 @@
     signatureValue.classList.add('fade-in');
     signatureValue.addEventListener('animationend', () => {
       signatureValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     let buffer = new Uint8Array(signature, 0, 5);
     signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
   }
diff --git a/web-crypto/sign-verify/rsassa-pkcs1.js b/web-crypto/sign-verify/rsassa-pkcs1.js
@@ -34,7 +34,7 @@
     signatureValue.classList.add('fade-in');
     signatureValue.addEventListener('animationend', () => {
       signatureValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     let buffer = new Uint8Array(signature, 0, 5);
     signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
   }
diff --git a/web-crypto/unwrap-key/pkcs8.js b/web-crypto/unwrap-key/pkcs8.js
@@ -198,7 +198,7 @@
     signatureValue.classList.add('fade-in');
     signatureValue.addEventListener('animationend', () => {
       signatureValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     const buffer = new Uint8Array(signature, 0, 5);
     signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
   }
@@ -218,7 +218,7 @@
     signButton.classList.add('fade-in');
     signButton.addEventListener('animationend', () => {
       signButton.classList.remove('fade-in');
-    });
+    }, { once: true });
     signButton.removeAttribute("disabled");
     signButton.classList.remove("hidden");
   }
diff --git a/web-crypto/unwrap-key/raw.js b/web-crypto/unwrap-key/raw.js
@@ -128,7 +128,7 @@
     ciphertextValue.classList.add('fade-in');
     ciphertextValue.addEventListener('animationend', () => {
       ciphertextValue.classList.remove('fade-in');
-    });
+    }, { once: true });
     ciphertextValue.textContent = `${buffer}...[${ciphertext.byteLength} bytes total]`;
   }
 
@@ -147,7 +147,7 @@
     encryptButton.classList.add('fade-in');
     encryptButton.addEventListener('animationend', () => {
       encryptButton.classList.remove('fade-in');
-    });
+    }, { once: true });
     encryptButton.removeAttribute("disabled");
     encryptButton.classList.remove("hidden");
   }
diff --git a/web-crypto/wrap-key/jwk.js b/web-crypto/wrap-key/jwk.js
@@ -64,7 +64,7 @@
     wrappedKeyOutput.classList.add("fade-in");
     wrappedKeyOutput.addEventListener("animationend", () => {
       wrappedKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     wrappedKeyOutput.textContent = `[${wrappedKeyBuffer}]`;
   }
 
diff --git a/web-crypto/wrap-key/pkcs8.js b/web-crypto/wrap-key/pkcs8.js
@@ -64,7 +64,7 @@
     wrappedKeyOutput.classList.add("fade-in");
     wrappedKeyOutput.addEventListener("animationend", () => {
       wrappedKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     wrappedKeyOutput.textContent = `[${wrappedKeyBuffer}]`;
   }
 
diff --git a/web-crypto/wrap-key/raw.js b/web-crypto/wrap-key/raw.js
@@ -59,7 +59,7 @@
     wrappedKeyOutput.classList.add("fade-in");
     wrappedKeyOutput.addEventListener("animationend", () => {
       wrappedKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     wrappedKeyOutput.textContent = `[${wrappedKeyBuffer}]`;
   }
 
diff --git a/web-crypto/wrap-key/spki.js b/web-crypto/wrap-key/spki.js
@@ -64,7 +64,7 @@
     wrappedKeyOutput.classList.add("fade-in");
     wrappedKeyOutput.addEventListener("animationend", () => {
       wrappedKeyOutput.classList.remove("fade-in");
-    });
+    }, { once: true });
     wrappedKeyOutput.textContent = `[${wrappedKeyBuffer}]`;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`sharedSecretValue.classList.add("fade-in");`
`17`	`17`	`sharedSecretValue.addEventListener("animationend", () => {`
`18`	`18`	`sharedSecretValue.classList.remove("fade-in");`
`19`		`- });`
	`19`	`+ }, { once: true });`
`20`	`20`	sharedSecretValue.textContent = `${buffer}...[${sharedSecret.byteLength} bytes total]`;
`21`	`21`	`}`
`22`	`22`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`	`derivedBitsValue.classList.add("fade-in");`
`41`	`41`	`derivedBitsValue.addEventListener("animationend", () => {`
`42`	`42`	`derivedBitsValue.classList.remove("fade-in");`
`43`		`- });`
	`43`	`+ }, { once: true });`
`44`	`44`	derivedBitsValue.textContent = `${buffer}...[${derivedBits.byteLength} bytes total]`;
`45`	`45`	`}`
`46`	`46`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`exportKeyOutput.classList.add("fade-in");`
`13`	`13`	`exportKeyOutput.addEventListener("animationend", () => {`
`14`	`14`	`exportKeyOutput.classList.remove("fade-in");`
`15`		`- });`
	`15`	`+ }, { once: true });`
`16`	`16`	`exportKeyOutput.textContent = JSON.stringify(exported, null, " ");`
`17`	`17`	`}`
`18`	`18`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`exportKeyOutput.classList.add("fade-in");`
`25`	`25`	`exportKeyOutput.addEventListener("animationend", () => {`
`26`	`26`	`exportKeyOutput.classList.remove("fade-in");`
`27`		`- });`
	`27`	`+ }, { once: true });`
`28`	`28`	`exportKeyOutput.textContent = pemExported;`
`29`	`29`	`}`
`30`	`30`