diff --git a/js/big-picture.js b/js/big-picture.js index 49e6a2b..5064f1b 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -1,3 +1,5 @@ +const COMMENTS_PER_LOAD = 5; + const bigPictureElement = document.querySelector('.big-picture'); const bigPictureImg = bigPictureElement.querySelector('.big-picture__img img'); const likesCount = bigPictureElement.querySelector('.likes-count'); @@ -9,6 +11,9 @@ const commentCountBlock = bigPictureElement.querySelector('.social__comment-coun const commentsLoader = bigPictureElement.querySelector('.comments-loader'); const cancelButton = bigPictureElement.querySelector('.big-picture__cancel'); +let currentComments = []; +let shownCommentsCount = 0; + const createCommentElement = ({ avatar, name, message }) => { const commentItem = document.createElement('li'); commentItem.classList.add('social__comment'); @@ -30,6 +35,28 @@ const createCommentElement = ({ avatar, name, message }) => { return commentItem; }; +const renderComments = () => { + const commentsToShow = currentComments.slice(shownCommentsCount, shownCommentsCount + COMMENTS_PER_LOAD); + + commentsToShow.forEach((comment) => { + const commentElement = createCommentElement(comment); + socialComments.appendChild(commentElement); + }); + + shownCommentsCount += commentsToShow.length; + commentCount.textContent = shownCommentsCount; + + if (shownCommentsCount >= currentComments.length) { + commentsLoader.classList.add('hidden'); + } else { + commentsLoader.classList.remove('hidden'); + } +}; + +const onCommentsLoaderClick = () => { + renderComments(); +}; + const openBigPicture = (pictureData) => { bigPictureElement.classList.remove('hidden'); document.body.classList.add('modal-open'); @@ -40,18 +67,13 @@ const openBigPicture = (pictureData) => { socialCaption.textContent = pictureData.description; socialComments.innerHTML = ''; + currentComments = pictureData.comments; + shownCommentsCount = 0; - const comments = pictureData.comments; - totalCommentCount.textContent = comments.length; - commentCount.textContent = Math.min(5, comments.length); - - comments.forEach((comment) => { - const commentElement = createCommentElement(comment); - socialComments.appendChild(commentElement); - }); + totalCommentCount.textContent = currentComments.length; + commentCountBlock.classList.remove('hidden'); - commentCountBlock.classList.add('hidden'); - commentsLoader.classList.add('hidden'); + renderComments(); }; const closeBigPicture = () => { @@ -64,6 +86,8 @@ const initBigPictureHandlers = () => { closeBigPicture(); }); + commentsLoader.addEventListener('click', onCommentsLoaderClick); + document.addEventListener('keydown', (evt) => { if (evt.key === 'Escape' && !bigPictureElement.classList.contains('hidden')) { closeBigPicture();