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

js/functions.js

@@ -1,4 +1,4 @@
 const meeting = (workStart, workEnd, meetingStart, meetingDuration) => {
 
   const workStartTime = workStart;
   const workEndTime = workEnd;
@@ -22,4 +22,4 @@
 
 };
 
-console.log(meeting('8:00', '17:30', '08:00', 900));
+// console.log(meeting('8:00', '17:30', '08:00', 900));

js/generate-photo-data.js

@@ -1,7 +1,9 @@
 import {
   getRandomInteger,
   getRandomArrayElement
-} from './util.js';
+} from './utils.js';
+
+import './photo-popup.js';
 
 
 import {

js/photo-list.js

@@ -1,26 +1,41 @@
 import {photosList} from './generate-photo-data.js';
+import {openBigPicture} from './photo-popup.js';
+
 
 const getPhotosList = () => {
-  const photosContainer = document.querySelector('.pictures');
-  const photoTemplate = document.querySelector('#picture').content.querySelector('.picture');
-  const photoItems = photosList();
+  const photosContainer = document.querySelector('.pictures'); // общий контейнер для миниатюр
+  const photoTemplate = document.querySelector('#picture').content; // шаблон разметки миниатюры
+
+  const photoItems = photosList(); // массив всех фото с комментариями
+
+  photoItems.forEach( // пробегаемся по массиву с фотографиями
+    (photo) => {
+
+      const photoElement = photoTemplate.cloneNode(true); // копируем шаблон разметки миниатюры
+      const photoElementItem = photoElement.querySelector('.picture'); // миниатюра
 
-  photoItems.forEach((photo) => {
-    const photoElement = photoTemplate.cloneNode(true);
-    const photoElementImg = photoElement.querySelector('.picture__img');
-    photoElementImg.src = photo.url;
-    photoElementImg.alt = photo.description;
+      photoElementItem.addEventListener('click', (evt) => { // событие при клике на миниатюру
+        evt.preventDefault();
 
-    const photoElementLikes = photoElement.querySelector('.picture__likes');
-    photoElementLikes.textContent = photo.likes;
+        openBigPicture(photo); // добавляем функцию открытия модалки
+      });
 
-    const photoElementComments = photoElement.querySelector('.picture__comments');
-    photoElementComments.textContent = photo.comments.length;
+      const photoImgElement = photoElement.querySelector('.picture__img');
+      photoImgElement.src = photo.url;
+      photoImgElement.alt = photo.description;
 
-    photosContainer.appendChild(photoElement);
-  });
+      const photoLikesElement = photoElement.querySelector('.picture__likes');
+      photoLikesElement.textContent = photo.likes;
+
+      const photoCommentsElement = photoElement.querySelector('.picture__comments');
+      photoCommentsElement.textContent = photo.comments.length;
+
+      photosContainer.appendChild(photoElement);
+
+    });
 };
 
+
 export {
   getPhotosList
 };

js/photo-popup.js

@@ -0,0 +1,82 @@
+import {
+  isEscapeKey
+} from './utils.js';
+
+
+const pictureModalElement = document.querySelector('.big-picture');
+const pictureModalImgElement = pictureModalElement.querySelector('.big-picture__img img');
+const pictureModalCommentsElement = pictureModalElement.querySelector('.social__comments');
+const pictureModalCommentElement = pictureModalElement.querySelector('.social__comment');
+const pictureModalCloseElement = pictureModalElement.querySelector('.big-picture__cancel');
+const pictureModalLikesCountElement = pictureModalElement.querySelector('.likes-count');
+const pictureModalCommentsCountElement = pictureModalElement.querySelector('.social__comment-shown-count');
+const pictureModalCommentsTotalElement = pictureModalElement.querySelector('.social__comment-total-count');
+const pictureModalDescriptionElement = pictureModalElement.querySelector('.social__caption');
+
+
+const renderBigPictureComments = (comments) => {
+  comments.forEach(
+    (comment) => {
+
+      const userComment = pictureModalCommentElement.cloneNode(true);
+
+      const userCommentAvatarElement = userComment.querySelector('.social__picture');
+      userCommentAvatarElement.src = comment.avatar;
+      userCommentAvatarElement.alt = comment.name;
+
+      const userCommentMessageElement = userComment.querySelector('.social__text');
+      userCommentMessageElement.textContent = comment.message;
+
+      pictureModalCommentsElement.appendChild(userComment);
+
+    });
+};
+
+
+const renderBigPicture = (photo) => {
+  pictureModalImgElement.src = photo.url;
+  pictureModalLikesCountElement.textContent = photo.likes;
+  pictureModalCommentsTotalElement.textContent = photo.comments.length;
+  pictureModalCommentsCountElement.textContent = photo.comments.length;
+  pictureModalDescriptionElement.textContent = photo.description;
+
+  renderBigPictureComments(photo.comments);
+};
+
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    pictureModalElement.classList.add('hidden');
+    document.body.classList.remove('modal-open');
+  }
+};
+
+const openPictureModal = () => {
+  pictureModalElement.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+  pictureModalCommentsElement.textContent = '';
+  document.addEventListener('keydown', onDocumentKeydown);
+};
+
+const closePictureModal = () => {
+  pictureModalElement.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+
+pictureModalCloseElement.addEventListener('click', () => {
+  closePictureModal();
+});
+
+
+const openBigPicture = (photo) => {
+  openPictureModal();
+  renderBigPicture(photo);
+};
+
+
+export {
+  openBigPicture
+};

js/util.js → js/utils.js

@@ -7,7 +7,10 @@ const getRandomInteger = (a, b) => {
 
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
 
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
 export {
   getRandomInteger,
-  getRandomArrayElement
+  getRandomArrayElement,
+  isEscapeKey
 };