diff --git a/js/big-photo-viewer.js b/js/big-photo-viewer.js index 9e17215..ec6bea4 100644 --- a/js/big-photo-viewer.js +++ b/js/big-photo-viewer.js @@ -1,7 +1,8 @@ -import {fillCommentsList} from './comments-viewer.js'; +import {fillCommentsList, loadMoreComments} from './comments-viewer.js'; const picturesContainerElement = document.querySelector('.pictures'); const bigPhotoElement = document.querySelector('.big-picture'); +const looadMoreCommentsElement = document.querySelector('.comments-loader'); const bodyElement = document.body; let photoData = []; @@ -9,14 +10,10 @@ let photoData = []; picturesContainerElement.addEventListener('click', (evt) => { const targetPhotoId = evt.target.closest('.picture'); const targetPhoto = photoData.find((photo) => photo.photoId === Number(targetPhotoId.dataset.photoId)); - const {url, description, likes, comments} = targetPhoto; - - bigPhotoElement.querySelector('.social__comment-count').classList.add('hidden'); - bigPhotoElement.querySelector('.comments-loader').classList.add('hidden'); + const {url, description, likes} = targetPhoto; bigPhotoElement.querySelector('.big-picture__img img').setAttribute('src', url); bigPhotoElement.querySelector('.likes-count').textContent = likes; - bigPhotoElement.querySelector('.social__comment-total-count').textContent = comments.length; bigPhotoElement.querySelector('.social__caption').textContent = description; bigPhotoElement.classList.remove('hidden'); @@ -24,8 +21,6 @@ picturesContainerElement.addEventListener('click', (evt) => { fillCommentsList(targetPhoto.comments); - bigPhotoElement.querySelector('.social__comment-shown-count').textContent = comments.length; - bigPhotoElement.setAttribute('tabindex', '0'); bigPhotoElement.focus(); }); @@ -42,6 +37,10 @@ bigPhotoElement.addEventListener('keydown', (evt) => { } }); +looadMoreCommentsElement.addEventListener('click', () => { + loadMoreComments(); +}); + function closeBigPhoto() { bigPhotoElement.classList.add('hidden'); bodyElement.classList.remove('modal-open'); diff --git a/js/comments-renderer.js b/js/comments-renderer.js new file mode 100644 index 0000000..d341efe --- /dev/null +++ b/js/comments-renderer.js @@ -0,0 +1,13 @@ +const commentTemplateElement = document.querySelector('.social__comment'); + +function addComment({avatar, name, commentsList}, socialCommentsElement) { + const newCommentElement = commentTemplateElement.cloneNode(true); + const commentPictureElement = newCommentElement.querySelector('.social__picture'); + + commentPictureElement.setAttribute('src', avatar); + commentPictureElement.setAttribute('alt', name); + newCommentElement.querySelector('.social__text').textContent = commentsList; + socialCommentsElement.appendChild(newCommentElement); +} + +export {addComment}; diff --git a/js/comments-viewer.js b/js/comments-viewer.js index fa3d3fc..c4a17a9 100644 --- a/js/comments-viewer.js +++ b/js/comments-viewer.js @@ -1,18 +1,51 @@ +import {addComment} from './comments-renderer.js'; + const socialCommentsElement = document.querySelector('.social__comments'); -const commentTemplateElement = socialCommentsElement.querySelector('.social__comment'); +const bigPictureElement = document.querySelector('.big-picture'); +const loadCommentElement = bigPictureElement.querySelector('.social__comment-count'); +const currentCommentsCountElement = bigPictureElement.querySelector('.social__comment-shown-count'); +const totalCommentsCountElement = bigPictureElement.querySelector('.social__comment-total-count'); +const loadCommentsButtonElement = bigPictureElement.querySelector('.social__comments-loader'); +const LOADING_STEP = 5; +let commentsArray = []; +let totalComments; +let currentCommentsLoaded = 0; function fillCommentsList(comments) { socialCommentsElement.innerHTML = ''; - comments.forEach((comment) => { - const {avatar, name, commentsList} = comment; - const newCommentElement = commentTemplateElement.cloneNode(true); - const commentPictureElement = newCommentElement.querySelector('.social__picture'); - - commentPictureElement.setAttribute('src', avatar); - commentPictureElement.setAttribute('alt', name); - newCommentElement.querySelector('.social__text').textContent = commentsList; - socialCommentsElement.appendChild(newCommentElement); - }); + + if (comments.length > 0) { + commentsArray = comments; + currentCommentsLoaded = 0; + totalComments = comments.length; + + const commentsToLoad = Math.min(LOADING_STEP, totalComments); + for (let i = 0; i < commentsToLoad; i++) { + addCommentAndUpdateCounter(commentsArray[i]); + } + loadCommentsButtonElement.classList.toggle('hidden', currentCommentsLoaded >= totalComments); + } else { + loadCommentElement.innerHTML = ''; + loadCommentElement.textContent = 'Нет комментариев'; + loadCommentsButtonElement.classList.toggle('hidden', currentCommentsLoaded >= totalComments); + } +} + +function loadMoreComments() { + const commentsToLoad = Math.min(LOADING_STEP, totalComments - currentCommentsLoaded); + + for (let i = 0; i < commentsToLoad; i++) { + addCommentAndUpdateCounter(commentsArray[currentCommentsLoaded]); + } + loadCommentsButtonElement.classList.toggle('hidden', currentCommentsLoaded >= totalComments); +} + +function addCommentAndUpdateCounter(comment) { + addComment(comment, socialCommentsElement); + + currentCommentsLoaded++; + currentCommentsCountElement.textContent = currentCommentsLoaded; + totalCommentsCountElement.textContent = totalComments; } -export {fillCommentsList}; +export {fillCommentsList, loadMoreComments}; diff --git a/js/util.js b/js/util.js index e512e6d..e941e6b 100644 --- a/js/util.js +++ b/js/util.js @@ -17,7 +17,7 @@ function generateUniqueInteger(getRandomInt, min, max) { function getRandomArrayElements(array, getRandomInt, maxLength = 1) { const elements = []; for (let i = 0; i < maxLength; i++) { - elements.push(array[getRandomInt(0, array.length)]); + elements.push(array[getRandomInt(0, array.length - 1)]); } return elements.join(' ');