Исправила ошибки, проверила проект тестами

htmlacademy-javascript · Jan 21, 2025 · f3fc3f1 · f3fc3f1
1 parent 3edc1c2
commit f3fc3f1
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 91 deletions.
diff --git a/js/avatar.js b/js/avatar.js
@@ -4,13 +4,17 @@ const avatarElement = document.querySelector('.img-upload__preview img');
 const avatarPreviews = document.querySelectorAll('.effects__preview');
 const uploadFileInputElement = document.querySelector('#upload-file');
 
-uploadFileInputElement.addEventListener('change', () => {
-  const file = uploadFileInputElement.files[0];
-  const fileName = file.name.toLowerCase();
-  const matches = FILE_TYPES.some((item) => fileName.endsWith(item));
+const onFileInputChange = () => {
+  uploadFileInputElement.addEventListener('change', () => {
+    const file = uploadFileInputElement.files[0];
+    const fileName = file.name.toLowerCase();
+    const matches = FILE_TYPES.some((item) => fileName.endsWith(item));
 
-  if(matches) {
-    avatarElement.src = URL.createObjectURL(file);
-    avatarPreviews.forEach((el) => el.style.setProperty('background-image', `url(${URL.createObjectURL(file)})`));
-  }
-});
+    if (matches) {
+      avatarElement.src = URL.createObjectURL(file);
+      avatarPreviews.forEach((el) => el.style.setProperty('background-image', `url(${URL.createObjectURL(file)})`));
+    }
+  });
+};
+
+export {onFileInputChange};
diff --git a/js/filter.js b/js/filter.js
@@ -8,12 +8,12 @@ const RERENDER_DELAY = 500;
 const imgFiltersForm = document.querySelector('.img-filters__form');
 const buttonsElements = imgFiltersForm.querySelectorAll('.img-filters__button');
 
-const updatePosts = (posts) => {
+const updatePosts = debounce((posts) => {
   const pictureElements = document.querySelectorAll('.picture');
   pictureElements.forEach((el) => el.remove());
   createFragment(posts);
   renderModal(posts);
-};
+}, RERENDER_DELAY);
 
 const onChangeFilterPosts = (pictures) => {
   imgFiltersForm.addEventListener('click', (evt) => {
@@ -24,19 +24,20 @@ const onChangeFilterPosts = (pictures) => {
 
       switch (evt.target.id) {
         case 'filter-default':
-          debounce(() => updatePosts(pictures), RERENDER_DELAY)();
+          updatePosts(pictures);
           break;
 
         case 'filter-random':
-          debounce(() => updatePosts(pictures.toSorted(() => 0.5 - Math.random()).slice(0, POST_COUNT)), RERENDER_DELAY)();
+          updatePosts(pictures.toSorted(() => 0.5 - Math.random()).slice(0, POST_COUNT));
           break;
 
         case 'filter-discussed':
-          debounce(() => updatePosts(pictures.toSorted((pictureA, pictureB) => pictureB.comments.length - pictureA.comments.length)), RERENDER_DELAY)();
+          updatePosts(pictures.toSorted((pictureA, pictureB) => pictureB.comments.length - pictureA.comments.length));
           break;
       }
     }
   });
 };
 
 export {onChangeFilterPosts};
+
diff --git a/js/form-validation.js b/js/form-validation.js
@@ -1,5 +1,6 @@
 import {sendData} from './api.js';
 import {showError, showSuccess} from './notifications.js';
+import {closeUploadForm} from './upload-photo-form.js';
 
 const MAX_HASHTAGS = 5;
 const MAX_COMMENT_LENGTH = 140;
@@ -14,7 +15,6 @@ const hashtagsInputElement = imgUploadFormElement.querySelector('.text__hashtags
 const descriptionInutElement = imgUploadFormElement.querySelector('.text__description');
 const hashtagRegex = /^#[a-zа-яё0-9]{1,19}$/i;
 
-
 //Создали объект и передали конфиг
 const pristine = new Pristine(imgUploadFormElement, {
   classTo: 'img-upload__field-wrapper',
@@ -25,7 +25,7 @@ const pristine = new Pristine(imgUploadFormElement, {
 //Проверка длины комментария
 const validatesCommentLength = (value) => value.length >= 0 && value.length <= MAX_COMMENT_LENGTH;
 
-const getValues = (value) => value.trim().split(' ');
+const getValues = (value) => value.trim().split(/ +/g);
 
 //Проверка валиден ли хэштег
 const validatesHashtagWithRegex = (value) => {
@@ -52,27 +52,25 @@ const unblockSubmitButton = () => {
   submitButtonElement.disabled = false;
 };
 
-const setUserFormSubmit = (onSuccess) => {
-  imgUploadFormElement.addEventListener('submit', (evt) => {
-    evt.preventDefault();
-    const isValid = pristine.validate(); // Проверка валидности формы
-
-    if (isValid) {
-      blockSubmitButton();
-      const formData = new FormData(evt.target);
-      const sendDataPromise = sendData(formData);
-      sendDataPromise
-        .then(() => {
-          imgUploadFormElement.reset();
-          showSuccess();
-          onSuccess();
-        })
-        .catch(() => {
-          showError(errorElement);
-        })
-        .finally(unblockSubmitButton);
-    }
-  });
+const setUserFormSubmit = (evt) => {
+  evt.preventDefault();
+  const isValid = pristine.validate();
+
+  if (isValid) {
+    blockSubmitButton();
+    const formData = new FormData(evt.target);
+    const sendDataPromise = sendData(formData);
+    sendDataPromise
+      .then(() => {
+        imgUploadFormElement.reset();
+        showSuccess();
+        closeUploadForm();
+      })
+      .catch(() => {
+        showError(errorElement);
+      })
+      .finally(unblockSubmitButton);
+  }
 };
 
 const resetValidator = () => pristine.reset();

diff --git a/js/full-size-picture.js b/js/full-size-picture.js
@@ -1,4 +1,5 @@
 import {renderComments} from './comments.js';
+
 const bigPictureElement = document.body.querySelector('.big-picture');
 const imageElement = bigPictureElement.querySelector('img');
 const likesElement = bigPictureElement.querySelector('.likes-count');

diff --git a/js/main.js b/js/main.js
@@ -1,11 +1,12 @@
-import {openUploadForm, closeUploadForm} from './upload-photo-form.js';
-import {setUserFormSubmit} from './form-validation.js';
+import {openUploadForm} from './upload-photo-form.js';
 import {getData} from './api.js';
 import {createFragment} from './thumbnails.js';
 import {renderModal} from './modal.js';
 import {showDataError} from './notifications.js';
 import {onChangeFilterPosts} from './filter.js';
-import './avatar.js';
+import {onFileInputChange} from './avatar.js';
+import {debounce} from './util.js';
+const RERENDER_DELAY = 500;
 
 const ERROR_DISPLAY_TIME = 5000;
 const templateDataErrorElement = document.querySelector('#data-error').content.querySelector('.data-error');
@@ -15,19 +16,21 @@ const imgFiltersElement = document.querySelector('.img-filters');
 
 openUploadForm();
 
-getData()
-  .then((posts) => {
+async function loadPosts() {
+  try {
+    const posts = await getData();
     createFragment(posts);
     renderModal(posts);
-    imgFiltersElement.classList.remove('img-filters--inactive');
     onChangeFilterPosts(posts);
-  })
-  .catch(() => {
+    imgFiltersElement.classList.remove('img-filters--inactive');
+  } catch {
     showDataError(dataErrorElement);
     setTimeout(() => {
       dataErrorElement.remove();
     }, ERROR_DISPLAY_TIME);
-  });
-
+  }
+}
 
-setUserFormSubmit(closeUploadForm);
+const loadContent = debounce(loadPosts, RERENDER_DELAY);
+loadContent();
+onFileInputChange();
diff --git a/js/modal.js b/js/modal.js
@@ -7,7 +7,6 @@ const renderModal = (posts) => {
   const picturesParentElement = document.querySelector('.pictures');
   const pictureCloseButtonElement = bigPictureElement.querySelector('.big-picture__cancel');
 
-
   //Функция-обработчик закрытия модалки ESC
   const onModalEscKeyDown = (evt) => {
     if (isEscapeKey(evt)) {

diff --git a/js/notifications.js b/js/notifications.js
@@ -17,48 +17,68 @@ const showDataError = (error) => {
   bodyElement.append(fragmentElement);
 };
 
-// Функция для удаления сообщения
-const closeMessageBox = (element) => {
-  if (element) {
-    element.remove(); // Удаляем элемент
-  }
+// Функция для удаления сообщения и обработчиков
+const closeMessageBox = (element, onEscClick, onOverlayClick) => {
+  element.remove();
+  document.removeEventListener('keydown', onEscClick);
+  document.removeEventListener('click', onOverlayClick);
 };
 
 // Обработчик закрытия окна сообщения по клику
-const onClickCloseMessage = (element) => {
-  closeMessageBox(element);
+const onClickCloseMessage = (element, onEscClick, onOverlayClick) => {
+  closeMessageBox(element, onEscClick, onOverlayClick);
 };
 
 // Обработчик закрытия окна сообщения по Esc
-const onEscCloseMessage = (evt, element) => {
-  if(isEscapeKey(evt)) {
-    closeMessageBox(element);
+function onEscCloseMessage(evt, element, onEscClick, onOverlayClick) {
+  if (isEscapeKey(evt)) {
+    closeMessageBox(element, onEscClick, onOverlayClick);
   }
-};
+}
 
 // Обработчик закрытия окна сообщения по нажатию на оверлэй
-const onOverlayClick = (evt, messageBlock, element) => {
-  if(!messageBlock.contains(evt.target)) {
-    closeMessageBox(element);
+function onOverlayCloseMessage(evt, messageBlock, element, onEscClick, onOverlayClick) {
+  if (!messageBlock.contains(evt.target)) {
+    closeMessageBox(element, onEscClick, onOverlayClick);
   }
-};
+}
 
-//Показ сообщения об ошибке отправки данных
+// Показ сообщения об ошибке
 const showError = () => {
   fragmentElement.appendChild(errorElement);
   bodyElement.append(fragmentElement);
-  errorButtonElement.addEventListener('click', () => onClickCloseMessage(errorElement));
-  document.addEventListener('keydown', (evt) => onEscCloseMessage(evt, errorElement));
-  document.addEventListener('click', (evt) => onOverlayClick(evt, errorBlockElement, errorElement));
+
+  // Обработчики для Esc и клика на оверлэй
+  function onEscClick(evt) {
+    onEscCloseMessage(evt, errorElement, onEscClick, onOverlayClick);
+  }
+
+  function onOverlayClick(evt) {
+    onOverlayCloseMessage(evt, errorBlockElement, errorElement, onEscClick, onOverlayClick);
+  }
+
+  errorButtonElement.addEventListener('click', () => onClickCloseMessage(errorElement, onEscClick, onOverlayClick));
+  document.addEventListener('keydown', onEscClick);
+  document.addEventListener('click', onOverlayClick);
 };
 
-//Показ сообщения об успехе отправки данных
+// Показ сообщения об успехе
 const showSuccess = () => {
   fragmentElement.appendChild(successElement);
   bodyElement.append(fragmentElement);
-  successButtonElement.addEventListener('click', () => onClickCloseMessage(successElement));
-  document.addEventListener('keydown', (evt) => onEscCloseMessage(evt, successElement));
-  document.addEventListener('click', (evt) => onOverlayClick(evt, successBlockElement, successElement));
+
+  // Обработчики для Esc и клика на оверлэй
+  function onEscClick(evt) {
+    onEscCloseMessage(evt, successElement, onEscClick, onOverlayClick);
+  }
+
+  function onOverlayClick(evt) {
+    onOverlayCloseMessage(evt, successBlockElement, successElement, onEscClick, onOverlayClick);
+  }
+
+  successButtonElement.addEventListener('click', () => onClickCloseMessage(successElement, onEscClick, onOverlayClick));
+  document.addEventListener('keydown', onEscClick);
+  document.addEventListener('click', onOverlayClick);
 };
 
 export {showDataError, showError, showSuccess};
diff --git a/js/upload-photo-form.js b/js/upload-photo-form.js
@@ -1,6 +1,6 @@
 import {isEscapeKey} from './util.js';
 import {onSliderEffectsChange, resetPhotoEditor} from './photo-editor.js';
-import { resetValidator } from './form-validation.js';
+import {resetValidator, setUserFormSubmit} from './form-validation.js';
 
 const bodyElement = document.body;
 const imgUploadFormElement = bodyElement.querySelector('.img-upload__form');
@@ -11,7 +11,7 @@ const imgUploadOverlay = imgUploadFormElement.querySelector('.img-upload__overla
 const buttonUploadCancelElement = imgUploadFormElement.querySelector('.img-upload__cancel');
 const effectsElement = imgUploadFormElement.querySelector('.img-upload__effects');
 
-//!!Функция-обработчик закрытия формы по ESC
+//Функция-обработчик закрытия формы по ESC
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
@@ -31,24 +31,25 @@ const onDocumentKeydown = (evt) => {
   }
 };
 
-//!!Функция закрытия формы по нажатию на кнопку
+//Функция закрытия формы по нажатию на кнопку
 const onCloseButtonClick = () => closeUploadForm();
 
 //Закрытие формы загрузки
 function closeUploadForm() {
-  imgUploadOverlay.classList.add('hidden');//
-  bodyElement.classList.remove('modal-open');//
-  document.removeEventListener('keydown', onDocumentKeydown);//
-  buttonUploadCancelElement.removeEventListener('click', onCloseButtonClick);//
+  imgUploadOverlay.classList.add('hidden');
+  bodyElement.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+  buttonUploadCancelElement.removeEventListener('click', onCloseButtonClick);
   resetPhotoEditor();
   resetValidator();
 }
 
 //Открытие формы загрузки
 const openUploadForm = () => {
   imgUploadFormInputElement.addEventListener('change', () => {
-    imgUploadOverlay.classList.remove('hidden');//
-    bodyElement.classList.add('modal-open');//
+    imgUploadOverlay.classList.remove('hidden');
+    bodyElement.classList.add('modal-open');
+    imgUploadFormElement.addEventListener('submit', setUserFormSubmit);
     document.addEventListener('keydown', onDocumentKeydown);
     buttonUploadCancelElement.addEventListener('click', onCloseButtonClick);
     effectsElement.addEventListener('change', onSliderEffectsChange);

diff --git a/js/util.js b/js/util.js
@@ -24,21 +24,12 @@ const createUniqueRandomInteger = (min, max) => {
 //Функция проверяющая клавиша esc или нет
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-function debounce (callback, timeoutDelay = 500) {
-  // Используем замыкания, чтобы id таймаута у нас навсегда приклеился
-  // к возвращаемой функции с setTimeout, тогда мы его сможем перезаписывать
+function debounce (callback, timeoutDelay) {
   let timeoutId;
 
   return (...rest) => {
-    // Перед каждым новым вызовом удаляем предыдущий таймаут,
-    // чтобы они не накапливались
     clearTimeout(timeoutId);
-
-    // Затем устанавливаем новый таймаут с вызовом колбэка на ту же задержку
     timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
-
-    // Таким образом цикл «поставить таймаут - удалить таймаут» будет выполняться,
-    // пока действие совершается чаще, чем переданная задержка timeoutDelay
   };
 }