Merge pull request #10 from yakovenko79/module9-task1

Author: keksobot

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">
@@ -119,7 +119,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                     <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег">
                   </div>
                   <div class="img-upload__field-wrapper">
-                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
+                    <textarea class="text__description" name="description" maxlength="140" placeholder="Ваш комментарий..."></textarea>
                   </div>
                 </fieldset>
 
@@ -233,7 +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>
   <script src="js/functions.js"></script>
 </body>

js/create-comments.js

@@ -8,7 +8,7 @@ const commentsLoader = modal.querySelector('.social__comments-loader');
 let currentAmountComments = 0;
 let comments = [];
 
-function onNextComment() {
+function loadComments() {
   const fragment = document.createDocumentFragment();
   const nextComments = comments.slice(currentAmountComments, currentAmountComments + COMMENTS_STEP);
   currentAmountComments += nextComments.length;
@@ -37,11 +37,15 @@ function clearComments() {
   commentsLoader.classList.remove('hidden');
 }
 
+function onCommentsLoaderClick(){
+  loadComments();
+}
+
 function createComments(currentComments) {
   comments = currentComments;
-  commentsLoader.removeEventListener('click', onNextComment);
-  commentsLoader.addEventListener('click', onNextComment);
-  commentsLoader.click();
+  loadComments();
 }
 
+commentsLoader.addEventListener('click', onCommentsLoaderClick);
+
 export { createComments, clearComments };

js/functions.js

@@ -0,0 +1,61 @@
+const MAX_HASHTAG_SYMBOLS = 20;
+const MAX_HASHTAGS = 5;
+
+
+let errorMessage = '';
+
+function error() {
+  return errorMessage;
+}
+
+function isHashtagValid(value){
+  errorMessage = '';
+  const inputText = value.toLowerCase().trim();
+
+  if(inputText.lenght === 0){
+    return true;
+  }
+
+  const inputTextsArray = inputText.split(/\s+/);
+
+  const validateRules = [
+    {
+      check: inputTextsArray.some((item) => item === '#'),
+      error: 'Хештег не может состоять только из решетки'
+    },
+    {
+      check: inputTextsArray.some((item) => item.slice(1).includes('#')),
+      error: 'Хештеги разделяются пробелами'
+    },
+    {
+      check: inputTextsArray.some((item) => item[0] !== '#'),
+      error: 'Хештег должен начинаться с символа "#"'
+    },
+    {
+      check: inputTextsArray.some((item, num, array) => array.includes(item, num + 1)),
+      error: 'Хештеги не должны повторяться'
+    },
+    {
+      check: inputTextsArray.some((item) => item.length > MAX_HASHTAG_SYMBOLS),
+      error: `Хештег должен содержать не более ${MAX_HASHTAG_SYMBOLS} символов, включая "#"`
+    },
+    {
+      check: inputTextsArray.length > MAX_HASHTAGS,
+      error: `Максимально допустимое количество хештегов - ${MAX_HASHTAGS}`
+    },
+    {
+      check: inputTextsArray.some((item) => !/^#[a-zа-яё0-9]{1,19}$/i.test(item)),
+      error: 'Хештег содержит недопустимые символы'
+    }
+  ];
+
+  return validateRules.every((rule) => {
+    const isInvalid = rule.check;
+    if(isInvalid){
+      errorMessage = rule.error;
+    }
+    return !isInvalid;
+  });
+}
+
+export { isHashtagValid, error };

js/hashtag-validator.js

@@ -1,8 +1,8 @@
 import { createThumbnails } from './thumbnails';
 import { getPhotos } from './generate-data.js';
+import { initUploadModal } from './upload-photo-form.js';
 
 const photos = getPhotos();
 
 createThumbnails(photos);
-
-
+initUploadModal();

js/main.js

@@ -34,4 +34,4 @@ function createThumbnails(photos) {
   attachEvents(photos);
 }
 
-export { createThumbnails, pictures };
+export { createThumbnails };

js/thumbnails.js

@@ -0,0 +1,72 @@
+import { isHashtagValid, error } from './hashtag-validator';
+import { isEscapeKey } from './utils';
+
+const uploadForm = document.querySelector('.img-upload__form');
+const pageBody = document.body;
+
+const uploadFileControl = uploadForm.querySelector('#upload-file');
+const photoEditorForm = uploadForm.querySelector('.img-upload__overlay');
+const resetPhotoEditorFormButton = uploadForm.querySelector('.img-upload__cancel');
+
+const hashtagInput = uploadForm.querySelector('.text__hashtags');
+const commentInput = uploadForm.querySelector('.text__description');
+
+function onResetFormButton(){
+  closePhotoEditorForm();
+}
+
+function onDocumentKeyDown(evt) {
+  if(isEscapeKey(evt)){
+    if(document.activeElement === hashtagInput || document.activeElement === commentInput){
+      evt.stopPropagation();
+    } else {
+      uploadForm.reset();
+      closePhotoEditorForm();
+    }
+  }
+}
+
+const pristine = new Pristine(uploadForm, {
+  classTo: 'img-upload__field-wrapper',
+  errorClass: 'img-upload__field-wrapper--error',
+  errorTextParent: 'img-upload__field-wrapper',
+});
+
+function closePhotoEditorForm(){
+  photoEditorForm.classList.add('hidden');
+  pageBody.classList.remove('modal-open');
+  resetPhotoEditorFormButton.removeEventListener('click', onResetFormButton);
+  document.removeEventListener('keydown', onDocumentKeyDown);
+  uploadFileControl.value = '';
+  pristine.reset();
+
+}
+
+function initUploadModal() {
+  uploadFileControl.addEventListener('change', () => {
+    photoEditorForm.classList.remove('hidden');
+    pageBody.classList.add('modal-open');
+    resetPhotoEditorFormButton.addEventListener('click', onResetFormButton);
+    document.addEventListener('keydown', onDocumentKeyDown);
+  });
+}
+
+function onHashtagInput() {
+  isHashtagValid(hashtagInput.value);
+}
+
+function onFormSubmit(evt) {
+  evt.preventDefault();
+  if(pristine.validate()) {
+    hashtagInput.value = hashtagInput.value.trim().replaceAll(/\s+/g, ' ');
+    uploadForm.submit();
+  }
+}
+
+pristine.addValidator(hashtagInput, isHashtagValid, error, 2, false);
+
+hashtagInput.addEventListener('input', onHashtagInput);
+
+uploadForm.addEventListener('submit', onFormSubmit);
+
+export { initUploadModal };