Animate Copy Link button.

chayev · Jul 16, 2023 · 356a075 · 356a075
1 parent 585dc30
commit 356a075
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 21 deletions.
diff --git a/webapp/static/css/main_v2.css b/webapp/static/css/main_v2.css
@@ -226,6 +226,33 @@ footer {
   color: white;
 }
 
+.animate-copy {
+  animation: fadeInOut 700ms linear 1 forwards;
+}
+
+@keyframes fadeInOut {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.animate-copy-fadeIn {
+  animation: fadeIn 700ms linear 1 forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .deeplink-android {
   display: flex;
   justify-content: center;
@@ -317,7 +344,8 @@ a:visited {
   }
 
   .result-form-input-android label {
-    min-width: 102px;
+    width: 80px;
+    min-width: 80px;
   }
 
   .result-form-input input {

diff --git a/webapp/static/img/loading.svg b/webapp/static/img/loading.svg
diff --git a/webapp/tpl/debug-android-results.html b/webapp/tpl/debug-android-results.html
@@ -167,7 +167,9 @@ <h2 id="results-title">Asset Links File Validator</h2>
               Validate iOS
               <img src="../static/img/appleIcon.svg" height="17" width="17" />
             </button>
-            <button class="result-button copy">Copy Results</button>
+            <button class="result-button copy">
+              <div>Copy Results</div>
+            </button>
           </div>
         </div>
       </div>
@@ -187,14 +189,34 @@ <h2 id="results-title">Asset Links File Validator</h2>
   <script>
     const copyLinkBtn = document.querySelector('.copy')
     copyLinkBtn.addEventListener('click', () => {
-      navigator.clipboard.writeText(window.location.href).then(
-        function () {
-          console.log('Async: Copying to clipboard was successful!')
-        },
-        function (err) {
-          console.error('Async: Could not copy text: ', err)
-        }
-      )
+      navigator.clipboard
+        .writeText(window.location.href)
+        .then(async function () {
+          console.log('Copying to clipboard was successful!')
+          const loadingState =
+            '<img class="animate-copy" src="../static/img/loading.svg" height="30" width="30" alt="Loading Icon" />'
+          const copiedState = '<div class="animate-copy">Copied!</div>'
+          const resetState =
+            '<div class="animate-copy-fadeIn">Copy Results</div>'
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              copyLinkBtn.style.padding = '2px 8px'
+              copyLinkBtn.innerHTML = loadingState
+              resolve()
+            }, 400)
+          )
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              copyLinkBtn.style.padding = '8px'
+              copyLinkBtn.innerHTML = copiedState
+              resolve()
+            }, 700)
+          )
+          setTimeout(() => {
+            copyLinkBtn.innerHTML = resetState
+          }, 700)
+        })
+        .catch((err) => console.error('Could not copy text: ', err))
     })
   </script>
 </html>
diff --git a/webapp/tpl/debug-ios-results.html b/webapp/tpl/debug-ios-results.html
@@ -163,7 +163,9 @@ <h2 id="results-title">Universal Links / AASA File Validator</h2>
               Validate Android
               <img src="../static/img/droidIcon.svg" height="17" width="17" />
             </button>
-            <button class="result-button copy">Copy Results</button>
+            <button class="result-button copy">
+              <div>Copy Results</div>
+            </button>
           </div>
         </div>
       </div>
@@ -183,14 +185,34 @@ <h2 id="results-title">Universal Links / AASA File Validator</h2>
   <script>
     const copyLinkBtn = document.querySelector('.copy')
     copyLinkBtn.addEventListener('click', () => {
-      navigator.clipboard.writeText(window.location.href).then(
-        function () {
-          console.log('Async: Copying to clipboard was successful!')
-        },
-        function (err) {
-          console.error('Async: Could not copy text: ', err)
-        }
-      )
+      navigator.clipboard
+        .writeText(window.location.href)
+        .then(async function () {
+          console.log('Copying to clipboard was successful!')
+          const loadingState =
+            '<img class="animate-copy" src="../static/img/loading.svg" height="30" width="30" alt="Loading Icon" />'
+          const copiedState = '<div class="animate-copy">Copied!</div>'
+          const resetState =
+            '<div class="animate-copy-fadeIn">Copy Results</div>'
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              copyLinkBtn.style.padding = '2px 8px'
+              copyLinkBtn.innerHTML = loadingState
+              resolve()
+            }, 400)
+          )
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              copyLinkBtn.style.padding = '8px'
+              copyLinkBtn.innerHTML = copiedState
+              resolve()
+            }, 700)
+          )
+          setTimeout(() => {
+            copyLinkBtn.innerHTML = resetState
+          }, 700)
+        })
+        .catch((err) => console.error('Could not copy text: ', err))
     })
   </script>
 </html>
diff --git a/webapp/tpl/debug.html b/webapp/tpl/debug.html
@@ -108,12 +108,12 @@
     <main>
       <div id="container">
         <div id="info-container">
-          <h2>What is yURL</h2>
+          <h2>What is yURL?</h2>
           <p>
             yURL allows you to validate whether a URL is properly configured for
             Universal Links and App Links.
           </p>
-          <h2>Why use it</h2>
+          <h2>Why use it?</h2>
           <p>
             yURL verifies if the <b>assetlinks.json</b> and
             <span id="aasa"><b>apple-app-site-association</b></span> are