From b6825a72746fc37db34be113d33c2570375cd64c Mon Sep 17 00:00:00 2001
From: brazilets <brazilets161@gmail.com>
Date: Fri, 15 Mar 2024 18:58:51 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD=D0=B8=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20=D0=BF=D1=80=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=B6=D1=83=D1=82=D0=BE=D1=87=D0=BD=D1=83=D1=8E=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/fullSize.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/js/fullSize.js b/js/fullSize.js
index 861ffa2..f52a645 100644
--- a/js/fullSize.js
+++ b/js/fullSize.js
@@ -6,11 +6,11 @@ const likesCounter = userBigPicture.querySelector('.likes-count');
 const fullPicture = userBigPicture.querySelector('.big-picture__img');
 const pictureUrl = fullPicture.querySelector('img');
 const commentsCount = userBigPicture.querySelector('.social__comment-total-count');
-const socialCommentCount = userBigPicture.querySelector('.social__comment-count');
+const socialCommentCount = userBigPicture.querySelector('.social__comment-shown-count');
 const description = userBigPicture.querySelector('.social__caption');
 const commentsLoader = userBigPicture.querySelector('.comments-loader');
 const socialComments = userBigPicture.querySelector('.social__comments');
-
+let currentOpenPhoto = null;
 let currentCommentsCount = 0;
 const COMMENTS_LOAD_STEP = 5;
 
@@ -21,6 +21,15 @@ const onBigPictureKeydown = (evt) => {
   }
 };
 
+const updateAndRenderComments = () => {
+  currentCommentsCount += COMMENTS_LOAD_STEP;
+  renderComments(currentOpenPhoto.comments);
+  socialCommentCount.textContent = `${Math.min(currentCommentsCount, currentOpenPhoto.comments.length)}`;
+  if (currentCommentsCount >= currentOpenPhoto.comments.length) {
+    commentsLoader.classList.add('.hidden');
+  }
+};
+
 function renderComments(comments) {
   socialComments.innerHTML = '';
   comments.slice(0, currentCommentsCount).forEach((comment) => {
@@ -47,11 +56,12 @@ function openBigPicture(photo) {
   userBigPicture.classList.remove('hidden');
   document.body.classList.add('modal-open');
   document.addEventListener('keydown', onBigPictureKeydown);
+  currentOpenPhoto = photo;
 
   likesCounter.textContent = photo.likes;
   pictureUrl.src = photo.url;
   commentsCount.textContent = photo.comments.length;
-  socialCommentCount.textContent = `${currentCommentsCount}`;
+  socialCommentCount.textContent = photo.comments.length < 5 ? photo.comments.length : 5;
   description.textContent = photo.description;
 
   commentsLoader.classList.remove('hidden');
@@ -61,6 +71,8 @@ function openBigPicture(photo) {
 
   renderComments(photo.comments);
 
+  commentsLoader.addEventListener('click', updateAndRenderComments);
+
   commentsLoader.addEventListener('click', () => {
     currentCommentsCount += COMMENTS_LOAD_STEP;
     renderComments(photo.comments);
@@ -75,6 +87,7 @@ function closeBigPicture() {
   userBigPicture.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onBigPictureKeydown);
+  commentsLoader.removeEventListener('click', updateAndRenderComments);
 }
 
 userBigPictureCancel.addEventListener('click', () => {