From 9d95f9c3c332da534459f5d2b655c38551929c59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4?= <v1ad@inbox.ru>
Date: Wed, 11 Dec 2024 19:42:55 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=D0=BE=20?=
 =?UTF-8?q?=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B5-=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B5=20=D0=B1=D0=BE=D0=BB=D1=8C?=
 =?UTF-8?q?=D1=88=D0=BE=D0=B9=20=D0=BA=D0=B0=D1=80=D1=82=D0=B8=D0=BD=D0=BA?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/main.js        | 14 ++++----
 js/photo-modal.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++
 js/thumbnails.js  |  1 +
 js/util.js        |  8 ++---
 4 files changed, 97 insertions(+), 12 deletions(-)
 create mode 100644 js/photo-modal.js

diff --git a/js/main.js b/js/main.js
index 0cadadb..f22242f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,9 +1,9 @@
-import {
-  generateArrObj
-} from './data.js';
+import { generateArrObj } from './data.js';
+import { renderGallery } from './thumbnails.js';
+import { renderBigPicture } from './photo-modal.js';
+
+const photoArray = generateArrObj();
+renderGallery(photoArray);
+renderBigPicture(photoArray);
 
-import {
-  renderGallery
-} from './thumbnails.js';
 
-renderGallery(generateArrObj());
diff --git a/js/photo-modal.js b/js/photo-modal.js
new file mode 100644
index 0000000..6c32fe8
--- /dev/null
+++ b/js/photo-modal.js
@@ -0,0 +1,86 @@
+import { isEscapeKey } from './util.js';
+
+const picturesContainer = document.querySelector('.pictures');
+const socialCommentCount = document.querySelector('.social__comment-count');
+const commentsLoader = document.querySelector('.comments-loader');
+
+const bodyContainer = document.body;
+const bigPictureContainer = document.querySelector('.big-picture');
+const bigPictureCloseElement = bigPictureContainer.querySelector('.big-picture__cancel');
+const bigPictureImg = bigPictureContainer.querySelector('img');
+const bigPictureLikes = bigPictureContainer.querySelector('.likes-count');
+const bigPictureDescription = bigPictureContainer.querySelector('.social__caption');
+const commentsQty = bigPictureContainer.querySelector('.social__comment-total-count');
+const commentsContainer = bigPictureContainer.querySelector('.social__comments');
+const commentElement = document.querySelector('.social__comment');
+
+// Загружаем массив фоток, вешаем обработчик событий, находим фото, по которому кликнули
+const renderBigPicture = (picturesArr) => {
+  picturesContainer.addEventListener('click', (evt) => {
+    const currentEventPictureId = evt.target.closest('.picture').dataset.pictureId;
+    if (currentEventPictureId) {
+      const foundedPhoto = picturesArr.find((picture) => picture.id === Number(currentEventPictureId));
+      openBigPicture(foundedPhoto);
+    };
+  });
+};
+
+// Открываем окно с большой картинкой-сначала прогружаем фото, данные и комментарии, потом показываем пользователю результат
+const openBigPicture = (picture) => {
+  bigPictureImg.src = picture.url;
+  bigPictureLikes.textContent = picture.likes;
+  commentsQty.textContent = picture.comments.length;
+  bigPictureDescription.textContent = picture.description;
+  renderComments(picture.comments);
+
+  bigPictureCloseElement.addEventListener('click', onClosePictureElement);
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  bigPictureContainer.classList.remove('hidden');
+  socialCommentCount.classList.add('hidden');
+  commentsLoader.classList.add('hidden');
+  bodyContainer.classList.add('modal-open');
+};
+
+
+// Функция подгрузки комментов в окно большой картинки
+const renderComments = (comments) => {
+  const commentsFragment = document.createDocumentFragment();
+  comments.forEach(({ avatar, message, name }) => {
+    const newCommentElement = commentElement.cloneNode(true);
+    const socialPicture = newCommentElement.querySelector('.social__picture');
+    const socialText = newCommentElement.querySelector('.social__text');
+    socialPicture.src = avatar;
+    socialPicture.alt = name;
+    socialText.textContent = message;
+    commentsFragment.append(newCommentElement);
+  });
+  commentsContainer.textContent = '';
+  commentsContainer.append(commentsFragment);
+};
+
+// Функция закрытия большой картинки нажатием на кнопку Escape
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeBigPicture();
+  }
+};
+
+// Функция закрытия большой картинки нажатием на элемент закрытия
+const onClosePictureElement = () => {
+  closeBigPicture();
+};
+
+// Функция непосредственно отвечающая за закрытие большой картинки и удаление обработчиков событий на закрытие
+const closeBigPicture = () => {
+  bigPictureContainer.classList.add('hidden');
+  socialCommentCount.classList.remove('hidden');
+  commentsLoader.classList.remove('hidden');
+  bodyContainer.classList.remove('modal-open');
+
+  bigPictureCloseElement.removeEventListener('click', onClosePictureElement);
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+export { renderBigPicture };
diff --git a/js/thumbnails.js b/js/thumbnails.js
index dcac99c..2820fb9 100644
--- a/js/thumbnails.js
+++ b/js/thumbnails.js
@@ -8,6 +8,7 @@ const pictureFragment = document.createDocumentFragment();
 
 userPictures.forEach(({id, url, description, likes, comments}) => {
   const pictureElement = pictureTemplate.cloneNode(true);
+  pictureElement.dataset.pictureId = id;
   pictureElement.querySelector('.picture__img').src = url;
   pictureElement.querySelector('.picture__img').alt = description;
   pictureElement.querySelector('.picture__likes').textContent = likes;
diff --git a/js/util.js b/js/util.js
index 5dd824b..c57d53b 100644
--- a/js/util.js
+++ b/js/util.js
@@ -21,8 +21,6 @@ const getRandomUniqueInt = (min, max) => {
 
 const getRandomArrElement = (array) => array[getRandomInt(0, array.length - 1)];
 
-export {
-  getRandomInt,
-  getRandomUniqueInt,
-  getRandomArrElement
-};
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+export { getRandomInt, getRandomUniqueInt, getRandomArrElement, isEscapeKey };