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

js/constant.js

@@ -1,12 +1,12 @@
-const MIN_POSTS_COUNT = 1;
-const MAX_POSTS_COUNT = 25;
-const AVATAR_MIN_COUNT = 1;
-const AVATAR_MAX_COUNT = 6;
-const LIKES_MIN_COUNT = 15;
-const LIKES_MAX_COUNT = 200;
-const COMMENT_MIN_COUNT = 0;
-const COMMENT_MAX_COUNT = 30;
-const COMMENT_MAX_ID = 500000;
+export const MIN_POSTS_COUNT = 1;
+export const MAX_POSTS_COUNT = 25;
+export const AVATAR_MIN_COUNT = 1;
+export const AVATAR_MAX_COUNT = 6;
+export const LIKES_MIN_COUNT = 15;
+export const LIKES_MAX_COUNT = 200;
+export const COMMENT_MIN_COUNT = 0;
+export const COMMENT_MAX_COUNT = 30;
+export const COMMENT_MAX_ID = 500000;
 
 const COMMENT_NAMES = [
   'Анна',
@@ -52,4 +52,8 @@ const DESCRIPTIONS = [
   'Этой фотографии описание не нужно'
 ];
 
-export {MAX_POSTS_COUNT, MIN_POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS};
+export {
+  COMMENT_NAMES,
+  POSTS_COMMENTS,
+  DESCRIPTIONS
+};

js/data.js

@@ -1,5 +1,16 @@
 import {
-  MAX_POSTS_COUNT, MIN_POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS
+  MAX_POSTS_COUNT,
+  MIN_POSTS_COUNT,
+  AVATAR_MIN_COUNT,
+  AVATAR_MAX_COUNT,
+  LIKES_MIN_COUNT,
+  LIKES_MAX_COUNT,
+  COMMENT_MIN_COUNT,
+  COMMENT_MAX_COUNT,
+  COMMENT_MAX_ID,
+  COMMENT_NAMES,
+  POSTS_COMMENTS,
+  DESCRIPTIONS
 } from './constant.js';
 
 import {

js/main.js

@@ -1,4 +1,9 @@
 import {randomPosts} from './data.js';
 import {generateThumbnails} from './thumbnail.js';
-generateThumbnails(randomPosts());
+import './modal-pictures.js';
 
+const currentPictures = randomPosts();
+
+generateThumbnails(currentPictures);
+
+export {currentPictures};

js/modal-pictures.js

@@ -0,0 +1,62 @@
+import { currentPictures } from './main.js';
+import { isEscapeKey } from './utils.js';
+
+const bigPicturesModal = document.querySelector('.big-picture');
+const body = document.querySelector('body');
+
+const closeBigPicturesButton = bigPicturesModal.querySelector('.big-picture__cancel');
+
+const fillDataBigPicture = (bigPicture, {url, likes, comments, description}) => {
+  bigPicture.querySelector('big-picture__img img').src = url;
+  bigPicture.querySelector('.likes-count').textContent = likes;
+  bigPicture.querySelector('.social__comment-total-count').textContent = comments.length;
+  bigPicture.querySelector('.social__caption').textContent = description;
+  bigPicture.querySelector('.social__comment-shown-count').textContent = comments.length <= 5 ? comments.length : 5;
+
+  const commentsList = bigPicture.querySelector('.social__comments');
+  const commentTemplate = document.querySelector('#comment').content.querySelector('.social__comment');
+  const commentFragment = document.createDocumentFragment();
+  for (let i = 0; i < comments.length; i++) {
+    const comment = commentTemplate.cloneNode(true);
+    comment.querySelector('.social__picture').src = comments[i].avatar;
+    comment.querySelector('.social__picture').alt = comments[i].name;
+    comment.querySelector('.social__text').textContent = comments[i].message;
+    commentFragment.append(comment);
+  }
+  commentsList.append(commentFragment);
+};
+
+const onDocumentKeydown = (evt) => {
+  if(isEscapeKey(evt)) {
+    evt.preventDefault();
+    bigPicturesModal.classList.add('hidden');
+  }
+};
+
+const openBigPictureWindow = () => {
+  bigPicturesModal.classList.remove('hidden');
+  body.classList.add('.modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  /*временно скрыть */
+  bigPicturesModal.querySelector('.social__comment-count').classList.add('hidden');
+  bigPicturesModal.querySelector('.comments-loader').classList.add('hidden');
+};
+
+const closeBigPictureWindow = () => {
+  bigPicturesModal.classList.add('hidden');
+  body.classList.remove('.modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+closeBigPicturesButton.addEventListener('click', closeBigPictureWindow);
+
+document.addEventListener('click', (evt) => {
+  if(evt.target.closest('.picture')) {
+    openBigPictureWindow();
+    const currentId = Number(evt.target.closest('.picture').id);
+    const currentPicture = currentPictures.find(({id}) => id === currentId);
+    fillDataBigPicture(bigPicturesModal, currentPicture);
+  }
+});
+

js/thumbnail.js

@@ -1,13 +1,13 @@
 const thumbNailTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const container = document.querySelector('.pictures');
 
-const createThumbnail = (picture) => {
+const createThumbnail = ({url, description, likes, comments}) => {
   const thumbnail = thumbNailTemplate.cloneNode(true);
 
-  thumbnail.querySelector('.picture__img').src = picture.url;
-  thumbnail.querySelector('.picture__img').alt = picture.description;
-  thumbnail.querySelector('.picture__likes').textContent = picture.likes;
-  thumbnail.querySelector('.picture__comments').textContent = picture.comments.length;
+  thumbnail.querySelector('.picture__img').src = url;
+  thumbnail.querySelector('.picture__img').alt = description;
+  thumbnail.querySelector('.picture__likes').textContent = likes;
+  thumbnail.querySelector('.picture__comments').textContent = comments.length;
 
   return thumbnail;
 };
@@ -23,4 +23,4 @@ const generateThumbnails = (pictures) => {
   container.append(fragment);
 };
 
-export {generateThumbnails};
+export { generateThumbnails };

js/utils.js

@@ -27,4 +27,6 @@ const getUniqueInteger = (min,max) => {
 
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
 
-export {getRandomInteger, getUniqueInteger, getRandomArrayElement};
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+export {getRandomInteger, getUniqueInteger, getRandomArrayElement, isEscapeKey};