Merge pull request #16 from margarita0206/module12-task2

htmlacademy-javascript · Aug 5, 2024 · 0e42456 · 0e42456
2 parents a0d9258 + dcd1c02
commit 0e42456
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 33 deletions.
diff --git a/js/effects-img.js b/js/effects-img.js
@@ -5,7 +5,7 @@ import {
 } from './constant.js';
 
 const modalElement = document.querySelector('.img-upload');
-const imgElement = modalElement.querySelector('.img-upload__preview');
+const imgElement = modalElement.querySelector('.img-upload__preview img');
 const effectsElement = modalElement.querySelector('.effects');
 const slider = modalElement.querySelector('.effect-level__slider');
 const sliderContainer = modalElement.querySelector('.img-upload__effect-level');

diff --git a/js/form-modal.js b/js/form-modal.js
@@ -33,6 +33,7 @@ const closeRedactForm = () => {
   imgUploadInput.value = '';
   document.removeEventListener('keydown', onDocumentKeydown);
   resetValidation();
+  imgUploadForm.reset();
 };
 
 const toggleSubmitButton = (isDisabled) => {
@@ -52,14 +53,14 @@ imgUploadCancelButton.addEventListener('click', () => {
 
 const isErrorMessageShown = () => Boolean(document.querySelector('.error'));
 
-function onDocumentKeydown(evt) {
-  if(evt.isEscapeKey && !isErrorMessageShown()) {
+function onDocumentKeydown (evt) {
+  if (isEscapeKey(evt) && !isErrorMessageShown()) {
     evt.preventDefault();
     closeRedactForm();
   }
 }
 
-fieldComments.addEventListener('.keydown', (evt) => {
+fieldComments.addEventListener('keydown', (evt) => {
   if(isEscapeKey(evt)) {
     evt.stopPropagation();
   }
@@ -75,12 +76,12 @@ const setOnFormSubmit = (callback) => {
   imgUploadForm.addEventListener('submit', async (evt) => {
     evt.preventDefault();
 
-    if (isValid) {
+    if (isValid()) {
       toggleSubmitButton(true);
       await callback(new FormData(imgUploadForm));
       toggleSubmitButton();
     }
   });
 };
 
-export { setOnFormSubmit, imgUploadForm };
+export { setOnFormSubmit, closeRedactForm };
diff --git a/js/form-validate.js b/js/form-validate.js
@@ -74,7 +74,7 @@ const resetValidation = () => {
   pristine.reset();
 };
 
-const isValid = pristine.validate();
+const isValid = () => pristine.validate();
 initEffect();
 
 export { isValid, resetValidation };
diff --git a/js/load-pictures.js b/js/load-pictures.js
@@ -1 +1,19 @@
+import { FILE_TYPES } from './constant.js';
 
+const imgUploadPreview = document.querySelector('.img-upload__preview img');
+const fileChooser = document.querySelector('.img-upload__start input[type=file]');
+
+const loadingPicture = () => {
+  fileChooser.addEventListener('change', () => {
+    const file = fileChooser.files[0];
+    const fileName = file.name.toLowerCase();
+
+    const matches = FILE_TYPES.some((it) => fileName.endsWith(it));
+
+    if (matches) {
+      imgUploadPreview.src = URL.createObjectURL(file);
+    }
+  });
+};
+
+export { loadingPicture };
diff --git a/js/main.js b/js/main.js
@@ -1,14 +1,14 @@
 import { generateThumbnails } from './thumbnail.js';
 import { getData, sendData } from './api.js';
 import { showAlert, debounce } from './utils.js';
-import { setOnFormSubmit, imgUploadForm } from './form-modal.js';
+import { setOnFormSubmit, closeRedactForm } from './form-modal.js';
 import { showMessageSuccess, showMessageError } from './success-error.js';
 import { init as initFilter, getFilteredPictures } from './filters.js';
 
 setOnFormSubmit(async (data) => {
   try {
     await sendData(data);
-    imgUploadForm();
+    closeRedactForm();
     showMessageSuccess();
   } catch {
     showMessageError();

diff --git a/js/success-error.js b/js/success-error.js
@@ -7,50 +7,46 @@ const errorFragment = document.createDocumentFragment();
 
 const body = document.querySelector('body');
 
+const onEscapeKeydownSuccess = (evt) => {
+  if (isEscapeKey(evt)) {
+    document.querySelector('.success').remove();
+    document.removeEventListener('keydown', onEscapeKeydownSuccess);
+  }
+};
+
 const showMessageSuccess = () => {
   const messageSuccess = successTemplate.cloneNode(true);
   successFragment.appendChild(messageSuccess);
   body.appendChild(successFragment);
   const buttonSuccess = document.querySelector('.success__button');
   const sectionSuccess = document.querySelector('.success');
-  const successInner = document.querySelector('.success__inner');
-  document.addEventListener('keydown', (evt) => {
-    if (isEscapeKey(evt)) {
-      sectionSuccess.remove();
-    }
-  });
-  sectionSuccess.addEventListener(('click'), (evt) => {
-    if (evt.target === buttonSuccess) {
-      sectionSuccess.remove();
-    }
-  });
+  document.addEventListener('keydown', onEscapeKeydownSuccess);
   sectionSuccess.addEventListener(('click'), (evt) => {
-    if (evt.target === successInner) {
+    if (evt.target === buttonSuccess || evt.target.classList.contains('success')) {
       sectionSuccess.remove();
+      document.removeEventListener('keydown', onEscapeKeydownSuccess);
     }
   });
 };
 
+const onEscapeKeydownError = (evt) => {
+  if (isEscapeKey(evt)) {
+    document.querySelector('.error').remove();
+    document.removeEventListener('keydown', onEscapeKeydownError);
+  }
+};
+
 const showMessageError = () => {
   const messageError = errorTemplate.cloneNode(true);
   errorFragment.appendChild(messageError);
   body.appendChild(errorFragment);
   const buttonError = document.querySelector('.error__button');
   const sectionError = document.querySelector('.error');
-  const errorInner = document.querySelector('.error__inner');
-  document.addEventListener('keydown', (evt) => {
-    if (isEscapeKey(evt)) {
-      sectionError.remove();
-    }
-  });
-  sectionError.addEventListener(('click'), (evt) => {
-    if (evt.target === buttonError) {
-      sectionError.remove();
-    }
-  });
+  document.addEventListener('keydown', onEscapeKeydownError);
   sectionError.addEventListener(('click'), (evt) => {
-    if (evt.target === errorInner) {
+    if (evt.target === buttonError || evt.target.classList.contains('error')) {
       sectionError.remove();
+      document.removeEventListener('keydown', onEscapeKeydownError);
     }
   });
 };

diff --git a/js/thumbnail.js b/js/thumbnail.js
@@ -9,7 +9,9 @@ const pictureTemplate = document.querySelector('#picture')
 
 const generateThumbnails = (picture) => {
   picturesContainer.querySelectorAll('.picture').forEach((element) => element.remove());
+
   const similarListFragment = document.createDocumentFragment();
+
   picture.forEach(({ id, url, description, likes, comments }) => {
     const pictureElement = pictureTemplate.cloneNode(true);
     pictureElement.querySelector('.picture__img').dataset.id = id;