diff --git a/js/draw-fullsize-photo.js b/js/draw-fullsize-photo.js index 82e0905..ccc4e06 100644 --- a/js/draw-fullsize-photo.js +++ b/js/draw-fullsize-photo.js @@ -8,12 +8,12 @@ const imgComments = document.querySelector('.social__comment-total-count'); const commentsContainer = document.querySelector('.social__comments'); const commentItem = commentsContainer.querySelector('.social__comment'); const shownComments = document.querySelector('.social__comment-shown-count'); -const commentsCounter = document.querySelector('.social__comment-count'); -const commentsLoader = document.querySelector('.comments-loader'); const closeButton = document.querySelector('.big-picture__cancel'); const photoDescription = document.querySelector('.social__caption'); +const moreComments = document.querySelector('.comments-loader'); const commentListFragment = document.createDocumentFragment(); + const onDocumentKeydown = (evt) => { if (isEscapeKey(evt)) { evt.preventDefault(); @@ -26,36 +26,50 @@ function openFullsizePhoto() { document.addEventListener('keydown', onDocumentKeydown); } -commentsCounter.classList.add('hidden'); -commentsLoader.classList.add('hidden'); - function closeFullsizePhoto() { modal.classList.add('hidden'); } const showComments = (allComments) => { - allComments.forEach((comment) => { + for (let i = 0; i < allComments.length; i++) { const commentItemClone = commentItem.cloneNode(true); - commentItemClone.querySelector('.social__picture').src = comment.avatar; - commentItemClone.querySelector('.social__picture').alt = comment.name; - commentItemClone.querySelector('.social__text').textContent = comment.message; + commentItemClone.querySelector('.social__picture').src = allComments[i].avatar; + commentItemClone.querySelector('.social__picture').alt = allComments[i].name; + commentItemClone.querySelector('.social__text').textContent = allComments[i].message; commentListFragment.appendChild(commentItemClone); - }); - commentsContainer.innerHTML = ''; + } commentsContainer.appendChild(commentListFragment); }; + function transferModalData(evt, photoLink) { modalImg.src = evt.target.src; imgLikes.textContent = photoLink.querySelector('.picture__likes').textContent; imgComments.textContent = photoLink.querySelector('.picture__comments').textContent; shownComments.textContent = photoLink.querySelector('.picture__comments').textContent; photoDescription.textContent = photoLink.querySelector('.picture__img').alt; + let minCommentIndex = 0; + let step = 5; thumbnails.forEach((thumbnail) => { if (evt.target.src.includes(thumbnail.url)) { - showComments(thumbnail.comments); + commentsContainer.innerHTML = ''; + + showComments(thumbnail.comments.slice(minCommentIndex, step)); + shownComments.textContent = step; + moreComments.addEventListener('click', () => { + + + showComments(thumbnail.comments.slice(minCommentIndex += 5, step += 5)); + shownComments.textContent = step; + if (thumbnail.comments.length <= step) { + moreComments.classList.add('hidden'); + shownComments.textContent = thumbnail.comments.length; + } + + }); } }); + } closeButton.addEventListener('click', () => {