diff --git a/js/components/render-comments.js b/js/components/render-comments.js index 7b47070..5cf1d24 100644 --- a/js/components/render-comments.js +++ b/js/components/render-comments.js @@ -1,4 +1,4 @@ -import { bigPicture } from './show-big-picture'; +const COMMENTS_PORTION = 5; const createComment = ({ avatar, @@ -17,24 +17,44 @@ const createComment = ({ return comment; }; -const renderComments = (comments) => { + +const renderComments = (comments, bigPicture) => { const commentList = bigPicture.querySelector('.social__comments'); const commentsLoader = bigPicture.querySelector('.comments-loader'); const commentShowCount = bigPicture.querySelector('.social__comment-shown-count'); let commentsShown = 0; const template = commentList.children[0]; - const fragment = document.createDocumentFragment(); - - + commentList.innerHTML = ''; - comments.forEach((comment) => { - const commentElement = createComment(comment, template); - fragment.append(commentElement); + const shownComments = () => { + const startIndex = commentsShown * COMMENTS_PORTION; + commentsShown++; + const endIndex = Math.min( + startIndex + COMMENTS_PORTION, + comments.length + ); + + const slicedComments = comments.slice(startIndex, endIndex); + + slicedComments.forEach((comment) => { + commentList.append(createComment(comment, template)); + }); + + if (startIndex >= comments.length) { + commentsLoader.classList.add('hidden'); + commentsShown = comments.length; + } else { + commentsLoader.classList.remove('hidden'); + } + commentShowCount.textContent = endIndex; + + }; + shownComments(); + + commentsLoader.addEventListener('click', () => { + shownComments(); }); - - commentList.innerHTML = ''; - commentList.append(fragment); }; export { diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index b37ef8c..8d9c300 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -52,5 +52,5 @@ const showBigPicture = ({ cancelButton.addEventListener('click', onCancelButtonClick); export { - showBigPicture, bigPicture + showBigPicture };