diff options
author | itchief <alex.malcev1980@gmail.com> | 2022-04-18 10:27:11 +0300 |
---|---|---|
committer | itchief <alex.malcev1980@gmail.com> | 2022-04-18 10:27:11 +0300 |
commit | 531003204f1d46aa7bba928cd3da454eba585f4f (patch) | |
tree | f5fa52e297e2b1f13c45a26a68e8e02efa65200d | |
parent | 353121b00d57a14aeebd0ba16781b53cce93d516 (diff) |
Update
-rw-r--r-- | feedback/css/style.css | 46 | ||||
-rw-r--r-- | feedback/js/form-processing.js | 22 |
2 files changed, 47 insertions, 21 deletions
diff --git a/feedback/css/style.css b/feedback/css/style.css index 6488c18..287e370 100644 --- a/feedback/css/style.css +++ b/feedback/css/style.css @@ -599,18 +599,18 @@ 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; @@ -618,33 +618,49 @@ button[type="submit"] { 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 index 257b1b0..b773d70 100644 --- 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,7 +210,13 @@ 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(); @@ -218,14 +224,17 @@ class ItcSubmitForm { 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); @@ -233,7 +242,7 @@ class ItcSubmitForm { el.setAttribute('aria-valuenow', value); el.style.width = value + '%'; } - } + }*/ xhr.send(this._getFormData()); }; @@ -241,6 +250,7 @@ class ItcSubmitForm { _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; - } + }*/ } } |