Открывается и закрывается (часть 2)

index.html

@@ -40,7 +40,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
             </fieldset>
 
             <!-- Форма редактирования изображения -->
-            <div class="img-upload__overlay  hidden">
+            <div class="img-upload__overlay hidden">
               <div class="img-upload__wrapper">
                 <div class="img-upload__preview-container">
 

js/big-picture-popup.js

@@ -1,47 +1,70 @@
+import { COMMENTS_STEP } from './consts.js';
 import { getPhotos } from './get-photos.js';
 import { hide, show } from './utils.js';
 const photos = getPhotos();
 const bigPhotoPopup = document.querySelector('.big-picture');
 const popupCancelElement = document.querySelector('.big-picture__cancel');
+const commentsLoadBtn = bigPhotoPopup.querySelector('.comments-loader');
+
+let currentComments = null;
+let currentShownCommentsCount = 0;
 
 function onEscapeKeydown(e) {
   if (e.key === 'Escape') {
     hidePhotoPopup(e);
   }
 }
 
-function renderComments(comments) {
-  const commentFragmentList = document.createDocumentFragment();
-  comments.forEach((comment) => {
-    const commEl = document.createElement('li');
-    commEl.className = 'social__comment';
+function onLoadBtnClick(e) {
+  e.preventDefault();
+  loadComments();
+}
 
-    const imgEl = document.createElement('img');
-    imgEl.className = 'social__picture';
-    imgEl.src = comment.avatar;
-    imgEl.alt = comment.name;
-    imgEl.width = 35;
-    imgEl.height = 35;
+function loadComments() {
+  if (currentComments.length > currentShownCommentsCount) {
+    currentComments.slice(currentShownCommentsCount, currentShownCommentsCount + COMMENTS_STEP).forEach((comment) => {
+      const commEl = document.createElement('li');
+      commEl.className = 'social__comment';
 
-    const pEl = document.createElement('p');
-    pEl.className = 'social__text';
-    pEl.textContent = comment.message;
+      const imgEl = document.createElement('img');
+      imgEl.className = 'social__picture';
+      imgEl.src = comment.avatar;
+      imgEl.alt = comment.name;
+      imgEl.width = 35;
+      imgEl.height = 35;
 
-    commEl.append(imgEl);
-    commEl.append(pEl);
-    commentFragmentList.append(commEl);
+      const pEl = document.createElement('p');
+      pEl.className = 'social__text';
+      pEl.textContent = comment.message;
 
-  });
+      commEl.append(imgEl);
+      commEl.append(pEl);
+      bigPhotoPopup.querySelector('.social__comments').append(commEl);
+      currentShownCommentsCount++;
+    });
 
+    bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = bigPhotoPopup.querySelectorAll('.social__comment').length;
+    checkShownCommentsCount();
+  }
+}
+
+function clearComments() {
   bigPhotoPopup.querySelector('.social__comments').innerHTML = '';
-  bigPhotoPopup.querySelector('.social__comments').append(commentFragmentList);
+  currentShownCommentsCount = 0;
+}
 
+function renderComments(comments) {
+  clearComments();
+  currentComments = comments;
+  loadComments();
 }
 function hidePhotoPopup(e) {
   e.preventDefault();
+  clearComments();
   hide(bigPhotoPopup);
   document.removeEventListener('keydown', onEscapeKeydown);
   document.body.classList.remove('modal-open');
+
 }
 function showPhotoPopup() {
   document.body.classList.add('modal-open');
@@ -56,14 +79,21 @@ function openBigPhotoPopup(photoId) {
     renderComments(currentPhoto.comments);
     bigPhotoPopup.querySelector('.big-picture__img img').src = currentPhoto.url;
     bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes.length;
-    bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
     bigPhotoPopup.querySelector('.social__comment-total-count').textContent = currentPhoto.comments.length;
     bigPhotoPopup.querySelector('.social__caption').textContent = currentPhoto.description;
-    hide(bigPhotoPopup.querySelector('.social__comment-shown-count'));
-    hide(bigPhotoPopup.querySelector('.comments-loader'));
+    bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes;
+
   }
 }
 
-popupCancelElement.addEventListener('click', hidePhotoPopup);
+function checkShownCommentsCount() {
+  if (currentComments.length <= currentShownCommentsCount) {
+    hide(commentsLoadBtn);
+  } else {
+    show(commentsLoadBtn);
+  }
+}
 
+popupCancelElement.addEventListener('click', hidePhotoPopup);
+commentsLoadBtn.addEventListener('click', onLoadBtnClick);
 export { openBigPhotoPopup };

js/consts.js

@@ -36,5 +36,6 @@ const MESSAGES = [
   'Лица у людей на фотке перекошены, как будто их избивают.Как можно было поймать такой неудачный момент ? !',
 ];
 const PHOTOS_COUNT = 25;
+const COMMENTS_STEP = 5;
 
-export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT };
+export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT, COMMENTS_STEP };