Merge pull request #8 from SergeyMedved/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" id="upload-select-image" method="post" action="https://31.javascript.htmlacademy.pro/kekstagram" enctype="multipart/form-data" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">

js/form.js

@@ -0,0 +1,53 @@
+import { isEscKey } from './utils';
+import { loadValidation, clearValidation } from './validation';
+
+const imgUploadFormElement = document.querySelector('.img-upload__form');
+
+const imgUploadOverlayElement = imgUploadFormElement.querySelector('.img-upload__overlay');
+const textHashtagsElement = imgUploadFormElement.querySelector('.text__hashtags');
+const textDescriptionElement = imgUploadFormElement.querySelector('.text__description');
+
+const loadForm = () => {
+  loadValidation();
+};
+
+const closeForm = () => {
+  document.body.classList.remove('modal-open');
+  imgUploadOverlayElement.classList.add('hidden');
+
+  imgUploadFormElement.reset();
+  clearValidation();
+};
+
+imgUploadFormElement.addEventListener('change', () => {
+  document.body.classList.add('modal-open');
+  imgUploadOverlayElement.classList.remove('hidden');
+});
+
+imgUploadOverlayElement.addEventListener('click', (evt) => {
+  const isOverlayElement = evt.target.classList.contains('img-upload__overlay');
+  const isCancelButtonElement = evt.target.classList.contains('img-upload__cancel');
+  if (isOverlayElement || isCancelButtonElement) {
+    closeForm();
+  }
+});
+
+document.addEventListener('keydown', (evt) => {
+  if (isEscKey(evt)) {
+    closeForm();
+  }
+});
+
+textHashtagsElement.addEventListener('keydown', (evt) => {
+  if (isEscKey(evt)) {
+    evt.stopPropagation();
+  }
+});
+
+textDescriptionElement.addEventListener('keydown', (evt) => {
+  if (isEscKey(evt)) {
+    evt.stopPropagation();
+  }
+});
+
+export { loadForm };

js/main.js

@@ -1,7 +1,9 @@
 import { createPhotos } from './data.js';
 import { renderPhotos } from './preview.js';
 import { renderModal } from './modal.js';
+import { loadForm } from './form.js';
 
 const data = createPhotos(25);
 renderPhotos(data);
 renderModal(data);
+loadForm();

js/validation.js

@@ -0,0 +1,94 @@
+import '../vendor/pristine/pristine.min.js';
+
+const MAX_COUNT = 5;
+
+const MAX_SYMBOLS = 20;
+
+const MAX_COMMENT_LENGTH = 140;
+
+const imgUploadFormElement = document.querySelector('.img-upload__form');
+const textHashtagsElement = imgUploadFormElement.querySelector('.text__hashtags');
+const textCommentsElement = imgUploadFormElement.querySelector('.text__description');
+
+const pristine = new Pristine(imgUploadFormElement, {
+  classTo: 'img-upload__field-wrapper',
+  errorClass: 'img-upload__field-wrapper--error',
+  errorTextParent: 'img-upload__field-wrapper',
+});
+
+const returnCommentErrMessage = (value) => {
+  let message = '';
+  if (value.length > MAX_COMMENT_LENGTH) {
+    message = `Максимальная длина комментария ${MAX_COMMENT_LENGTH} символов`;
+    return message;
+  }
+  return message;
+};
+
+const returnHashTagErrMessage = (value) => {
+  let message = '';
+  const elementValue = value.trim().toLowerCase().split(/ +/g);
+  const elementSet = new Set();
+
+  if (elementValue.length > MAX_COUNT) {
+    message = `Максимум ${MAX_COUNT} хэш-тегов`;
+    return message;
+  }
+
+  elementValue.forEach((element, index) => {
+    if (index === 0 && element.length === 0) {
+      return message;
+    }
+
+    if (element.length > MAX_SYMBOLS) {
+      message = `Максимальная длина одного хэш-тега ${MAX_SYMBOLS} символов, включая решетку`;
+      return message;
+    }
+
+    if (element[0] !== '#') {
+      message = 'Хеш-тег должен начинаться с #';
+      return message;
+    }
+
+    if (element.indexOf('#', 1) >= 1) {
+      message = 'Хэш-теги разделяются пробелами';
+      return message;
+    }
+
+    if (element === '#') {
+      message = 'Хеш-тег не может состоять только из одной решётки';
+      return message;
+    }
+
+    if (/[^a-z0-9а-я#]/.test(element)) {
+      message = 'Строка после решётки должна состоять только из букв и чисел';
+      return message;
+    }
+
+    if (elementSet.has(element)) {
+      message = 'Хэш-теги не должны повторяться';
+      return message;
+    }
+
+    elementSet.add(element);
+  });
+
+  return message;
+};
+
+const loadValidation = () => {
+  const isHashTagError = (value) => !returnHashTagErrMessage(value);
+  pristine.addValidator(textHashtagsElement, isHashTagError, returnHashTagErrMessage);
+
+  const isCommentError = (value) => !returnCommentErrMessage(value);
+  pristine.addValidator(textCommentsElement, isCommentError, returnCommentErrMessage);
+};
+
+const clearValidation = () => {
+  pristine.reset();
+};
+
+export {
+  loadValidation,
+  clearValidation,
+};