Merge pull request #8 from SmithDaria/module8-task2

js/bigPictures.js

@@ -4,15 +4,19 @@ import {isEscapeKey} from './util.js';
 const bigPicture = document.querySelector('.big-picture');
 const cancelBigPicture = document.querySelector('.big-picture__cancel');
 const body = document.querySelector('body');
-const countComment = document.querySelector('.social__comment-count');
-const loadComment = document.querySelector('.comments-loader');
+const countComment = document.querySelector('.social__comment-shown-count');
+const loaderComments = document.querySelector('.comments-loader');
 const urlBigPicture = document.querySelector('.big-picture__img').querySelector('img');
 const likesBigPicture = document.querySelector('.likes-count');
 const totalCountCommentBigPicture = document.querySelector('.social__comment-total-count');
 const descriptionBigPicture = document.querySelector('.social__caption');
 const commentTemplate = document.querySelector('.social__comment');
 const commentsBigPicture = document.querySelector('.social__comments');
 
+let comments = [];
+let indexComment = 0;
+const stepComment = 5;
+
 function onCloseBigPictureClick() {
   closeBigPicture();
 }
@@ -40,11 +44,17 @@ function fillBigPicture (array) {
 
 function dropComments () {
   commentsBigPicture.innerHTML = '';
+  indexComment = 0;
+  loaderComments.classList.remove('hidden');
+  loaderComments.removeEventListener('click', loadNextComments);
 }
 
-function createComments (array) {
+function loadNextComments () {
+  const drawComments = comments.slice(indexComment, indexComment + stepComment);
+  const numberDrawComments = drawComments.length + indexComment;
+
   const commentListFragment = document.createDocumentFragment();
-  array.comments.forEach((comment) => {
+  drawComments.forEach((comment) => {
     const commentElement = commentTemplate.cloneNode(true);
     const commentAvatar = commentElement.querySelector('.social__picture');
     const commentText = commentElement.querySelector('.social__text');
@@ -54,16 +64,29 @@ function createComments (array) {
     commentListFragment.appendChild(commentElement);
   });
   commentsBigPicture.appendChild(commentListFragment);
+
+  countComment.textContent = numberDrawComments;
+  totalCountCommentBigPicture.textContent = comments.length;
+
+  indexComment += stepComment;
+
+  if (numberDrawComments >= comments.length) {
+    loaderComments.classList.add('hidden');
+  }
+}
+
+function loadAllComments (pictureDataComments) {
+  comments = pictureDataComments;
+  loadNextComments();
+  loaderComments.addEventListener('click', loadNextComments);
 }
 
 export function openBigPicture (photoId) {
+  dropComments();
   const pictureData = morePosts.find((postData) => postData.id === Number (photoId));
   fillBigPicture(pictureData);
-  dropComments();
-  createComments(pictureData);
+  loadAllComments(pictureData.comments);
 
-  countComment.classList.add('hidden');
-  loadComment.classList.add('hidden');
   bigPicture.classList.remove('hidden');
   body.classList.add('modal-open');