diff --git a/js/fullSize.js b/js/fullSize.js index 861ffa2..f52a645 100644 --- a/js/fullSize.js +++ b/js/fullSize.js @@ -6,11 +6,11 @@ const likesCounter = userBigPicture.querySelector('.likes-count'); const fullPicture = userBigPicture.querySelector('.big-picture__img'); const pictureUrl = fullPicture.querySelector('img'); const commentsCount = userBigPicture.querySelector('.social__comment-total-count'); -const socialCommentCount = userBigPicture.querySelector('.social__comment-count'); +const socialCommentCount = userBigPicture.querySelector('.social__comment-shown-count'); const description = userBigPicture.querySelector('.social__caption'); const commentsLoader = userBigPicture.querySelector('.comments-loader'); const socialComments = userBigPicture.querySelector('.social__comments'); - +let currentOpenPhoto = null; let currentCommentsCount = 0; const COMMENTS_LOAD_STEP = 5; @@ -21,6 +21,15 @@ const onBigPictureKeydown = (evt) => { } }; +const updateAndRenderComments = () => { + currentCommentsCount += COMMENTS_LOAD_STEP; + renderComments(currentOpenPhoto.comments); + socialCommentCount.textContent = `${Math.min(currentCommentsCount, currentOpenPhoto.comments.length)}`; + if (currentCommentsCount >= currentOpenPhoto.comments.length) { + commentsLoader.classList.add('.hidden'); + } +}; + function renderComments(comments) { socialComments.innerHTML = ''; comments.slice(0, currentCommentsCount).forEach((comment) => { @@ -47,11 +56,12 @@ function openBigPicture(photo) { userBigPicture.classList.remove('hidden'); document.body.classList.add('modal-open'); document.addEventListener('keydown', onBigPictureKeydown); + currentOpenPhoto = photo; likesCounter.textContent = photo.likes; pictureUrl.src = photo.url; commentsCount.textContent = photo.comments.length; - socialCommentCount.textContent = `${currentCommentsCount}`; + socialCommentCount.textContent = photo.comments.length < 5 ? photo.comments.length : 5; description.textContent = photo.description; commentsLoader.classList.remove('hidden'); @@ -61,6 +71,8 @@ function openBigPicture(photo) { renderComments(photo.comments); + commentsLoader.addEventListener('click', updateAndRenderComments); + commentsLoader.addEventListener('click', () => { currentCommentsCount += COMMENTS_LOAD_STEP; renderComments(photo.comments); @@ -75,6 +87,7 @@ function closeBigPicture() { userBigPicture.classList.add('hidden'); document.body.classList.remove('modal-open'); document.removeEventListener('keydown', onBigPictureKeydown); + commentsLoader.removeEventListener('click', updateAndRenderComments); } userBigPictureCancel.addEventListener('click', () => {