Update

itchief · Apr 18, 2022 · 5310032 · 5310032
1 parent 353121b
commit 5310032
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/feedback/css/style.css b/feedback/css/style.css
@@ -599,52 +599,68 @@ textarea.form-control.is-invalid {
 
 /* CSS для кнопки submit */
 button[type="submit"] {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-weight: 400;
   color: #fff;
-  text-align: center;
-  vertical-align: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-color: #007bff;
   border: 1px solid #007bff;
-  padding: .375rem .75rem .375rem 2rem;
+  padding: .375rem .75rem;
   font-size: 1rem;
   line-height: 1.5;
   border-radius: .25rem;
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   position: relative;
 }
 
-button[type="submit"]::before {
+button[type="submit"]:disabled {
+  opacity: 0.65;
+}
+
+button[type="submit"]:not(:disabled)::before {
   content: "";
-  position: absolute;
   width: 1rem;
   height: 1rem;
-  left: .5rem;
-  top: 50%;
-  transform: translateY(-50%);
+  margin-right: .5rem;
   background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.333 512'%3E%3Cpath fill='%23fff' d='M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z'/%3E%3C/svg%3E") transparent no-repeat center center;
   background-size: 100% 100%;
 }
 
-button[type="submit"]:hover {
+@keyframes spinner-border {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+button[type="submit"]:disabled::before {
+  content: "";
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  vertical-align: -0.125em;
+  border: 0.2em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  -webkit-animation: .75s linear infinite spinner-border;
+  animation: .75s linear infinite spinner-border;
+}
+
+button[type="submit"]:not(:disabled):hover {
   color: #fff;
   background-color: #0069d9;
   border-color: #0062cc;
 }
 
-button[type="submit"]:focus {
+button[type="submit"]:not(:disabled):focus {
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 
-button[type="submit"]:disabled {
-  opacity: 0.65;
-}
-
 /* Стили для сообщения об ошибках */
 .form-error {
   position: relative;

diff --git a/feedback/js/form-processing.js b/feedback/js/form-processing.js
@@ -119,13 +119,13 @@ class ItcSubmitForm {
   // при получении успешного ответа от сервера
   _successXHR(data) {
 
-    const elProgress = this._elForm.querySelector('.progress');
+    /*const elProgress = this._elForm.querySelector('.progress');
     if (elProgress) {
       elProgress.classList.add('d-none');
       const elProgressBar = elProgress.querySelector('.progress-bar');
       elProgressBar.setAttribute('aria-valuenow', '0');
       elProgressBar.style.width = '0';
-    }
+    }*/
 
     const elAttach = this._elForm.querySelector('.form-attach');
     if (elAttach) {
@@ -210,37 +210,47 @@ class ItcSubmitForm {
       }
     }
 
+    const submitWidth = this._elForm.querySelector('[type="submit"]').getBoundingClientRect().width;
+    const submitHeight = this._elForm.querySelector('[type="submit"]').getBoundingClientRect().height;
+    this._elForm.querySelector('[type="submit"]').textContent = '';
     this._elForm.querySelector('[type="submit"]').disabled = true;
+    this._elForm.querySelector('[type="submit"]').style.width = `${submitWidth}px`;
+    this._elForm.querySelector('[type="submit"]').style.height = `${submitHeight}px`;
+
     this._elForm.querySelector('.form-error').classList.add('form-error_hide');
 
     var xhr = new XMLHttpRequest();
     xhr.open('POST', this._elForm.action);
     xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
     xhr.responseType = 'json';
     xhr.onload = () => {
+      this._elForm.querySelector('[type="submit"]').textContent = this._submitText;
       this._elForm.querySelector('[type="submit"]').disabled = false;
+      this._elForm.querySelector('[type="submit"]').style.width = '';
+      this._elForm.querySelector('[type="submit"]').style.height = '';
       if (xhr.status == 200) {
         this._successXHR(xhr.response);
       } else {
         this._errorXHR();
       }
     }
-    this._elForm.querySelector('.progress').classList.remove('d-none');
+    /*this._elForm.querySelector('.progress').classList.remove('d-none');
     xhr.upload.onprogress = (e) => {
       if (e.lengthComputable) {
         const value = ((e.loaded * 100) / e.total).toFixed(1);
         const el = this._elForm.querySelector('.progress-bar');
         el.setAttribute('aria-valuenow', value);
         el.style.width = value + '%';
       }
-    }
+    }*/
     xhr.send(this._getFormData());
   };
 
   // функция для инициализации
   _init() {
     const elFormAttachCount = this._elForm.querySelector('.form-attach__count');
     elFormAttachCount ? elFormAttachCount.textContent = this._attach.maxItems : null;
+    this._submitText = this._elForm.querySelector('[type="submit"]').textContent;
     this._addEventListener();
   }
 
@@ -317,10 +327,10 @@ class ItcSubmitForm {
         this._elForm.querySelector('.is-invalid').classList.remove('is-invalid');
       }
     }
-    if (this._elForm.querySelector('.form-progress')) {
+    /*if (this._elForm.querySelector('.form-progress')) {
       const elProgressBar = this._elForm.querySelector('.progress-bar');
       elProgressBar.setAttribute('aria-valuenow', '0');
       elProgressBar.style.width = 0;
-    }
+    }*/
   }
 }