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

js/big-picture.js

@@ -0,0 +1,69 @@
+import { isEscapeKey } from './util.js';
+
+const bigPictureElement = document.querySelector('.big-picture');
+const bodyElement = document.querySelector('body');
+const commentCountElement = bigPictureElement.querySelector('.social__comment-count');
+const commentListElement = bigPictureElement.querySelector('.social__comments');
+const commentsLoaderElement = bigPictureElement.querySelector('.comments-loader');
+const cancelButtonElement = bigPictureElement.querySelector('.big-picture__cancel');
+const liElement = commentListElement.querySelector('li');
+
+const createComment = ({ avatar, message, name}) => {
+  const comment = liElement.cloneNode(true);
+
+  comment.querySelector('.social__picture').src = avatar;
+  comment.querySelector('.social__picture').alt = name;
+  comment.querySelector('.social__text').textContent = message;
+
+  return comment;
+};
+
+const showComments = (comments) => {
+  commentListElement.innerHTML = '';
+
+  const fragment = document.createDocumentFragment();
+  comments.forEach ((item) => {
+    const comment = createComment(item);
+    fragment.append(comment);
+  });
+
+  commentListElement.append(fragment);
+};
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey) {
+    evt.preventDefault();
+    hideBigPicture();
+  }
+};
+
+function hideBigPicture () {
+  bigPictureElement.classList.add('hidden');
+  bodyElement.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+}
+
+const onCancelButtonClick = () => {
+  hideBigPicture();
+};
+
+const showPictureDetails = ({ url, likes, description }) => {
+  bigPictureElement.querySelector('.big-picture__img img').src = url;
+  bigPictureElement.querySelector('.likes-count').textContent = likes;
+  bigPictureElement.querySelector('.social__caption').textContent = description;
+};
+
+const showBigPicture = (data) => {
+  bigPictureElement.classList.remove('hidden');
+  bodyElement.classList.add('modal-open');
+  commentsLoaderElement.classList.add('hidden');
+  commentCountElement.classList.add('hidden');
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  showPictureDetails(data);
+  showComments(data.comments);
+};
+
+cancelButtonElement.addEventListener('click', onCancelButtonClick);
+
+export { showBigPicture };

js/gallery.js

@@ -0,0 +1,19 @@
+import { showThumbnails } from './thumbnail.js';
+import { showBigPicture } from './big-picture.js';
+
+const container = document.querySelector('.pictures');
+
+const showGallery = (pictures) => {
+  container.addEventListener('click', (evt) => {
+    const thumbnail = evt.target.closest('[data-thumbnail-id]');
+    if (thumbnail) {
+      evt.preventDefault();
+      const pictureId = +thumbnail.dataset.thumbnailId;
+      const picture = pictures.find((item) => item.id === pictureId);
+      showBigPicture(picture);
+    }
+  });
+  showThumbnails(pictures, container);
+};
+
+export { showGallery };

js/main.js

@@ -1,4 +1,5 @@
 import { getImages } from './data.js';
-import { showThumbnails } from './thumbnail.js';
+import { showGallery } from './gallery.js';
+
+showGallery(getImages());
 
-showThumbnails(getImages());

js/thumbnail.js

@@ -2,13 +2,14 @@ const container = document.querySelector('.pictures');
 const templateFragment = document.querySelector('#picture').content;
 const template = templateFragment.querySelector('.picture');
 
-const createThumbnail = ({url, description, comments, likes}) => {
+const createThumbnail = ({url, description, comments, likes, id}) => {
   const thumbnail = template.cloneNode(true);
 
   thumbnail.querySelector('.picture__img').src = url;
   thumbnail.querySelector('.picture__img').alt = description;
   thumbnail.querySelector('.picture__comments').textContent = comments.length;
   thumbnail.querySelector('.picture__likes').textContent = likes;
+  thumbnail.dataset.thumbnailId = id;
 
   return thumbnail;
 };
@@ -22,4 +23,4 @@ const showThumbnails = (pictures) => {
   container.append(fragment);
 };
 
-export { showThumbnails };
+export { showThumbnails} ;

js/util.js

@@ -16,4 +16,6 @@ const createIdGenerator = () => {
   };
 };
 
-export { getRandomInteger, getRandomArrayElement, createIdGenerator };
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+export { getRandomInteger, getRandomArrayElement, createIdGenerator, isEscapeKey };