diff --git a/js/create-thumbnails/index.js b/js/create-thumbnails/index.js index 30dd0b6..439bef3 100644 --- a/js/create-thumbnails/index.js +++ b/js/create-thumbnails/index.js @@ -25,8 +25,9 @@ const addPhotoThumbnailsUsers = () => { pictureList.addEventListener('click', (evt) => { const target = evt.target; - if (target.classList.contains('picture__img')) { - const elementPhoto = createPhotoUsers.find((photo) => photo.id === +target.dataset.id); + if (target.closest('.picture')) { + evt.preventDefault(); + const elementPhoto = createPhotoUsers.find((photo) => photo.id === Number(target.dataset.id)); onOpenBigPicture(elementPhoto); } }); diff --git a/js/showLargePicture/createComments.js b/js/showLargePicture/createComments.js index 268daf5..4eb41ea 100644 --- a/js/showLargePicture/createComments.js +++ b/js/showLargePicture/createComments.js @@ -17,7 +17,6 @@ const createComment = (comments) => { const socialText = document.createElement('p'); socialText.classList.add('social__text'); socialText.textContent = comments.message; - socialComment.append(socialPicture, socialText); return socialComment; }; @@ -34,20 +33,24 @@ const onShowMoreComments = () =>{ commentShownCount.textContent = socialCommentChild.length; }); - if(socialCommentChild.length === arrayComments.length){ + if(socialCommentChild.length === arrayComments.length || arrayComments.length === 0){ buttonShowMore.classList.add('hidden'); } + if(arrayComments.length === 0){ + commentShownCount.textContent = 0; + } }; -buttonShowMore.addEventListener('click', onShowMoreComments); const renderComments = (element) => { arrayComments.splice(0, arrayComments.length) ; arrayComments.push(...element); socialCommentsList.innerHTML = ''; + + buttonShowMore.addEventListener('click', onShowMoreComments); onShowMoreComments(); }; -export {renderComments}; +export {renderComments, onShowMoreComments}; diff --git a/js/showLargePicture/index.js b/js/showLargePicture/index.js index 3cf042a..d665d8d 100644 --- a/js/showLargePicture/index.js +++ b/js/showLargePicture/index.js @@ -1,5 +1,5 @@ import { bigPictureBlock, bigPictureCancel, bigPictureImg, likesCount, commentTotalCount, socialCaption, socialCommentsList, buttonShowMore} from './elementVariables'; -import {renderComments} from './createComments'; +import {renderComments, onShowMoreComments} from './createComments'; const toggleClass = (isOpened = true) =>{ @@ -12,7 +12,9 @@ const onCloseBigPicture = () => { socialCommentsList.innerHTML = ''; buttonShowMore.classList.remove('hidden'); + buttonShowMore.removeEventListener('click', onShowMoreComments); bigPictureCancel.removeEventListener('click', onCloseBigPicture); + document.removeEventListener('keydown', onCloseBigPictureEsc); }; @@ -29,15 +31,17 @@ const onOpenBigPicture = (element) => { toggleClass(); renderComments(element.comments); + document.addEventListener('keydown', onCloseBigPictureEsc); bigPictureCancel.addEventListener('click', onCloseBigPicture); }; -document.addEventListener('keydown', (evt) =>{ +function onCloseBigPictureEsc(evt){ if(evt.key === 'Escape'){ evt.preventDefault(); onCloseBigPicture(); } -}); +} + export {onOpenBigPicture};