diff --git a/js/filter.js b/js/filter.js index bd6d982..7c40f01 100644 --- a/js/filter.js +++ b/js/filter.js @@ -1,29 +1,36 @@ import { renderThumbnails } from './render-thumbnails'; import { debounce } from './util'; +const MAX_COUNT_PICTURE = 10; + const filterContainer = document.querySelector('.img-filters'); const filterDefault = 'filter-default'; const filterRandom = 'filter-random'; const filterDiscussed = 'filter-discussed'; const debounceRenderPicture = debounce(renderThumbnails, 500); -let currentFilter = filterDefault; -let pictures = []; -const generateFilter = () => { +const filterData = (newFilter, pictures) => { let picturesFilter = []; - if (currentFilter === filterDefault) { - picturesFilter = pictures; - } else if (currentFilter === filterRandom) { - picturesFilter = pictures.toSorted(() => Math.random() - 0.5).slice(0, 10); - } else if (currentFilter === filterDiscussed) { - picturesFilter = pictures.toSorted((a, b) => b.comments.length - a.comments.length); + switch (newFilter) { + case filterDefault: + picturesFilter = pictures; + break; + case filterRandom: + picturesFilter = pictures.toSorted(() => Math.random() > 0.5).slice(0, MAX_COUNT_PICTURE); + break; + case filterDiscussed: + picturesFilter = pictures.toSorted((a, b) => b.comments.length - a.comments.length); + break; + default: + throw new Error(`Unknown filter: ${newFilter}`); } - debounceRenderPicture(picturesFilter); + + return picturesFilter; }; -function onFilterClick (evt) { +const onFilterClick = (evt, picturesData) => { const activButton = document.querySelector('.img-filters__button--active'); const targetButton = evt.target; @@ -33,15 +40,15 @@ function onFilterClick (evt) { activButton.classList.remove('img-filters__button--active'); targetButton.classList.add('img-filters__button--active'); - currentFilter = targetButton.id; - generateFilter(); -} + const filteredData = filterData(targetButton.id, picturesData); + + debounceRenderPicture(filteredData); +}; const initFilter = (picturesData) => { filterContainer.classList.remove('img-filters--inactive'); - filterContainer.addEventListener('click', onFilterClick); - pictures = picturesData; + filterContainer.addEventListener('click', (evt) => onFilterClick(evt, picturesData)); }; export { initFilter }; diff --git a/js/form/image-form.js b/js/form/image-form.js index 2aab4b5..33eaf2b 100644 --- a/js/form/image-form.js +++ b/js/form/image-form.js @@ -35,8 +35,6 @@ function closeUploadModal () { resetEffect(); resetScale(); uploadForm.reset(); - fileChooser.reset(); - // При повторной попытке отправить неверный формата файла ошибка не появляется. Подскажи как реализовать. } const openUploadModal = () => { @@ -61,9 +59,11 @@ function onFileChooserChange () { uploadFormEffects.forEach((item) => { item.style.backgroundImage = `url(${URL.createObjectURL(file)})`; }); - }else { - generateErrorMessage(); + } else { + fileChooser.value = ''; + generateErrorMessage('неверный формат файла!'); return; + // получилось повторно показывать сообщение } openUploadModal(); diff --git a/js/messages.js b/js/messages.js index 9a2d6e8..fa162b1 100644 --- a/js/messages.js +++ b/js/messages.js @@ -3,7 +3,6 @@ import { isEscapeKey } from './util'; const MESSAGE_TIMEOUT = 5000; const errorLoadTemplate = document.querySelector('#data-error').content; -const errorMessage = document.querySelector('.data-error__title'); const successTemplate = document.querySelector('#success').content.querySelector('.success'); const messageErrorTemplate = document.querySelector('#error').content.querySelector('.error'); @@ -14,7 +13,7 @@ const generateErrorMessage = (message) => { const errorLoad = errorLoadTemplate.cloneNode(true); if (message) { - errorMessage.textContent = message; + errorLoad.querySelector('.data-error__title').textContent = message; } document.body.append(errorLoad);