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

js/ full-size-picture.js

@@ -0,0 +1,18 @@
+import {renderComments} from './comments';
+const bigPictureElement = document.body.querySelector('.big-picture');
+const imageElement = bigPictureElement.querySelector('img');
+const likesElement = bigPictureElement.querySelector('.likes-count');
+const descriptionElement = bigPictureElement.querySelector('.social__caption');
+const commentTotalCountElement = bigPictureElement.querySelector('.social__comment-total-count');
+
+
+//Функция отрисовки поста в молаьном окне
+const renderBigPicture = (picture) => {
+  imageElement.src = picture.url;
+  likesElement.textContent = picture.likes;
+  commentTotalCountElement.textContent = picture.comments.length;
+  descriptionElement.textContent = picture.description;
+  renderComments(picture);
+};
+
+export {renderBigPicture};

js/comments

@@ -0,0 +1,30 @@
+const сommentsListElement = document.querySelector('.social__comments');
+const socialCommentElement = сommentsListElement.querySelector('.social__comment');
+const fragmentElement = document.createDocumentFragment();
+
+//Функция создания комментария
+const renderComment = (comment) => {
+  const clonedCommentElement = socialCommentElement.cloneNode(true);
+  const socialPicture = clonedCommentElement.querySelector('.social__picture');
+  const socialText = clonedCommentElement.querySelector('.social__text');
+  socialPicture.src = comment.avatar;
+  socialPicture.alt = comment.name;
+  socialText.textContent = comment.message;
+  return clonedCommentElement;
+};
+
+//Отрисуем массив комментариев для каждого поста
+const renderComments = (picture) => {
+  const postСomments = picture.comments;
+  postСomments.forEach((comment) => {
+    const commentElement = renderComment(comment);
+    сommentsListElement.appendChild(commentElement);
+    fragmentElement.appendChild(commentElement);
+  });
+
+  сommentsListElement.innerHTML = '';
+  сommentsListElement.appendChild(fragmentElement);
+};
+
+
+export {renderComments};

js/data.js

@@ -113,5 +113,5 @@ const createPost = () => {
 const createPosts = () =>
   Array.from({length: POST_COUNT}, createPost);
 
-export {createPosts};
+export {createPosts, createComment};
 

js/main.js

@@ -1,5 +1,9 @@
 import {createPosts} from './data.js';
 import {createFragment} from './thumbnails.js';
+import {renderModal} from './modal.js';
+
 
 const posts = createPosts();
 createFragment(posts);
+renderModal(posts);
+

js/modal.js

@@ -0,0 +1,66 @@
+import {isEscapeKey} from './util.js';
+import {renderBigPicture} from './ full-size-picture.js';
+
+const renderModal = (posts) => {
+  const bigPictureElement = document.body.querySelector('.big-picture');
+  const picturesParentElement = document.querySelector('.pictures');
+  const pictureCloseButton = bigPictureElement.querySelector('.big-picture__cancel');
+  const socialCommentCount = bigPictureElement.querySelector('.social__comment-count');
+  const commentsLoader = bigPictureElement.querySelector('.comments-loader');
+
+  //Функция-обработчик закрытия модалки ESC
+  const onModalEscKeyDown = (evt) => {
+    if (isEscapeKey(evt)) {
+      evt.preventDefault();
+      closeMоdal();
+    }
+  };
+
+  //Функция закрытия модалки
+  function closeMоdal () {
+    bigPictureElement.classList.add('hidden');
+    //Удаляем обработчик закрытия превью ESC
+    document.removeEventListener('keydown', onModalEscKeyDown);
+    //Удаляем класс,  чтобы контейнер с фото прокручивался
+    document.body.classList.remove('modal-open');
+  }
+
+  //Функция закрытия модалки по нажатию на кнопку
+  const onCloseButtonClick = (button) => {
+    button.addEventListener('click', (evt) => {
+      evt.preventDefault();
+      closeMоdal();
+    });
+  };
+
+  onCloseButtonClick(pictureCloseButton);
+
+  //Функция открытия модалки
+  const openModal = () => {
+    bigPictureElement.classList.remove('hidden');
+    //Добавляем обработчик закрытия превью ESC
+    document.addEventListener('keydown', onModalEscKeyDown);
+    //Добавляем класс, чтобы контейнер с фото не прокручивался
+    document.body.classList.add('modal-open');
+  };
+
+  //Функция обработчика клика, показывает модалку
+  const onThumbnailClick = (evt) => {
+    const currentPictureElement = evt.target.closest('.picture');
+    if (currentPictureElement) {
+      evt.preventDefault();
+      //Находим элемент из массива постов с таким же id как у текущего элемента
+      const foundedPictureByIdElement = posts.find((picture) => picture.id === Number(currentPictureElement.dataset.pictureId));
+      renderBigPicture(foundedPictureByIdElement);
+      openModal();
+      // Скрываем блоки счетчика комментариев и загрузки новых комментариев
+      socialCommentCount.classList.add('hidden');
+      commentsLoader.classList.add('hidden');
+    }
+  };
+
+  picturesParentElement.addEventListener('click', onThumbnailClick);
+};
+
+export {renderModal};
+

js/thumbnails.js

@@ -6,8 +6,8 @@ const fragmentElement = document.createDocumentFragment();
 const createThumbnail = (picture) => {
   const thumbnailElement = templateElement.cloneNode(true);
   const imageElement = thumbnailElement.querySelector('.picture__img');
-  thumbnailElement.href = picture.url;
-  thumbnailElement.dataset.id = picture.id;
+  thumbnailElement.href = '#';
+  thumbnailElement.dataset.pictureId = picture.id;//Записываем id из данных в data-атрибут
   imageElement.src = picture.url;
   imageElement.alt = picture.description;
   thumbnailElement.querySelector('.picture__likes').textContent = picture.likes;
@@ -16,13 +16,14 @@ const createThumbnail = (picture) => {
 };
 
 //Проходимся по массиву данных и создадим первью для каждого элемента функцией
-const createFragment = (data) => {
-  data.forEach((picture) => {
+const createFragment = (posts) => {
+  posts.forEach((picture) => {
     const thumbnailElement = createThumbnail(picture);
     fragmentElement.appendChild(thumbnailElement);
   });
 
   containerElement.appendChild(fragmentElement);
 };
 
+
 export {createFragment};

js/util.js

@@ -21,4 +21,7 @@ const createUniqueRandomInteger = (min, max) => {
   };
 };
 
-export {getRandomInteger, createUniqueRandomInteger};
+//Функция проверяющая клавиша esc или нет
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+export {getRandomInteger, createUniqueRandomInteger, isEscapeKey};