Merge pull request #8 from AnastasiiaXX/module8-task2

Author: keksobot

js/comments.js

@@ -0,0 +1,37 @@
+const COMMENTS_PER_PAGE = 5;
+export const renderComments = (commentsData, container) => {
+  commentsData.forEach((commentData) => {
+    const comment = document.createElement('li');
+    const avatar = document.createElement('img');
+    const commentText = document.createElement('p');
+
+    comment.classList.add('social__comment');
+    avatar.classList.add('social__picture');
+    avatar.alt = commentData.name;
+    avatar.src = commentData.avatar;
+    avatar.width = 35;
+    avatar.height = 35;
+    commentText.classList.add('social__text');
+    commentText.textContent = commentData.message;
+
+    comment.append(avatar);
+    comment.append(commentText);
+
+    container.append(comment);
+  });
+};
+
+export const paginateComments = (comments, container) => {
+  const firstComments = comments.slice(0, COMMENTS_PER_PAGE);
+  let currentIndex = COMMENTS_PER_PAGE;
+  renderComments(firstComments, container);
+  const loadMoreComments = () => {
+    const nextCommentsChunk = comments.slice(currentIndex, currentIndex + COMMENTS_PER_PAGE);
+    renderComments(nextCommentsChunk, container);
+    currentIndex += COMMENTS_PER_PAGE;
+  };
+  return {
+    loadMore: loadMoreComments,
+    getShownCount: () => container.children.length
+  };
+};

js/generate-data.js

@@ -31,4 +31,4 @@ const createPhoto = (_, index) => ({
   comments: Array.from({length: getRandomInteger(0, MAX_COMMENTS_COUNT)}, createComment),
 });
 
-export const createPhotos = () => Array.from({length: PHOTOS_COUNT}, createPhoto);
+export const photos = Array.from({length: PHOTOS_COUNT}, createPhoto);

js/show-full-photo.js

@@ -1,63 +1,58 @@
-import { createPhotos } from './generate-data';
+import { photos } from './generate-data';
 import { closeModal, openModal } from './modal.js';
+import { paginateComments } from './comments.js';
 
 const fullPhotoModal = document.querySelector('.big-picture');
-const comments = document.querySelector('.social__comments');
 const body = document.querySelector('body');
 const closeModalButton = document.querySelector('.big-picture__cancel');
-
-const renderComments = (mockedComments) => {
-  mockedComments.forEach((commentData) => {
-    const comment = document.createElement('li');
-    const avatar = document.createElement('img');
-    const commentText = document.createElement('p');
-
-    comment.classList.add('social__comment');
-    avatar.classList.add('social__picture');
-    avatar.alt = commentData.name;
-    avatar.src = commentData.avatar;
-    avatar.width = 35;
-    avatar.height = 35;
-    commentText.classList.add('social__text');
-    commentText.textContent = commentData.message;
-
-    comment.append(avatar);
-    comment.append(commentText);
-
-    comments.append(comment);
-  });
-};
-
+const comments = document.querySelector('.social__comments');
+const pictureContainer = document.querySelector('.pictures');
+let currentLoadMoreHandler = null;
 const fillPhotoData = (currentPhoto) => {
   const fullPhotoImage = document.querySelector('.big-picture__img img');
   const fullPhotoDescription = document.querySelector('.social__caption');
   const fullPhotoLikes = document.querySelector('.likes-count');
-  const shownCommentsCount = document.querySelector('.social__comment-shown-count');
+  const commentsCount = document.querySelector('.social__comment-total-count');
+
   fullPhotoImage.src = currentPhoto.url;
   fullPhotoImage.alt = currentPhoto.description;
   fullPhotoLikes.textContent = currentPhoto.likes;
   fullPhotoDescription.textContent = currentPhoto.description;
-  shownCommentsCount.textContent = currentPhoto.comments.length;
+  commentsCount.textContent = currentPhoto.comments.length;
   comments.innerHTML = '';
-  renderComments(currentPhoto.comments);
 };
 
 export const showFullPhoto = () => {
-  const photos = createPhotos();
-  const thumbnails = document.querySelectorAll('.picture');
-  const commentsCount = document.querySelector('.social__comment-count');
   const commentsLoaderBtn = document.querySelector('.comments-loader');
+  const shownCommentsCount = document.querySelector('.social__comment-shown-count');
+  pictureContainer.addEventListener('click', (evt) => {
+    const thumbnail = evt.target.closest('.picture');
+    if (!thumbnail) {
+      return;
+    }
+    evt.preventDefault();
+    openModal(fullPhotoModal, body);
+    const photoId = Number(thumbnail.dataset.id);
+    const currentPhoto = photos.find((photo) => photo.id === photoId);
+    fillPhotoData(currentPhoto);
+
+    commentsLoaderBtn.classList.toggle('hidden', currentPhoto.comments.length <= 5);
+    const pagination = paginateComments(currentPhoto.comments, comments);
+    shownCommentsCount.textContent = pagination.getShownCount();
+    const handleLoadMore = () => {
+      pagination.loadMore();
+      shownCommentsCount.textContent = pagination.getShownCount();
+      commentsLoaderBtn.classList.toggle('hidden', pagination.getShownCount() >= currentPhoto.comments.length);
+    };
+    if (currentLoadMoreHandler) {
+      commentsLoaderBtn.removeEventListener('click', currentLoadMoreHandler);
+      currentLoadMoreHandler = null;
+    }
+    currentLoadMoreHandler = handleLoadMore;
+    commentsLoaderBtn.addEventListener('click', handleLoadMore);
 
-  thumbnails.forEach((thumbnail) => {
-    thumbnail.addEventListener('click', () => {
-      openModal(fullPhotoModal, body);
-      commentsCount.classList.add('hidden');
-      commentsLoaderBtn.classList.add('hidden');
-      const photoId = Number(thumbnail.dataset.id);
-      const currentPhoto = photos.find((photo) => photo.id === photoId);
-      fillPhotoData(currentPhoto);
-    });
   });
-
   closeModalButton.addEventListener('click', () => closeModal(fullPhotoModal, body));
 };
+
+

js/thumbnails.js

@@ -1,7 +1,5 @@
-import { createPhotos } from './generate-data';
+import { photos } from './generate-data';
 export const renderThumbnails = () => {
-  const photos = createPhotos();
-
   const photoTemplate = document.querySelector('#picture').content;
   const photoContainer = document.querySelector('.pictures');