diff --git a/feedback/index.html b/feedback/index.html index 6842a0e..ed0eddc 100644 --- a/feedback/index.html +++ b/feedback/index.html @@ -19,9 +19,8 @@ left: .5rem; top: 50%; transform: translateY(-50%); - background: transparent no-repeat center center; + 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='%23000' d='M440.935 12.574l3.966 82.766C399.416 41.904 331.674 8 256 8 134.813 8 33.933 94.924 12.296 209.824 10.908 217.193 16.604 224 24.103 224h49.084c5.57 0 10.377-3.842 11.676-9.259C103.407 137.408 172.931 80 256 80c60.893 0 114.512 30.856 146.104 77.801l-101.53-4.865c-6.845-.328-12.574 5.133-12.574 11.986v47.411c0 6.627 5.373 12 12 12h200.333c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12h-47.411c-6.853 0-12.315 5.729-11.987 12.574zM256 432c-60.895 0-114.517-30.858-146.109-77.805l101.868 4.871c6.845.327 12.573-5.134 12.573-11.986v-47.412c0-6.627-5.373-12-12-12H12c-6.627 0-12 5.373-12 12V500c0 6.627 5.373 12 12 12h47.385c6.863 0 12.328-5.745 11.985-12.599l-4.129-82.575C112.725 470.166 180.405 504 256 504c121.187 0 222.067-86.924 243.704-201.824 1.388-7.369-4.308-14.176-11.807-14.176h-49.084c-5.57 0-10.377 3.842-11.676 9.259C408.593 374.592 339.069 432 256 432z'/%3E%3C/svg%3E") transparent no-repeat center center; background-size: 100% 100%; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.333 512'%3E%3Cpath fill='%23000' d='M440.935 12.574l3.966 82.766C399.416 41.904 331.674 8 256 8 134.813 8 33.933 94.924 12.296 209.824 10.908 217.193 16.604 224 24.103 224h49.084c5.57 0 10.377-3.842 11.676-9.259C103.407 137.408 172.931 80 256 80c60.893 0 114.512 30.856 146.104 77.801l-101.53-4.865c-6.845-.328-12.574 5.133-12.574 11.986v47.411c0 6.627 5.373 12 12 12h200.333c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12h-47.411c-6.853 0-12.315 5.729-11.987 12.574zM256 432c-60.895 0-114.517-30.858-146.109-77.805l101.868 4.871c6.845.327 12.573-5.134 12.573-11.986v-47.412c0-6.627-5.373-12-12-12H12c-6.627 0-12 5.373-12 12V500c0 6.627 5.373 12 12 12h47.385c6.863 0 12.328-5.745 11.985-12.599l-4.129-82.575C112.725 470.166 180.405 504 256 504c121.187 0 222.067-86.924 243.704-201.824 1.388-7.369-4.308-14.176-11.807-14.176h-49.084c-5.57 0-10.377 3.842-11.676 9.259C408.593 374.592 339.069 432 256 432z'/%3E%3C/svg%3E"); } .custom-file-input:lang(ru)~.custom-file-label::after { @@ -36,9 +35,42 @@ left: .5rem; top: 50%; transform: translateY(-50%); - background: transparent no-repeat center center; + 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%; - background-image: 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"); + } + + .attachments .custom-file-label { + right: 46px; + } + + .attachment-remove { + position: absolute; + right: 0; + top: 0; + display: inline-block; + height: calc(1.5em + .75rem + 2px); + padding: .375rem .5rem; + line-height: 1.5; + color: #495057; + background-color: #e9ecef; + border-radius: .25rem; + user-select: none; + border: 1px solid #ced4da; + font-weight: 400; + z-index: 3; + } + + .attachment-remove:hover { + background-color: #d3d6d9; + } + + .attachment-remove:focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); + } + + .attachments[data-max="true"] ~ .attachment-add { + display: none; } @@ -78,34 +110,38 @@

Форма обратной связи

- +
-
-

Прикрепить к сообщению файлы (до 5):

+
+

Прикрепить к сообщению файлы (до 5):

jpg, jpeg, bmp, gif, png (до 512 Кбайт)

+
+
- + Капча
Обновить
- +
@@ -114,7 +150,8 @@

Форма обратной связи

-
@@ -135,13 +172,15 @@

Форма обратной связи

- +
-
Форма успешно отправлена. Нажмите на ссылку, чтобы отправить ещё одно diff --git a/feedback/js/process-forms.js b/feedback/js/process-forms.js index 4a26b23..6313a88 100644 --- a/feedback/js/process-forms.js +++ b/feedback/js/process-forms.js @@ -19,6 +19,7 @@ var ProcessForm = function (config) { validFileExtensions: ['jpg', 'jpeg', 'bmp', 'gif', 'png'], codeFragmentAttachment: '
' + '
' + + '' + '' + '' + '
' + @@ -155,6 +156,11 @@ ProcessForm.prototype = function () { if (isSelectFile && isNextInput && isMaxInput) { $(e.currentTarget).closest('.form-group').after(_this.getConfig().codeFragmentAttachment); } + if ($(_this.getConfig().selector + ' input[name="attachment[]"]').length == $(_this.getConfig().selector + ' .attachments').attr('data-counts')) { + $(_this.getConfig().selector + ' .attachments').attr('data-max', true); + } else { + $(_this.getConfig().selector + ' .attachments').attr('data-max', false); + } // если файл выбран, то выполняем следующие действия... if (e.currentTarget.files.length > 0) { // получим файл @@ -291,7 +297,7 @@ ProcessForm.prototype = function () { } // при успешной отправки формы if (data.result === "success") { - $(document).trigger('pf_success', {data: _this}); + $(document).trigger('pf_success', { data: _this }); if (_this.configForm.isShowSuccessMessage) { $(this).parent().find('.form-result-success') .removeClass('d-none') @@ -368,6 +374,29 @@ ProcessForm.prototype = function () { e.preventDefault(); _showForm(_this); }); + $(document).on('click', _this.getConfig().selector + ' .attachment-remove', function (e) { + var input = $(this).next('input'); + if (input.closest('.attachments').find('input').length > 1) { + $(input).closest('.form-group').remove(); + } else { + if (input[0].files.length > 0) { + input[0].value = ''; + $(input).trigger('change'); + } + } + $(_this.getConfig().selector + ' .attachments').attr('data-max', false); + }); + $(document).on('click', _this.getConfig().selector + ' .attachment-add', function (e) { + var isMaxInput = $(_this.getConfig().selector + ' input[name="attachment[]"]').length < $(_this.getConfig().selector + ' .attachments').attr('data-counts'); + if (isMaxInput) { + $(this).parent().find('.attachments').append(_this.getConfig().codeFragmentAttachment); + } + if ($(_this.getConfig().selector + ' input[name="attachment[]"]').length == $(_this.getConfig().selector + ' .attachments').attr('data-counts')) { + $(_this.getConfig().selector + ' .attachments').attr('data-max', true); + } else { + $(_this.getConfig().selector + ' .attachments').attr('data-max', false); + } + }); if (_this.getConfig().isAttachments) { //$('#' + this.idForm + ' .countFiles').text(this.countFiles); // добавление нового элемента input с type="file"