Merge pull request #9 from SmithDaria/module9-task1

index.html

@@ -29,7 +29,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" id="upload-select-image" method="post" enctype="multipart/form-data" action="https://31.javascript.htmlacademy.pro/kekstagram" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -233,5 +233,6 @@ <h2 class="data-error__title">Не удалось загрузить данны
       </section>
     </template>
   <script type="module" src="./js/main.js"></script>
+  <script src="./vendor/pristine/pristine.min.js"></script>
 </body>
 </html>

js/form.js

@@ -0,0 +1,113 @@
+import {isEscapeKey} from './util.js';
+
+const formUploadPhoto = document.querySelector('.img-upload__form');
+const overlayUploadPhoto = document.querySelector('.img-upload__overlay');
+const cancelUploadPhoto = document.querySelector('.img-upload__cancel');
+const body = document.querySelector('body');
+const inputUploadPhoto = formUploadPhoto.querySelector('#upload-file');
+const inputHashtagsPhoto = document.querySelector('.text__hashtags');
+const inputDescriptionPhoto = document.querySelector('.text__description');
+const regularForHashtag = /^#[a-zа-яё0-9]{1,19}$/i;
+
+const onDocumentKeydown = (evt) => {
+  if (!isEscapeKey(evt)) {
+    return;
+  }
+  if (document.activeElement === inputHashtagsPhoto || document.activeElement === inputDescriptionPhoto) {
+    evt.stopPropagation();
+  } else {
+    evt.preventDefault();
+    closeOverlayPhoto();
+  }
+};
+
+function onCloseOverlayPhotoClick() {
+  closeOverlayPhoto();
+}
+
+function closeOverlayPhoto () {
+  overlayUploadPhoto.classList.add('hidden');
+  body.classList.remove('modal-open');
+
+  inputUploadPhoto.value = '';
+  inputHashtagsPhoto.value = '';
+  inputDescriptionPhoto.value = '';
+
+  cancelUploadPhoto.removeEventListener('click', onCloseOverlayPhotoClick);
+  document.removeEventListener('keydown', onDocumentKeydown);
+
+  inputUploadPhoto.addEventListener('change', openOverlayPhoto);
+  formUploadPhoto.removeEventListener('submit', onFormSubmit);
+}
+
+function openOverlayPhoto () {
+  overlayUploadPhoto.classList.remove('hidden');
+  body.classList.add('modal-open');
+
+  cancelUploadPhoto.addEventListener('click', onCloseOverlayPhotoClick);
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  inputUploadPhoto.removeEventListener('change', openOverlayPhoto);
+  formUploadPhoto.addEventListener('submit', onFormSubmit);
+}
+
+inputUploadPhoto.addEventListener('change', openOverlayPhoto);
+
+// Валидация полей формы
+
+const pristine = new Pristine(formUploadPhoto, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorClass: 'img-upload__field-wrapper--error',
+});
+
+function validateHashtag (value) {
+  const valueArray = value.trim().toLowerCase().split(' ');
+  if (valueArray.length > 5) {
+    return false;
+  }
+  for (let i = 0; i < valueArray.length; i++) {
+    if (!regularForHashtag.test(valueArray[i])) {
+      return false;
+    }
+    for (let k = i + 1; k < valueArray.length; k++) {
+      if (valueArray[i] === valueArray[k] && i !== k) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+function getErrorMessageHashtag (value) {
+  const valueArray = value.trim().toLowerCase().split(' ');
+  if (valueArray.length > 5) {
+    return 'Превышено количество хэштегов';
+  }
+  for (let i = 0; i < valueArray.length; i++) {
+    if (!regularForHashtag.test(valueArray[i])) {
+      return 'Введён невалидный хэштег';
+    }
+    for (let k = i + 1; k < valueArray.length; k++) {
+      if (valueArray[i] === valueArray[k] && i !== k) {
+        return 'Хэштеги повторяются';
+      }
+    }
+  }
+  return true;
+}
+
+pristine.addValidator(inputHashtagsPhoto, validateHashtag, getErrorMessageHashtag);
+
+function validateDescription (value) {
+  return !(value.length > 140);
+}
+
+pristine.addValidator(inputDescriptionPhoto, validateDescription, 'Длина комментария больше 140 символов');
+
+function onFormSubmit (evt) {
+  evt.preventDefault();
+  if (pristine.validate()) {
+    formUploadPhoto.submit();
+  }
+}

js/main.js

@@ -1,4 +1,5 @@
 import {morePosts} from './data.js';
 import {drawPictures} from './thumbnails.js';
+import './form.js';
 
 drawPictures(morePosts);