diff --git a/js/big-picture.js b/js/big-picture.js index 7f10981..3d4c083 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -7,45 +7,70 @@ const descriptionElement = bigPicture.querySelector('.social__caption'); const commentCountBlock = bigPicture.querySelector('.social__comment-count'); const commentsLoader = bigPicture.querySelector('.comments-loader'); const closeButton = bigPicture.querySelector('.big-picture__cancel'); +const commentsPerPage = 5; +let currentComments = []; +let displayedCommentsCount = 0; -function openBigPicture(photoData) { - // Скрываем блоки комментариев сразу - commentCountBlock.classList.add('hidden'); - commentsLoader.classList.add('hidden'); +function renderComments() { + const nextComments = currentComments.slice(displayedCommentsCount, displayedCommentsCount + commentsPerPage); + + nextComments.forEach((comment) => { + const commentElement = document.createElement('li'); + commentElement.classList.add('social__comment'); - // данные фотографии + commentElement.innerHTML = ` + ${comment.name} +

${comment.message}

+ `; + socialComments.appendChild(commentElement); + }); + + displayedCommentsCount += nextComments.length; + + commentCountBlock.textContent = `${displayedCommentsCount} из ${currentComments.length} комментариев`; + + if (displayedCommentsCount >= currentComments.length) { + commentsLoader.classList.add('hidden'); + } +} + +function openBigPicture(photoData) { + // Данные фотографии imageElement.src = photoData.url; imageElement.alt = photoData.description; likesCount.textContent = photoData.likes; commentsCount.textContent = photoData.comments.length; descriptionElement.textContent = photoData.description; - // очистка старых комментов + // Очистка старых комментариев socialComments.innerHTML = ''; - // создаем новые комменты - for (let i = 0; i < photoData.comments.length; i++) { - const comment = photoData.comments[i]; - const commentElement = document.createElement('li'); - commentElement.classList.add('social__comment'); + // Инициализация комментариев + currentComments = photoData.comments; + displayedCommentsCount = 0; - commentElement.innerHTML = ` - ${comment.name} -

${comment.message}

- `; - socialComments.appendChild(commentElement); - } + // Рендер первых комментариев + renderComments(); - // убираем блоки комментариев - commentCountBlock.classList.add('hidden'); - commentsLoader.classList.add('hidden'); + // Логика отображения блока комментариев + if (currentComments.length > 0) { + commentCountBlock.classList.remove('hidden'); + if (currentComments.length > commentsPerPage) { + commentsLoader.classList.remove('hidden'); // Показываем кнопку, если есть больше 5 комментариев + } else { + commentsLoader.classList.add('hidden'); // Скрываем кнопку, если комментариев 5 или меньше + } + } else { + commentCountBlock.classList.add('hidden'); + commentsLoader.classList.add('hidden'); + } - // открываем окошко + // Открытие окна bigPicture.classList.remove('hidden'); document.body.classList.add('modal-open'); @@ -53,6 +78,7 @@ function openBigPicture(photoData) { document.addEventListener('keydown', onEscapePress); } + function closeBigPicture() { bigPicture.classList.add('hidden'); document.body.classList.remove('modal-open'); @@ -66,4 +92,6 @@ function onEscapePress(evt) { } } +commentsLoader.addEventListener('click', renderComments); + export { openBigPicture };