Merge pull request #13 from Julyova/module12-task1

Author: keksobot

js/debounce.js

@@ -0,0 +1,12 @@
+const DEBOUNCE_DELAY = 500;
+
+const debounce = (callback, timeoutDelay = DEBOUNCE_DELAY) => {
+  let timeoutId;
+
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+};
+
+export { debounce };

js/filters.js

@@ -0,0 +1,64 @@
+import { renderPictures } from './pictures.js';
+import { debounce } from './debounce.js';
+
+const RANDOM_PICTURES_COUNT = 10;
+
+const filtersElement = document.querySelector('.img-filters');
+const filtersForm = document.querySelector('.img-filters__form');
+
+const FilterType = {
+  DEFAULT: 'filter-default',
+  RANDOM: 'filter-random',
+  DISCUSSED: 'filter-discussed',
+};
+
+let currentFilter = FilterType.DEFAULT;
+let pictures = [];
+
+const getRandomPictures = (data) => {
+  const shuffled = [...data].sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, RANDOM_PICTURES_COUNT);
+};
+
+const getDiscussedPictures = (data) =>
+  [...data].sort((a, b) => b.comments.length - a.comments.length);
+
+const filterPictures = () => {
+  switch (currentFilter) {
+    case FilterType.RANDOM:
+      return getRandomPictures(pictures);
+    case FilterType.DISCUSSED:
+      return getDiscussedPictures(pictures);
+    default:
+      return [...pictures];
+  }
+};
+
+const onFilterChange = debounce(() => {
+  renderPictures(filterPictures());
+});
+
+const onFiltersFormClick = (evt) => {
+  const target = evt.target;
+
+  if (!target.classList.contains('img-filters__button')) {
+    return;
+  }
+
+  if (target.id === currentFilter) {
+    return;
+  }
+
+  filtersForm.querySelector('.img-filters__button--active').classList.remove('img-filters__button--active');
+  target.classList.add('img-filters__button--active');
+  currentFilter = target.id;
+  onFilterChange();
+};
+
+const initFilters = (data) => {
+  pictures = data;
+  filtersElement.classList.remove('img-filters--inactive');
+  filtersForm.addEventListener('click', onFiltersFormClick);
+};
+
+export { initFilters };

js/main.js

@@ -5,10 +5,12 @@ import { initBigPictureHandlers } from './big-picture.js';
 import { initFormUpload } from './form-upload.js';
 import { getData } from './api.js';
 import { showDataError } from './messages.js';
+import { initFilters } from './filters.js';
 
 getData()
   .then((pictures) => {
     renderPictures(pictures);
+    initFilters(pictures);
   })
   .catch(() => {
     showDataError();

js/messages.js

@@ -4,28 +4,28 @@ const showSuccessMessage = () => {
   const successTemplate = document.querySelector('#success').content.querySelector('.success');
   const successElement = successTemplate.cloneNode(true);
 
-  const onSuccessButtonClick = () => {
+  const closeSuccessMessage = () => {
     successElement.remove();
-    document.removeEventListener('keydown', onDocumentKeydown);
-    document.removeEventListener('click', onDocumentClick);
+    document.removeEventListener('keydown', onSuccessKeydown);
+    document.removeEventListener('click', onSuccessClick);
   };
 
-  const onDocumentKeydown = (evt) => {
+  function onSuccessKeydown(evt) {
     if (evt.key === 'Escape') {
       evt.preventDefault();
-      onSuccessButtonClick();
+      closeSuccessMessage();
     }
-  };
+  }
 
-  const onDocumentClick = (evt) => {
+  function onSuccessClick(evt) {
     if (!evt.target.closest('.success__inner')) {
-      onSuccessButtonClick();
+      closeSuccessMessage();
     }
-  };
+  }
 
-  successElement.querySelector('.success__button').addEventListener('click', onSuccessButtonClick);
-  document.addEventListener('keydown', onDocumentKeydown);
-  document.addEventListener('click', onDocumentClick);
+  successElement.querySelector('.success__button').addEventListener('click', closeSuccessMessage);
+  document.addEventListener('keydown', onSuccessKeydown);
+  document.addEventListener('click', onSuccessClick);
 
   document.body.appendChild(successElement);
 };
@@ -34,29 +34,29 @@ const showErrorMessage = () => {
   const errorTemplate = document.querySelector('#error').content.querySelector('.error');
   const errorElement = errorTemplate.cloneNode(true);
 
-  const onErrorButtonClick = () => {
+  const closeErrorMessage = () => {
     errorElement.remove();
-    document.removeEventListener('keydown', onDocumentKeydown);
-    document.removeEventListener('click', onDocumentClick);
+    document.removeEventListener('keydown', onErrorKeydown);
+    document.removeEventListener('click', onErrorClick);
   };
 
-  const onDocumentKeydown = (evt) => {
+  function onErrorKeydown(evt) {
     if (evt.key === 'Escape') {
       evt.preventDefault();
       evt.stopPropagation();
-      onErrorButtonClick();
+      closeErrorMessage();
     }
-  };
+  }
 
-  const onDocumentClick = (evt) => {
+  function onErrorClick(evt) {
     if (!evt.target.closest('.error__inner')) {
-      onErrorButtonClick();
+      closeErrorMessage();
     }
-  };
+  }
 
-  errorElement.querySelector('.error__button').addEventListener('click', onErrorButtonClick);
-  document.addEventListener('keydown', onDocumentKeydown);
-  document.addEventListener('click', onDocumentClick);
+  errorElement.querySelector('.error__button').addEventListener('click', closeErrorMessage);
+  document.addEventListener('keydown', onErrorKeydown);
+  document.addEventListener('click', onErrorClick);
 
   document.body.appendChild(errorElement);
 };