Merge pull request #11 from ksenya3112/module9-task1

Author: keksobot

index.html

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

js/form.js

@@ -0,0 +1,68 @@
+import { isEsc } from './util.js';
+
+const uploadForm = document.querySelector('.img-upload__form');
+const fileInput = uploadForm.querySelector('.img-upload__input');
+const overlay = uploadForm.querySelector('.img-upload__overlay');
+const closeButton = uploadForm.querySelector('.img-upload__cancel');
+const hashtagInput = uploadForm.querySelector('.text__hashtags');
+const commentInput = uploadForm.querySelector('.text__description');
+
+// Инициализация Pristine
+const pristine = new Pristine(uploadForm, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error',
+});
+
+// Закрытие формы
+const closeUploadModal = () => {
+  overlay.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+  uploadForm.reset(); // Сбрасывает все поля
+  pristine.reset(); // Очищает ошибки валидации
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+// Обработчик Esc (не закрывать, если фокус в полях ввода)
+function onDocumentKeydown(evt) {
+  if (isEsc(evt) && document.activeElement !== hashtagInput && document.activeElement !== commentInput) {
+    evt.preventDefault();
+    closeUploadModal();
+  }
+}
+
+// Открытие формы при выборе файла
+fileInput.addEventListener('change', () => {
+  overlay.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+});
+
+closeButton.addEventListener('click', closeUploadModal);
+
+// Валидация хэштегов
+const MAX_HASHTAGS = 5;
+const VALID_SYMBOLS = /^#[a-zа-яё0-9]{1,19}$/i;
+
+const validateHashtags = (value) => {
+  const hashtags = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+
+  const hasValidCount = hashtags.length <= MAX_HASHTAGS;
+  const hasUniqueHashtags = new Set(hashtags).size === hashtags.length;
+  const hasValidSymbols = hashtags.every((tag) => VALID_SYMBOLS.test(tag));
+
+  return hasValidCount && hasUniqueHashtags && hasValidSymbols;
+};
+
+pristine.addValidator(hashtagInput, validateHashtags, 'Некорректные хэштеги (макс 5, без повторов, начинаются с #)');
+
+// Валидация комментария
+pristine.addValidator(commentInput, (val) => val.length <= 140, 'Максимум 140 символов');
+
+// Отправка формы
+uploadForm.addEventListener('submit', (evt) => {
+  const isValid = pristine.validate();
+  if (!isValid) {
+    evt.preventDefault();
+  }
+});

js/full-size-picture.js

@@ -1,3 +1,5 @@
+import { isEsc } from './util.js';
+
 const COMMENTS_STEP = 5;
 
 const fullSizePictureElement = document.querySelector('.big-picture');
@@ -61,13 +63,12 @@ const onCloseButtonClick = () => {
   //Удаление обработчика с кнопки при закрытии, чтобы не накапливались
   commentsLoader.removeEventListener('click', onCommentsLoaderClick);
 };
-
-function onDocumentKeydown(evt) {
-  if (evt.key === 'Escape') {
+const onDocumentKeydown = (evt) => {
+  if (isEsc(evt)) {
     evt.preventDefault();
     onCloseButtonClick();
   }
-}
+};
 
 //Открытие и заполнение данными
 const openFullSizePicture = (data) => {

js/main.js

@@ -2,6 +2,7 @@ import { generatePhotos } from './data.js';
 
 import './util.js';
 import './data.js';
+import './form.js';
 
 import { renderThumbnails } from './thumbnails.js';
 renderThumbnails(generatePhotos());

js/util.js

@@ -1,3 +1,5 @@
 const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 
-export { getRandomInt };
+const isEsc = (evt) => evt.key === 'Escape';
+
+export { getRandomInt, isEsc };