Update Uninstall Animation (#28)

src/html/uninstall.html

@@ -8,7 +8,7 @@
 ---
 
 <div class="d-flex align-items-center h-100">
-    <div id="content-wrapper" class="p-3 mb-3 mx-auto w-100 rounded rounded-3 ">
+    <div id="content-wrapper" class="p-3 mb-3 mx-auto w-100 rounded rounded-3 animate__animated animate__backInDown">
         <div class="justify-content-center align-items-center d-flex">
             <img src="{{ "/media/logo.png" | relative_url }}" class="img-fluid float-start me-2" alt="{{ site.site_name }}" height="42" width="42">
             <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
@@ -44,7 +44,7 @@ <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
             <div class="my-2">
                 <label for="uninstall-response" class="form-label visually-hidden">Uninstall Feedback</label>
                 <textarea class="form-control" id="uninstall-response" rows="4" maxlength="1000"
-                          placeholder="Optional Feedback. Bugs, Missing Features, etc..." autofocus></textarea>
+                          placeholder="Optional Feedback, Bugs, Missing Features, etc..." autofocus></textarea>
                 <span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 1000</span>
             </div>
             <button id="submit-btn" class="btn btn-success w-100" type="submit">

src/js/main.js

@@ -86,3 +86,16 @@ function debounce(fn, timeout = 250) {
         timeoutID = setTimeout(() => fn(...args), timeout)
     }
 }
+
+const animateCSS = (selector, animation, prefix = 'animate__') => {
+    const name = `${prefix}${animation}`
+    const node = document.querySelector(selector)
+    node.classList.add(`${prefix}animated`, name)
+    function handleAnimationEnd(event) {
+        event.stopPropagation()
+        node.classList.remove(`${prefix}animated`, name)
+    }
+    node.addEventListener('animationend', handleAnimationEnd, {
+        once: true,
+    })
+}

src/js/uninstall.js

@@ -12,6 +12,7 @@ const discordUsername = 'Link Extractor'
 const uninstallMessage = `${discordUsername} Uninstall, Version: **${version}**`
 const discordAvatar = 'https://link-extractor.cssnr.com/media/logo.png'
 
+const contentWrapper = document.getElementById('content-wrapper')
 const uninstallForm = document.getElementById('uninstall-form')
 const uninstallResponse = document.getElementById('uninstall-response')
 const inputCount = document.getElementById('input-count')
@@ -27,6 +28,18 @@ uninstallResponse.addEventListener('input', function () {
     inputCount.textContent = this.value.length
 })
 
+contentWrapper.addEventListener(
+    'animationend',
+    () => {
+        // console.debug('contentWrapper: animationend')
+        contentWrapper.classList.remove(
+            'animate__animated',
+            'animate__backInDown'
+        )
+    },
+    { once: true }
+)
+
 window.addEventListener('focus', function () {
     if (!bugReport.classList.contains('animate__shakeX')) {
         bugReport.classList.add('animate__shakeX')
@@ -80,6 +93,7 @@ async function formSubmit(event) {
     const feedbackText = event.target.elements['uninstall-response'].value
     if (!(notUsed || notExpected || notWorking || feedbackText)) {
         uninstallResponse.focus()
+        animateCSS('textarea', 'shakeX')
         return console.warn('No Data to Send.')
     }
     submitBtn.classList.add('disabled')
@@ -102,9 +116,10 @@ async function formSubmit(event) {
         const response = await sendDiscord(url, lines.join('\n'))
         // console.debug('response:', response)
         if (response.status >= 200 && response.status <= 299) {
-            document
-                .querySelector('#content-wrapper')
-                .classList.add('animate__animated', 'animate__backOutUp')
+            contentWrapper.classList.add(
+                'animate__animated',
+                'animate__backOutUp'
+            )
             window.location = redirect
         } else {
             console.warn(`Error ${response.status}`, response)