fix: fix display state of Process button

yetti · May 28, 2022 · ce64ceb · ce64ceb
1 parent 8ef1c51
commit ce64ceb
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -158,7 +158,7 @@ <h2 class="text-lg font-medium text-gray-900">Output</h2>
                     <!-- Process -->
                     <div class="pt-5">
                       <div class="flex justify-center">
-                        <button @click="truncate()" x-html="processingButton" type="button"
+                        <button @click="truncate()" x-html="processBtn" type="button"
                           class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
                         </button>
                       </div>

diff --git a/public/css/style.css b/public/css/style.css
@@ -650,6 +650,10 @@ select {
   pointer-events: none;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .relative {
   position: relative;
 }
@@ -707,6 +711,14 @@ select {
   margin-bottom: 0.25rem;
 }
 
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -727,6 +739,10 @@ select {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-full {
   height: 100%;
 }
@@ -833,6 +849,23 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1109,6 +1142,14 @@ select {
   opacity: 0.5;
 }
 
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

diff --git a/public/js/main.js b/public/js/main.js
@@ -60,8 +60,10 @@ window.truncanator = function() {
         console.error(ex);
       }
 
-      sleep(2000);
-
+      setTimeout(() => {
+
+      }, 5000);
+
       this.processing = false;
       console.log('done!');
     },
@@ -82,14 +84,14 @@ window.truncanator = function() {
       return txt.replace(new RegExp(suffix.trim() + ".[^/.]+$"), '')
     },
 
-    processingButton() {
+    processBtn() {
       if (this.processing) {
         return `
           <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
-          Processing
+          Processing...
         `;
       } else {
         return `Process`;