From 148b0087ca46aceacbf257d77642e144d741b4bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=B0=D0=BC=D0=B8=D0=BB=D0=B0?=
 <105364337+Camihak@users.noreply.github.com>
Date: Tue, 12 Nov 2024 09:44:17 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D0=BA=D1=80=D1=8B=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=B5=D1=82=D1=81=D1=8F=20=D0=B8=20=D0=B7=D0=B0=D0=BA=D1=80?=
 =?UTF-8?q?=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20(=D1=87=D0=B0?=
 =?UTF-8?q?=D1=81=D1=82=D1=8C=202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/draw-fullsize-photo.js | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/js/draw-fullsize-photo.js b/js/draw-fullsize-photo.js
index 82e0905..ccc4e06 100644
--- a/js/draw-fullsize-photo.js
+++ b/js/draw-fullsize-photo.js
@@ -8,12 +8,12 @@ const imgComments = document.querySelector('.social__comment-total-count');
 const commentsContainer = document.querySelector('.social__comments');
 const commentItem = commentsContainer.querySelector('.social__comment');
 const shownComments = document.querySelector('.social__comment-shown-count');
-const commentsCounter = document.querySelector('.social__comment-count');
-const commentsLoader = document.querySelector('.comments-loader');
 const closeButton = document.querySelector('.big-picture__cancel');
 const photoDescription = document.querySelector('.social__caption');
+const moreComments = document.querySelector('.comments-loader');
 const commentListFragment = document.createDocumentFragment();
 
+
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
@@ -26,36 +26,50 @@ function openFullsizePhoto() {
   document.addEventListener('keydown', onDocumentKeydown);
 }
 
-commentsCounter.classList.add('hidden');
-commentsLoader.classList.add('hidden');
-
 function closeFullsizePhoto() {
   modal.classList.add('hidden');
 }
 
 const showComments = (allComments) => {
-  allComments.forEach((comment) => {
+  for (let i = 0; i < allComments.length; i++) {
     const commentItemClone = commentItem.cloneNode(true);
-    commentItemClone.querySelector('.social__picture').src = comment.avatar;
-    commentItemClone.querySelector('.social__picture').alt = comment.name;
-    commentItemClone.querySelector('.social__text').textContent = comment.message;
+    commentItemClone.querySelector('.social__picture').src = allComments[i].avatar;
+    commentItemClone.querySelector('.social__picture').alt = allComments[i].name;
+    commentItemClone.querySelector('.social__text').textContent = allComments[i].message;
     commentListFragment.appendChild(commentItemClone);
-  });
-  commentsContainer.innerHTML = '';
+  }
   commentsContainer.appendChild(commentListFragment);
 };
 
+
 function transferModalData(evt, photoLink) {
   modalImg.src = evt.target.src;
   imgLikes.textContent = photoLink.querySelector('.picture__likes').textContent;
   imgComments.textContent = photoLink.querySelector('.picture__comments').textContent;
   shownComments.textContent = photoLink.querySelector('.picture__comments').textContent;
   photoDescription.textContent = photoLink.querySelector('.picture__img').alt;
+  let minCommentIndex = 0;
+  let step = 5;
   thumbnails.forEach((thumbnail) => {
     if (evt.target.src.includes(thumbnail.url)) {
-      showComments(thumbnail.comments);
+      commentsContainer.innerHTML = '';
+
+      showComments(thumbnail.comments.slice(minCommentIndex, step));
+      shownComments.textContent = step;
+      moreComments.addEventListener('click', () => {
+
+
+        showComments(thumbnail.comments.slice(minCommentIndex += 5, step += 5));
+        shownComments.textContent = step;
+        if (thumbnail.comments.length <= step) {
+          moreComments.classList.add('hidden');
+          shownComments.textContent = thumbnail.comments.length;
+        }
+
+      });
     }
   });
+
 }
 
 closeButton.addEventListener('click', () => {