Merge pull request #15 from ksenya3112/module12-task1

Author: keksobot

js/filter.js

@@ -0,0 +1,47 @@
+const RANDOM_PHOTOS_COUNT = 10;
+
+const Filter = {
+  DEFAULT: 'filter-default',
+  RANDOM: 'filter-random',
+  DISCUSSED: 'filter-discussed',
+};
+
+const filterElement = document.querySelector('.img-filters');
+const filterForm = filterElement.querySelector('.img-filters__form');
+
+// Вспомогательные функции для сортировки
+const sortRandomly = () => Math.random() - 0.5;
+const sortByComments = (photoA, photoB) => photoB.comments.length - photoA.comments.length;
+
+// Главная функция фильтрации
+const getFilteredPhotos = (photos, filterId) => {
+  switch (filterId) {
+    case Filter.RANDOM:
+      return [...photos].sort(sortRandomly).slice(0, RANDOM_PHOTOS_COUNT);
+    case Filter.DISCUSSED:
+      return [...photos].sort(sortByComments);
+    default:
+      return [...photos];
+  }
+};
+
+// Функция инициализации модуля
+const initFilters = (photos, callback) => {
+  filterElement.classList.remove('img-filters--inactive');
+
+  filterForm.addEventListener('click', (evt) => {
+    if (!evt.target.classList.contains('img-filters__button') ||
+      evt.target.classList.contains('img-filters__button--active')) {
+      return;
+    }
+
+    filterForm.querySelector('.img-filters__button--active').classList.remove('img-filters__button--active');
+    evt.target.classList.add('img-filters__button--active');
+
+    const filteredPhotos = getFilteredPhotos(photos, evt.target.id);
+    callback(filteredPhotos); // Вызываем колбэк (отрисовку) с задержкой
+  });
+};
+
+export { initFilters };
+

js/main.js

@@ -5,15 +5,22 @@ import './form.js';
 
 import { renderThumbnails } from './thumbnails.js';
 import { getData } from './api.js';
-import { showAlert } from './util.js';
+import { showAlert, debounce } from './util.js';
 import { setUserFormSubmit, closeUploadModal } from './form.js';
+import { initFilters } from './filter.js';
+
+const RENDER_DELAY = 500;
+
+const debouncedRenderThumbnails = debounce(renderThumbnails, RENDER_DELAY);
 
 getData()
   .then((photos) => {
     renderThumbnails(photos);
+    initFilters(photos, (filteredPhotos) => {
+      debouncedRenderThumbnails(filteredPhotos);
+      setUserFormSubmit(closeUploadModal);
+    });
   })
   .catch(() => {
-    showAlert();
+    showAlert('Не удалось загрузить данные. Попробуйте обновить страницу.');
   });
-
-setUserFormSubmit(closeUploadModal);

js/thumbnails.js

@@ -3,6 +3,12 @@ import { openFullSizePicture } from './full-size-picture.js';
 const thumbnailsContainer = document.querySelector('.pictures');
 const thumbnailTemplate = document.querySelector('#picture').content.querySelector('.picture');
 
+// Функция для удаления старых фотографий
+const clearThumbnails = () => {
+  const pictures = thumbnailsContainer.querySelectorAll('.picture');
+  pictures.forEach((picture) => picture.remove());
+};
+
 const renderThumbnail = (thumbnailData) => {
   const thumbnail = thumbnailTemplate.cloneNode(true);
   const image = thumbnail.querySelector('.picture__img');
@@ -14,14 +20,14 @@ const renderThumbnail = (thumbnailData) => {
 
   thumbnail.addEventListener('click', (evt) => {
     evt.preventDefault();
-
     openFullSizePicture(thumbnailData);
   });
 
   return thumbnail;
 };
 
 const renderThumbnails = (photos) => {
+  clearThumbnails();
   const thumbnailFragment = document.createDocumentFragment();
 
   photos.forEach((photo) => {

js/util.js

@@ -15,6 +15,15 @@ const showAlert = () => {
   }, ALERT_SHOW_TIME);
 };
 
-export { getRandomInt, isEsc };
+function debounce(callback, timeoutDelay = 500) {
+  let timeoutId;
+
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+}
+
+export { getRandomInt, isEsc, showAlert, debounce };
+
 
-export { showAlert };