From e266b609e8e6ba25d21328150d8ae2d77fff956b 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: Fri, 22 Nov 2024 15:53:06 +0500 Subject: [PATCH 1/5] =?UTF-8?q?=D1=84=D0=B0=D0=B9=D0=BB=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D0=BE=D0=BA=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 70 +++++++++++++++++++++++++++++++++++++++++++++++ js/gallery.js | 19 +++++++++++++ js/main.js | 5 ++-- js/thumbnail.js | 5 ++-- js/util.js | 4 ++- 5 files changed, 98 insertions(+), 5 deletions(-) create mode 100644 js/big-picture.js create mode 100644 js/gallery.js diff --git a/js/big-picture.js b/js/big-picture.js new file mode 100644 index 0000000..523f8d2 --- /dev/null +++ b/js/big-picture.js @@ -0,0 +1,70 @@ +import { isEscapeKey } from './util.js'; + +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 cancelButtonElement = bigPictureElement.querySelector('.big-picture__cancel'); +const liElement = commentListElement.querySelector('li'); + +const createComment = ({ avatar, message, name}) => { + const comment = liElement.cloneNode(true); + + comment.querySelector('.social__picture').src = avatar; + comment.querySelector('.social__picture').alt = name; + comment.querySelector('.social__text').textContent = message; + + return comment; +}; + +const showComments = (comments) => { + commentListElement.innerHTML = ''; + + const fragment = document.createDocumentFragment(); + comments.forEach ((item) => { + const comment = createComment(item); + fragment.append(comment); + }); + + commentListElement.append(fragment); +}; + + +const hideBigPicture = () => { + bigPictureElement.classList.add('hidden'); + bodyElement.classList.remove('modal-open'); + document.removeEventListener('keydown', onDocumentKeydown); +}; + +const onDocumentKeydown = (evt) => { + if (isEscapeKey) { + evt.preventDefault(); + hideBigPicture(); + } +} + +const onCancelButtonClick = () => { + hideBigPicture(); +}; + +const showPictureDetails = ({ url, likes, description }) => { + bigPictureElement.querySelector('.big-picture__img img').src = url; + bigPictureElement.querySelector('.likes-count').textContent = likes; + bigPictureElement.querySelector('.social__caption').textContent = description; +}; + +const showBigPicture = (data) => { + bigPictureElement.classList.remove('hidden'); + bodyElement.classList.add('modal-open'); + commentsLoaderElement.classList.add('hidden'); + commentCountElement.classList.add('hidden'); + document.addEventListener('keydown', onDocumentKeydown); + + showPictureDetails(data); + showComments(data.comments); +}; + +cancelButtonElement.addEventListener('click', onCancelButtonClick); + +export { showBigPicture }; diff --git a/js/gallery.js b/js/gallery.js new file mode 100644 index 0000000..59ad431 --- /dev/null +++ b/js/gallery.js @@ -0,0 +1,19 @@ +import { showThumbnails } from './thumbnail.js'; +import { showBigPicture } from './big-picture.js'; + +const container = document.querySelector('.pictures'); + +const showGallery = (pictures) => { + container.addEventListener('click', (evt) => { + const thumbnail = evt.target.closest('[data-thumbnail-id]'); + if (thumbnail) { + evt.preventDefault(); + const pictureId = +thumbnail.dataset.thumbnailId; + const picture = pictures.find( (item) => item.id === pictureId); + showBigPicture(picture); + } + }); + showThumbnails(pictures, container); +}; + +export { showGallery }; diff --git a/js/main.js b/js/main.js index fb08a8c..02983dd 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,5 @@ import { getImages } from './data.js'; -import { showThumbnails } from './thumbnail.js'; +import { showGallery } from './gallery.js'; + +showGallery(getImages()); -showThumbnails(getImages()); diff --git a/js/thumbnail.js b/js/thumbnail.js index 0549d1d..c018b8f 100644 --- a/js/thumbnail.js +++ b/js/thumbnail.js @@ -2,13 +2,14 @@ const container = document.querySelector('.pictures'); const templateFragment = document.querySelector('#picture').content; const template = templateFragment.querySelector('.picture'); -const createThumbnail = ({url, description, comments, likes}) => { +const createThumbnail = ({url, description, comments, likes, id}) => { const thumbnail = template.cloneNode(true); thumbnail.querySelector('.picture__img').src = url; thumbnail.querySelector('.picture__img').alt = description; thumbnail.querySelector('.picture__comments').textContent = comments.length; thumbnail.querySelector('.picture__likes').textContent = likes; + thumbnail.dataset.thumbnailId = id; return thumbnail; }; @@ -22,4 +23,4 @@ const showThumbnails = (pictures) => { container.append(fragment); }; -export { showThumbnails }; +export { showThumbnails} ; diff --git a/js/util.js b/js/util.js index c751f5f..06e239a 100644 --- a/js/util.js +++ b/js/util.js @@ -16,4 +16,6 @@ const createIdGenerator = () => { }; }; -export { getRandomInteger, getRandomArrayElement, createIdGenerator }; +const isEscapeKey = (evt) => evt.key === 'Escape'; + +export { getRandomInteger, getRandomArrayElement, createIdGenerator, isEscapeKey }; From c0a26f8f982909ee9947bedbfdb07b070c522743 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: Fri, 22 Nov 2024 15:57:55 +0500 Subject: [PATCH 2/5] =?UTF-8?q?=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8F?= =?UTF-8?q?=20onDocumentKeydown=20=D0=BE=D0=BF=D1=80=D0=B5=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B4=D0=BE=20=D0=B5=D0=B5=20=D0=B8?= =?UTF-8?q?=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 523f8d2..292abd2 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -30,6 +30,12 @@ const showComments = (comments) => { commentListElement.append(fragment); }; +const onDocumentKeydown = (evt) => { + if (isEscapeKey) { + evt.preventDefault(); + hideBigPicture(); + } +} const hideBigPicture = () => { bigPictureElement.classList.add('hidden'); @@ -37,12 +43,7 @@ const hideBigPicture = () => { document.removeEventListener('keydown', onDocumentKeydown); }; -const onDocumentKeydown = (evt) => { - if (isEscapeKey) { - evt.preventDefault(); - hideBigPicture(); - } -} + const onCancelButtonClick = () => { hideBigPicture(); From 7449354a3c1d80ff95584590c7343ce02c4a0813 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: Fri, 22 Nov 2024 15:59:10 +0500 Subject: [PATCH 3/5] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=20?= =?UTF-8?q?=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B9=20=D0=BF=D1=80=D0=BE=D0=B1?= =?UTF-8?q?=D0=B5=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/gallery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/gallery.js b/js/gallery.js index 59ad431..70d4999 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -9,7 +9,7 @@ const showGallery = (pictures) => { if (thumbnail) { evt.preventDefault(); const pictureId = +thumbnail.dataset.thumbnailId; - const picture = pictures.find( (item) => item.id === pictureId); + const picture = pictures.find((item) => item.id === pictureId); showBigPicture(picture); } }); From 4ab5f727c7f4f2091560599a7fbf11e6ff0a1a21 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: Fri, 22 Nov 2024 16:08:51 +0500 Subject: [PATCH 4/5] =?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=D0=B5=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA?= =?UTF-8?q?=20=D0=BE=D1=82=20=D0=B1=D0=BE=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 292abd2..589d9d7 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -35,16 +35,14 @@ const onDocumentKeydown = (evt) => { evt.preventDefault(); hideBigPicture(); } -} +}; -const hideBigPicture = () => { +function hideBigPicture () { bigPictureElement.classList.add('hidden'); bodyElement.classList.remove('modal-open'); document.removeEventListener('keydown', onDocumentKeydown); }; - - const onCancelButtonClick = () => { hideBigPicture(); }; From 7d3b32418e21d43cec48014183e5da04c85e1652 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: Fri, 22 Nov 2024 16:10:54 +0500 Subject: [PATCH 5/5] =?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=D0=B5=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/big-picture.js b/js/big-picture.js index 589d9d7..91e2caa 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -41,7 +41,7 @@ function hideBigPicture () { bigPictureElement.classList.add('hidden'); bodyElement.classList.remove('modal-open'); document.removeEventListener('keydown', onDocumentKeydown); -}; +} const onCancelButtonClick = () => { hideBigPicture();