Открывается и закрывается

js/big-picture-popup.js

@@ -0,0 +1,71 @@
+import { getPhotos } from './get-photos.js';
+import { hide, show } from './utils.js';
+const photos = getPhotos();
+const bigPhotoPopup = document.querySelector('.big-picture');
+const popupCancelElement = document.querySelector('.big-picture__cancel');
+
+function onEscapeKeydown(e) {
+  if (e.key === 'Escape') {
+    hidePhotoPopup();
+  }
+}
+
+function renderComments(photoId) {
+  const currentPhoto = photos.find((photo) => photo.id === Number(photoId));
+  const commentFragmentList = document.createDocumentFragment();
+  currentPhoto.comments.forEach((comment) => {
+    const commEl = document.createElement('li');
+    commEl.className = 'social__comment';
+
+    const imgEl = document.createElement('img');
+    imgEl.className = 'social__picture';
+    imgEl.src = comment.avatar;
+    imgEl.alt = comment.name;
+    imgEl.width = 35;
+    imgEl.height = 35;
+
+    const pEl = document.createElement('p');
+    pEl.className = 'social__text';
+    pEl.textContent = comment.message;
+
+    commEl.append(imgEl);
+    commEl.append(pEl);
+    commentFragmentList.append(commEl);
+
+  });
+
+  return commentFragmentList;
+
+}
+function hidePhotoPopup(e) {
+  e.preventDefault();
+  hide(bigPhotoPopup);
+  document.removeEventListener('keydown', onEscapeKeydown);
+  document.body.classList.remove('modal-open');
+}
+function showPhotoPopup() {
+  document.body.classList.add('modal-open');
+  show(bigPhotoPopup);
+
+  document.addEventListener('keydown', onEscapeKeydown);
+}
+function openBigPhotoPopup(photoId) {
+  showPhotoPopup();
+  const currentPhoto = photos.find((photo) => photo.id === Number(photoId));
+  if (currentPhoto) {
+    const comments = renderComments(photoId);
+    bigPhotoPopup.querySelector('.big-picture__img img').src = currentPhoto.url;
+    bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes.length;
+    bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
+    bigPhotoPopup.querySelector('.social__comment-total-count').textContent = currentPhoto.comments.length;
+    bigPhotoPopup.querySelector('.social__comments').innerHTML = '';
+    bigPhotoPopup.querySelector('.social__comments').append(comments);
+    bigPhotoPopup.querySelector('.social__caption').textContent = currentPhoto.description;
+    hide(bigPhotoPopup.querySelector('.social__comment-shown-count'));
+    hide(bigPhotoPopup.querySelector('.comments-loader'));
+  }
+}
+
+popupCancelElement.addEventListener('click', hidePhotoPopup);
+
+export { openBigPhotoPopup };

js/main.js

@@ -1,4 +1,13 @@
 import { renderPictures } from './render-pictures.js';
+import { openBigPhotoPopup } from './big-picture-popup.js';
 
 renderPictures();
 
+document.addEventListener('click', (e) => {
+  const currentPicture = e.target.closest('.picture');
+
+  if (currentPicture) {
+    e.preventDefault();
+    openBigPhotoPopup(currentPicture.dataset.photoId);
+  }
+});

js/render-pictures.js

@@ -1,7 +1,7 @@
 import { getPhotos } from './get-photos.js';
+const photos = getPhotos();
 
 function renderPictures() {
-  const photos = getPhotos();
   const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
   const picturesList = document.querySelector('.pictures');
 
@@ -12,6 +12,7 @@ function renderPictures() {
     const photoImg = photoElement.querySelector('img');
     photoImg.src = photo.url;
     photoImg.alt = photo.description;
+    photoElement.dataset.photoId = photo.id;
     photoElement.querySelector('.picture__comments').textContent = photo.comments.length;
     photoElement.querySelector('.picture__likes').textContent = photo.likes;
 

js/utils.js

@@ -4,6 +4,13 @@ function getRandomInt(min, max) {
   const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
   return randomInt;
 }
+
+function hide(elem) {
+  elem.classList.add('hidden');
+}
+function show(elem) {
+  elem.classList.remove('hidden');
+}
 function getUniqueId(min, max) {
   const receivedId = [];
 
@@ -23,4 +30,4 @@ function getRandomElement(elements) {
   return elements[getRandomInt(0, elements.length - 1)];
 }
 
-export { getRandomInt, getUniqueId, getRandomElement };
+export { getRandomInt, getUniqueId, getRandomElement, hide, show };