Merge pull request #15 from Musa-Ismailov/master

Author: keksobot

index.html

@@ -209,7 +209,7 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
 
   <!-- Сообщение с ошибкой загрузки изображения -->
   <template id="error">
-    <section class="error">
+    <section class="error" data-dialog>
       <div class="error__inner" data-dialog-content>
         <h2 class="error__title">Ошибка загрузки файла</h2>
         <button type="button" class="error__button" data-dialog-close>Попробовать ещё раз</button>
@@ -219,7 +219,7 @@ <h2 class="error__title">Ошибка загрузки файла</h2>
 
   <!-- Сообщение об успешной загрузке изображения -->
   <template id="success">
-    <section class="success">
+    <section class="success" data-dialog-container>
       <div class="success__inner" data-dialog-content>
         <h2 class="success__title">Изображение успешно загружено</h2>
         <button type="button" class="success__button" data-dialog-close>Круто!</button>

js/dialogs.js

@@ -8,7 +8,7 @@ const errorTemplate = document.querySelector('#error');
 const successTemplate = document.querySelector('#success');
 const dataErrorTemplate = document.querySelector('#data-error');
 
-const onCloseKeydown = (evt) => {
+const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt.key) && currentDialog) {
     evt.preventDefault();
     closeDialog();
@@ -21,27 +21,27 @@ function closeDialog () {
     currentDialog.remove();
     currentDialog = null;
 
-    document.removeEventListener('keydown', onCloseKeydown, true);
+    document.removeEventListener('keydown', onDocumentKeydown, true);
   }
 }
 
-const onCloseClick = (evt) => {
+const onDocumentClick = (evt) => {
   if (evt.target.closest('[data-dialog-close]') || !evt.target.closest('[data-dialog-content]')) {
     closeDialog();
   }
 };
 
 const openDialog = (template) => {
-  const dialogElement = template.content.firstElementChild.cloneNode(true);
+  const dialogElement = template.content.querySelector('[data-dialog-container]').cloneNode(true);
 
   document.body.appendChild(dialogElement);
 
   currentDialog = dialogElement;
 
-  document.addEventListener('keydown', onCloseKeydown, true);
+  document.addEventListener('keydown', onDocumentKeydown, true);
 };
 
-document.addEventListener('click', onCloseClick);
+document.addEventListener('click', onDocumentClick);
 
 export const showError = () => {
   openDialog(errorTemplate);
@@ -52,7 +52,7 @@ export const showSuccess = () => {
 };
 
 export const showDataError = () => {
-  const errorElement = dataErrorTemplate.content.firstElementChild.cloneNode(true);
+  const errorElement = dataErrorTemplate.content.querySelector('.data-error').cloneNode(true);
 
   document.body.appendChild(errorElement);
 

js/filters.js

@@ -28,34 +28,33 @@ const getFilteredData = (filterId) => {
     case filterName.FILTER_DISCUSSED:
       return sortByCommentsCount(galleryData);
 
-    case filterName.FILTER_DEFAULT:
     default:
       return galleryData;
   }
 };
 
-const handleFilterClick = (evt) => {
+const debouncedRenderGallery = debounce((filterId) => {
+  const filteredData = getFilteredData(filterId);
+  clearGallery();
+  renderGallery(filteredData);
+}, RERENDER_DELAY);
+
+const onFilterClick = (evt) => {
   const button = evt.target.closest('.img-filters__button');
 
   if (!button) {
     return;
   }
 
-  if (activeFilterButton) {
-    activeFilterButton.classList.remove('img-filters__button--active');
-  }
+  activeFilterButton?.classList.remove('img-filters__button--active');
 
   button.classList.add('img-filters__button--active');
   activeFilterButton = button;
 
-  const filteredData = getFilteredData(button.id);
-
-  clearGallery();
-
-  debounce(() => renderGallery(filteredData), RERENDER_DELAY)();
+  debouncedRenderGallery(button.id);
 };
 
 export const initFilters = () => {
   filtersContainer.classList.remove('img-filters--inactive');
-  filtersContainer.addEventListener('click', handleFilterClick);
+  filtersContainer.addEventListener('click', onFilterClick);
 };

js/fullscreen-picture.js

@@ -13,7 +13,7 @@ const bigPictureClosedElement = bigPicture.querySelector('.cancel');
 const socialComments = document.querySelector('.social__comments');
 const bigPictureCommentsLoader = bigPicture.querySelector('.comments-loader');
 
-let visibleСomments = COMMENTS_SHOWN;
+let visibleComments = COMMENTS_SHOWN;
 let currentPhotoData = null;
 
 const onDocumentKeydown = (evt) => {
@@ -28,7 +28,7 @@ export function closePhotoModal () {
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);
 
-  visibleСomments = COMMENTS_SHOWN;
+  visibleComments = COMMENTS_SHOWN;
   currentPhotoData = null;
   bigPictureShownCount.textContent = DEFAULT_COMMENTS_COUNT;
   bigPictureTotalCount.textContent = DEFAULT_COMMENTS_COUNT;
@@ -70,7 +70,7 @@ const updateComments = () => {
   socialComments.innerHTML = '';
 
   const totalComments = currentPhotoData.comments.length;
-  const commentsToShow = Math.min(visibleСomments, totalComments);
+  const commentsToShow = Math.min(visibleComments, totalComments);
   const limitedComments = currentPhotoData.comments.slice(0, commentsToShow);
 
   renderComments(limitedComments);
@@ -79,7 +79,7 @@ const updateComments = () => {
 
   bigPictureCommentsLoader.classList.toggle('hidden', commentsToShow >= totalComments);
 
-  visibleСomments += COMMENTS_SHOWN;
+  visibleComments += COMMENTS_SHOWN;
 };
 
 export const openBigPicture = (photoData) => {