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

js/big-photo-viewer.js

@@ -1,31 +1,26 @@
-import {fillCommentsList} from './comments-viewer.js';
+import {fillCommentsList, loadMoreComments} from './comments-viewer.js';
 
 const picturesContainerElement = document.querySelector('.pictures');
 const bigPhotoElement = document.querySelector('.big-picture');
+const looadMoreCommentsElement = document.querySelector('.comments-loader');
 
 const bodyElement = document.body;
 let photoData = [];
 
 picturesContainerElement.addEventListener('click', (evt) => {
   const targetPhotoId = evt.target.closest('.picture');
   const targetPhoto = photoData.find((photo) => photo.photoId === Number(targetPhotoId.dataset.photoId));
-  const {url, description, likes, comments} = targetPhoto;
-
-  bigPhotoElement.querySelector('.social__comment-count').classList.add('hidden');
-  bigPhotoElement.querySelector('.comments-loader').classList.add('hidden');
+  const {url, description, likes} = targetPhoto;
 
   bigPhotoElement.querySelector('.big-picture__img img').setAttribute('src', url);
   bigPhotoElement.querySelector('.likes-count').textContent = likes;
-  bigPhotoElement.querySelector('.social__comment-total-count').textContent = comments.length;
   bigPhotoElement.querySelector('.social__caption').textContent = description;
 
   bigPhotoElement.classList.remove('hidden');
   bodyElement.classList.add('modal-open');
 
   fillCommentsList(targetPhoto.comments);
 
-  bigPhotoElement.querySelector('.social__comment-shown-count').textContent = comments.length;
-
   bigPhotoElement.setAttribute('tabindex', '0');
   bigPhotoElement.focus();
 });
@@ -42,6 +37,10 @@ bigPhotoElement.addEventListener('keydown', (evt) => {
   }
 });
 
+looadMoreCommentsElement.addEventListener('click', () => {
+  loadMoreComments();
+});
+
 function closeBigPhoto() {
   bigPhotoElement.classList.add('hidden');
   bodyElement.classList.remove('modal-open');

js/comments-viewer.js

@@ -1,18 +1,72 @@
 const socialCommentsElement = document.querySelector('.social__comments');
 const commentTemplateElement = socialCommentsElement.querySelector('.social__comment');
+const bigPictureElement = document.querySelector('.big-picture');
+const loadCommentElement = bigPictureElement.querySelector('.social__comment-count');
+const currentCommentsCountElement = bigPictureElement.querySelector('.social__comment-shown-count');
+const totalCommentsCountElement = bigPictureElement.querySelector('.social__comment-total-count');
+const loadCommentsButtonElement = bigPictureElement.querySelector('.social__comments-loader');
+const loadingStep = 5;
+let commentsArray = [];
+let totalComments;
+let currentCommentsLoaded = 0;
 
 function fillCommentsList(comments) {
   socialCommentsElement.innerHTML = '';
-  comments.forEach((comment) => {
-    const {avatar, name, commentsList} = comment;
-    const newCommentElement = commentTemplateElement.cloneNode(true);
-    const commentPictureElement = newCommentElement.querySelector('.social__picture');
-
-    commentPictureElement.setAttribute('src', avatar);
-    commentPictureElement.setAttribute('alt', name);
-    newCommentElement.querySelector('.social__text').textContent = commentsList;
-    socialCommentsElement.appendChild(newCommentElement);
-  });
+
+  if (comments.length > 0) {
+    commentsArray = comments;
+    currentCommentsLoaded = 0;
+    totalComments = comments.length;
+
+    const commentsToLoad = Math.min(loadingStep, totalComments);
+    for (let i = 0; i < commentsToLoad; i++) {
+      addCommentAndUpdateCounter(commentsArray[i]);
+    }
+    updateLoadCommentsButtonVisibility();
+  } else {
+    loadCommentElement.innerHTML = '';
+    loadCommentElement.textContent = 'Нет комментариев';
+    updateLoadCommentsButtonVisibility();
+  }
+}
+
+function loadMoreComments() {
+  const commentsToLoad = Math.min(loadingStep, totalComments - currentCommentsLoaded);
+
+  for (let i = 0; i < commentsToLoad; i++) {
+    addCommentAndUpdateCounter(commentsArray[currentCommentsLoaded]);
+  }
+  updateLoadCommentsButtonVisibility();
+}
+
+function addComment(comment) {
+  const {avatar, name, commentsList} = comment;
+  const newCommentElement = commentTemplateElement.cloneNode(true);
+  const commentPictureElement = newCommentElement.querySelector('.social__picture');
+
+  commentPictureElement.setAttribute('src', avatar);
+  commentPictureElement.setAttribute('alt', name);
+  newCommentElement.querySelector('.social__text').textContent = commentsList;
+  socialCommentsElement.appendChild(newCommentElement);
+}
+
+function updateCommentCounters() {
+  currentCommentsCountElement.textContent = currentCommentsLoaded;
+  totalCommentsCountElement.textContent = totalComments;
+}
+
+function addCommentAndUpdateCounter(comment) {
+  addComment(comment);
+  currentCommentsLoaded++;
+  updateCommentCounters();
+}
+
+function updateLoadCommentsButtonVisibility() {
+  if (currentCommentsLoaded >= totalComments) {
+    loadCommentsButtonElement.classList.add('hidden');
+  } else {
+    loadCommentsButtonElement.classList.remove('hidden');
+  }
 }
 
-export {fillCommentsList};
+export {fillCommentsList, loadMoreComments};