diff --git a/js/form-upload.js b/js/form-upload.js index 2f7d3b3..b23bfaa 100644 --- a/js/form-upload.js +++ b/js/form-upload.js @@ -52,6 +52,7 @@ const formImgUploadOpen = () => { document.addEventListener('keydown', onDocumentKeydown); }; + //Закрытие формы const formImgUploadClose = () => { imgOverlay.classList.add('hidden'); @@ -60,10 +61,6 @@ 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; @@ -71,6 +68,7 @@ const formImgUploadClose = () => { resetZoom(); }; + //обработчик клика на zoom scaleControlSmaller.addEventListener('click', () => changeZoom(-1)); scaleControlBigger.addEventListener('click', () => changeZoom()); diff --git a/js/insert-thumbnails.js b/js/insert-thumbnails.js index 9334109..7863945 100644 --- a/js/insert-thumbnails.js +++ b/js/insert-thumbnails.js @@ -1,11 +1,19 @@ 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); @@ -13,5 +21,11 @@ const insertThumbnails = (pictures) => { }; getData() - .then((pictures)=> insertThumbnails(pictures)) + .then((pictures)=> { + insertThumbnails(pictures); + openFilter(pictures); + }) .catch((err) => showPopup(err.message)); + + +export {insertThumbnails}; diff --git a/js/photo-filter.js b/js/photo-filter.js new file mode 100644 index 0000000..48f4f07 --- /dev/null +++ b/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 }; diff --git a/js/popup-error.js b/js/popup-error.js index f3521ea..18891fa 100644 --- a/js/popup-error.js +++ b/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(){ diff --git a/js/utils.js b/js/utils.js index c302785..f3bea25 100644 --- a/js/utils.js +++ b/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};