From 7ba2996d142f029fa0f14b32f79b36d23896ede0 Mon Sep 17 00:00:00 2001 From: Van1s1mys Date: Thu, 14 Mar 2024 21:52:14 +0500 Subject: [PATCH 1/4] (bigPicture.js)[script] add script to show imges in big screen --- js/bigPicture.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 js/bigPicture.js diff --git a/js/bigPicture.js b/js/bigPicture.js new file mode 100644 index 0000000..7a93bb2 --- /dev/null +++ b/js/bigPicture.js @@ -0,0 +1,67 @@ +export const showBigPicture = (post) => { + const bigPicture = document.querySelector('.big-picture'); + const body = document.querySelector('body'); + + bigPicture.classList.remove('hidden'); + body.classList.add('modal-open'); + + const bigPictureImage = bigPicture.querySelector('.big-picture__img img'); + bigPictureImage.src = post.url; + + const bigPictureLikes = bigPicture.querySelector('.likes-count'); + bigPictureLikes.textContent = post.likes; + + const bigPictureCommentsSize = bigPicture.querySelector('.social__comment-shown-count'); + bigPictureCommentsSize.textContent = post.comments.length.toString(); + + const bigPictureCommentsTotal = bigPicture.querySelector('.social__comment-total-count'); + bigPictureCommentsTotal.textContent = post.comments.length.toString(); + + const bigPictureCaption = bigPicture.querySelector('.social__caption'); + bigPictureCaption.textContent = post.description; + + const commentsContainer = bigPicture.querySelector('.social__comments'); + post.comments.forEach((comment) => { + const commentItem = document.createElement('li'); + commentItem.classList.add('social__comment'); + + const avatar = document.createElement('img'); + avatar.classList.add('social__picture'); + avatar.src = comment.avatar; + avatar.alt = comment.name; + avatar.width = 35; + avatar.height = 35; + + const commentText = document.createElement('p'); + commentText.classList.add('social__text'); + commentText.textContent = comment.message; + + commentItem.appendChild(avatar); + commentItem.appendChild(commentText); + commentsContainer.appendChild(commentItem); + }); + + const commentCount = bigPicture.querySelector('.social__comment-count'); + const commentsLoader = bigPicture.querySelector('.comments-loader'); + commentCount.classList.add('hidden'); + commentsLoader.classList.add('hidden'); +}; + +const close = () => { + const body = document.querySelector('body'); + const bigPicture = document.querySelector('.big-picture'); + + body.classList.remove('modal-open'); + bigPicture.classList.add('hidden'); +}; + +export const closeBigPicture = () => { + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' || event.code === 'Escape') { + close(); + } + }); + const closeButton = document.getElementById('picture-cancel'); + closeButton.addEventListener('click', close); + +}; From 511490df69f931920b7ebf43ca4fd92968a9a397 Mon Sep 17 00:00:00 2001 From: Van1s1mys Date: Thu, 14 Mar 2024 21:53:00 +0500 Subject: [PATCH 2/4] (thumbnails)[script] include big images in project --- js/thumbnails.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/thumbnails.js b/js/thumbnails.js index 11a091a..d576ced 100644 --- a/js/thumbnails.js +++ b/js/thumbnails.js @@ -1,4 +1,5 @@ import { generateImagePosts } from './util.js'; +import { showBigPicture, closeBigPicture } from './bigPicture.js'; const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); @@ -14,9 +15,15 @@ const postParser = (post) => { likes.textContent = post.likes; comments.textContent = post.comments.length; + + pictureElement.addEventListener('click', () => { + showBigPicture(post); + }); + return pictureElement; }; + export const createThumbnails = () => { const posts = generateImagePosts(25, 30); const fragment = document.createDocumentFragment(); @@ -30,4 +37,4 @@ export const createThumbnails = () => { pictures.appendChild(fragment); }; - +closeBigPicture(); From b66730a82b6892ba57ccd2ee5a8619eef954d8aa Mon Sep 17 00:00:00 2001 From: Van1s1mys Date: Fri, 22 Mar 2024 21:32:06 +0500 Subject: [PATCH 3/4] (bigpicture)[script]fixes --- js/bigPicture.js | 49 ++++++++++++++++++++++++++++++++---------------- 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/js/bigPicture.js b/js/bigPicture.js index 7a93bb2..25641fc 100644 --- a/js/bigPicture.js +++ b/js/bigPicture.js @@ -1,26 +1,24 @@ -export const showBigPicture = (post) => { +const openModal = () => { const bigPicture = document.querySelector('.big-picture'); const body = document.querySelector('body'); bigPicture.classList.remove('hidden'); body.classList.add('modal-open'); +}; - const bigPictureImage = bigPicture.querySelector('.big-picture__img img'); +const renderImageAndDescription = (post) => { + const bigPictureImage = document.querySelector('.big-picture__img img'); bigPictureImage.src = post.url; - const bigPictureLikes = bigPicture.querySelector('.likes-count'); + const bigPictureLikes = document.querySelector('.likes-count'); bigPictureLikes.textContent = post.likes; - const bigPictureCommentsSize = bigPicture.querySelector('.social__comment-shown-count'); - bigPictureCommentsSize.textContent = post.comments.length.toString(); - - const bigPictureCommentsTotal = bigPicture.querySelector('.social__comment-total-count'); - bigPictureCommentsTotal.textContent = post.comments.length.toString(); - - const bigPictureCaption = bigPicture.querySelector('.social__caption'); + const bigPictureCaption = document.querySelector('.social__caption'); bigPictureCaption.textContent = post.description; +}; - const commentsContainer = bigPicture.querySelector('.social__comments'); +const renderComments = (post) => { + const commentsContainer = document.querySelector('.social__comments'); post.comments.forEach((comment) => { const commentItem = document.createElement('li'); commentItem.classList.add('social__comment'); @@ -41,8 +39,14 @@ export const showBigPicture = (post) => { commentsContainer.appendChild(commentItem); }); - const commentCount = bigPicture.querySelector('.social__comment-count'); - const commentsLoader = bigPicture.querySelector('.comments-loader'); + const bigPictureCommentsSize = document.querySelector('.social__comment-shown-count'); + bigPictureCommentsSize.textContent = post.comments.length.toString(); + + const bigPictureCommentsTotal = document.querySelector('.social__comment-total-count'); + bigPictureCommentsTotal.textContent = post.comments.length.toString(); + + const commentCount = document.querySelector('.social__comment-count'); + const commentsLoader = document.querySelector('.comments-loader'); commentCount.classList.add('hidden'); commentsLoader.classList.add('hidden'); }; @@ -56,12 +60,25 @@ const close = () => { }; export const closeBigPicture = () => { - document.addEventListener('keydown', (event) => { + const closeHandler = (event) => { if (event.key === 'Escape' || event.code === 'Escape') { close(); + document.removeEventListener('keydown', closeHandler); } - }); + }; + + document.addEventListener('keydown', closeHandler); + const closeButton = document.getElementById('picture-cancel'); - closeButton.addEventListener('click', close); + const clickHandler = () => { + close(); + closeButton.removeEventListener('click', clickHandler); + }; + closeButton.addEventListener('click', clickHandler); +}; +export const showBigPicture = (post) => { + openModal(); + renderImageAndDescription(post); + renderComments(post); }; From c9f7ab407f4a0d7f938a260a2f9f815c7294578e Mon Sep 17 00:00:00 2001 From: Van1s1mys Date: Mon, 25 Mar 2024 20:42:48 +0500 Subject: [PATCH 4/4] (bigpicture)[script]clear comments --- js/bigPicture.js | 26 +++++++++++++++++++------- js/thumbnails.js | 4 +--- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/js/bigPicture.js b/js/bigPicture.js index 25641fc..96f7633 100644 --- a/js/bigPicture.js +++ b/js/bigPicture.js @@ -19,6 +19,11 @@ const renderImageAndDescription = (post) => { const renderComments = (post) => { const commentsContainer = document.querySelector('.social__comments'); + + while (commentsContainer.firstChild) { + commentsContainer.removeChild(commentsContainer.firstChild); + } + post.comments.forEach((comment) => { const commentItem = document.createElement('li'); commentItem.classList.add('social__comment'); @@ -59,7 +64,15 @@ const close = () => { bigPicture.classList.add('hidden'); }; -export const closeBigPicture = () => { +const clickHandler = () => { + close(); + const closeButton = document.getElementById('picture-cancel'); + closeButton.removeEventListener('click', clickHandler); +}; + +const setupCloseHandlers = () => { + const closeButton = document.getElementById('picture-cancel'); + const closeHandler = (event) => { if (event.key === 'Escape' || event.code === 'Escape') { close(); @@ -68,12 +81,6 @@ export const closeBigPicture = () => { }; document.addEventListener('keydown', closeHandler); - - const closeButton = document.getElementById('picture-cancel'); - const clickHandler = () => { - close(); - closeButton.removeEventListener('click', clickHandler); - }; closeButton.addEventListener('click', clickHandler); }; @@ -81,4 +88,9 @@ export const showBigPicture = (post) => { openModal(); renderImageAndDescription(post); renderComments(post); + + const closeButton = document.getElementById('picture-cancel'); + closeButton.removeEventListener('click', clickHandler); + + setupCloseHandlers(clickHandler); }; diff --git a/js/thumbnails.js b/js/thumbnails.js index d576ced..301938d 100644 --- a/js/thumbnails.js +++ b/js/thumbnails.js @@ -1,5 +1,5 @@ import { generateImagePosts } from './util.js'; -import { showBigPicture, closeBigPicture } from './bigPicture.js'; +import { showBigPicture } from './bigPicture.js'; const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); @@ -36,5 +36,3 @@ export const createThumbnails = () => { pictures.appendChild(fragment); }; - -closeBigPicture();