Merge pull request #10 from lenapokrovskaya/module9-task1

index.html

@@ -30,7 +30,7 @@ <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" action="https://31.javascript.htmlacademy.pro/kekstagram" method="POST" enctype="multipart/form-data" id="upload-select-image" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -233,6 +233,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/form-validation.js

@@ -0,0 +1,52 @@
+const MAX_HASHTAGS = 5;
+const MAX_COMMENT_LENGTH = 140;
+
+const imgUploadFormElement = document.querySelector('.img-upload__form');
+const hashtagsInputElement = imgUploadFormElement.querySelector('.text__hashtags');
+const descriptionInutElement = imgUploadFormElement.querySelector('.text__description');
+const hashtagRegex = /^#[a-zа-яё0-9]{1,19}$/;
+
+//Создали объект и передали конфиг
+const pristine = new Pristine(imgUploadFormElement, {
+  classTo: 'img-upload__field-wrapper',
+  errorClass: 'img-upload__field-wrapper--error',
+  errorTextParent: 'img-upload__field-wrapper',
+});
+
+//Проверка длины комментария
+const validatesCommentLength = (value) => value.length >= 0 && value.length <= MAX_COMMENT_LENGTH;
+
+const getValues = (value) => value.toLowerCase().trim().split(' ');
+
+//Проверка валиден ли хэштег
+const validatesHashtagWithRegex = (value) => {
+  const values = getValues(value);
+  const isValid = values.every((item) => hashtagRegex.test(item));
+  return isValid || value.toLowerCase().trim().length === 0;
+};
+
+//Проверка на ввод не более 5 хэштегов
+const validatesHashtagCount = (value) => getValues(value).length <= MAX_HASHTAGS;
+
+//Проверка на повтор хэштегов
+const validatesHashtagRepeats = (value) => {
+  const duplicates = getValues(value).filter((number, index, numbers) =>
+    numbers.indexOf(number) !== index);
+  return duplicates.length === 0;
+};
+
+pristine.addValidator(hashtagsInputElement, validatesHashtagCount, 'Превышено количество хэштегов');
+pristine.addValidator(hashtagsInputElement, validatesHashtagWithRegex, 'Введён невалидный хэштег');
+pristine.addValidator(hashtagsInputElement, validatesHashtagRepeats, 'Хэштеги повторяются');
+pristine.addValidator(descriptionInutElement, validatesCommentLength, `Длина комментария больше ${MAX_COMMENT_LENGTH} символов`);
+
+const onFormSubmit = (evt) => {
+  evt.preventDefault();
+  const isValid = pristine.validate();
+  if (isValid) {
+    evt.target.submit();
+  }
+};
+
+export {onFormSubmit};
+

js/main.js

@@ -1,9 +1,11 @@
 import {createPosts} from './data.js';
 import {createFragment} from './thumbnails.js';
 import {renderModal} from './modal.js';
+import {openUploadForm} from './upload-photo-form.js';
 
 
 const posts = createPosts();
 createFragment(posts);
 renderModal(posts);
+openUploadForm();
 

js/modal.js

@@ -22,6 +22,7 @@ const renderModal = (posts) => {
     bigPictureElement.classList.add('hidden');
     //Удаляем обработчик закрытия превью ESC
     document.removeEventListener('keydown', onModalEscKeyDown);
+    picturesParentElement.removeEventListener('click', onThumbnailClick);
     //Удаляем класс,  чтобы контейнер с фото прокручивался
     document.body.classList.remove('modal-open');
   }
@@ -46,7 +47,7 @@ const renderModal = (posts) => {
   };
 
   //Функция обработчика клика, показывает модалку
-  const onThumbnailClick = (evt) => {
+  function onThumbnailClick (evt) {
     const currentPictureElement = evt.target.closest('.picture');
     if (currentPictureElement) {
       evt.preventDefault();
@@ -55,7 +56,7 @@ const renderModal = (posts) => {
       renderBigPicture(foundedPictureByIdElement);
       openModal();
     }
-  };
+  }
 
   picturesParentElement.addEventListener('click', onThumbnailClick);
 };

js/upload-photo-form.js

@@ -0,0 +1,49 @@
+import {isEscapeKey} from './util';
+import {onFormSubmit} from './form-validation';
+
+const bodyElement = document.body;
+const imgUploadFormElement = bodyElement.querySelector('.img-upload__form');
+const imgUploadFormInput = imgUploadFormElement.querySelector('.img-upload__input');
+const hashtagsInputElement = imgUploadFormElement.querySelector('.text__hashtags');
+const descriptionInutElement = imgUploadFormElement.querySelector('.text__description');
+const imgUploadOverlay = imgUploadFormElement.querySelector('.img-upload__overlay');
+const buttonUploadCancel = imgUploadFormElement.querySelector('.img-upload__cancel');
+
+//Функция-обработчик закрытия формы по ESC
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    if (document.activeElement === hashtagsInputElement || document.activeElement === descriptionInutElement) {
+      evt.stopPropagation();
+    } else {
+      closeUploadForm();
+      imgUploadFormElement.reset();
+    }
+  }
+};
+
+//Функция закрытия формы по нажатию на кнопку
+const onCloseButtonClick = () => closeUploadForm();
+
+//Закрытие формы загрузки
+function closeUploadForm() {
+  imgUploadOverlay.classList.add('hidden');
+  bodyElement.classList.remove('modal-open');
+  imgUploadFormElement.removeEventListener('submit', onFormSubmit);
+  document.removeEventListener('keydown', onDocumentKeydown);
+  buttonUploadCancel.removeEventListener('click', onCloseButtonClick);
+  imgUploadFormInput.value = '';
+}
+
+//Открытие формы загрузки
+const openUploadForm = () => {
+  imgUploadFormInput.addEventListener('change', () => {
+    imgUploadOverlay.classList.remove('hidden');
+    bodyElement.classList.add('modal-open');
+    imgUploadFormElement.addEventListener('submit', onFormSubmit);//почему из без вызова работает
+    document.addEventListener('keydown', onDocumentKeydown);
+    buttonUploadCancel.addEventListener('click', onCloseButtonClick);
+  });
+};
+
+export {openUploadForm};