✔️ Сборка #7

7/js/open-full-picture.js

@@ -1,10 +1,9 @@
 import {isEscapeKey} from './util.js';
 import {picturesContainer} from './render-thumbnails.js';
-import {createComment} from './data.js';
+import { clearComments, renderComments } from './render-comments.js';
 
+const fullPicture = document.querySelector('.big-picture');
 const closeButton = document.querySelector('.big-picture__cancel');
-const commentsList = document.querySelector('.social__comments'); //socialCommentsNode
-const commentTemplate = commentsList.querySelector('.social__comment');
 
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
@@ -21,38 +20,24 @@ const onClickButtonClose = (evt) => {
 
 const openFullPicture = (pictureId, data) => {
   const currentPhoto = data.find((photo) => photo.id === Number(pictureId));
-  const commentsFragment = document.createDocumentFragment();
 
   document.querySelector('body').classList.add('modal-open');
-  document.querySelector('.big-picture').classList.remove('hidden');
+  fullPicture.classList.remove('hidden');
+
   document.querySelector('.big-picture .big-picture__img img').src = currentPhoto.url;
   document.querySelector('.likes-count').textContent = currentPhoto.likes;
   document.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
   document.querySelector('.social__caption').textContent = currentPhoto.description;
 
-  commentsList.innerHTML = '';
-
-  currentPhoto.comments.forEach((comment) => {
-    const pictureComment = commentTemplate.cloneNode(true);
-
-    pictureComment.querySelector('.social__picture').src = comment.avatar;
-    pictureComment.querySelector('.social__picture').alt = comment.name;
-    pictureComment.querySelector('.social__text').textContent = comment.message;
-
-    commentsFragment.appendChild(pictureComment);
-  });
-
-  commentsList.appendChild(commentsFragment);
+  renderComments(currentPhoto.comments);
 
   document.addEventListener('keydown', onDocumentKeydown);
   closeButton.addEventListener('click', onClickButtonClose);
 };
 
-
 function closeFullPicture() {
-  document.querySelector('.big-picture').classList.add('hidden');
-  document.querySelector('.social__comment-count').classList.add('hidden');
-  document.querySelector('.comments-loader').classList.add('hidden');
+  clearComments();
+  fullPicture.classList.add('hidden');
   document.querySelector('body').classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);
 }

7/js/render-comments.js

@@ -0,0 +1,53 @@
+const commentsList = document.querySelector('.social__comments');
+const commentTemplate = commentsList.querySelector('.social__comment');
+const commentCount = document.querySelector('.social__comment-count');
+const commentsLoader = document.querySelector('.social__comment-loader');
+
+const VISIBLE_COMMENTS = 5;
+let shownComments = 0;
+let comments = [];
+
+commentsList.innerHTML = '';
+
+const renderNextComments = () => {
+  const commentsFragment = document.createDocumentFragment();
+  const renderedComments = comments.slice(shownComments, shownComments + VISIBLE_COMMENTS);
+  const renderedCommentsLength = renderedComments.length + shownComments;
+
+  renderedComments.forEach ((comment) => {
+    const pictureComment = commentTemplate.cloneNode(true);
+
+    pictureComment.querySelector('.social__picture').src = comment.avatar;
+    pictureComment.querySelector('.social__picture').alt = comment.name;
+    pictureComment.querySelector('.social__text').textContent = comment.message;
+
+    commentsFragment.appendChild(pictureComment);
+  });
+
+  commentsList.appendChild(commentsFragment);
+
+  commentCount.firstChild.textContent = `${renderedCommentsLength} из `;
+  commentCount.querySelector('.comments-count').textContent = comments.length;
+
+  if (renderedCommentsLength >= comments.length) {
+    commentsLoader.classList.add('hidden');
+  }
+
+  shownComments += VISIBLE_COMMENTS;
+};
+
+const clearComments = () => {
+  shownComments = 0;
+  commentsList.innerHTML = '';
+  commentsLoader.classList.remove('hidden');
+  commentsLoader.removeEventListener('click', renderNextComments);
+};
+
+const renderComments = (currentPhotoComments) => {
+  comments = currentPhotoComments;
+  renderNextComments();
+
+  commentsLoader.addEventListener('click', renderNextComments);
+};
+
+export {clearComments, renderComments};