From 80dbebf419b173820c160c759e284a7c0ed78d9a Mon Sep 17 00:00:00 2001 From: Daniil888-m Date: Wed, 11 Dec 2024 20:01:24 +0300 Subject: [PATCH 1/5] editor --- js/big-picture-popup.js | 69 +++++++++++++++++++++++++++++++++++++++++ js/main.js | 8 +++++ js/render-pictures.js | 3 +- js/utils.js | 9 +++++- 4 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 js/big-picture-popup.js diff --git a/js/big-picture-popup.js b/js/big-picture-popup.js new file mode 100644 index 0000000..c859298 --- /dev/null +++ b/js/big-picture-popup.js @@ -0,0 +1,69 @@ +import { getPhotos } from './get-photos'; +import { hide, show } from './utils'; +const photos = getPhotos(); +const bigPhotoPopup = document.querySelector('.big-picture'); +const popupCancelElement = document.querySelector('.big-picture__cancel'); + +function onEscapeKeydown(e) { + if (e.key === 'Escape') { + hidePhotoPopup(); + } +} + +function renderComments(photoId) { + const currentPhoto = photos.find((photo) => photo.id === Number(photoId)); + const commentFragmentList = document.createDocumentFragment(); + currentPhoto.comments.forEach((comment) => { + const commEl = document.createElement('li'); + commEl.className = 'social__comment'; + + const imgEl = document.createElement('img'); + imgEl.className = 'social__picture'; + imgEl.src = comment.avatar; + imgEl.alt = comment.name; + imgEl.width = 35; + imgEl.height = 35; + + const pEl = document.createElement('p'); + pEl.className = 'social__text'; + pEl.textContent = comment.message; + + commEl.append(imgEl); + commEl.append(pEl); + commentFragmentList.append(commEl); + + }); + + return commentFragmentList; + +} +function hidePhotoPopup() { + hide(bigPhotoPopup); + document.removeEventListener('keydown', onEscapeKeydown); +} +function showPhotoPopup() { + document.body.classList.add('modal-open'); + show(bigPhotoPopup); + + document.addEventListener('keydown', onEscapeKeydown); +} +function openBigPhotoPopup(photoId) { + showPhotoPopup(); + const currentPhoto = photos.find((photo) => photo.id === Number(photoId)); + if (currentPhoto) { + const comments = renderComments(photoId); + bigPhotoPopup.querySelector('.big-picture__img img').src = currentPhoto.url; + bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes.length; + bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length; + bigPhotoPopup.querySelector('.social__comment-total-count').textContent = currentPhoto.comments.length; + bigPhotoPopup.querySelector('.social__comments').innerHTML = ''; + bigPhotoPopup.querySelector('.social__comments').append(comments); + bigPhotoPopup.querySelector('.social__caption').textContent = currentPhoto.description; + hide(bigPhotoPopup.querySelector('.social__comment-shown-count')); + hide(bigPhotoPopup.querySelector('.comments-loader')); + } +} + +popupCancelElement.addEventListener('click', hidePhotoPopup); + +export { openBigPhotoPopup }; diff --git a/js/main.js b/js/main.js index c9d888c..44e749e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,12 @@ +import { openBigPhotoPopup } from './big-picture-popup.js'; import { renderPictures } from './render-pictures.js'; renderPictures(); +document.addEventListener('click', (e) => { + const currentPicture = e.target.closest('.picture'); + + if (currentPicture) { + openBigPhotoPopup(currentPicture.dataset.photoId); + } +}); diff --git a/js/render-pictures.js b/js/render-pictures.js index 90ce326..ca73c25 100644 --- a/js/render-pictures.js +++ b/js/render-pictures.js @@ -1,7 +1,7 @@ import { getPhotos } from './get-photos.js'; +const photos = getPhotos(); function renderPictures() { - const photos = getPhotos(); const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture'); const picturesList = document.querySelector('.pictures'); @@ -12,6 +12,7 @@ function renderPictures() { const photoImg = photoElement.querySelector('img'); photoImg.src = photo.url; photoImg.alt = photo.description; + photoElement.dataset.photoId = photo.id; photoElement.querySelector('.picture__comments').textContent = photo.comments.length; photoElement.querySelector('.picture__likes').textContent = photo.likes; diff --git a/js/utils.js b/js/utils.js index f97cbe0..3cd7a8a 100644 --- a/js/utils.js +++ b/js/utils.js @@ -4,6 +4,13 @@ function getRandomInt(min, max) { const randomInt = Math.floor(Math.random() * (max - min + 1)) + min; return randomInt; } + +function hide(elem) { + elem.classList.add('hidden'); +} +function show(elem) { + elem.classList.remove('hidden'); +} function getUniqueId(min, max) { const receivedId = []; @@ -23,4 +30,4 @@ function getRandomElement(elements) { return elements[getRandomInt(0, elements.length - 1)]; } -export { getRandomInt, getUniqueId, getRandomElement }; +export { getRandomInt, getUniqueId, getRandomElement, hide, show }; From 4ac6e0906129ef4327ab87e077740ed4c1e86642 Mon Sep 17 00:00:00 2001 From: Daniil888-m Date: Wed, 11 Dec 2024 20:15:10 +0300 Subject: [PATCH 2/5] fixed the problem with modules --- js/big-picture-popup.js | 4 ++-- js/main.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js/big-picture-popup.js b/js/big-picture-popup.js index c859298..2a8322a 100644 --- a/js/big-picture-popup.js +++ b/js/big-picture-popup.js @@ -1,5 +1,5 @@ -import { getPhotos } from './get-photos'; -import { hide, show } from './utils'; +import { getPhotos } from './get-photos.js'; +import { hide, show } from './utils.js'; const photos = getPhotos(); const bigPhotoPopup = document.querySelector('.big-picture'); const popupCancelElement = document.querySelector('.big-picture__cancel'); diff --git a/js/main.js b/js/main.js index 44e749e..e4a7d92 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,5 @@ -import { openBigPhotoPopup } from './big-picture-popup.js'; import { renderPictures } from './render-pictures.js'; +import { openBigPhotoPopup } from './big-picture-popup.js'; renderPictures(); From 57dc1a8c0949e75e8b881fd0ddb2c334c9f9f154 Mon Sep 17 00:00:00 2001 From: Daniil888-m Date: Wed, 11 Dec 2024 20:17:02 +0300 Subject: [PATCH 3/5] added removing class 'modal-open' when popup is closed --- js/big-picture-popup.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/big-picture-popup.js b/js/big-picture-popup.js index 2a8322a..4a7ecbf 100644 --- a/js/big-picture-popup.js +++ b/js/big-picture-popup.js @@ -40,6 +40,7 @@ function renderComments(photoId) { function hidePhotoPopup() { hide(bigPhotoPopup); document.removeEventListener('keydown', onEscapeKeydown); + document.body.classList.remove('modal-open'); } function showPhotoPopup() { document.body.classList.add('modal-open'); From 8d2da794715a3b36e4b48331ed24660358a292ae Mon Sep 17 00:00:00 2001 From: Daniil888-m Date: Wed, 11 Dec 2024 23:48:18 +0300 Subject: [PATCH 4/5] added preventDefault --- js/big-picture-popup.js | 3 ++- js/main.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/js/big-picture-popup.js b/js/big-picture-popup.js index 4a7ecbf..c73149e 100644 --- a/js/big-picture-popup.js +++ b/js/big-picture-popup.js @@ -37,7 +37,8 @@ function renderComments(photoId) { return commentFragmentList; } -function hidePhotoPopup() { +function hidePhotoPopup(e) { + e.preventDefault(); hide(bigPhotoPopup); document.removeEventListener('keydown', onEscapeKeydown); document.body.classList.remove('modal-open'); diff --git a/js/main.js b/js/main.js index e4a7d92..859be33 100644 --- a/js/main.js +++ b/js/main.js @@ -7,6 +7,7 @@ document.addEventListener('click', (e) => { const currentPicture = e.target.closest('.picture'); if (currentPicture) { + e.preventDefault(); openBigPhotoPopup(currentPicture.dataset.photoId); } }); From 2153031ac2c5086eab68923a9fa6715643840e39 Mon Sep 17 00:00:00 2001 From: Daniil888-m Date: Fri, 13 Dec 2024 22:11:02 +0300 Subject: [PATCH 5/5] refactored renderComments openBigPhoto --- js/big-picture-popup.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/js/big-picture-popup.js b/js/big-picture-popup.js index c73149e..167baf8 100644 --- a/js/big-picture-popup.js +++ b/js/big-picture-popup.js @@ -6,14 +6,13 @@ const popupCancelElement = document.querySelector('.big-picture__cancel'); function onEscapeKeydown(e) { if (e.key === 'Escape') { - hidePhotoPopup(); + hidePhotoPopup(e); } } -function renderComments(photoId) { - const currentPhoto = photos.find((photo) => photo.id === Number(photoId)); +function renderComments(comments) { const commentFragmentList = document.createDocumentFragment(); - currentPhoto.comments.forEach((comment) => { + comments.forEach((comment) => { const commEl = document.createElement('li'); commEl.className = 'social__comment'; @@ -34,7 +33,8 @@ function renderComments(photoId) { }); - return commentFragmentList; + bigPhotoPopup.querySelector('.social__comments').innerHTML = ''; + bigPhotoPopup.querySelector('.social__comments').append(commentFragmentList); } function hidePhotoPopup(e) { @@ -53,13 +53,11 @@ function openBigPhotoPopup(photoId) { showPhotoPopup(); const currentPhoto = photos.find((photo) => photo.id === Number(photoId)); if (currentPhoto) { - const comments = renderComments(photoId); + renderComments(currentPhoto.comments); bigPhotoPopup.querySelector('.big-picture__img img').src = currentPhoto.url; bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes.length; bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length; bigPhotoPopup.querySelector('.social__comment-total-count').textContent = currentPhoto.comments.length; - bigPhotoPopup.querySelector('.social__comments').innerHTML = ''; - bigPhotoPopup.querySelector('.social__comments').append(comments); bigPhotoPopup.querySelector('.social__caption').textContent = currentPhoto.description; hide(bigPhotoPopup.querySelector('.social__comment-shown-count')); hide(bigPhotoPopup.querySelector('.comments-loader'));