From 50f9f15fc78c3c9023dbe35dc8ac064a00d64677 Mon Sep 17 00:00:00 2001 From: "rit1992@mail.ru" <158091165+margarita0206@users.noreply.github.com> Date: Thu, 18 Jul 2024 16:09:52 +0300 Subject: [PATCH] =?UTF-8?q?=20=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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/constant.js | 24 ++++++++++------- js/data.js | 13 +++++++++- js/main.js | 7 ++++- js/modal-pictures.js | 62 ++++++++++++++++++++++++++++++++++++++++++++ js/thumbnail.js | 12 ++++----- js/utils.js | 4 ++- 6 files changed, 103 insertions(+), 19 deletions(-) create mode 100644 js/modal-pictures.js diff --git a/js/constant.js b/js/constant.js index 7f9e69d..b6d25af 100644 --- a/js/constant.js +++ b/js/constant.js @@ -1,12 +1,12 @@ -const MIN_POSTS_COUNT = 1; -const MAX_POSTS_COUNT = 25; -const AVATAR_MIN_COUNT = 1; -const AVATAR_MAX_COUNT = 6; -const LIKES_MIN_COUNT = 15; -const LIKES_MAX_COUNT = 200; -const COMMENT_MIN_COUNT = 0; -const COMMENT_MAX_COUNT = 30; -const COMMENT_MAX_ID = 500000; +export const MIN_POSTS_COUNT = 1; +export const MAX_POSTS_COUNT = 25; +export const AVATAR_MIN_COUNT = 1; +export const AVATAR_MAX_COUNT = 6; +export const LIKES_MIN_COUNT = 15; +export const LIKES_MAX_COUNT = 200; +export const COMMENT_MIN_COUNT = 0; +export const COMMENT_MAX_COUNT = 30; +export const COMMENT_MAX_ID = 500000; const COMMENT_NAMES = [ 'Анна', @@ -52,4 +52,8 @@ const DESCRIPTIONS = [ 'Этой фотографии описание не нужно' ]; -export {MAX_POSTS_COUNT, MIN_POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS}; +export { + COMMENT_NAMES, + POSTS_COMMENTS, + DESCRIPTIONS +}; diff --git a/js/data.js b/js/data.js index 1e9f47d..3c0d8ba 100644 --- a/js/data.js +++ b/js/data.js @@ -1,5 +1,16 @@ import { - MAX_POSTS_COUNT, MIN_POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS + MAX_POSTS_COUNT, + MIN_POSTS_COUNT, + AVATAR_MIN_COUNT, + AVATAR_MAX_COUNT, + LIKES_MIN_COUNT, + LIKES_MAX_COUNT, + COMMENT_MIN_COUNT, + COMMENT_MAX_COUNT, + COMMENT_MAX_ID, + COMMENT_NAMES, + POSTS_COMMENTS, + DESCRIPTIONS } from './constant.js'; import { diff --git a/js/main.js b/js/main.js index a3738a0..6011623 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,9 @@ import {randomPosts} from './data.js'; import {generateThumbnails} from './thumbnail.js'; -generateThumbnails(randomPosts()); +import './modal-pictures.js'; +const currentPictures = randomPosts(); + +generateThumbnails(currentPictures); + +export {currentPictures}; diff --git a/js/modal-pictures.js b/js/modal-pictures.js new file mode 100644 index 0000000..f2d6704 --- /dev/null +++ b/js/modal-pictures.js @@ -0,0 +1,62 @@ +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 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); + } + commentsList.append(commentFragment); +}; + +const onDocumentKeydown = (evt) => { + if(isEscapeKey(evt)) { + evt.preventDefault(); + bigPicturesModal.classList.add('hidden'); + } +}; + +const openBigPictureWindow = () => { + 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'); +}; + +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); + } +}); + diff --git a/js/thumbnail.js b/js/thumbnail.js index 7681b01..102c630 100644 --- a/js/thumbnail.js +++ b/js/thumbnail.js @@ -1,13 +1,13 @@ const thumbNailTemplate = document.querySelector('#picture').content.querySelector('.picture'); const container = document.querySelector('.pictures'); -const createThumbnail = (picture) => { +const createThumbnail = ({url, description, likes, comments}) => { const thumbnail = thumbNailTemplate.cloneNode(true); - thumbnail.querySelector('.picture__img').src = picture.url; - thumbnail.querySelector('.picture__img').alt = picture.description; - thumbnail.querySelector('.picture__likes').textContent = picture.likes; - thumbnail.querySelector('.picture__comments').textContent = picture.comments.length; + thumbnail.querySelector('.picture__img').src = url; + thumbnail.querySelector('.picture__img').alt = description; + thumbnail.querySelector('.picture__likes').textContent = likes; + thumbnail.querySelector('.picture__comments').textContent = comments.length; return thumbnail; }; @@ -23,4 +23,4 @@ const generateThumbnails = (pictures) => { container.append(fragment); }; -export {generateThumbnails}; +export { generateThumbnails }; diff --git a/js/utils.js b/js/utils.js index 09b8e9a..5036763 100644 --- a/js/utils.js +++ b/js/utils.js @@ -27,4 +27,6 @@ const getUniqueInteger = (min,max) => { const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)]; -export {getRandomInteger, getUniqueInteger, getRandomArrayElement}; +const isEscapeKey = (evt) => evt.key === 'Escape'; + +export {getRandomInteger, getUniqueInteger, getRandomArrayElement, isEscapeKey};