Merge pull request #9 from suntira/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" enctype="multipart/form-data" action= "https://31.javascript.htmlacademy.pro/kekstagram" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -234,5 +234,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/gallery.js

@@ -1,7 +1,5 @@
 import { renderPhoto } from './render-thumbnail.js';
 
-function renderGallery(photoDataArray) {
-  renderPhoto(photoDataArray);
-}
+const renderGallery = (photoDataArray) => renderPhoto(photoDataArray);
 
 export { renderGallery };

js/main.js

@@ -1,5 +1,6 @@
 import { photosData } from './create-photo-descriptions.js';
 import { renderGallery } from './gallery.js';
+import { initPhotoUploadForm } from './photo-upload-form.js';
 
 renderGallery(photosData);
-
+initPhotoUploadForm();

js/photo-upload-form.js

@@ -0,0 +1,48 @@
+import { isEscapeKey, showModal } from './util.js';
+import { isValid, resetValidation } from './validations.js';
+
+const photoLoadingElement = document.querySelector('.img-upload__input');
+const photoUploadOverlayElement = document.querySelector('.img-upload__overlay');
+const photoModalUploadCloseElement = document.querySelector('.img-upload__cancel');
+const photoUploadFormElement = document.querySelector('.img-upload__form');
+const hashtagsInputElement = photoUploadFormElement.querySelector('.text__hashtags');
+const commentInputElement = photoUploadFormElement.querySelector('.text__description');
+
+const onDocumentKeydown = (evt) => {
+  if (document.activeElement === hashtagsInputElement || document.activeElement === commentInputElement) {
+    evt.stopPropagation();
+    return;
+  }
+
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closePhotoUploadModal();
+  }
+};
+
+function closePhotoUploadModal () {
+  showModal(photoUploadOverlayElement, false);
+  document.removeEventListener('keydown', onDocumentKeydown);
+
+  photoUploadFormElement.reset();
+  resetValidation();
+}
+
+const onCloseButtonClick = (evt) => (evt.preventDefault(), closePhotoUploadModal());
+
+const initPhotoUploadForm = () => {
+  photoLoadingElement.addEventListener('change', () => {
+    showModal(photoUploadOverlayElement);
+    document.addEventListener('keydown', onDocumentKeydown);
+  });
+
+  photoModalUploadCloseElement.addEventListener('click', onCloseButtonClick);
+};
+
+hashtagsInputElement.addEventListener('keydown', (evt) => evt.stopPropagation());
+commentInputElement.addEventListener('keydown', (evt) => evt.stopPropagation());
+
+photoUploadFormElement.addEventListener('submit', (evt) => !isValid() && evt.preventDefault());
+
+
+export { initPhotoUploadForm };

js/render-full-size-photo.js

@@ -1,27 +1,16 @@
-import { isEscapeKey } from './util.js';
+import { isEscapeKey, showModal } from './util.js';
 import { DATA_ELEMENTS } from './photo-modal-elements.js';
 import { renderNextComments, closeComments, initComments } from './comments.js';
 
-const showModal = (isShown = true) => {
-  if (isShown) {
-    DATA_ELEMENTS.photoModalElement.classList.remove('hidden');
-    document.body.classList.add('modal-open');
-    return;
-  }
-
-  DATA_ELEMENTS.photoModalElement.classList.add('hidden');
-  document.body.classList.remove('modal-open');
-};
-
-function onDocumentKeydown(evt) {
+const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
     closePhotoModal();
   }
-}
+};
 
 function closePhotoModal() {
-  showModal(false);
+  showModal(DATA_ELEMENTS.photoModalElement, false);
   document.removeEventListener('keydown', onDocumentKeydown);
   closeComments();
 }
@@ -36,7 +25,7 @@ const renderModal = ({ url, description, likes, comments }) => {
 };
 
 const openPhotoModal = (photo) => {
-  showModal();
+  showModal(DATA_ELEMENTS.photoModalElement);
   renderModal(photo);
   document.addEventListener('keydown', onDocumentKeydown);
 };

js/util.js

@@ -1,12 +1,14 @@
-function getRandomInteger (min, max) {
+const body = document.body;
+
+const getRandomInteger = (min, max) => {
   const lower = Math.ceil(Math.min(Math.abs(min), Math.abs(max)));
   const upper = Math.floor(Math.max(Math.abs(min), Math.abs(max)));
   const result = Math.random() * (upper - lower + 1) + lower;
 
   return Math.floor(result);
-}
+};
 
-function createRandomIntegerFromRangeGenerator (min, max) {
+const createRandomIntegerFromRangeGenerator = (min, max) => {
   const previousValues = [];
 
   return function () {
@@ -21,7 +23,7 @@ function createRandomIntegerFromRangeGenerator (min, max) {
     previousValues.push(currentValue);
     return currentValue;
   };
-}
+};
 
 const getRandomArrayElement = (elements) =>
   elements.length
@@ -35,4 +37,15 @@ const createIdGenerator = () => {
 
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export {getRandomInteger, createRandomIntegerFromRangeGenerator, getRandomArrayElement, createIdGenerator, isEscapeKey};
+const showModal = (modal, isShown = true) => {
+  if (isShown) {
+    modal.classList.remove('hidden');
+    body.classList.add('modal-open');
+    return;
+  }
+
+  modal.classList.add('hidden');
+  body.classList.remove('modal-open');
+};
+
+export {getRandomInteger, createRandomIntegerFromRangeGenerator, getRandomArrayElement, createIdGenerator, isEscapeKey, showModal};

js/validations.js

@@ -0,0 +1,70 @@
+const RE_VALID_HASHTAG = /^#[a-zа-яё0-9]{1,19}$/i;
+const MAX_HASHTAGS = 5;
+const MAX_LENGTH_COMMENT = 140;
+
+const photoFormUploadElement = document.querySelector('.img-upload__form');
+const hashtagsInputElement = photoFormUploadElement.querySelector('.text__hashtags');
+const commentInputElement = photoFormUploadElement.querySelector('.text__description');
+
+const pristine = new Pristine(photoFormUploadElement, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__error'
+});
+
+const getHashtags = (value) => {
+  if (!value.trim()) {
+    return [];
+  }
+  return value.trim().split(/\s+/).filter((tag) => tag.length > 0);
+};
+
+const validateHashtagFormat = (value) => {
+  const hashtags = getHashtags(value);
+  return hashtags.every((tag) => RE_VALID_HASHTAG.test(tag));
+};
+
+const validateHashtagUnique = (value) => {
+  const hashtags = getHashtags(value).map((t) => t.toLowerCase());
+  return hashtags.length === new Set(hashtags).size;
+};
+
+const validateHashtagCount = (value) => {
+  const hashtags = getHashtags(value);
+  return hashtags.length <= MAX_HASHTAGS;
+};
+
+pristine.addValidator(
+  hashtagsInputElement,
+  validateHashtagFormat,
+  'Неверный формат хэштега',
+  1,
+  true
+);
+
+pristine.addValidator(
+  hashtagsInputElement,
+  validateHashtagUnique,
+  'Хэштеги не могут повторяться',
+  2,
+  true
+);
+
+pristine.addValidator(
+  hashtagsInputElement,
+  validateHashtagCount,
+  `Нельзя добавить больше ${MAX_HASHTAGS} хэштегов`,
+  3,
+  true
+);
+
+const validateCommentLength = (value) => value.length <= MAX_LENGTH_COMMENT;
+
+pristine.addValidator(
+  commentInputElement,
+  validateCommentLength,
+  `Комментарий не может превышать ${MAX_LENGTH_COMMENT} символов`
+);
+
+export const isValid = () => pristine.validate();
+export const resetValidation = () => pristine.reset();