From 1dc287f2180d9dafe33fcb94a681e3abc4bc152c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D1=80=D0=B8=D1=8F=20=D0=A7=D0=B5=D1=80=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0?= Date: Thu, 28 Nov 2024 22:48:46 +0500 Subject: [PATCH 1/4] =?UTF-8?q?=D0=9E=D1=82=D0=BA=D1=80=D1=8B=D0=B2=D0=B0?= =?UTF-8?q?=D0=B5=D1=82=D1=81=D1=8F=20=D0=B8=20=D0=B7=D0=B0=D0=BA=D1=80?= =?UTF-8?q?=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20(=D1=87=D0=B0?= =?UTF-8?q?=D1=81=D1=82=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 41 ++++++++++++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 91e2caa..3c3e66e 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -1,12 +1,16 @@ import { isEscapeKey } from './util.js'; +const COMMENTS_STEP = 5; const bigPictureElement = document.querySelector('.big-picture'); const bodyElement = document.querySelector('body'); -const commentCountElement = bigPictureElement.querySelector('.social__comment-count'); const commentListElement = bigPictureElement.querySelector('.social__comments'); -const commentsLoaderElement = bigPictureElement.querySelector('.comments-loader'); +const commentsLoader = document.querySelector('.comments-loader'); const cancelButtonElement = bigPictureElement.querySelector('.big-picture__cancel'); const liElement = commentListElement.querySelector('li'); +const commentCountAll = bigPictureElement.querySelector('.comments-count'); + +let currentCount = 0; +let comments = []; const createComment = ({ avatar, message, name}) => { const comment = liElement.cloneNode(true); @@ -19,15 +23,30 @@ const createComment = ({ avatar, message, name}) => { }; const showComments = (comments) => { - commentListElement.innerHTML = ''; + + currentCount +=COMMENTS_STEP; + if (currentCount >= comments.length) { + commentsLoader.classList.add('hidden'); + currentCount = comments.length; + } + else { + commentsLoader.classList.remove('hidden'); + } const fragment = document.createDocumentFragment(); - comments.forEach ((item) => { - const comment = createComment(item); + for (let i = 0; i < currentCount; i++) { + const comment = createComment(comments[i]); fragment.append(comment); - }); + } + commentListElement.innerHTML = ''; commentListElement.append(fragment); + commentCountAll.textContent = comments.length; + +}; + +const onCommentsLoaderClick = () => { + showComments(comments); }; const onDocumentKeydown = (evt) => { @@ -41,6 +60,7 @@ function hideBigPicture () { bigPictureElement.classList.add('hidden'); bodyElement.classList.remove('modal-open'); document.removeEventListener('keydown', onDocumentKeydown); + currentCount = 0; } const onCancelButtonClick = () => { @@ -56,14 +76,17 @@ const showPictureDetails = ({ url, likes, description }) => { const showBigPicture = (data) => { bigPictureElement.classList.remove('hidden'); bodyElement.classList.add('modal-open'); - commentsLoaderElement.classList.add('hidden'); - commentCountElement.classList.add('hidden'); + commentsLoader.classList.add('hidden'); document.addEventListener('keydown', onDocumentKeydown); showPictureDetails(data); - showComments(data.comments); + comments = data.comments + if (comments.length >= 0) { + showComments(comments); + } }; cancelButtonElement.addEventListener('click', onCancelButtonClick); +commentsLoader.addEventListener('click', onCommentsLoaderClick); export { showBigPicture }; From e168afe2ee0b6295a7cdba96648f31b8c28f75f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D1=80=D0=B8=D1=8F=20=D0=A7=D0=B5=D1=80=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0?= Date: Thu, 28 Nov 2024 22:54:43 +0500 Subject: [PATCH 2/4] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BE=D1=82=20=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 3c3e66e..6ebe9a6 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -22,13 +22,13 @@ const createComment = ({ avatar, message, name}) => { return comment; }; -const showComments = (comments) => { - - currentCount +=COMMENTS_STEP; +const showComments = () => { + currentCount += COMMENTS_STEP; if (currentCount >= comments.length) { commentsLoader.classList.add('hidden'); currentCount = comments.length; } + else { commentsLoader.classList.remove('hidden'); } @@ -80,7 +80,7 @@ const showBigPicture = (data) => { document.addEventListener('keydown', onDocumentKeydown); showPictureDetails(data); - comments = data.comments + comments = data.comments; if (comments.length >= 0) { showComments(comments); } From 542d45bfe5b14d871f55a0695ab1fb25e4224acf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D1=80=D0=B8=D1=8F=20=D0=A7=D0=B5=D1=80=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0?= Date: Thu, 28 Nov 2024 22:56:23 +0500 Subject: [PATCH 3/4] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BE=D1=82=20=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 6ebe9a6..5b77770 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -27,9 +27,7 @@ const showComments = () => { if (currentCount >= comments.length) { commentsLoader.classList.add('hidden'); currentCount = comments.length; - } - - else { + } else { commentsLoader.classList.remove('hidden'); } From cf370386006a80259ab2f7db482df396c11594e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D1=80=D0=B8=D1=8F=20=D0=A7=D0=B5=D1=80=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0?= Date: Thu, 28 Nov 2024 23:37:18 +0500 Subject: [PATCH 4/4] =?UTF-8?q?=D1=82=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BB-=D0=B2=D0=BE=20=D0=BA=D0=BE=D0=BC=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B5=D0=B2=20=D0=BE=D0=B1?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BB=D1=8F=D0=B5=D1=82=D1=81=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 5b77770..27d0859 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -7,7 +7,6 @@ const commentListElement = bigPictureElement.querySelector('.social__comments'); const commentsLoader = document.querySelector('.comments-loader'); const cancelButtonElement = bigPictureElement.querySelector('.big-picture__cancel'); const liElement = commentListElement.querySelector('li'); -const commentCountAll = bigPictureElement.querySelector('.comments-count'); let currentCount = 0; let comments = []; @@ -39,7 +38,8 @@ const showComments = () => { commentListElement.innerHTML = ''; commentListElement.append(fragment); - commentCountAll.textContent = comments.length; + bigPictureElement.querySelector('.social__comment-count').innerHTML = + `${currentCount} из ${comments.length} комментариев`; };