Merge pull request #11 from Despair322/module12-task1

Author: keksobot

js/filters.js

@@ -0,0 +1,43 @@
+import { renderPictures } from './pictures-renderer.js';
+import { debounce } from './util.js';
+
+const RANDOM_COUNT = 10;
+const RERENDER_DELAY = 500;
+const BUTTON_ACTIVE_CLASS = 'img-filters__button--active';
+const Filters = {
+  'filter-default': null,
+  'filter-random': (elements) => elements.toSorted(() => Math.random() - 0.5).slice(0, RANDOM_COUNT),
+  'filter-discussed': (elements) => elements.toSorted((a, b) => b.comments - a.comments),
+};
+const debouncedRenderPictures = debounce(renderPictures, RERENDER_DELAY);
+
+const filters = document.querySelector('.img-filters');
+const filtersForm = filters.querySelector('.img-filters__form');
+const buttons = filtersForm.querySelectorAll('.img-filters__button');
+
+const buttonClickHandler = (evt, gallery) => {
+  evt.preventDefault();
+  const targetButton = evt.target;
+  const activeButton = filtersForm.querySelector(`.${BUTTON_ACTIVE_CLASS}`);
+  if(targetButton === activeButton) {
+    return;
+  }
+  activeButton.classList.remove(BUTTON_ACTIVE_CLASS);
+  targetButton.classList.add(BUTTON_ACTIVE_CLASS);
+  const filter = Filters[targetButton.id];
+  debouncedRenderPictures(gallery, filter);
+};
+
+const buttonsAttachHandlers = (gallery) => {
+  buttons.forEach((button) => {
+    button.addEventListener('click', (evt) => {
+      buttonClickHandler(evt, gallery);
+    });
+  });
+};
+const showFilters = (gallery) => {
+  filters.classList.remove('img-filters--inactive');
+  buttonsAttachHandlers(gallery);
+};
+
+export { showFilters, buttonsAttachHandlers };

js/main.js

@@ -4,11 +4,13 @@ import { Popup } from './popup.js';
 import { Gallery } from './gallery.js';
 import { getData } from './api.js';
 import { showErrorMessage } from './util.js';
+import { showFilters } from './filters.js';
 import './form.js';
 
 try {
   const data = await getData();
   const gallery = new Gallery(data);
+  showFilters(gallery);
   renderPictures(gallery);
   new Popup(gallery);
 } catch (error) {

js/pictures-renderer.js

@@ -1,7 +1,7 @@
 
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const pictureContainer = document.querySelector('.pictures');
-
+let picturesFragment;
 const createPictureElement = (photo) => {
   const pictureElement = pictureTemplate.cloneNode(true);
   const img = pictureElement.querySelector('.picture__img');
@@ -22,9 +22,20 @@ const createPictures = (photos) => {
   return fragment;
 };
 
-const renderPictures = (gallery) => {
-  const fragment = createPictures(gallery.getPictures());
-  pictureContainer.appendChild(fragment);
+const clearPictures = () => {
+  pictureContainer.querySelectorAll('.picture').forEach((picture) => {
+    picture.remove();
+  });
+};
+
+const renderPictures = (gallery, filter = null) => {
+  clearPictures();
+  let pictures = gallery.getPictures();
+  if (filter) {
+    pictures = filter(pictures);
+  }
+  picturesFragment = createPictures(pictures);
+  pictureContainer.appendChild(picturesFragment);
 };
 
 export { renderPictures };

js/util.js

@@ -9,4 +9,16 @@ const showErrorMessage = () => {
   setTimeout(() => errorElement.remove(), REMOVE_MESSAGE_TIMEOUT);
 };
 
-export { isEscapeKey, showErrorMessage };
+function debounce (callback, timeoutDelay = 500) {
+  let timeoutId;
+
+  return (...rest) => {
+    console.log(timeoutId);
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+    console.log(timeoutId);
+
+  };
+}
+
+export { isEscapeKey, showErrorMessage, debounce };