Merge pull request #8 from PandaST47/module8-task2

htmlacademy-univer-javascript-1 · Dec 7, 2024 · 41c7328 · 41c7328
2 parents ee65d3e + 2a9bf2a
commit 41c7328
Showing 1 changed file with 53 additions and 25 deletions.
diff --git a/js/big-picture.js b/js/big-picture.js
@@ -7,52 +7,78 @@ const descriptionElement = bigPicture.querySelector('.social__caption');
 const commentCountBlock = bigPicture.querySelector('.social__comment-count');
 const commentsLoader = bigPicture.querySelector('.comments-loader');
 const closeButton = bigPicture.querySelector('.big-picture__cancel');
+const commentsPerPage = 5;
 
+let currentComments = [];
+let displayedCommentsCount = 0;
 
-function openBigPicture(photoData) {
-  // Скрываем блоки комментариев сразу
-  commentCountBlock.classList.add('hidden');
-  commentsLoader.classList.add('hidden');
+function renderComments() {
+  const nextComments = currentComments.slice(displayedCommentsCount, displayedCommentsCount + commentsPerPage);
+
+  nextComments.forEach((comment) => {
+    const commentElement = document.createElement('li');
+    commentElement.classList.add('social__comment');
 
-  // данные фотографии
+    commentElement.innerHTML = `
+            <img
+                class='social__picture'
+                src='${comment.avatar}'
+                alt='${comment.name}'
+                width='35' height='35'>
+            <p class='social__text'>${comment.message}</p>
+        `;
+    socialComments.appendChild(commentElement);
+  });
+
+  displayedCommentsCount += nextComments.length;
+
+  commentCountBlock.textContent = `${displayedCommentsCount} из ${currentComments.length} комментариев`;
+
+  if (displayedCommentsCount >= currentComments.length) {
+    commentsLoader.classList.add('hidden');
+  }
+}
+
+function openBigPicture(photoData) {
+  // Данные фотографии
   imageElement.src = photoData.url;
   imageElement.alt = photoData.description;
   likesCount.textContent = photoData.likes;
   commentsCount.textContent = photoData.comments.length;
   descriptionElement.textContent = photoData.description;
 
-  // очистка старых комментов
+  // Очистка старых комментариев
   socialComments.innerHTML = '';
 
-  // создаем новые комменты
-  for (let i = 0; i < photoData.comments.length; i++) {
-    const comment = photoData.comments[i];
-    const commentElement = document.createElement('li');
-    commentElement.classList.add('social__comment');
+  // Инициализация комментариев
+  currentComments = photoData.comments;
+  displayedCommentsCount = 0;
 
-    commentElement.innerHTML = `
-      <img
-        class = 'social__picture'
-        src = '${comment.avatar}'
-        alt = '${comment.name}'
-        width = '35' height = '35'>
-      <p class='social__text'>${comment.message}</p>
-    `;
-    socialComments.appendChild(commentElement);
-  }
+  // Рендер первых комментариев
+  renderComments();
 
-  // убираем блоки комментариев
-  commentCountBlock.classList.add('hidden');
-  commentsLoader.classList.add('hidden');
+  // Логика отображения блока комментариев
+  if (currentComments.length > 0) {
+    commentCountBlock.classList.remove('hidden');
+    if (currentComments.length > commentsPerPage) {
+      commentsLoader.classList.remove('hidden'); // Показываем кнопку, если есть больше 5 комментариев
+    } else {
+      commentsLoader.classList.add('hidden'); // Скрываем кнопку, если комментариев 5 или меньше
+    }
+  } else {
+    commentCountBlock.classList.add('hidden');
+    commentsLoader.classList.add('hidden');
+  }
 
-  // открываем окошко
+  // Открытие окна
   bigPicture.classList.remove('hidden');
   document.body.classList.add('modal-open');
 
   closeButton.addEventListener('click', closeBigPicture);
   document.addEventListener('keydown', onEscapePress);
 }
 
+
 function closeBigPicture() {
   bigPicture.classList.add('hidden');
   document.body.classList.remove('modal-open');
@@ -66,4 +92,6 @@ function onEscapePress(evt) {
   }
 }
 
+commentsLoader.addEventListener('click', renderComments);
+
 export { openBigPicture };