implementation of task 12.12 (photo filtering)

Author: suntira

js/filters.js

@@ -0,0 +1,62 @@
+import { renderGallery } from './gallery.js';
+import { debounce } from './util.js';
+
+const filtersContainer = document.querySelector('.img-filters');
+const filtersForm = filtersContainer.querySelector('.img-filters__form');
+
+const RANDOM_PHOTOS_COUNT = 10;
+
+let photos = [];
+
+const clearGallery = () => {
+  document.querySelectorAll('.picture').forEach((picture) => {
+    picture.remove();
+  });
+};
+
+const getDefaultPhotos = () => photos.slice();
+
+const getRandomPhotos = () => {
+  const shuffled = photos.slice().sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, RANDOM_PHOTOS_COUNT);
+};
+
+const getDiscussedPhotos = () =>
+  photos
+    .slice()
+    .sort((a, b) => b.comments.length - a.comments.length);
+
+const filterHandlers = {
+  default: getDefaultPhotos,
+  random: getRandomPhotos,
+  discussed: getDiscussedPhotos,
+};
+
+const applyFilter = (filter) => {
+  clearGallery();
+  renderGallery((filterHandlers[filter] || filterHandlers.default)());
+};
+
+const debouncedApplyFilter = debounce(applyFilter);
+
+const onFilterClick = (evt) => {
+  if (!evt.target.matches('button')) {
+    return;
+  }
+
+  const activeButton = filtersForm.querySelector('.img-filters__button--active');
+  activeButton.classList.remove('img-filters__button--active');
+  evt.target.classList.add('img-filters__button--active');
+
+  const filter = evt.target.id.replace('filter-', '');
+  debouncedApplyFilter(filter);
+};
+
+const initFilters = (loadedPhotos) => {
+  photos = loadedPhotos.slice();
+
+  filtersContainer.classList.remove('img-filters--inactive');
+  filtersForm.addEventListener('click', onFilterClick);
+};
+
+export { initFilters };

js/main.js

@@ -1,11 +1,13 @@
 import { renderGallery } from './gallery.js';
 import { initPhotoUploadForm } from './photo-upload-form.js';
 import { getData } from './api.js';
+import { initFilters } from './filters.js';
 import { showDataError } from './messages.js';
 
 getData()
   .then((photos) => {
     renderGallery(photos);
+    initFilters(photos);
   })
   .catch(() => {
     showDataError();

js/util.js

@@ -1,3 +1,4 @@
+const TIMEOUT_DELAY = 500;
 const body = document.body;
 
 const isEscapeKey = (evt) => evt.key === 'Escape';
@@ -13,4 +14,12 @@ const showModal = (modal, isShown = true) => {
   body.classList.remove('modal-open');
 };
 
-export { isEscapeKey, showModal};
+const debounce = (callback, timeoutDelay = TIMEOUT_DELAY) => {
+  let timeoutId;
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+};
+
+export { isEscapeKey, showModal, debounce};