From da08f727a034668e66efdba6ee2b67c633c4c9e9 Mon Sep 17 00:00:00 2001 From: Anastasiia Kononova Date: Mon, 25 May 2026 00:53:11 +0300 Subject: [PATCH] refactor message handlers --- js/comments.js | 33 +++++++++++++++------------------ js/notifications.js | 31 ++++++++++++++++--------------- js/photos-filters.js | 8 +++++--- js/show-full-photo.js | 14 ++++++++------ 4 files changed, 44 insertions(+), 42 deletions(-) diff --git a/js/comments.js b/js/comments.js index a4cbdde..89d53c2 100644 --- a/js/comments.js +++ b/js/comments.js @@ -1,5 +1,6 @@ -export const COMMENTS_PER_PAGE = 5; -export const renderComments = (commentsData, container) => { +const COMMENTS_PER_PAGE = 5; + +const renderComments = (commentsData, container) => { commentsData.forEach((commentData) => { const comment = document.createElement('li'); const avatar = document.createElement('img'); @@ -14,24 +15,20 @@ export const renderComments = (commentsData, container) => { commentText.classList.add('social__text'); commentText.textContent = commentData.message; - comment.append(avatar); - comment.append(commentText); - + comment.append(avatar, commentText); container.append(comment); }); }; -export const paginateComments = (comments, container) => { - const firstComments = comments.slice(0, COMMENTS_PER_PAGE); - let currentIndex = COMMENTS_PER_PAGE; - renderComments(firstComments, container); - const loadMoreComments = () => { - const nextCommentsChunk = comments.slice(currentIndex, currentIndex + COMMENTS_PER_PAGE); - renderComments(nextCommentsChunk, container); - currentIndex += COMMENTS_PER_PAGE; - }; - return { - loadMore: loadMoreComments, - getShownCount: () => container.children.length - }; +const initCommentsPagination = (comments, container) => { + renderComments(comments.slice(0, COMMENTS_PER_PAGE), container); + return COMMENTS_PER_PAGE; }; + +const loadMoreComments = (comments, container, currentIndex) => { + const nextChunk = comments.slice(currentIndex, currentIndex + COMMENTS_PER_PAGE); + renderComments(nextChunk, container); + return currentIndex + COMMENTS_PER_PAGE; +}; + +export { COMMENTS_PER_PAGE, loadMoreComments, initCommentsPagination }; diff --git a/js/notifications.js b/js/notifications.js index aae3656..5db134a 100644 --- a/js/notifications.js +++ b/js/notifications.js @@ -4,6 +4,7 @@ const ERROR_SHOW_TIME = 5000; const dataErrorTemplate = document.querySelector('#data-error'); const body = document.querySelector('body'); + const showDataError = () => { const template = dataErrorTemplate.content.cloneNode(true); const errorDiv = template.firstElementChild; @@ -12,36 +13,36 @@ const showDataError = () => { errorDiv.remove(); }, ERROR_SHOW_TIME); }; -const showMessage = (templateId, buttonClass) => { - let onDocumentKeydown = null; - let onMessageDivClick = null; +const showMessage = (templateId, buttonClass) => { const template = document.querySelector(templateId).content.cloneNode(true); const messageDiv = template.firstElementChild; const messageButton = messageDiv.querySelector(buttonClass); body.append(template); - const onMessageButtonClick = () => { + const closeMessage = () => { messageDiv.remove(); - document.removeEventListener('keydown', onDocumentKeydown, true); - messageDiv.removeEventListener('click', onMessageDivClick); + document.removeEventListener('keydown', handleKeydown, true); + messageButton.removeEventListener('click', closeMessage); + messageDiv.removeEventListener('click', handleOverlayClick); }; - onDocumentKeydown = (evt) => { + function handleKeydown(evt) { evt.stopPropagation(); if (isEscapeKey(evt)) { - onMessageButtonClick(); + closeMessage(); } - }; + } - onMessageDivClick = (evt) => { + function handleOverlayClick(evt) { if (evt.target === messageDiv) { - onMessageButtonClick(); + closeMessage(); } - }; - messageButton.addEventListener('click', onMessageButtonClick); - document.addEventListener('keydown', onDocumentKeydown, true); - messageDiv.addEventListener('click', onMessageDivClick); + } + + messageButton.addEventListener('click', closeMessage); + document.addEventListener('keydown', handleKeydown, true); + messageDiv.addEventListener('click', handleOverlayClick); }; const showSuccessMessage = () => showMessage('#success', '.success__button'); diff --git a/js/photos-filters.js b/js/photos-filters.js index 04ce9ec..3a7cbc1 100644 --- a/js/photos-filters.js +++ b/js/photos-filters.js @@ -1,3 +1,5 @@ +const ACTIVE_FILTER_CLASS = 'img-filters__button--active'; + const filtersBlock = document.querySelector('.img-filters'); const filterDefault = document.querySelector('#filter-default'); const filterRandom = document.querySelector('#filter-random'); @@ -17,18 +19,18 @@ const toggleActiveBtn = (btnClicked, activeClass) => { }; const initPhotosFiltering = (photos, onRender) => { const onFilterDefaultClick = () => { - toggleActiveBtn(filterDefault, 'img-filters__button--active'); + toggleActiveBtn(filterDefault, ACTIVE_FILTER_CLASS); onRender(photos); }; const onFilterRandomClick = () => { - toggleActiveBtn(filterRandom, 'img-filters__button--active'); + toggleActiveBtn(filterRandom, ACTIVE_FILTER_CLASS); const randomPhotos = photos.slice().sort(() => 0.5 - Math.random()).slice(0, 10); onRender(randomPhotos); }; const onFilterDiscussedClick = () => { - toggleActiveBtn(filterDiscussed, 'img-filters__button--active'); + toggleActiveBtn(filterDiscussed, ACTIVE_FILTER_CLASS); const discussedPhotos = photos.slice().sort((a, b) => b.comments.length - a.comments.length); onRender(discussedPhotos); }; diff --git a/js/show-full-photo.js b/js/show-full-photo.js index 00dc0ac..58909be 100644 --- a/js/show-full-photo.js +++ b/js/show-full-photo.js @@ -1,5 +1,5 @@ import { closeModal, openModal } from './modal.js'; -import { COMMENTS_PER_PAGE, paginateComments } from './comments.js'; +import { COMMENTS_PER_PAGE, initCommentsPagination, loadMoreComments } from './comments.js'; const fullPhotoModal = document.querySelector('.big-picture'); const body = document.querySelector('body'); @@ -37,14 +37,16 @@ export const showFullPhoto = (photos) => { fillPhotoData(currentPhoto); commentsLoader.classList.toggle('hidden', currentPhoto.comments.length <= COMMENTS_PER_PAGE); - const pagination = paginateComments(currentPhoto.comments, comments); - shownCommentsCount.textContent = pagination.getShownCount(); + + let currentIndex = initCommentsPagination(currentPhoto.comments, comments); + shownCommentsCount.textContent = comments.children.length; const onCommentsLoaderClick = () => { - pagination.loadMore(); - shownCommentsCount.textContent = pagination.getShownCount(); - commentsLoader.classList.toggle('hidden', pagination.getShownCount() >= currentPhoto.comments.length); + currentIndex = loadMoreComments(currentPhoto.comments, comments, currentIndex); + shownCommentsCount.textContent = comments.children.length; + commentsLoader.classList.toggle('hidden', comments.children.length >= currentPhoto.comments.length); }; + if (currentCommentsHandler) { commentsLoader.removeEventListener('click', currentCommentsHandler); currentCommentsHandler = null;