Перламутровые пуговицы

js/form-upload.js

@@ -52,6 +52,7 @@ const formImgUploadOpen = () => {
   document.addEventListener('keydown', onDocumentKeydown);
 };
 
+
 //Закрытие формы
 const formImgUploadClose = () => {
   imgOverlay.classList.add('hidden');
@@ -60,17 +61,14 @@ const formImgUploadClose = () => {
   imgUploadCancel.removeEventListener('click', onCancelClick);
   document.removeEventListener('keydown', onDocumentKeydown);
 
-  imgUploadInput.value = '';
-  inputHashtags.value = '';
-  inputDescription.value = '';
-  previewImg.src = '';
   pristine.reset();
   imgUploadForm.reset();
   imgUploadSubmit.disabled = false;
   resetEffect();
   resetZoom();
 };
 
+
 //обработчик клика на zoom
 scaleControlSmaller.addEventListener('click', () => changeZoom(-1));
 scaleControlBigger.addEventListener('click', () => changeZoom());

js/insert-thumbnails.js

@@ -1,17 +1,31 @@
 import {createThumbnail} from './rendering-pictures.js';
 import {getData} from './api.js';
 import {showPopup} from './popup-error.js';
+import {openFilter} from './photo-filter.js';
 
 const picturesContainer = document.querySelector('.pictures');
 const fragment = document.createDocumentFragment();
 
+const clearThumbnails = () => {
+  const allPictures = picturesContainer.querySelectorAll('.picture');
+  allPictures.forEach((picture) => picture.remove());
+};
+
+
 const insertThumbnails = (pictures) => {
+  clearThumbnails();
   pictures.forEach((photo) => {
     fragment.append(createThumbnail(photo));
     picturesContainer.append(fragment);
   });
 };
 
 getData()
-  .then((pictures)=> insertThumbnails(pictures))
+  .then((pictures)=> {
+    insertThumbnails(pictures);
+    openFilter(pictures);
+  })
   .catch((err) => showPopup(err.message));
+
+
+export {insertThumbnails};

js/photo-filter.js

@@ -0,0 +1,51 @@
+import { insertThumbnails } from './insert-thumbnails';
+import { debounce, shuffleArray } from './utils';
+
+const RANDOM_PICTURES_COUNT = 10;
+let picturesFromServer = [];
+
+const imgFilters = document.querySelector('.img-filters');
+const imgFilterButtons = imgFilters.querySelectorAll('.img-filters__button');
+
+const Filters = {
+  default: (pictures) => pictures,
+  random: (pictures) => shuffleArray(pictures).slice(0, RANDOM_PICTURES_COUNT),
+  discussed: (pictures) => pictures.sort((A, B) => B.comments.length - A.comments.length)
+};
+
+const openFilter = (pictures) => {
+  picturesFromServer = pictures;
+  if (pictures) {
+    imgFilters.classList.remove('img-filters--inactive');
+  }
+};
+
+const setCurrentFilterButton = (currentFilterButton) => {
+  imgFilterButtons.forEach((button) => button.classList.remove('img-filters__button--active'));
+  currentFilterButton.classList.add('img-filters__button--active');
+};
+
+const filtersClick = (cb) => {
+  imgFilters.addEventListener('click', (evt) => {
+    if (evt.target.type === 'button') {
+      const currentFilter = evt.target.id.replace('filter-', '');
+
+      setCurrentFilterButton(evt.target);
+
+      cb(currentFilter);
+    }
+  });
+};
+
+const filterPictures = (filter, pictures) => {
+  let filteredPictures = pictures.slice();
+  filteredPictures = Filters[filter](filteredPictures);
+
+  insertThumbnails(filteredPictures);
+};
+
+filtersClick(
+  debounce((currentFilter) => filterPictures(currentFilter, picturesFromServer))
+);
+
+export { openFilter };

js/popup-error.js

@@ -1,3 +1,5 @@
+const DELAY_TIME = 5000;
+
 const popupErroreTemplate = document.querySelector('#data-error').content;
 
 const showPopup = (message) => {
@@ -8,7 +10,7 @@ const showPopup = (message) => {
 
   document.body.append(popupError);
 
-  setTimeout(removePopup, 5000);
+  setTimeout(removePopup, DELAY_TIME);
 };
 
 function removePopup(){

js/utils.js

@@ -1,4 +1,20 @@
 //Проверка на escape
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export {isEscapeKey};
+//Устранение дребезга
+const debounce = (callback, timeoutDelay = 500) => {
+  let timeoutId;
+
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+};
+
+//Перемешивает массив
+const shuffleArray = (array) => {
+  array.sort(() => 0.5 - Math.random());
+  return array;
+};
+
+export {isEscapeKey, debounce, shuffleArray};