переделывает логику открытия большого изображения для открытия через обрабочик на контейнере всех изображений

Author: YouAreNotReady

js/image-upload.js

@@ -95,7 +95,7 @@ const imageUploadSubmitHandler = async (evt) => {
     try {
       const formData = new FormData(evt.target);
       blockSubmitButton();
-      await uploadData(formData);
+      uploadData(formData);
       pristine.reset();
     } catch (error) {
       showError();
@@ -106,11 +106,11 @@ const imageUploadSubmitHandler = async (evt) => {
   imageUploadCloseButton.removeEventListener('click', uploadFormCloseHandler);
 };
 
-const setImageUploadFormSubmit = () => {
+const initForm = () => {
   imageUploadForm.addEventListener('submit', imageUploadSubmitHandler);
 };
 
 pristine.addValidator(imageUploadForm.querySelector('.text__hashtags'), validateAllHashtags, validateHashtagError);
 pristine.addValidator(imageUploadForm.querySelector('.text__description'), validateComment, validationCommentError);
 
-export { setImageUploadFormSubmit, uploadFormCloseHandler, unblockSubmitButton, documentKeydownHandler};
+export { initForm, uploadFormCloseHandler, unblockSubmitButton, documentKeydownHandler};

js/main.js

@@ -1,6 +1,6 @@
-import { renderPictures } from './pictures-preview-loader.js';
+import { renderPictures, setPicturesContainerClickHandler } from './pictures-preview-loader.js';
 import { loadData, showError } from './api.js';
-import { setImageUploadFormSubmit } from './image-upload.js';
+import { initForm } from './image-upload.js';
 import { showFilter, setFilterClickHandler } from './image-filtration.js';
 
 import './show-image-fullscreen.js';
@@ -9,13 +9,19 @@ import './image-scaling.js';
 import './image-effect.js';
 import './image-filtration.js';
 
-try {
-  const picturesObjects = await loadData();
-  renderPictures(picturesObjects);
-  showFilter();
-  setFilterClickHandler(picturesObjects);
-} catch {
-  showError();
-}
 
-setImageUploadFormSubmit();
+const init = async () => {
+  try {
+    const picturesData = await loadData();
+    renderPictures(picturesData);
+    setPicturesContainerClickHandler(picturesData);
+    showFilter();
+    setFilterClickHandler(picturesData);
+  } catch {
+    showError();
+  }
+};
+
+init();
+initForm();
+

js/pictures-preview-loader.js

@@ -13,24 +13,32 @@ const renderPictures = (usersPictures) => {
   const existingPictures = picturesContainer.querySelectorAll('.picture');
   existingPictures.forEach((picture) => picture.remove());
 
-  usersPictures.forEach(({ url, description, likes, comments }) => {
+  usersPictures.forEach(({ id, url, description, likes, comments }) => {
     const pictureElement = pictureTemplate.cloneNode(true);
 
+    pictureElement.dataset.id = id;
     pictureElement.querySelector('.picture__img').src = url;
     pictureElement.querySelector('.picture__img').alt = description;
     pictureElement.querySelector('.picture__likes').textContent = likes;
     pictureElement.querySelector('.picture__comments').textContent = comments.length;
 
-    pictureElement.addEventListener('click', (evt) => {
-      evt.preventDefault();
-      openPicturePopup(url, description, likes, comments);
-    });
-
     picturesFragment.appendChild(pictureElement);
-
   });
 
   picturesContainer.appendChild(picturesFragment);
 };
 
-export { picturesContainer, renderPictures};
+const setPicturesContainerClickHandler = (pictures) => {
+  picturesContainer.addEventListener('click', (evt) => {
+    const currentPictureNode = evt.target.closest('.picture');
+    const currentPictureNodeId = currentPictureNode.dataset.id;
+
+    const currentPicture = pictures.find((picture) => picture.id === Number(currentPictureNodeId));
+
+    if (currentPicture) {
+      openPicturePopup(currentPicture);
+    }
+  });
+};
+
+export { picturesContainer, renderPictures, setPicturesContainerClickHandler };

js/show-image-fullscreen.js

@@ -27,16 +27,17 @@ function closePicturePopup() {
   document.removeEventListener('keydown', documentKeydownHandler);
 }
 
-const openPicturePopup = (url, description, likes, comments) => {
+const openPicturePopup = (pictureData) => {
   document.body.classList.add('modal-open');
 
   picture.classList.remove('hidden');
-  picture.querySelector('img').src = url;
-  pictureLikesCount.textContent = likes;
-  pictureDescription.textContent = description;
+
+  picture.querySelector('img').src = pictureData.url;
+  pictureLikesCount.textContent = pictureData.likes;
+  pictureDescription.textContent = pictureData.description;
   pictureCloseButton.addEventListener('click', closePicturePopup);
 
-  showComments(comments);
+  showComments(pictureData.comments);
 
   document.addEventListener('keydown', documentKeydownHandler);
 };