adding delete buttons for filesv.2.1.1

2 files changed, 83 insertions, 15 deletions

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;

     }

   </style>

 </head>

@@ -78,34 +110,38 @@
           <!-- Сообщение пользователя -->

           <div class="form-group">

             <label for="message" class="control-label">Сообщение (не менее 20 символов)</label>

-            <textarea id="message" name="message" class="form-control" rows="3" placeholder="Сообщение (не менее 20 символов)"

-              minlength="20" maxlength="500" required="required"></textarea>

+            <textarea id="message" name="message" class="form-control" rows="3"

+              placeholder="Сообщение (не менее 20 символов)" minlength="20" maxlength="500"

+              required="required"></textarea>

             <div class="invalid-feedback"></div>

           </div>

 

           <!-- Файлы, для прикрепления к форме -->

-          <div class="form-group">

-            <p style="font-weight: 700; margin-bottom: 0;">Прикрепить к сообщению файлы (до <span class="countFiles">5</span>):</p>

+          <div class="form-group files">

+            <p style="font-weight: 700; margin-bottom: 0;">Прикрепить к сообщению файлы (до <span

+                class="countFiles">5</span>):</p>

             <p class="text-secondary">jpg, jpeg, bmp, gif, png (до 512 Кбайт)</p>

             <div class="attachments" data-counts="5">

               <div class="form-group">

                 <div class="custom-file">

+                  <button type="button" class="attachment-remove" title="Удалить">✖</button>

                   <input name="attachment[]" type="file" class="custom-file-input" id="validatedCustomFile" lang="ru">

                   <label class="custom-file-label" for="validatedCustomFile">Выберите файл...</label>

                   <div class="invalid-feedback"></div>

                 </div>

               </div>

             </div>

+            <button type="button" class="btn btn-light attachment-add">➕ Добавить</button>

           </div>

 

           <!-- Капча -->

           <div class="form-group captcha">

-            <img class="img-captcha" src="/feedback/captcha/captcha.php" data-src="/feedback/captcha/captcha.php">

+            <img class="img-captcha" src="/feedback/captcha/captcha.php" data-src="/feedback/captcha/captcha.php" alt="Капча">

             <div class="btn btn-light position-relative refresh-captcha">Обновить</div>

             <div class="form-group">

               <label for="captcha" class="control-label">Код, показанный на изображении</label>

-              <input type="text" name="captcha" maxlength="6" required="required" id="captcha" class="form-control captcha"

-                placeholder="******" autocomplete="off" value="">

+              <input type="text" name="captcha" maxlength="6" required="required" id="captcha"

+                class="form-control captcha" placeholder="******" autocomplete="off" value="">

               <div class="invalid-feedback"></div>

             </div>

           </div>

@@ -114,7 +150,8 @@
           <div class="form-group agreement">

             <div class="custom-control custom-checkbox">

               <input type="checkbox" name="agree" class="custom-control-input" id="customCheck">

-              <label class="custom-control-label" for="customCheck">Нажимая кнопку, я принимаю условия <a href="#">Пользовательского

+              <label class="custom-control-label" for="customCheck">Нажимая кнопку, я принимаю условия <a

+                  href="#">Пользовательского

                   соглашения</a> и даю своё согласие на обработку моих персональных данных, в соответствии с

                 Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных».</label>

             </div>

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

           <!-- Кнопка для отправки формы -->

           <div class="text-right submit">

-            <button type="submit" class="btn btn-primary position-relative" disabled="disabled">Отправить сообщение</button>

+            <button type="submit" class="btn btn-primary position-relative" disabled>Отправить

+              сообщение</button>

           </div>

 

         </form>

 

         <!-- Сообщение об успешной отправки формы -->

-        <div class="form-result-success d-none text-center justify-content-center align-items-center" style="position: absolute;

+        <div class="form-result-success d-none text-center justify-content-center align-items-center"

+          style="position: absolute;

         top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1.25rem; z-index: 1000;">

           <div class="alert alert-success rounded-0" style="z-index: 1001;">Форма успешно отправлена. Нажмите на

             <a class="alert-link" href="#" data-reloadform="#feedback-form">ссылку</a>, чтобы отправить ещё одно

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: '<div class="form-group">' +
       '<div class="custom-file">' +
+      '<button type="button" class="attachment-remove" title="Удалить">✖</button>' +
       '<input name="attachment[]" type="file" class="custom-file-input" id="validatedCustomFile" lang="ru">' +
       '<label class="custom-file-label" for="validatedCustomFile">Выберите файл...</label>' +
       '<div class="invalid-feedback"></div>' +
@@ -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"