Merge pull request #9 from AnastasiiaXX/module9-task1

Author: keksobot

index.html

@@ -30,7 +30,8 @@ <h2 class="pictures__title  visually-hidden">Фотографии других 
       <section class="img-upload">
         <div class="img-upload__wrapper">
           <h2 class="img-upload__title  visually-hidden">Загрузка фотографии</h2>
-          <form class="img-upload__form" id="upload-select-image" autocomplete="off">
+          <form class="img-upload__form" id="upload-select-image" autocomplete="off"
+                method="post" action="https://31.javascript.htmlacademy.pro/kekstagram" enctype="multipart/form-data">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -233,6 +234,7 @@ <h2 class="success__title">Изображение успешно загруже
         <h2 class="data-error__title">Не удалось загрузить данные</h2>
       </section>
     </template>
+  <script src="vendor/pristine/pristine.min.js"></script>
 <script src="js/main.js" type="module"></script>
 </body>
 </html>

js/main.js

@@ -1,6 +1,7 @@
 import { renderThumbnails } from './thumbnails.js';
 import { showFullPhoto } from './show-full-photo.js';
+import { initUploadForm } from './upload-form.js';
 
 renderThumbnails();
 showFullPhoto();
-
+initUploadForm();

js/upload-form.js

@@ -0,0 +1,82 @@
+import { openModal, closeModal } from './modal.js';
+
+const MAX_HASHTAG_COUNT = 5;
+const MAX_COMMENT_LENGTH = 140;
+const TAG_ERROR_TEXT = 'Неправильно заполнены хэштеги';
+const HASHTAG_REGEXP = /^#[a-zа-я0-9]{1,19}$/i;
+
+const form = document.querySelector('.img-upload__form');
+const fileInput = document.querySelector('.img-upload__input');
+const cancelBtn = form.querySelector('.img-upload__cancel');
+const body = document.querySelector('body');
+const uploadOverlay = form.querySelector('.img-upload__overlay');
+const hashtagInput = form.querySelector('.text__hashtags');
+
+const commentInput = form.querySelector('.text__description');
+
+const pristine = new Pristine(form, {
+  classTo: 'img-upload__field-wrapper',
+  errorClass: 'img-upload__field-wrapper--error',
+  errorTextParent: 'img-upload__field-wrapper',
+});
+
+export const initUploadForm = () => {
+  fileInput.addEventListener('change', () => {
+    openModal(uploadOverlay, body);
+  });
+
+  cancelBtn.addEventListener('click', () => {
+    closeModal(uploadOverlay, body);
+    form.reset();
+    fileInput.value = '';
+    pristine.reset();
+  });
+  const validateTags = (value) => {
+    if (!value) {
+      return true;
+    }
+    const splitHashtags = value.split(' ').filter(Boolean);
+    const lowerCaseHashtags = splitHashtags.map((hashtag) => hashtag.toLowerCase());
+    const sizeUnique = new Set(lowerCaseHashtags).size;
+    if (splitHashtags.length > MAX_HASHTAG_COUNT || splitHashtags.length !== sizeUnique) {
+      return false;
+    }
+    return splitHashtags.every((hashtag) => HASHTAG_REGEXP.test(hashtag));
+  };
+
+  const validateComment = (value) => {
+    if (!value) {
+      return true;
+    }
+
+    return value.length <= MAX_COMMENT_LENGTH;
+  };
+
+  pristine.addValidator(
+    hashtagInput,
+    validateTags,
+    TAG_ERROR_TEXT
+  );
+
+  pristine.addValidator(
+    commentInput,
+    validateComment,
+    `Длина комментария не может составлять больше ${MAX_COMMENT_LENGTH} символов`
+  );
+
+  form.addEventListener('submit', (evt) => {
+    evt.preventDefault();
+    if (!pristine.validate()) {
+      // eslint-disable-next-line no-useless-return
+      return;
+    }
+  });
+
+  const stopEscPropagation = (evt) => {
+    if (evt.key === 'Escape') {
+      evt.stopPropagation();
+    }
+  };
+  hashtagInput.addEventListener('keydown', stopEscPropagation);
+  commentInput.addEventListener('keydown', stopEscPropagation);
+};