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

js/big-picture.js

@@ -0,0 +1,74 @@
+const bigPictureElement = document.querySelector('.big-picture');
+const bigPictureImg = bigPictureElement.querySelector('.big-picture__img img');
+const likesCount = bigPictureElement.querySelector('.likes-count');
+const commentCount = bigPictureElement.querySelector('.social__comment-shown-count');
+const totalCommentCount = bigPictureElement.querySelector('.social__comment-total-count');
+const socialCaption = bigPictureElement.querySelector('.social__caption');
+const socialComments = bigPictureElement.querySelector('.social__comments');
+const commentCountBlock = bigPictureElement.querySelector('.social__comment-count');
+const commentsLoader = bigPictureElement.querySelector('.comments-loader');
+const cancelButton = bigPictureElement.querySelector('.big-picture__cancel');
+
+const createCommentElement = ({ avatar, name, message }) => {
+  const commentItem = document.createElement('li');
+  commentItem.classList.add('social__comment');
+
+  const img = document.createElement('img');
+  img.classList.add('social__picture');
+  img.src = avatar;
+  img.alt = name;
+  img.width = 35;
+  img.height = 35;
+
+  const p = document.createElement('p');
+  p.classList.add('social__text');
+  p.textContent = message;
+
+  commentItem.appendChild(img);
+  commentItem.appendChild(p);
+
+  return commentItem;
+};
+
+const openBigPicture = (pictureData) => {
+  bigPictureElement.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+
+  bigPictureImg.src = pictureData.url;
+  bigPictureImg.alt = pictureData.description;
+  likesCount.textContent = pictureData.likes;
+  socialCaption.textContent = pictureData.description;
+
+  socialComments.innerHTML = '';
+
+  const comments = pictureData.comments;
+  totalCommentCount.textContent = comments.length;
+  commentCount.textContent = Math.min(5, comments.length);
+
+  comments.forEach((comment) => {
+    const commentElement = createCommentElement(comment);
+    socialComments.appendChild(commentElement);
+  });
+
+  commentCountBlock.classList.add('hidden');
+  commentsLoader.classList.add('hidden');
+};
+
+const closeBigPicture = () => {
+  bigPictureElement.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+};
+
+const initBigPictureHandlers = () => {
+  cancelButton.addEventListener('click', () => {
+    closeBigPicture();
+  });
+
+  document.addEventListener('keydown', (evt) => {
+    if (evt.key === 'Escape' && !bigPictureElement.classList.contains('hidden')) {
+      closeBigPicture();
+    }
+  });
+};
+
+export { openBigPicture, closeBigPicture, initBigPictureHandlers };

js/main.js

@@ -2,7 +2,9 @@
 
 import { getArrayMiniatures } from './createArrayMiniatures.js';
 import { renderPictures } from './pictures.js';
+import { initBigPictureHandlers } from './big-picture.js';
 
 const pictures = getArrayMiniatures();
 renderPictures(pictures);
+initBigPictureHandlers();
 

js/pictures.js

@@ -1,17 +1,10 @@
+import { openBigPicture } from './big-picture.js';
+
 const picturesContainer = document.querySelector('.pictures');
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 
-/**
- * Создает DOM-элемент миниатюры на основе шаблона #picture
- * @param {Object} data - Объект с данными фотографии
- * @param {string} data.url - Адрес изображения
- * @param {string} data.description - Описание изображения
- * @param {number} data.likes - Количество лайков
- * @param {Array} data.comments - Массив комментариев
- * @returns {HTMLElement} - DOM-элемент миниатюры
- */
-
-const createPictureElement = ({ url, description, likes, comments }) => {
+const createPictureElement = (picture) => {
+  const { url, description, likes, comments } = picture;
   const pictureElement = pictureTemplate.cloneNode(true);
 
   const pictureImg = pictureElement.querySelector('.picture__img');
@@ -21,13 +14,14 @@ const createPictureElement = ({ url, description, likes, comments }) => {
   pictureElement.querySelector('.picture__likes').textContent = likes;
   pictureElement.querySelector('.picture__comments').textContent = comments.length;
 
+  pictureElement.addEventListener('click', (evt) => {
+    evt.preventDefault();
+    openBigPicture(picture);
+  });
+
   return pictureElement;
 };
 
-/**
- * Отрисовывает миниатюры фотографий в блок .pictures
- * @param {Array} pictures - Массив объектов с данными фотографий
- */
 const renderPictures = (pictures) => {
   const fragment = document.createDocumentFragment();