Добавляет дополнительную промежуточную проверку

htmlacademy-javascript · Mar 15, 2024 · b6825a7 · b6825a7
1 parent 99f707c
commit b6825a7
Showing 1 changed file with 16 additions and 3 deletions.
diff --git 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', () => {