diff --git a/js/big-picture.js b/js/big-picture.js new file mode 100644 index 0000000..49e6a2b --- /dev/null +++ b/js/big-picture.js @@ -0,0 +1,74 @@ +const bigPictureElement = document.querySelector('.big-picture'); +const bigPictureImg = bigPictureElement.querySelector('.big-picture__img img'); +const likesCount = bigPictureElement.querySelector('.likes-count'); +const commentCount = bigPictureElement.querySelector('.social__comment-shown-count'); +const totalCommentCount = bigPictureElement.querySelector('.social__comment-total-count'); +const socialCaption = bigPictureElement.querySelector('.social__caption'); +const socialComments = bigPictureElement.querySelector('.social__comments'); +const commentCountBlock = bigPictureElement.querySelector('.social__comment-count'); +const commentsLoader = bigPictureElement.querySelector('.comments-loader'); +const cancelButton = bigPictureElement.querySelector('.big-picture__cancel'); + +const createCommentElement = ({ avatar, name, message }) => { + const commentItem = document.createElement('li'); + commentItem.classList.add('social__comment'); + + const img = document.createElement('img'); + img.classList.add('social__picture'); + img.src = avatar; + img.alt = name; + img.width = 35; + img.height = 35; + + const p = document.createElement('p'); + p.classList.add('social__text'); + p.textContent = message; + + commentItem.appendChild(img); + commentItem.appendChild(p); + + return commentItem; +}; + +const openBigPicture = (pictureData) => { + bigPictureElement.classList.remove('hidden'); + document.body.classList.add('modal-open'); + + bigPictureImg.src = pictureData.url; + bigPictureImg.alt = pictureData.description; + likesCount.textContent = pictureData.likes; + socialCaption.textContent = pictureData.description; + + socialComments.innerHTML = ''; + + const comments = pictureData.comments; + totalCommentCount.textContent = comments.length; + commentCount.textContent = Math.min(5, comments.length); + + comments.forEach((comment) => { + const commentElement = createCommentElement(comment); + socialComments.appendChild(commentElement); + }); + + commentCountBlock.classList.add('hidden'); + commentsLoader.classList.add('hidden'); +}; + +const closeBigPicture = () => { + bigPictureElement.classList.add('hidden'); + document.body.classList.remove('modal-open'); +}; + +const initBigPictureHandlers = () => { + cancelButton.addEventListener('click', () => { + closeBigPicture(); + }); + + document.addEventListener('keydown', (evt) => { + if (evt.key === 'Escape' && !bigPictureElement.classList.contains('hidden')) { + closeBigPicture(); + } + }); +}; + +export { openBigPicture, closeBigPicture, initBigPictureHandlers }; diff --git a/js/main.js b/js/main.js index 05d7089..0a254e4 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,9 @@ import { getArrayMiniatures } from './createArrayMiniatures.js'; import { renderPictures } from './pictures.js'; +import { initBigPictureHandlers } from './big-picture.js'; const pictures = getArrayMiniatures(); renderPictures(pictures); +initBigPictureHandlers(); diff --git a/js/pictures.js b/js/pictures.js index b044e73..b590071 100644 --- a/js/pictures.js +++ b/js/pictures.js @@ -1,17 +1,10 @@ +import { openBigPicture } from './big-picture.js'; + const picturesContainer = document.querySelector('.pictures'); const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture'); -/** - * Создает DOM-элемент миниатюры на основе шаблона #picture - * @param {Object} data - Объект с данными фотографии - * @param {string} data.url - Адрес изображения - * @param {string} data.description - Описание изображения - * @param {number} data.likes - Количество лайков - * @param {Array} data.comments - Массив комментариев - * @returns {HTMLElement} - DOM-элемент миниатюры - */ - -const createPictureElement = ({ url, description, likes, comments }) => { +const createPictureElement = (picture) => { + const { url, description, likes, comments } = picture; const pictureElement = pictureTemplate.cloneNode(true); const pictureImg = pictureElement.querySelector('.picture__img'); @@ -21,13 +14,14 @@ const createPictureElement = ({ url, description, likes, comments }) => { pictureElement.querySelector('.picture__likes').textContent = likes; pictureElement.querySelector('.picture__comments').textContent = comments.length; + pictureElement.addEventListener('click', (evt) => { + evt.preventDefault(); + openBigPicture(picture); + }); + return pictureElement; }; -/** - * Отрисовывает миниатюры фотографий в блок .pictures - * @param {Array} pictures - Массив объектов с данными фотографий - */ const renderPictures = (pictures) => { const fragment = document.createDocumentFragment();