Merge pull request #10 from NikitaKir98/module9-task1

Правда или действие

Author: ILokalin

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

js/main.js

@@ -1,3 +1,5 @@
 import { renderThumbnails } from './thumbnail_render.js';
+import './photo_upload_form.js';
+import './validation.js';
 
 renderThumbnails();

js/photo_upload_form.js

@@ -0,0 +1,68 @@
+import { isEscapeKey } from './util.js';
+import { validateDescription, validateHashtags, getError } from './validation.js';
+
+const GET_ERROR_TAGS = 'tags';
+const GET_ERROR_DESCRIPTION = 'description';
+
+const body = document.querySelector('body');
+const overlayForm = document.querySelector('.img-upload__overlay');
+const closeBtnForm = overlayForm.querySelector('.img-upload__cancel');
+const uploadForm = document.querySelector('.img-upload__form');
+const inputDescription = uploadForm.querySelector('.text__description');
+const inputHashtags = uploadForm.querySelector('.text__hashtags');
+const uploadSubmit = uploadForm.querySelector('.img-upload__submit');
+const uploadFile = document.querySelector('#upload-file');
+
+const pristine = new Pristine(uploadForm, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error'
+});
+
+const onHashtagsInput = () => {
+  if (pristine.validate()) {
+    uploadSubmit.disabled = false;
+    return;
+  }
+
+  uploadSubmit.disabled = true;
+};
+
+const onDescriptionInput = () => {
+  if (pristine.validate()) {
+    uploadSubmit.disabled = false;
+    return;
+  } uploadSubmit.disabled = true;
+};
+
+const onDocumentKeydown = (event) => {
+  if (isEscapeKey(event) && (document.activeElement === inputHashtags || document.activeElement === inputDescription)){
+    return;
+  }
+  if (isEscapeKey(event)){
+    /* eslint-disable no-use-before-define*/
+    closeFormUpload();
+  }
+};
+
+const onClickFormUpload = () => {
+  body.classList.add('modal-open');
+  overlayForm.classList.remove('hidden');
+  document.addEventListener('keydown', onDocumentKeydown);
+  closeBtnForm.addEventListener('click', closeFormUpload);
+};
+
+const closeFormUpload = () => {
+  overlayForm.classList.add('hidden');
+  body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+  closeBtnForm.removeEventListener('click', closeFormUpload);
+};
+
+uploadFile.addEventListener('change', onClickFormUpload);
+
+pristine.addValidator(inputHashtags, validateHashtags, getError(GET_ERROR_TAGS), false);
+inputHashtags.addEventListener('input', onHashtagsInput);
+
+pristine.addValidator(inputDescription, validateDescription, getError(GET_ERROR_DESCRIPTION), false);
+inputDescription.addEventListener('input', onDescriptionInput);

js/post.js

@@ -66,13 +66,15 @@ const onShowMoreClick = () => {
 const onDocumentKeydown = (event) => {
   if (isEscapeKey(event)) {
     event.preventDefault();
-    closePost(); // eslint-disable-line
+    /* eslint-disable no-use-before-define*/
+    closePost();
   }
 };
 
 const onPhotoCloseClick = (event) => {
   event.preventDefault();
-  closePost(); // eslint-disable-line
+  /* eslint-disable no-use-before-define*/
+  closePost();
 };
 
 const openPost = (post) => {

js/validation.js

@@ -0,0 +1,74 @@
+const DESCRIPTION_SYMBOLS_MAX = 140;
+const HASHTAGS_SYMBOLS_MAX = 20;
+const HASHTAGS_MAX = 5;
+
+const errors = {
+  tags: '',
+  description: '',
+};
+
+const validateDescription = (inputText) => {
+  if (!inputText) {
+    return true;
+  }
+
+  const errorDescription = `Максимальная длина описания ${DESCRIPTION_SYMBOLS_MAX} символов.`;
+
+  if (inputText.length >= DESCRIPTION_SYMBOLS_MAX) {
+    errors.description = errorDescription;
+    return false;
+  }
+  return true;
+};
+
+const validateHashtags = (value) => {
+  const inputText = value.toLowerCase().trim();
+  if (!inputText) {
+    return true;
+  }
+
+  const inputData = inputText.split(/\s+/);
+  const rules = [
+    {
+      check: inputData.some((item) => item[0] !== '#'),
+      error: 'Хэштег должен начинаться с символа "#".',
+    },
+    {
+      check: inputData.some((item) => item === '#'),
+      error: 'Хэштег не может состоять только из символа "#".',
+    },
+    {
+      check: inputData.some((item) => item.indexOf('#', 1) >= 1),
+      error: 'Хэштеги разделяются пробелами.'
+    },
+    {
+      check: inputData.some((item, i) => inputData.includes(item, i + 1)),
+      error: 'Хэштеги не должны повторяться.'
+    },
+    {
+      check: inputData.some((item) => item.length > HASHTAGS_SYMBOLS_MAX),
+      error: `Максимальная длина одного хэштега ${HASHTAGS_SYMBOLS_MAX} символов, включая символ "#".`
+    },
+    {
+      check: inputData.length > HASHTAGS_MAX,
+      error: `Хэштегов должно быть не больше ${HASHTAGS_MAX}.`
+    },
+    {
+      check: inputData.some((item) => !/^#[a-zа-яё0-9]{1,19}$/i.test(item)),
+      error: 'Хэштег содержит недопустимый символ.'
+    },
+  ];
+
+  return rules.every((rule) => {
+    if (rule.check) {
+      errors.tags = rule.error;
+      return false;
+    }
+    return true;
+  });
+};
+
+const getError = (field) => () => errors[field];
+
+
+export { validateDescription, validateHashtags, getError };