From 2c4a68e1de4a2bdef89d931cef4d398e83925bab Mon Sep 17 00:00:00 2001 From: "rit1992@mail.ru" <158091165+margarita0206@users.noreply.github.com> Date: Fri, 19 Jul 2024 21:06:30 +0300 Subject: [PATCH] =?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(2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/main.js | 2 -- js/modal-pictures.js | 83 ++++++++++++++++++++++++++++---------------- js/thumbnail.js | 32 ++++++++++++----- 3 files changed, 76 insertions(+), 41 deletions(-) diff --git a/js/main.js b/js/main.js index 6011623..6050cb2 100644 --- a/js/main.js +++ b/js/main.js @@ -5,5 +5,3 @@ import './modal-pictures.js'; const currentPictures = randomPosts(); generateThumbnails(currentPictures); - -export {currentPictures}; diff --git a/js/modal-pictures.js b/js/modal-pictures.js index f2d6704..b1710fb 100644 --- a/js/modal-pictures.js +++ b/js/modal-pictures.js @@ -1,29 +1,60 @@ -import { currentPictures } from './main.js'; import { isEscapeKey } from './utils.js'; const bigPicturesModal = document.querySelector('.big-picture'); const body = document.querySelector('body'); - const closeBigPicturesButton = bigPicturesModal.querySelector('.big-picture__cancel'); -const fillDataBigPicture = (bigPicture, {url, likes, comments, description}) => { - bigPicture.querySelector('big-picture__img img').src = url; - bigPicture.querySelector('.likes-count').textContent = likes; - bigPicture.querySelector('.social__comment-total-count').textContent = comments.length; - bigPicture.querySelector('.social__caption').textContent = description; - bigPicture.querySelector('.social__comment-shown-count').textContent = comments.length <= 5 ? comments.length : 5; +const loadCommentsButton = bigPicturesModal.querySelector('.comments-loader'); +const commentTotalCount = bigPicturesModal.querySelector('.social__comment-total-count'); +const commentShowCount = bigPicturesModal.querySelector('.social__comment-shown-count'); +const commentsList = bigPicturesModal.querySelector('.social__comments'); +const commentTemplate = bigPicturesModal.querySelector('.social__comment'); - const commentsList = bigPicture.querySelector('.social__comments'); - const commentTemplate = document.querySelector('#comment').content.querySelector('.social__comment'); - const commentFragment = document.createDocumentFragment(); - for (let i = 0; i < comments.length; i++) { - const comment = commentTemplate.cloneNode(true); - comment.querySelector('.social__picture').src = comments[i].avatar; - comment.querySelector('.social__picture').alt = comments[i].name; - comment.querySelector('.social__text').textContent = comments[i].message; - commentFragment.append(comment); +const localComment = []; +let renderedCommentsCount = 0; +let total = 0; + +const renderLoader = () => { + if (renderedCommentsCount < total) { + loadCommentsButton.classList.remove('hidden'); + } else { + loadCommentsButton.classList.add('hidden'); } +}; + +const renderStatistic = () => { + commentShowCount.textContent = renderedCommentsCount; + commentTotalCount.textContent = total; +}; + +const renderComments = () => { + const commentFragment = document.createDocumentFragment(); + localComment.splice(0, 5).forEach((item) => { + const commentElement = commentTemplate.cloneNode(true); + commentElement.querySelector('.social__picture').src = item.avatar; + commentElement.querySelector('.social__picture').alt = item.name; + commentElement.querySelector('.social__text').textContent = item.message; + commentFragment.append(commentElement); + + renderedCommentsCount++; + }); commentsList.append(commentFragment); + renderLoader(); + renderStatistic(); +}; + +const fillDataBigPicture = ({ url, likes, comments, description}) => { + bigPicturesModal.querySelector('.big-picture__img img').src = url; + bigPicturesModal.querySelector('.likes-count').textContent = likes; + bigPicturesModal.querySelector('.social__caption').textContent = description; + + localComment.length = 0; + localComment.push(...comments.slice()); + commentsList.innerHTML = ''; + renderedCommentsCount = 0; + total = comments.length; + + renderComments(); }; const onDocumentKeydown = (evt) => { @@ -33,30 +64,22 @@ const onDocumentKeydown = (evt) => { } }; -const openBigPictureWindow = () => { +const openBigPictureWindow = (photo) => { bigPicturesModal.classList.remove('hidden'); body.classList.add('.modal-open'); document.addEventListener('keydown', onDocumentKeydown); - - /*временно скрыть */ - bigPicturesModal.querySelector('.social__comment-count').classList.add('hidden'); - bigPicturesModal.querySelector('.comments-loader').classList.add('hidden'); + fillDataBigPicture(photo); }; const closeBigPictureWindow = () => { bigPicturesModal.classList.add('hidden'); body.classList.remove('.modal-open'); + document.removeEventListener('keydown', onDocumentKeydown); }; closeBigPicturesButton.addEventListener('click', closeBigPictureWindow); -document.addEventListener('click', (evt) => { - if(evt.target.closest('.picture')) { - openBigPictureWindow(); - const currentId = Number(evt.target.closest('.picture').id); - const currentPicture = currentPictures.find(({id}) => id === currentId); - fillDataBigPicture(bigPicturesModal, currentPicture); - } -}); +loadCommentsButton.addEventListener('click', renderComments); +export { openBigPictureWindow }; diff --git a/js/thumbnail.js b/js/thumbnail.js index 102c630..b88e450 100644 --- a/js/thumbnail.js +++ b/js/thumbnail.js @@ -1,11 +1,16 @@ +import { openBigPictureWindow } from './modal-pictures.js'; + const thumbNailTemplate = document.querySelector('#picture').content.querySelector('.picture'); const container = document.querySelector('.pictures'); -const createThumbnail = ({url, description, likes, comments}) => { - const thumbnail = thumbNailTemplate.cloneNode(true); +const localPictures = []; - thumbnail.querySelector('.picture__img').src = url; - thumbnail.querySelector('.picture__img').alt = description; +const createThumbnail = ({id, url, description, likes, comments}) => { + const thumbnail = thumbNailTemplate.cloneNode(true); + thumbnail.dataset.id = id; + const pictureImage = thumbnail.querySelector('.picture__img'); + pictureImage.src = url; + pictureImage.alt = description; thumbnail.querySelector('.picture__likes').textContent = likes; thumbnail.querySelector('.picture__comments').textContent = comments.length; @@ -13,14 +18,23 @@ const createThumbnail = ({url, description, likes, comments}) => { }; const generateThumbnails = (pictures) => { - const fragment = document.createDocumentFragment(); - + localPictures.length = 0; + localPictures.push(...pictures.slice()); + const pictureFragment = document.createDocumentFragment(); pictures.forEach((picture) => { const thumbnail = createThumbnail(picture); - fragment.append(thumbnail); + pictureFragment.append(thumbnail); }); - container.append(fragment); + container.append(pictureFragment); }; -export { generateThumbnails }; +container.addEventListener('click', (evt) => { + if(evt.target.closest('.picture')) { + const currentId = Number(evt.target.closest('.picture').dataset.id); + const currentPicture = localPictures.find(({id}) => id === currentId); + openBigPictureWindow(currentPicture); + } +}); + +export { generateThumbnails, container };