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

js/comments.js

@@ -1,31 +1,57 @@
-const сommentsListElement = document.querySelector('.social__comments');
-const socialCommentElement = сommentsListElement.querySelector('.social__comment');
-const fragmentElement = document.createDocumentFragment();
+const STEP_COMMENTS = 5;
+let currentCommentCount = 0;
+let currentPostComments = [];
+
+const bigPictureElement = document.querySelector('.big-picture');
+const socialCommentsElement = bigPictureElement.querySelector('.social__comments');
+const socialCommentElement = socialCommentsElement.querySelector('.social__comment');
+const commentTotalCountElement = bigPictureElement.querySelector('.social__comment-total-count');
+const commentShownCountElement = bigPictureElement.querySelector('.social__comment-shown-count');
+const commentsLoaderElement = bigPictureElement.querySelector('.social__comments-loader');
+socialCommentsElement.innerHTML = '';
 
 //Функция создания комментария
 const renderComment = ({avatar, name, message}) => {
   const clonedCommentElement = socialCommentElement.cloneNode(true);
   const commentPictureElement = clonedCommentElement.querySelector('.social__picture');
-  const commentText = clonedCommentElement.querySelector('.social__text');
+  const commentTextElement = clonedCommentElement.querySelector('.social__text');
   commentPictureElement.src = avatar;
   commentPictureElement.alt = name;
-  commentText.textContent = message;
+  commentTextElement.textContent = message;
   return clonedCommentElement;
 };
 
-//Отрисуем массив комментариев для каждого поста
-const renderComments = (comments) => {
-  const postСomments = comments;
-  postСomments.forEach((comment) => {
+//Функция отрисовки показываемых комментариев частями
+const renderShownComments = () => {
+  const fragmentElement = document.createDocumentFragment();
+  const shownComments = currentPostComments.slice(currentCommentCount, currentCommentCount + STEP_COMMENTS);
+  const shownCommentsLength = shownComments.length + currentCommentCount;
+
+  shownComments.forEach((comment) => {
     const commentElement = renderComment(comment);
-    сommentsListElement.appendChild(commentElement);
     fragmentElement.appendChild(commentElement);
   });
 
-  сommentsListElement.innerHTML = '';
-  сommentsListElement.appendChild(fragmentElement);
+  socialCommentsElement.append(fragmentElement);
+  commentShownCountElement.textContent = shownCommentsLength;
+  commentTotalCountElement.textContent = currentPostComments.length;
+  commentsLoaderElement.classList.toggle('hidden', shownCommentsLength >= currentPostComments.length);
+  currentCommentCount += STEP_COMMENTS;
 };
 
+//Функция отрисовки и обновления по клику количества комментариев
+const renderComments = (comments) => {
+  currentPostComments = comments;
+  renderShownComments();
+  commentsLoaderElement.addEventListener('click', renderShownComments);
+};
 
-export {renderComments};
+//Функция очистки комментариев
+const clearComments = () => {
+  currentCommentCount = 0;
+  socialCommentsElement.innerHTML = '';
+  commentsLoaderElement.classList.remove('hidden');
+  commentsLoaderElement.removeEventListener('click', renderShownComments);
+};
 
+export {renderComments, clearComments};

js/data.js

@@ -72,7 +72,7 @@ const maxCommentsIdQuantity = 1000;
 
 const randomUniqueId = createUniqueRandomInteger(1, POST_COUNT);
 const randomUniqueUrl = createUniqueRandomInteger(1, POST_COUNT);
-const randomUniqueСommentId = createUniqueRandomInteger(1, maxCommentsIdQuantity);
+const randomUniqueCommentId = createUniqueRandomInteger(1, maxCommentsIdQuantity);
 
 //Функция, возвращающая случайный элемент массива
 const getRandomArrayElement = (elements) =>
@@ -89,7 +89,7 @@ const createComment = () => {
     messagesQuantity.push(getRandomArrayElement(MESSAGES));
   }
   return {
-    id: randomUniqueСommentId(),
+    id: randomUniqueCommentId(),
     avatar: `img/avatar-${getRandomInteger(AvatarsQuantity.MIN, AvatarsQuantity.MAX)}.svg`,
     message: messagesQuantity.join(' '),
     name: getRandomArrayElement(AUTORS),

js/modal.js

@@ -1,23 +1,24 @@
 import {isEscapeKey} from './util.js';
 import {renderBigPicture} from './full-size-picture.js';
+import {clearComments} from './comments.js';
 
 const renderModal = (posts) => {
   const bigPictureElement = document.body.querySelector('.big-picture');
   const picturesParentElement = document.querySelector('.pictures');
   const pictureCloseButton = bigPictureElement.querySelector('.big-picture__cancel');
-  const socialCommentCount = bigPictureElement.querySelector('.social__comment-count');
-  const commentsLoader = bigPictureElement.querySelector('.comments-loader');
+
 
   //Функция-обработчик закрытия модалки ESC
   const onModalEscKeyDown = (evt) => {
     if (isEscapeKey(evt)) {
       evt.preventDefault();
-      closeMоdal();
+      closeModal();
     }
   };
 
   //Функция закрытия модалки
-  function closeMоdal () {
+  function closeModal () {
+    clearComments();
     bigPictureElement.classList.add('hidden');
     //Удаляем обработчик закрытия превью ESC
     document.removeEventListener('keydown', onModalEscKeyDown);
@@ -29,7 +30,7 @@ const renderModal = (posts) => {
   const onCloseButtonClick = (button) => {
     button.addEventListener('click', (evt) => {
       evt.preventDefault();
-      closeMоdal();
+      closeModal();
     });
   };
 
@@ -53,9 +54,6 @@ const renderModal = (posts) => {
       const foundedPictureByIdElement = posts.find((picture) => picture.id === Number(currentPictureElement.dataset.pictureId));
       renderBigPicture(foundedPictureByIdElement);
       openModal();
-      // Скрываем блоки счетчика комментариев и загрузки новых комментариев
-      socialCommentCount.classList.add('hidden');
-      commentsLoader.classList.add('hidden');
     }
   };