From 13f862b1dedc072aab143dfae51dd41c3176fca9 Mon Sep 17 00:00:00 2001 From: Ilya Kharlamov Date: Thu, 16 Jan 2025 05:12:58 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D1=80=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F=20"=D0=9E=D1=82?= =?UTF-8?q?=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=B8?= =?UTF-8?q?=20=D0=B7=D0=B0=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81?= =?UTF-8?q?=D1=8F=20(=D1=87=D0=B0=D1=81=D1=82=D1=8C=202)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-photo-viewer.js | 15 ++++----- js/comments-viewer.js | 76 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 72 insertions(+), 19 deletions(-) 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-viewer.js b/js/comments-viewer.js index fa3d3fc..406c1c0 100644 --- a/js/comments-viewer.js +++ b/js/comments-viewer.js @@ -1,18 +1,72 @@ 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 loadingStep = 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(loadingStep, totalComments); + for (let i = 0; i < commentsToLoad; i++) { + addCommentAndUpdateCounter(commentsArray[i]); + } + updateLoadCommentsButtonVisibility(); + } else { + loadCommentElement.innerHTML = ''; + loadCommentElement.textContent = 'Нет комментариев'; + updateLoadCommentsButtonVisibility(); + } +} + +function loadMoreComments() { + const commentsToLoad = Math.min(loadingStep, totalComments - currentCommentsLoaded); + + for (let i = 0; i < commentsToLoad; i++) { + addCommentAndUpdateCounter(commentsArray[currentCommentsLoaded]); + } + updateLoadCommentsButtonVisibility(); +} + +function addComment(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); +} + +function updateCommentCounters() { + currentCommentsCountElement.textContent = currentCommentsLoaded; + totalCommentsCountElement.textContent = totalComments; +} + +function addCommentAndUpdateCounter(comment) { + addComment(comment); + currentCommentsLoaded++; + updateCommentCounters(); +} + +function updateLoadCommentsButtonVisibility() { + if (currentCommentsLoaded >= totalComments) { + loadCommentsButtonElement.classList.add('hidden'); + } else { + loadCommentsButtonElement.classList.remove('hidden'); + } } -export {fillCommentsList}; +export {fillCommentsList, loadMoreComments}; From 0d45dd430cb81af99823738eb9e649a4ec6e9702 Mon Sep 17 00:00:00 2001 From: Ilya Kharlamov Date: Thu, 16 Jan 2025 22:14:18 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=B2=D0=BD=D0=BE=D1=81=D0=B8=D1=82=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/comments-viewer.js | 25 ++++++------------------- js/util.js | 2 +- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/js/comments-viewer.js b/js/comments-viewer.js index 406c1c0..2f29f61 100644 --- a/js/comments-viewer.js +++ b/js/comments-viewer.js @@ -22,11 +22,11 @@ function fillCommentsList(comments) { for (let i = 0; i < commentsToLoad; i++) { addCommentAndUpdateCounter(commentsArray[i]); } - updateLoadCommentsButtonVisibility(); + loadCommentsButtonElement.classList.toggle('hidden', currentCommentsLoaded >= totalComments); } else { loadCommentElement.innerHTML = ''; loadCommentElement.textContent = 'Нет комментариев'; - updateLoadCommentsButtonVisibility(); + loadCommentsButtonElement.classList.toggle('hidden', currentCommentsLoaded >= totalComments); } } @@ -36,11 +36,10 @@ function loadMoreComments() { for (let i = 0; i < commentsToLoad; i++) { addCommentAndUpdateCounter(commentsArray[currentCommentsLoaded]); } - updateLoadCommentsButtonVisibility(); + loadCommentsButtonElement.classList.toggle('hidden', currentCommentsLoaded >= totalComments); } -function addComment(comment) { - const {avatar, name, commentsList} = comment; +function addComment({avatar, name, commentsList}) { const newCommentElement = commentTemplateElement.cloneNode(true); const commentPictureElement = newCommentElement.querySelector('.social__picture'); @@ -50,23 +49,11 @@ function addComment(comment) { socialCommentsElement.appendChild(newCommentElement); } -function updateCommentCounters() { - currentCommentsCountElement.textContent = currentCommentsLoaded; - totalCommentsCountElement.textContent = totalComments; -} - function addCommentAndUpdateCounter(comment) { addComment(comment); currentCommentsLoaded++; - updateCommentCounters(); -} - -function updateLoadCommentsButtonVisibility() { - if (currentCommentsLoaded >= totalComments) { - loadCommentsButtonElement.classList.add('hidden'); - } else { - loadCommentsButtonElement.classList.remove('hidden'); - } + currentCommentsCountElement.textContent = currentCommentsLoaded; + totalCommentsCountElement.textContent = totalComments; } 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(' '); From 71ec7db896c0fc73f013d6b71e6a8da0c14ee6d2 Mon Sep 17 00:00:00 2001 From: Ilya Kharlamov Date: Sun, 19 Jan 2025 13:14:49 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=92=D0=BD=D0=BE=D1=81=D0=B8=D1=82=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8,=20=D0=B2=D1=8B=D0=B4?= =?UTF-8?q?=D0=B5=D0=BB=D1=8F=D0=B5=D1=82=20addComment=20=D0=B2=20=D0=BE?= =?UTF-8?q?=D1=82=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=BC=D0=BE?= =?UTF-8?q?=D0=B4=D1=83=D0=BB=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/comments-renderer.js | 13 +++++++++++++ js/comments-viewer.js | 22 +++++++--------------- 2 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 js/comments-renderer.js 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 2f29f61..c4a17a9 100644 --- a/js/comments-viewer.js +++ b/js/comments-viewer.js @@ -1,11 +1,12 @@ +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 loadingStep = 5; +const LOADING_STEP = 5; let commentsArray = []; let totalComments; let currentCommentsLoaded = 0; @@ -18,7 +19,7 @@ function fillCommentsList(comments) { currentCommentsLoaded = 0; totalComments = comments.length; - const commentsToLoad = Math.min(loadingStep, totalComments); + const commentsToLoad = Math.min(LOADING_STEP, totalComments); for (let i = 0; i < commentsToLoad; i++) { addCommentAndUpdateCounter(commentsArray[i]); } @@ -31,7 +32,7 @@ function fillCommentsList(comments) { } function loadMoreComments() { - const commentsToLoad = Math.min(loadingStep, totalComments - currentCommentsLoaded); + const commentsToLoad = Math.min(LOADING_STEP, totalComments - currentCommentsLoaded); for (let i = 0; i < commentsToLoad; i++) { addCommentAndUpdateCounter(commentsArray[currentCommentsLoaded]); @@ -39,18 +40,9 @@ function loadMoreComments() { loadCommentsButtonElement.classList.toggle('hidden', currentCommentsLoaded >= totalComments); } -function addComment({avatar, name, commentsList}) { - 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); -} - function addCommentAndUpdateCounter(comment) { - addComment(comment); + addComment(comment, socialCommentsElement); + currentCommentsLoaded++; currentCommentsCountElement.textContent = currentCommentsLoaded; totalCommentsCountElement.textContent = totalComments;